Technigo · jempa182 · Aug 21, 2024 · Aug 25, 2024 · Aug 25, 2024 · Aug 25, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,12 +1,6 @@
 # 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 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?
+The assignment was to create a classic magazine or newspaper site. The site should contain a header with the name of the site, a logo and a navbar. This should also change depending on if you visit the site from a mobile, tablet or desktop. Further, the site should have a big news section and a grid of cards with other news. On desktop-sized screens, there should be four cards in a row, two in a row on tablets and on mobile, there should just be one card on each row.
 
 ## 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://universe2news.netlify.app
diff --git a/code/assets/background-image.jpg b/code/assets/background-image.jpg
diff --git a/code/assets/basketball-1920x1250.jpg b/code/assets/basketball-1920x1250.jpg
diff --git a/code/assets/bathroom-skincare-3x4.jpg b/code/assets/bathroom-skincare-3x4.jpg
diff --git a/code/assets/cafe-girl.jpg b/code/assets/cafe-girl.jpg
diff --git a/code/assets/concert-1.jpg b/code/assets/concert-1.jpg
diff --git a/code/assets/concert-image-wide.jpg b/code/assets/concert-image-wide.jpg
diff --git a/code/assets/couple-fashion.jpg b/code/assets/couple-fashion.jpg
diff --git a/code/assets/dog-reading.jpg b/code/assets/dog-reading.jpg
diff --git a/code/assets/flower-on-table.jpg b/code/assets/flower-on-table.jpg
diff --git a/code/assets/glass-on-table.jpg b/code/assets/glass-on-table.jpg
diff --git a/code/assets/hamburger-icon.png b/code/assets/hamburger-icon.png
diff --git a/code/assets/image-wide.jpg b/code/assets/image-wide.jpg
diff --git a/code/assets/interior-room.jpg b/code/assets/interior-room.jpg
diff --git a/code/assets/logo-3.png b/code/assets/logo-3.png
diff --git a/code/assets/logo-test2.png b/code/assets/logo-test2.png
diff --git a/code/assets/logo-universe.png b/code/assets/logo-universe.png
diff --git a/code/assets/logo-universe.svg b/code/assets/logo-universe.svg
diff --git a/code/assets/pool-hang.jpg b/code/assets/pool-hang.jpg
diff --git a/code/assets/shoes-on-chair-1920x1250.jpg b/code/assets/shoes-on-chair-1920x1250.jpg
diff --git a/code/assets/skincare-pink.jpg b/code/assets/skincare-pink.jpg
diff --git a/code/assets/skincare-yellow.jpg b/code/assets/skincare-yellow.jpg
diff --git a/code/assets/sunglasses.jpg b/code/assets/sunglasses.jpg
diff --git a/code/assets/test-image-16x9.jpg b/code/assets/test-image-16x9.jpg
diff --git a/code/assets/test-image-1x1.jpg b/code/assets/test-image-1x1.jpg
diff --git a/code/assets/test-image-3x4.jpg b/code/assets/test-image-3x4.jpg
diff --git a/code/assets/test-image-4x3.jpg b/code/assets/test-image-4x3.jpg
diff --git a/code/assets/test-image.jpg b/code/assets/test-image.jpg
diff --git a/code/index.html b/code/index.html
@@ -3,21 +3,184 @@
   <head>
     <meta charset="utf-8" />
     <!-- Change the title below -->
-    <title>News Site</title>
+    <title>Universe2 News</title>
     <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+
   </head>
   <body>
+
+<section class="pink-header">
+  <div class ="header-content">
     <header>
