From 7ddb6c2bcc14bac4c62a0c4bd2322f49acc9d680 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 8 Oct 2022 08:01:22 -0300 Subject: [PATCH] feat: create top information section and responsive --- assets/css/styles.css | 43 +++++++++++++++++++++++++++++++++++++++++++ index.html | 18 +++++++++++++++++- 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index e92ff32..445e3b0 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -10,6 +10,27 @@ display: block; } +.information { + max-width: 1215px; + margin: 0 auto; + padding: 5.25rem 1.625rem 5.875rem 2rem; + display: flex; + align-items: center; + justify-content: center; +} + +.information { + --grid-space: 5.4375rem 7.75rem; +} + +.information-subtitle { + font-weight: 400; +} + +.information-title { + font-weight: 500; + margin-bottom: 19px; +} /*= =*\ = UTILS = @@ -21,6 +42,7 @@ .center { align-items: center; justify-content: center; + gap: var(--grid-space); } .text-upper { @@ -39,6 +61,27 @@ background-color: var(--gradient-blue-180); } +@media screen and (max-width:768px) { + .sm-wrapper { + flex-direction: column; + } +} + + +@media screen and (min-width: 769px) { + .information { + padding: 5rem 0 5.875px 0; + } + + .information-title { + font-size: 3rem; + } + + .information-subtitle { + font-size: 2rem; + } +} + @media screen and (max-width: 414px) { .hero-image-desktop { display: none; diff --git a/index.html b/index.html index 085928a..f365286 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ M3 Amazing Landing page -
+
@@ -23,6 +23,22 @@ + +
+
+
+

Lorem Ipsum

+

Dolor Sit Amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui + fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet + velit. Nulla suscipit magna dui. +

+
+ + +
+