From 5918d39091844cf1389a09453cee22e7faa5e7de Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Sat, 8 Feb 2025 19:59:45 +0900
Subject: [PATCH] Add more style to style.css

---
 index.html | 31 ++++++++++++++++++-------------
 style.css  | 48 +++++++++++++++++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 26 deletions(-)
diff --git a/index.html b/index.html
index d1b9565..4790ee6 100644
--- a/index.html
+++ b/index.html
@@ -8,17 +8,19 @@
 </head>
 <body>
     <header class="header">
+        <div class="header-wrap">
             <div class="logo">HeaderLogo</div>
             <div class="nav">
                 <ul>
-                    <li>One</li>
-                    <li>Two</li>
-                    <li>Three</li>
+                    <li><a href="#product">Product</a></li>
+                    <li><a href="#quote">Quote</a></li>
+                    <li><a href="#cta">CTA</a></li>
                 </ul>
             </div>
+        </div>
     </header>
-    <div class="hero">
-       
+    <div id="hero">
+        <div class="hero-wrap">
             <div>
                 <h1>This is awesome</h1>
                 <p>This is an awesome website that I am developing.</p>
@@ -27,9 +29,10 @@
             <div>
                 <img src="https://dev.toanphu.vn/wp-content/uploads/6-4-1000x667.jpg">
             </div>
+        </div>
     </div>
-    <div class="product">
-        <h3>This is Product List</h3>
+    <div id="product">
+        <h2>This is Product List</h2>
         <div class="product-loop">
             <div>Product 1</div>
             <div>Product 2</div>
@@ -37,12 +40,14 @@
             <div>Product 4</div>
         </div>
     </div>
-    <div class="quote">
-        <blockquote>When you can’t find someone to follow, you have to find a way to lead by example.
-            <cite>Roxane Gay</cite>
-        </blockquote>
+    <div id="quote">
+        <div class="quote-wrap">
+            <blockquote>When you can’t find someone to follow, you have to find a way to lead by example.
+                <cite>Roxane Gay</cite>
+            </blockquote>
+        </div>
     </div>
-    <div class="call-to-action">
+    <div id="cta">
         <div class="blue-box">
             <div class="left">
                 <h3>Call to Action. It's Time</h3>
@@ -53,6 +58,6 @@
             </div>
         </div>
     </div>
-    <footer class="footer">Footer</footer>
+    <footer class="footer">Copyright 2025. Made with love by Thuan Bui</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index cbf884a..9e4046c 100644
--- a/style.css
+++ b/style.css
@@ -57,12 +57,16 @@ body {
     font-family: Roboto;
     margin: 0
 }
-header {
-    background-color: var(--dark-background);
-    color: #F9FAF8;
+.header-wrap,
+.hero-wrap {
+    max-width: 1024px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+}
+header {
+    background-color: var(--dark-background);
+    color: #F9FAF8;
     padding: 20px 40px;
 }
 
@@ -76,7 +80,12 @@ header .nav ul {
     gap: 20px
 }
 
-.hero {
+header .nav ul a {
+    color: #e5e7eb;
+    font-size: 18px;
+    text-decoration: none;
+}
+#hero {
     background-color: var(--dark-background);
     color: #F9FAF8;
     display: flex;
@@ -85,11 +94,17 @@ header .nav ul {
     padding: 40px;
 }
 
-.hero h1 {
+#hero h1 {
     font-size: 48px;
     color: #F9FAF8;
     font-weight: 900;
 }
+
+#hero p {
+    color: #e5e7eb;
+    font-size: 18px;
+
+}
 .button {
     background-color: #3882F6;
     color: #FFF;
@@ -105,14 +120,17 @@ header .nav ul {
     border: 1px solid #FFF;
 }
 
-.hero div {
+#hero div {
     flex: 1;
 }
 
-.product {
-    padding: 40px;
+#product {
+    padding: 60px 0;
     text-align: center;
 }
+#product h2 {
+    margin-bottom: 30px;
+}
 
 .product-loop {
     display: flex;
@@ -120,14 +138,17 @@ header .nav ul {
 .product-loop div {
     flex: 1;
 }
-.quote {
+#quote {
     background: #e5e7eb;
-    padding: 40px;
     font-size: 36px;
     color: #1F2937;
     font-style: italic;
     font-weight: 300;
 }
+.quote-wrap {
+    max-width: 900px;
+    padding: 60px 40px;
+}
 
 cite {
     font-size: 18px;
@@ -136,11 +157,11 @@ cite {
     font-weight: 600;
 }
 
-.call-to-action {
+#cta {
     padding: 40px;
 }
 
-.call-to-action .blue-box {
+#cta .blue-box {
     background-color: #3882F6;
     padding: 20px;
     display: flex;
@@ -152,6 +173,7 @@ cite {
 footer {
     background-color: var(--dark-background);
     color: #F9FAF8;
-    padding: 10px 40px;
+    padding: 20px 40px;
     text-align: center;
+
 }
\ No newline at end of file
