diff --git a/index.html b/index.html
index 7600c39..3d99a40 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
 </head>
 <body>
     <header class="header">
-        <div class="content-wrap">
             <div class="logo">HeaderLogo</div>
             <div class="nav">
                 <ul>
@@ -17,21 +16,38 @@
                     <li>Three</li>
                 </ul>
             </div>
-        </div>
     </header>
     <div class="hero">
-        <div class="content-wrap">
+       
             <div>
                 <h1>This is awesome</h1>
                 <p>This is an awesome website that I am developing.</p>
+                <a href="#">Sign Up</a>
             </div>
             <div>
                 <img src="https://dev.toanphu.vn/wp-content/uploads/6-4-1000x667.jpg">
             </div>
+    </div>
+    <div class="product">
+        <h3>This is Product List</h3>
+        <div class="product-loop">
+            <div>Product 1</div>
+            <div>Product 2</div>
+            <div>Product 3</div>
+            <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>
+    <div class="call-to-action">
+        <div class="bule-box">
+            <h3>Call to Action</h3>
+            <button><a href="#">Click Here</a></button>
         </div>
     </div>
-    <div class="section1">Section 1</div>
-    <div class="section2">Section 2</div>
     <footer class="footer">Footer</footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 469a4e9..cbf884a 100644
--- a/style.css
+++ b/style.css
@@ -1,21 +1,69 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+  
+  /* 2. Remove default margin */
+  * {
+    margin: 0;
+  }
+  
+  body {
+    /* 3. Add accessible line-height */
+    line-height: 1.5;
+    /* 4. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+  }
+  
+  /* 5. Improve media defaults */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+  
+  /* 6. Inherit fonts for form controls */
+  input, button, textarea, select {
+    font: inherit;
+  }
+  
+  /* 7. Avoid text overflows */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  
+  /* 8. Improve line wrapping */
+  p {
+    text-wrap: pretty;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+  }
+  
+  /*
+    9. Create a root stacking context
+  */
+  #root, #__next {
+    isolation: isolate;
+  }
+
+
+
 :root {
     --dark-background: #1F2937;
 }
 body {
     font-family: Roboto;
+    margin: 0
 }
 header {
     background-color: var(--dark-background);
     color: #F9FAF8;
-    padding: 10px 40px;
-}
-.content-wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 80%;
-    margin: 0 auto;
+    padding: 20px 40px;
 }
 
 header .logo {
@@ -31,10 +79,79 @@ header .nav ul {
 .hero {
     background-color: var(--dark-background);
     color: #F9FAF8;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40px;
+}
+
+.hero h1 {
+    font-size: 48px;
+    color: #F9FAF8;
+    font-weight: 900;
+}
+.button {
+    background-color: #3882F6;
+    color: #FFF;
+    text-decoration: none;
+    padding: 5px 20px;
+    border-radius: 10px;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.button.alt {
+    background-color: transparent;
+    border: 1px solid #FFF;
+}
+
+.hero div {
+    flex: 1;
+}
+
+.product {
+    padding: 40px;
+    text-align: center;
+}
+
+.product-loop {
+    display: flex;
+}
+.product-loop div {
+    flex: 1;
+}
+.quote {
+    background: #e5e7eb;
+    padding: 40px;
+    font-size: 36px;
+    color: #1F2937;
+    font-style: italic;
+    font-weight: 300;
+}
+
+cite {
+    font-size: 18px;
+    display: block;
+    text-align: right;
+    font-weight: 600;
+}
+
+.call-to-action {
+    padding: 40px;
+}
+
+.call-to-action .blue-box {
+    background-color: #3882F6;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #FFF
 }
 
 footer {
     background-color: var(--dark-background);
     color: #F9FAF8;
     padding: 10px 40px;
+    text-align: center;
 }
\ No newline at end of file
