Technigo · EmelieNyberg · Aug 21, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 23, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,26 @@
 # 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.
+In this assignment, I was asked to create a news website with a theme of my choice. I chose to make a news site for parents about babies.
 
 ## 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?
+How I Approached the Problem:
+
+To solve the problem, I started by carefully analyzing the requirements and breaking them down into smaller tasks. I created a simple plan on paper that outlined each step I needed to take, from setting up the basic structure to integrating key features.
+
+Tools and Techniques I Used:
+
+I used HTML and CSS to develop the website. My approach involved using both Grid and Flexbox in CSS to ensure that the site was both user-friendly and responsive. I also used Media Queries and Keyframes to enhance functionality and experiment with animations.
+
+Planning Process:
+
+I began by sketching the layout and features of the site on paper. Once the structure was clear, I moved on to designing the look and planning how to structure the code, with a focus on core functionality first. By continuously testing in VS Code and checking the results in the browser, I was able to improve functionality and refine the design.
+
+What I Would Do Next If I Had More Time:
+
+With more time, I would focus on enhancing the user experience by adding more interactive elements and further refining the design. I would explore the possibility of adding additional features such as slideshows, videos, and more clickable elements. I believe these additions would increase the value of the site.
 
 ## 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://babies-focusedonparents.netlify.app/code/
+
diff --git a/code/assets/Final-logo.png b/code/assets/Final-logo.png
diff --git a/code/assets/babyfood.webp b/code/assets/babyfood.webp
diff --git a/code/assets/babyroom.png b/code/assets/babyroom.png
diff --git a/code/assets/eating.webp b/code/assets/eating.webp
diff --git a/code/assets/icecream.webp b/code/assets/icecream.webp
diff --git a/code/assets/logo.svg b/code/assets/logo.svg
diff --git a/code/assets/nature.webp b/code/assets/nature.webp
diff --git a/code/assets/play.webp b/code/assets/play.webp
diff --git a/code/assets/sleeping.webp b/code/assets/sleeping.webp
diff --git a/code/assets/stroller.webp b/code/assets/stroller.webp
diff --git a/code/assets/toys.webp b/code/assets/toys.webp
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,121 @@
 <!DOCTYPE html>
 <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 -->
-  </head>
-  <body>
-    <header>
-      <!-- Some kind of logo and navbar -->
-    </header>
-
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
-
-    <section class="">
-      <!-- The other news  -->
-    </section>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Change the title below CHECK -->
+  <title>Babies - Focused on parents</title>
+  <link rel="stylesheet" href="./style.css" />
+  <!-- dont forget the meta tag for responsiveness CHECK -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+
+</head>
+
+<body>
+  <header>
+    <!-- Some kind of logo and navbar -->
+    <img class="logo-picture" src="assets/Final-logo.png" alt="babies-logo">
+
+    <ul>
+      <div class="hamburger-menu">
+        <i class="fa-solid fa-bars"></i>
+      </div>
+      <a class="header-link link-1" href="https://www.google.se/">
+        HOME
+      </a>
+      <a class="header-link link-2" href="https://www.google.se/">
+        CULTURE
+      </a>
+      <a class="header-link link-3" href="https://www.google.se/">
+        LIFESTYLE
+      </a>
+      <a class="header-link link-4" href="https://www.google.se/">
+        SIGN UP!
+      </a>
+    </ul>
+
+  </header>
+
+  <section class="big-news picture">
+    <!-- The big news content -->
+
+    <img class="babyroom-picture" src="assets/babyroom.png" alt="Babyroom">
+
+  </section>
+
+
+  <section class="big-news content">
+    <h1>Baby news</h1>
+    <p>The Adorable New Baby Trend Everyone’s Talking About! 🍼👶 Parents are buzzing over this sweet, cozy product
+      designed to make life with a little one even more delightful. It’s the must-have for every stylish baby!</p>
+    <a href="https://www.google.com">
+      <button>View full article</button></a>
+
+  </section>
+
+  <a href="https://google.com" class="small-news 1">
+    <img src="assets/play.webp" alt="Baby play">
+    <h3>Why playtime is important for infants</h3>
+    <p>Studies show that babies need to play to feel good, see the rest of the study.</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 2">
+    <img src="assets/sleeping.webp" alt="Baby sleeping">
+    <h3>Is your child getting enough sleep?</h3>
+    <p>Three signs that your child needs more sleep.</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 3">
+    <img src="assets/stroller.webp" alt="Baby stroller">
+    <h3>Best strollers in 2024</h3>
+    <p>And which strollers you absolutely should not buy.</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 4">
+    <img src="assets/eating.webp" alt="Baby eating">
+    <h3>The new food hack</h3>
+    <p>The no1 fork everyone is talking about. But is it worth trying it?</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 5">
+    <img src="assets/babyfood.webp" alt="Baby food">
+    <h3>Make a nutritious meal for your baby</h3>
+    <p>5 recipies with nutritious meals for your little one.</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 6">
+    <img src="assets/icecream.webp" alt="Baby eating icecream">
+    <h3>Ice cream, good or bad?</h3>
+    <p>When is the right time to start introducing ice cream to infants? And is it really that bad?</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 7">
+    <img src="assets/toys.webp" alt="Toys">
+    <h3>"Toys ar getting better and better"</h3>
+    <p>We had a roundtour in a childrens toys factory!</p>
+
+  </a>
+
+  <a href="https://google.com" class="small-news 8">
+    <img src="assets/nature.webp" alt="Baby in nature">
+    <h3>Nature is healing</h3>
+    <p>Discover why your infant should be out two hours a day in the nature.</p>
+
+  </a>
+
+
+  <footer>
+    <h4>Created by Emelie Nyberg Kedert</h4>
+    <h4><i class="fa-brands fa-github"></i> EmelieNyberg</h4>
+  </footer>
+
+
+</body>
+
+</html>