Technigo · gabster94 · Aug 24, 2024 · Aug 24, 2024 · Aug 25, 2024 · Aug 25, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,23 @@
 # News Site
 
-Replace this readme with your own information about your project. 
+The assignment this week was to create a one pager New's site including a header, a main news article section, and a grid of news articles.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The goal was to work with the box system and use both Flexbox and CSS Grid.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I started by looking for inspiration online on other webpages and then sketching my own model on paper. The design part is very new to me and I struggled a lot to just create the picture I wanted.
+
+My next step was to name all the boxes in my boxing systen and then start writing it all down in the HTML file. After some trial and errors when CSS was implemented, I did some adjustments in the HTML file. Made the dividing clearer, added and removed some boxes and then most of it fell easily into place when adjusting the CSS to t he new changes.
+
+The planning was difficult since I didn't know what to expect from myself, not having any prioer experience nor practice with working on computers in general. Everything was new to me and I tried to take it step by step without being overwhelmed.
+
+Only tech I used was ChatGPT to create the Headlines and text for my news. Wish I knew how to implement AI more and in an efficient way. There was just not enough time this time to learn how.
+
+A strategy I used to understand the box system and to see what happened with the boxes when I started using grid and flexbox was to give each box and border a dirrefent colour. That way it as easier to see what was happening and what needed to be done to reach my desired result.
+
+I would like to spend less time on the designing part to focus more on the code, but it has been good for the sake of understanding the boxing system. But If I had more time I would proably spend more on the design to make it look good, make the colours match, look up more font styles etc.
 
 ## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+
+https://app.netlify.com/sites/spectacular-entremet-5466db/overview
diff --git a/code/assets/IMG_falljokull.jpg b/code/assets/IMG_falljokull.jpg
diff --git a/code/assets/IMG_female.guides.jpg b/code/assets/IMG_female.guides.jpg
diff --git a/code/assets/IMG_happy.group.jpg b/code/assets/IMG_happy.group.jpg
diff --git a/code/assets/IMG_keb.viaf.jpg b/code/assets/IMG_keb.viaf.jpg
diff --git a/code/assets/IMG_kilpis.jpg b/code/assets/IMG_kilpis.jpg
diff --git a/code/assets/IMG_logo.jpg b/code/assets/IMG_logo.jpg
diff --git a/code/assets/IMG_nuolja.jpg b/code/assets/IMG_nuolja.jpg
diff --git a/code/assets/IMG_ostsidan.jpg b/code/assets/IMG_ostsidan.jpg
diff --git a/code/assets/IMG_ostsidan2.jpg b/code/assets/IMG_ostsidan2.jpg
diff --git a/code/assets/IMG_patrol.jpg b/code/assets/IMG_patrol.jpg
diff --git a/code/assets/IMG_sar.jpg b/code/assets/IMG_sar.jpg
diff --git a/code/assets/IMG_skoter.jpg b/code/assets/IMG_skoter.jpg
diff --git a/code/index.html b/code/index.html
@@ -2,22 +2,120 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <!-- Change the title below -->
-    <title>News Site</title>
-    <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
+    <title>Women who send it</title>
+    <link rel="stylesheet" href="./style.css"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <header>
-      <!-- Some kind of logo and navbar -->
+    <div class="brand-logo">
+      <img class="brand-logo-image" src="./assets/IMG_logo.jpg" alt="brand-logo-image"> 
+      <h4>Women Who Sent It</h4>
+    </div>
+    <div class="main-header">
+      <img src="./assets/IMG_patrol.jpg" alt="picture of three female ski patrol doing avalanche control">   
+    </div>
+      <div class="nav-bar">
+        <div class="hamburger">
+          <div class="hamburger-layer"></div>
+          <div class="hamburger-layer"></div>
+          <div class="hamburger-layer"></div>
+        </div>
+        <nav>
+          <a href="#">NEWS</a>
+          <a href="#">WEATHER</a>
+          <a href="#">GUIDES</a>
+          <a href="#">CLIMB</a>
+          <a href="#">SKI</a>
+          <a href="#">COMMUNITY</a>
+          <script> document.write(new Date().toLocaleDateString());</script>
+        </nav>
+      </div>
     </header>
 
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
+  <div class="top-section">
+    <h2>LATEST NEWS<h2>
+  </div>
+
+<section class="latest-news-container">
+  <a href="#" class="latest-news-card">
+        <img class="card-image" src="./assets/IMG_female.guides.jpg" alt="picture of two female guides on a mountain" />
+        <div class="latest-news-card-content">
+          <h2>"Female Mountain Leaders Break Barriers in Outdoor Leadership"</h2>
+          <p>Female mountain leaders are redefining outdoor leadership, inspiring more women to pursue careers in mountaineering and adventure sports.</p>
+        </div>
+      </a>
+  <a href="#" class="latest-news-card">
+        <img class="card-image" src="./assets/IMG_ostsidan.jpg" alt="picture of two men on a chossy mountain" />
+        <div class="latest-news-card-content">
+          <h2>"First Ascent Achieved by Trio in Kebnekaise Range"</h2>
+          <p>
+            Two men and one woman successfully completed a pioneering first ascent in Sweden's Kebnekaise mountain range.
+          </p>
+        </div>
+      </a>
+  <a href="#" class="latest-news-card">
+        <img class="card-image" src="./assets/IMG_keb.viaf.jpg" alt="picture of cllient being guided on a mountain" />
+        <div class="latest-news-card-content">
+          <h2>"Melting Permafrost Increases Rockfall Risks in Mountainous Regions"</h2>
+          <p>
+            Melting permafrost is destabilizing mountain rock formations, leading to more frequent and dangerous rockfalls.
+          </p>
+        </div>
+      </a>
+  <a href="#" class="latest-news-card">
+        <img class="card-image" src="./assets/IMG_nuolja.jpg" alt="picture taken from a ski life of skiis and the foggy view" />
+        <div class="latest-news-card-content">
+          <h2>"Top Spots for Off-Piste Skiing above the Arctic Circle"</h2>
+          <p>
+            Discover the best off-piste skiing locations in Northern Sweden this season, featuring untouched powder and challenging terrain.
+          </p>
+        </div>
+      </a>
 
