Technigo · xingyin2024 · Aug 23, 2024 · Aug 25, 2024 · Aug 25, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,37 @@
 # News Site
 
-Replace this readme with your own information about your project. 
+Week 2 | Project assignment
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This is a news site about Architecture design and image which is built by Xing Yin and updated 20240825.
+
+    The task is 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.
+
+# Requirements
+    Follow the instructions in the GitHub repository.
+
+    Style your page.
+    Use both CSS Grid and Flexbox to layout the page.
+    Create a responsive design with the following views: Desktop 4 columns, tablet 2 columns, mobile 1 column (it should look good on devices from 320px width up to 1600px).
+    The site should have a header, a main news article, and a grid of news articles.
+    Deploy your page to Netlify and add it to the Readme file of the repository
 
 ## 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?
+Describe how you approached to problem, and what tools and techniques you used to solve it. 
+    HTML & CSS
+    Structure: 
+    Class: <container>--><grid>--><item>--><cell> with text and a href
+    Try to imbeded grid in 
+
+How did you plan? 
+    I learn from others such as the html structure from https://optimistic-bohr-c8ad3d.netlify.app/ and css style sheet from https://optimistic-bohr-c8ad3d.netlify.app/ as well as the website layout from https://architizer.com/
+
+What technologies did you use? 
+    CSS GRID & FLEXBOX
+
+If you had more time, what would be next?
+    Add some videos or scrollbars, add some real links, make a functional search bar, 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.
diff --git a/code/assets/facebook-icon.png b/code/assets/facebook-icon.png
diff --git a/code/assets/github-icon.png b/code/assets/github-icon.png
diff --git a/code/assets/instagram-icon.png b/code/assets/instagram-icon.png
diff --git a/code/assets/logo.png b/code/assets/logo.png
diff --git a/code/assets/logo.svg b/code/assets/logo.svg
diff --git a/code/assets/main-news.jpg b/code/assets/main-news.jpg
diff --git a/code/assets/news1.jpg b/code/assets/news1.jpg
diff --git a/code/assets/news10.jpg b/code/assets/news10.jpg
diff --git a/code/assets/news11.jpg b/code/assets/news11.jpg
diff --git a/code/assets/news12.jpg b/code/assets/news12.jpg
diff --git a/code/assets/news2.jpg b/code/assets/news2.jpg
diff --git a/code/assets/news3.jpg b/code/assets/news3.jpg
diff --git a/code/assets/news4.jpg b/code/assets/news4.jpg
diff --git a/code/assets/news5.jpg b/code/assets/news5.jpg
diff --git a/code/assets/news6.jpg b/code/assets/news6.jpg
diff --git a/code/assets/news7.jpg b/code/assets/news7.jpg
diff --git a/code/assets/news8.jpg b/code/assets/news8.jpg
diff --git a/code/assets/news9.jpg b/code/assets/news9.jpg
diff --git a/code/assets/search-icon.png b/code/assets/search-icon.png
diff --git a/code/assets/twitter-icon.png b/code/assets/twitter-icon.png
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,176 @@
 <!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 -->
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <!-- Change the title below -->
+  <title>XingS News site | All about Architecture Design</title>
+  <link rel="stylesheet" href="./style.css" />
+  <!-- Don't forget the meta tag for responsiveness -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+
+  <!-- Header spans full width -->
+  <header class="homepage">
+    <div class="logo">
+      <a href="#homepage" id="logo"><img src="assets/logo.png" alt="XingS Logo"></a>
+      <!--how to add a link to an image: https://stackoverflow.com/questions/14730484/add-a-link-to-an-image-in-a-css-style-sheet-->
+    </div>
+    <nav>
+      <ul class="nav-links">
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Products</a></li>
+        <li><a href="#">Awards</a></li>
+        <li><a href="#">Jobs</a></li>
+        <li><a href="#">About</a></li>
+      </ul>
+      <div class="search-bar">
+        <a href="#" class="search-icon"><img src="assets/search-icon.png" alt="Search"></a>
+        <input type="text" placeholder="Search...">
+      </div>
+      <div class="hamburger-menu" id="hamburger-menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </nav>
+  </header>
+
+  <!--Main spans maxwidth 1280px-->
+  <main class="container">
+    <section class="main-news">
+      <article>
+        <a href="https://www.pexels.com/search/architectural%20design/">
+          <img src="assets/main-news.jpg" alt="Main News Image">
+          <h2>The Rise of Sustainable Architecture</h2>
+        </a>
+        <p class="summary-text"><i>How architects are integrating eco-friendly materials and energy-efficient designs to
+            create
+            buildings that are both <b>beautiful</b> and <b>sustainable</b>.</i> </p>
+        <small class="small-text"><a href="#practice">Practice</a> • <a href="#tools">Tools</a></small>
+
+      </article>
     </section>
 
