hero section

ropdias · Jul 8, 2024 · 3d493e7 · 3d493e7
1 parent 4cdbb44
commit 3d493e7
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 0 deletions.
diff --git a/src/assets/bg-hero-desktop.svg b/src/assets/bg-hero-desktop.svg
diff --git a/src/assets/music-bars.svg b/src/assets/music-bars.svg
diff --git a/src/index.html b/src/index.html
@@ -28,5 +28,17 @@
         </nav>
       </div>
     </header>
+    <section id="hero">
+      <div class="container py-xl">
+        <img src="assets/music-bars.svg" alt="" />
+        <h1>Quem canta seus males espanta</h1>
+        <p>Cantar nunca foi tão fácil</p>
+
+        <div class="buttons flex items-center gap-1">
+          <a href="#pricing" aria-label="Ver planos" class="btn btn-md"></a>
+          <a href="#downloads" class="btn btn-md">Baixar agora</a>
+        </div>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/src/styles/hero.css b/src/styles/hero.css
@@ -0,0 +1,47 @@
+#hero {
+  text-align: center;
+
+  & img[src*='music'] {
+    width: 12.875rem;
+  }
+
+  & h1 {
+    margin-top: 1rem;
+  }
+
+  & p {
+    font: var(--fw-md) var(--fs-lg) / 1.4 var(--ff-sans);
+    color: var(--text-color-secondary);
+    margin-top: 0.5rem;
+  }
+
+  & .buttons {
+    justify-content: center;
+    margin-top: 2rem;
+  }
+}
+
+@media (width >= 80em) {
+  #hero {
+    background: url(../assets/bg-hero-desktop.svg) no-repeat bottom
+      center/contain;
+    padding-bottom: 15rem;
+
+    & img[src*='music'] {
+      width: 25.75rem;
+    }
+
+    & h1 {
+      margin-top: 1.5rem;
+    }
+
+    & p {
+      margin-top: 1rem;
+      font-size: 2.5rem;
+    }
+
+    .buttons {
+      margin-top: 3rem;
+    }
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -3,3 +3,4 @@
 @import url(buttons.css);
 @import url(social.css);
 @import url(header.css);
+@import url(hero.css);