-    <section class="">
-      <!-- The other news  -->
-    </section>
-  </body>
+</section>
+
+  <div class="top-section">
+    <h2>ARTICLES<h2>
+  </div>
+
+<section class="articles-container">
+  <a href="#" class="article-card">
+    <img class="articles-card-image" src="./assets/IMG_skoter.jpg" alt="picture of rain and mountains">
+    <div class="articles-card-content">
+      <h2>"Breaking the Ice: Why More Women Are Needed in Avalanche Professions"</h2>
+      <p> COUNTRY 2024-07-19</p>
+    </div>
+  </a>
+  <a href="#" class="article-card">
+    <img class="articles-card-image" src="./assets/IMG_falljokull.jpg" alt="picture of rain and mountains">
+    <div class="articles-card-content">
+      <h2>"Iceland’s Vatnajökull Ice Cap, largest in Europe: An Icon in Peril"</h2>
+      <p> COUNTRY 2024-07-19</p>
+    </div>
+  </a>
+  <a href="#" class="article-card">
+    <img class="articles-card-image" src="./assets/IMG_happy.group.jpg" alt="picture of rain and mountains">
+    <div class="articles-card-content">
+      <h2>"Glacier Guides Share Tips for the Ultimate Ice Adventure"</h2>
+      <p> COUNTRY 2024-07-19</p>
+    </div>
+  </a>
+  <a href="#" class="article-card">
+    <img class="articles-card-image" src="./assets/IMG_kilpis.jpg" alt="picture of people on a winter hike">
+    <div class="articles-card-content">
+      <h2>"What You Need to Know to Survive -25°C Wilderness Conditions for 10 days"</h2>
+      <p> COUNTRY 2024-09-01</p>
+    </div>
+  </a>
+
+</section>
+<footer>
+  <div class="copyright">
+    <span>Created by Gabriella Iofe 🦥 </span>
+  </div>
+</footer>
+</body>
 </html>
+
+