From fda16ebfe5adc1d1968c2df23ed6994073cef931 Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Sun, 9 Oct 2022 23:38:05 -0300 Subject: [PATCH] Adiciona o top infocard desktop e mobile --- assets/styles/main.css | 70 ++++++++++++++++++++++++++++++++++++++---- index.html | 34 +++++++++++++------- 2 files changed, 87 insertions(+), 17 deletions(-) diff --git a/assets/styles/main.css b/assets/styles/main.css index bad2273..e3840b8 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -4,9 +4,9 @@ box-sizing: border-box; } -.body{ - font-family: 'Inter' , sans-serif; - color: #000000; +body { + font-family: 'Inter', sans-serif; + color: #000000; } .page-header { @@ -22,22 +22,80 @@ } .main-banner { -width: 100%; + width: 100%; } +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 178px; +} + +.top-infocard-text { + width: 40%; + text-align: center; + align-items: center; + margin-top: 74px; +} + +.top-infocard-subtitle { + text-transform: uppercase; + font-weight: 400; + font-size: 20px; + line-height: 24px; +} + + +.top-infocard-title { + text-transform: uppercase; + font-weight: 500; + font-size: 28px; + line-height: 34px; + padding: 0 0 28px; +} + +.top-infocard-description { + line-height: 24px; + font-size: 16px; + margin-bottom: 74px; +} + +.top-infocard-image { +max-width: 16%; +} + @media screen and (max-width: 392px) { .header-logo { width: 180px } } -@media screen and (max-width: 414px) { +@media screen and (max-width: 768px) { .main-banner-desktop { display: none; } + + .top-infocard-text { + width: 86%; + } + + .top-infocard-subtitle { + line-height: 20px; + } + + .top-infocard-description { + margin-bottom: 65px; + } + + .top-infocard-image { + max-width: 58%; + margin-bottom: 90px; + } } -@media screen and (min-width: 415px) { +@media screen and (min-width: 769px) { .main-banner-mobile { display: none; } diff --git a/index.html b/index.html index f87956e..47eb454 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,8 @@ - - - + + @@ -11,7 +10,7 @@ Challenge Landing Page - + @@ -24,12 +23,25 @@ - -
-
- Banner principal - Banner principal -
-
+
+ +
+
+ Banner principal + Banner principal +
+
+ + +
+
+

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.

+
+ + Imagem do infocard do topo: 3 computadores +
+
\ No newline at end of file