Technigo · AnnaNdeAge · Mar 7, 2025 · Mar 7, 2025 · Mar 10, 2025
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
 # News Site
+A news site with a main article and a grid of article. Used both flex box and grid to layout the page. The page need to be responsive.
 
-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
+I drew a sketch of the news site on paper. Decided to use flex box for the header and a grid for the main article and the grid of small articles. Would have been better with grid for the whole page layout, if I had more time I would have changed to grid of the whole page. 
+
+If I would have more time I would have used some CSS animations.Include some links and buttons. 
 
-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?
 
 ## 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.
+Link to the deployed project:
+https://therainbowmagazine.netlify.app/
diff --git a/code/assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg b/code/assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg
diff --git a/code/assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg b/code/assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg
diff --git a/code/assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg b/code/assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg
diff --git a/code/assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg b/code/assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg
diff --git a/code/assets/icons8-rainbow-80.png b/code/assets/icons8-rainbow-80.png
diff --git a/code/assets/logo.svg b/code/assets/logo.svg
diff --git a/code/assets/simon-berger-twukN12EN7c-unsplash.jpg b/code/assets/simon-berger-twukN12EN7c-unsplash.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,107 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8" />
-    <!-- Change the title below -->
-    <title>News Site</title>
+    <!-- meta tag for responsiveness -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The Rainbow Magazine</title>
     <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
-  </head>
-  <body>
-    <header>
-      <!-- Some kind of logo and navbar -->
+    <!-- For importing social media icons to footer-->
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+</head>
+
+<body>
+    <nav>
+        <div class="logo">
+            <img src="assets/icons8-rainbow-80.png" alt="Rainbow logo image">
+            <div class="logo-text">
+                <p>The
+                    </br>Rainbow
+                    </br>Magazine</p>
+            </div>
+        </div>
+        <div class="hamburger">
+            <div class="line1"></div>
+            <div class="line2"></div>
+            <div class="line3"></div>
+        </div>
+        <ul class="nav-links">
+            <li><a href="#">News</a></li>
+            <li><a href="#">Archive</a></li>
+            <li><a href="#">Contact Us</a></li>
+            <li><button class="login-button" href="#">LogIn</button></li>
+        </ul>
+    </nav>
+    <header class="main-header">
+        <section class="hero-container">
+
+            <div class="hero-image"><img src="assets/simon-berger-twukN12EN7c-unsplash.jpg" alt="Rainbow over lake">
+            </div>
+
+            <div class="WelcomeArticle">
+                <h1>SOMEWHERE OVER THE RAINBOW </h1>
+                <h3> What is the key to a colorful rainbow?</h3>
+            </div>
+        </section>
     </header>
 
-    <section class="big-news">
-      <!-- The big news content -->
-    </section>
+    <main>
+        <section class="articles">
+            <div class="article" id="Article1">
+                <figure>
+                    <img src="assets/david-brooke-martin-t_ZdxJsE8iM-unsplash.jpg" alt="Colorful sky above mountains">
+                </figure>
+                <h2>THE MOST FAMILIAR RAINBOW</h2>
+                <p>The most familiar type rainbow is produced when sunlight strikes raindrops in front of a viewer at a
+                    precise angle (42 degrees). Rainbows can also be viewed around fog, sea spray, or waterfalls.
+                </p>
+            </div>
+
+            <div class="article" id="Article2">
+                <figure>
+                    <img src="assets/billy-huynh-v9bnfMCyKbg-unsplash.jpg" alt="Sky with clouds">
+                </figure>
+                <h2>THE RAINBOW DOESN'T EXIST</h2>
+                <p>A rainbow is an optical illusion—it does not actually exist in a specific spot in the sky. The
+                    appearance of a rainbow depends on where you're standing and where the sun (or other source of
+                    light) is shining.
+                </p>
+            </div>
+
+            <div class="article" id="Article3">
+                <figure>
+                    <img src="assets/austin-schmid-r7zjJ63kAPU-unsplash.jpg" alt="Rainbow over mountains">
+                </figure>
+                <h2>THE COLORS OF THE RAINBOW</h2>
+                <p>The colors on a primary rainbow are always in order of their wavelength, from longest to
+                    shortest: red, orange, yellow, green, blue, and violet.</p>
+            </div>
+
+            <div class="article" id="Article4">
+                <figure>
+                    <img src="assets/arwin-neil-baichoo-Lows8NVoXFA-unsplash.jpg" alt="Sky with clouds and rainbow">
+                </figure>
+                <h2>RAINBOWS NEAR AND FAR</h2>
+                <p>Some scientists think rainbows also exist on Titan, one of the moons of the planet Saturn. Titan has
+                    a wet surface and humid clouds. The sun is also visible from Titan, so it has all the ingredients
+                    for rainbows.</p>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <div class="footer-text">
+            <p>The Origin of the Rainbow</p>
+        </div>
+        <div class="footer-bar">
+            <ul>
+                <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
+                <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
+                <li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
+            </ul>
+        </div>
+    </footer>
+</body>
 
-    <section class="">
-      <!-- The other news  -->
-    </section>
-  </body>
-</html>
+</html>