Làm phần Guides #1

sondnpt00343 · Nov 29, 2022 · f845ca9 · f845ca9
1 parent 0b27f89
commit f845ca9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -157,3 +157,41 @@ a {
     justify-content: space-between;
     margin-top: 96px;
 }
+
+/* ======== Guides ======== */
+.guides {
+    margin-top: 200px;
+}
+
+.guides .sub-title {
+    position: relative;
+    font-weight: 600;
+    font-size: 3.5rem;
+    line-height: 1;
+    text-align: center;
+    color: #000339;
+}
+
+.guides .sub-title::before {
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    content: "";
+    display: inline-block;
+    width: 41px;
+    height: 4px;
+    background: #000339;
+    border-radius: 12px;
+}
+
+.guides .desc {
+    width: 459px;
+    max-width: 100%;
+    margin: 20px auto 0;
+    font-weight: 400;
+    font-size: 1.6rem;
+    line-height: 1.88;
+    text-align: center;
+    color: #5a6473;
+}
diff --git a/index.html b/index.html
@@ -90,6 +90,17 @@ <h1 class="title">
                     </div>
                 </div>
             </div>
+
+            <!-- Guides -->
+            <div class="guides">
+                <div class="content">
+                    <h2 class="sub-title">How its works?</h2>
+                    <p class="desc">
+                        Everything you need to know when you're looking to buy,
+                        rent, or sell - all in one place.
+                    </p>
+                </div>
+            </div>
         </main>
     </body>
 </html>