-      <!-- Some kind of logo and navbar -->
-    </header>
+      <div class="logo">
+          <img src="./assets/logo-universe.png" alt="Logo">
+      </div>
+      <div class="mobile-menu-icon">
+        <img src="./assets/hamburger-icon.png" alt="Menu">
+    </div>
+      <nav>
+          <ul class="nav-links">
+              <li><a href="./index.html">LATEST</a></li>
+              <li><a href="#">LIFESTYLE</a></li>
+              <li><a href="#">BEAUTY</a></li>
+              <li><a href="#">NIGHTLIFE</a></li>
+          </ul>
+      </nav>
+  </header>
+  </div>
+</section>
+
+
+  <!-- The big news content -->
+
+
+<section class="second">
+  <div class="big-news-content">
+    <a href="https://www.google.com" class="big-news-content-card1">
+      <img src="./assets/basketball-1920x1250.jpg" alt="Image4x3">
+      <div class="text-content">
+        <p class="category-title-small">LIFESTYLE</p>
+        <h2>THE LIFE-CHANGING BENEFITS OF LEARNING A NEW SKILL LATER IN LIFE: BOOST YOUR CONFIDENCE AND BRAIN HEALTH</h2>
+      </div>
+    </a>
+
+    <a href="https://www.google.com" class = "big-news-content-card2">
+    <img src="./assets/bathroom-skincare-3x4.jpg" alt="Image1x1">
+    <div class="text-content">
+      <p class="category-title-small">BEAUTY</p>
+      <h3>SKINCARE MYTHS DEBUNKED: DISCOVER WHAT TRULY WORKS AND WHAT TO AVOID</h3>
+    </div>  
+  </a>
+
+  <a href="https://www.google.com" class="big-news-content-card3">
+    <img src="./assets/skincare-yellow.jpg" alt="Image1x1x">
+    <div class="text-content">
+      <p class="category-title-small">BEAUTY</p>
+      <h3>UNLOCK THE POWER OF HYLAMIDE: A COMPLETE GUIDE TO YOUR NEW SKIN ROUTINE</h3>
+    </div>
+  </a>
+
+  </div>
+  </section>
+
+
+  <!-- The other news  -->
+  <section class="third">
+    <div class="latest-news-content">
+
+      <a href="https://www.google.com" class="card">
+        <div class="text-content">
+          <p class="category-title-small">LIFESTYLE</p>
+          <h3>SOAK UP THE SUN: YOUR PERFECT SUMMER VACATION GUIDE TO RELAXING BY THE POOL</h3>
+        </div>
+        <img src="./assets/pool-hang.jpg" alt="Image4x3">
+      </a>
+
+      <a href="https://www.google.com" class="card">
+        <div class="text-content">
+          <p class="category-title-small">LIFESTYLE</p>
+          <h3>VINTAGE FASHION: A GUIDE ON HOW TO THRIFT LIKE A PRO</h3>
+        </div>
+        <img src="./assets/couple-fashion.jpg" alt="Image4x3">
+      </a>
+
+      <a href="https://www.google.com" class="card">
+        <div class="text-content">
+          <p class="category-title-small">BEAUTY</p>
+          <h3>HOW TO NOURISH, HYDRATE, AND PROTECT YOUR SKIN FROM HEAD TO TOE</h3>
+        </div>
+        <img src="./assets/skincare-pink.jpg" alt="Image4x3">
+      </a>
+
+      <a href="https://www.google.com" class="card">
+        <div class="text-content">
+          <p class="category-title-small">LIFESTYLE</p>
+          <h3>WEEKEND GETAWAYS NEAR YOU: UNCOVER HIDDEN SPOTS AND COZY ACCOMMODATIONS</h3>
+        </div>
+        <img src="./assets/interior-room.jpg" alt="Image4x3">
+      </a>
+    </div>
+  </section>
+
+<!-- Collage news  -->
+<section class="fourth">
+  <div class="collage-news-content">
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">LIFESTYLE</p>
+        <h3>THE PERFECT NIGHT IN: HOW TO HOST A FUN AND COZY GATHERING WITH FRIENDS AND DRINKS</h3>
+      </div>
+      <img src="./assets/glass-on-table.jpg" alt="Image4x3">
+    </a>
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">NIGHTLIFE</p>
+        <h3>10 UNFORGETTABLE NIGHT OUTS</h3>
+      </div>
+      <img src="./assets/concert-1.jpg" alt="Image4x3">
+    </a>
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">BEAUTY</p>
+        <h3>WILD AND WHIMSICAL: EXPLORE THE CRAZIEST HAIR TRENDS OF ALL TIME</h3>
+      </div>
+      <img src="./assets/sunglasses.jpg" alt="Image4x3">
+    </a>
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">LIFESTYLE</p>
+        <h3>BEST SPOTS FOR LUNCHES THAT NEVER END</h3>
+      </div>
+      <img src="./assets/flower-on-table.jpg" alt="Image4x3">
+    </a>
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">LIFESTYLE</p>
+        <h3>ENJOY SUNSHINE AND FRESH AIR AT THESE CHARMING SPOTS</h3>
+      </div>
+      <img src="./assets/cafe-girl.jpg" alt="Image4x3">
+    </a>
+
+    <a href="https://www.google.com" class="card">
+      <div class="text-content">
+        <p class="category-title-small">LIFESTYLE</p>
+        <h3>THE JOY OF READING: PRACTICAL TIPS ON HOW TO CARVE OUT TIME FOR BOOKS</h3>
+      </div>
+      <img src="./assets/dog-reading.jpg" alt="Image4x3">
+    </a>
+
+  </div>
+</section>
+
+<section class="image-wide">
+  <a href="https://www.google.com" class="image-wide-content"> 
+    <h2>10 UNFORGETTABLE <br>NIGHT OUTS</h2>
+    <p class="category-title-small">NIGHTLIFE</p>
+  </a>
+</section>
+
+
+<footer>
+  <section class="footer-section">
+    <div class="footer-content">
+      <h2>GET THE LATEST DAILY NEWSLETTER</h2>
+      <a href="https://www.google.com/">
+        <button>Subscribe</button>
+      </a>
+      <br>
+      <p> Website by Jenny Andersén ©</p>
+    </div>
+  </section>
+</footer>
+
 
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
 
-    <section class="">
-      <!-- The other news  -->
-    </section>
   </body>
 </html>