Technigo · joheri1 · Aug 24, 2024 · Aug 24, 2024 · Aug 24, 2024 · Aug 25, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/Assets/Cow moooh.webp b/Assets/Cow moooh.webp
diff --git a/Assets/Farmer's news.png b/Assets/Farmer's news.png
diff --git a/Assets/FarmerJoe.webp b/Assets/FarmerJoe.webp
diff --git a/Assets/FarmerJoey.webp b/Assets/FarmerJoey.webp
diff --git a/Assets/Farmers news 2.png b/Assets/Farmers news 2.png
diff --git a/Assets/Farmers_news_transparent.png b/Assets/Farmers_news_transparent.png
diff --git a/Assets/Horsie.webp b/Assets/Horsie.webp
diff --git a/Assets/PIG.webp b/Assets/PIG.webp
diff --git a/Assets/Tractor.webp b/Assets/Tractor.webp
diff --git a/README.md b/README.md
@@ -1,12 +1,22 @@
 # News Site
 
-Replace this readme with your own information about your project. 
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The assignment is to create a news site containing aheader with the name of the site, a logo and a navbar. The site should have one big and several minor news section. On desktop-sized screens, there should be four minor news cards in a row, two in a row on tablets and on mobile, there should just be one card on each row. 
 
 ## 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?
+It was a bunch, but to mention two: 
+
+1. The tools 
+GitHub - I had a hard time saving my changes, and when I was finally done, I wasn't able to do a Pull Request. But, with tons of help from ChatGPT, I managed to make the Pull request, but appearently the README-file went gone, so I'm trying to write a new one. 
+
+2. Hamburger menu - 
+Tricky one to fix, so I needed a lot of help from Google and ChatGPT. 
+
+## How did you plan?
+I used pen and paper. Wrote all the frames within the website with different colors (Header, Body, Main/Big news section, Other content/Minor news, Footer, etc), and it worked pretty well until I got a bit stressed and mixed a lot of thing up - padding, margin, border here and there, grid or flex, when to use what. I also rewatch the videos a couple of times, which was good. 
+
+## If you had more time, what would be next?
+I would go through my code to see what unnecessary CSS code I added in my attempts to fix something broken. I also would rearrange it, it's a bit messy. And I would spend more time on the responsive parts, like the nav bar for tablet. 
 
 ## 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://main--farmersnews.netlify.app/
diff --git a/asset b/asset
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Welcome to Farmer's News</title>
+  <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+  <header>
+    <img src="Assets/Farmers_news_transparent.png" alt="Logo" style="width: 200px; height: auto;">
+  </header>
+  <!-- Hamburger menu for mobile...-->
+  <div class="hamburger-menu">
+    ☰ Home
+    <div class="menu-content">
+      <a href="#home">Home</a>
+      <a href="#Tools and Vehicles">Tools and Vehicles</a>
+      <a href="#Agriculture">Agriculture</a>
+      <a href="#Forestry">Forestry</a>
+      <a href="#Farm animals">Farm animals</a>
+      <a href="#Work environment">Work environment</a>
+      <a href="#contact">Contact</a>
+    </div>
+  </div>
+  <!-- Main menu other devices -->
+  <div class="topnav">
+    <a class="active" href="#home">Home</a>
+    <a href="#Tools and Vehicles">Tools and Vehicles</a>
+    <a href="#Agriculture">Agriculture</a>
+    <a href="#Forestry">Forestry</a>
+    <a href="#Farm animals">Farm animals</a>
+    <a href="#Work environment">Work environment</a>
+    <a href="#contact">Contact</a>
+  </div>
+  </header>
+  <main>
+    <section class="big-news">
+      <!-- The big news content -->
+      <img src="Assets/FarmerJoey.webp" alt="Award-Winning" />
+      <div class="big-news-content">
+        <h1>Award-Winning Farmer</h1>
+        <p>A local Hero Honored for Agricultural Excellence. In a special ceremony, an elderly female farmer was
+          recognized for her outstanding contributions to the community's agriculture. With years of dedication and
+          hard
+          work, she has become a beloved figure in the area. Her trophy, shining brightly in the sun, symbolizes not
+          just her success, but the heart and soul she has poured into her farm.</p>
+    </section>
+
+    <!-- Minor news section -->
+    <section class="minor-news-container">
+      <!-- Minor news items -->
+      <div class="minor-news">
+        <img src="Assets/PIG.webp" alt="Escape Artist: Pig" />
+        <div class="minor-news-content">
+          <h2>Escape Artist: Pig Breaks Free from Farm, Causes Havoc</h2>
+          <p>Early this morning, a mischievous pig made a daring escape...</p>
+          <button>Read more</button>
+        </div>
+      </div>
+
+      <div class="minor-news">
+        <img src="Assets/Cow moooh.webp" alt="Moo-dy Morning: Cow" />
+        <div class="minor-news-content">
+          <h2>Moo-dy Morning: Cow's Loud Mooing Wakes Up the Neighborhood</h2>
+          <p>Residents of a quiet village were in for a surprise when a cow...</p>
+          <button>Read more</button>
+        </div>
+      </div>
+
+      <div class="minor-news">
+        <img src="Assets/Horsie.webp" alt="Unlikely Friends: Horse and Dog" />
+        <div class="minor-news-content">
+          <h2>Unlikely Friends: Horse and Dog Form Heartwarming Bond</h2>
+          <p>In a heartwarming display of friendship, a horse and a small dog...</p>
+          <button>Read more</button>
+        </div>
+      </div>
+
+      <div class="minor-news">
+        <img src="Assets/Tractor.webp" alt="Farm Mishap: Tractor" />
+        <div class="minor-news-content">
+          <h2>Farm Mishap: Tractor Takes an Unexpected Detour into Ditch</h2>
+          <p>A routine day on the farm took a turn when a tractor veered off...</p>
+          <button>Read more</button>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script>
+    document.querySelector('.hamburger-menu').addEventListener('click', function () {
+      this.classList.toggle('active');
+    });
+  </script>
+</body>
+<footer>
+  <p>2024-08-23 - Johanna Eriksson </p>
+</footer>
+
+</html>
diff --git a/logo-search-grid-2x.png b/logo-search-grid-2x.png