-    <section class="">
-      <!-- The other news  -->
+    <section class="news-grid">
+      <article class="news-card">
+        <a href="#"><img src="assets/news1.jpg" alt="News Image 1">
+          <h3>Bridging the Gap: Iconic Modern Bridges Around the World</h3>
+        </a>
+        <small class="small-text"><a href="#practice">Practice</a> • <a href="#tools">Tools</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news2.jpg" alt="News Image 2">
+          <h3>Revolutionizing Urban Spaces with Vertical Gardens</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news3.jpg" alt="News Image 3">
+          <h3>Biophilic Design: Connecting People with Nature</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news4.jpg" alt="News Image 4">
+          <h3>The Beauty of Brutalism: Revisiting a Controversial Style</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news5.jpg" alt="News Image 5">
+          <h3>Cultural Heritage Meets Modern Design in New Museums</h3>
+        </a>
+        <small class="small-text"><a href="#practice">Practice</a> • <a href="#tools">Tools</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news6.jpg" alt="News Image 6">
+          <h3>Minimalist Masterpieces: Less is More in Contemporary Design</h3>
+        </a>
+        <small class="small-text"><a href="#practice">Practice</a> • <a href="#tools">Tools</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news7.jpg" alt="News Image 7">
+          <h3>Reviving the Past: The Trend of Adaptive Reuse in Architecture</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news8.jpg" alt="News Image 8">
+          <h3>Iconic Skyscrapers That Define Modern Skylines</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news9.jpg" alt="News Image 9">
+          <h3>Sculpting Spaces: The Art of Curved Architecture</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news10.jpg" alt="News Image 10">
+          <h3>The Role of Architecture in Disaster Resilience</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news11.jpg" alt="News Image 11">
+          <h3>The Impact of 3D Printing on Architectural Design</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <article class="news-card">
+        <a href="#"><img src="assets/news12.jpg" alt="News Image 12">
+          <h3>Smart Homes: The Future of Residential Architecture</h3>
+        </a>
+        <small class="small-text"><a href="#innovation">Innovation</a> • <a href="#urban">Urban</a></small>
+      </article>
+      <!-- Add more news cards if needed -->
     </section>
-  </body>
-</html>
+    <!--Add more section with different function maybe-->
+    <section class="subscribe-section">
+      <h2>Subscribe to Our Newsletter</h2>
+      <p>Get the latest news and updates directly in your inbox.</p>
+      <form class="subscribe-form">
+        <input type="email" placeholder="Enter your email" required>
+        <button type="submit">Subscribe</button>
+      </form>
+    </section>
+  </main>
+
+  <!-- Footer spans full width -->
+  <footer>
+    <div class="footer-content">
+      <div class="logo">
+        <a href="#" id="logo"><img src="assets/logo.png" alt="XingS Logo"></a>
+      </div>
+      <nav>
+        <ul class="footer-links">
+          <li><a href="#">Privacy Policy</a></li>
+          <li><a href="#">Terms of Service</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">Sitemap</a></li>
+        </ul>
+      </nav>
+      <div class="social-media">
+        <a href="#"><img src="assets/facebook-icon.png" alt="Facebook"></a>
+        <a href="#"><img src="assets/twitter-icon.png" alt="Twitter"></a>
+        <a href="#"><img src="assets/instagram-icon.png" alt="Instagram"></a>
+        <a href="#"><img src="assets/github-icon.png" alt="GitHub"></a>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy; 2024 XingS Architecture. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Link to the JavaScript file -->
+  <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,5 @@
+<script>
+document.getElementById('hamburger-menu').addEventListener('click', function() {
+    document.querySelector('.nav-links').classList.toggle('active');
+});
+</script>