From ac696cc2bee3e762c943055ac3f1f1ca97f072e9 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Tue, 11 Oct 2022 13:40:02 -0300 Subject: [PATCH] feat: Cria infocard superior desktop --- index.html | 33 +++++++++++++++++++---- styles/main.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 96 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2b53557..88277a9 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ + + @@ -10,7 +12,8 @@ Desafio 1 Landing Page - + + @@ -22,15 +25,35 @@
- Banner Principal Desktop + Banner Principal Desktop
- +
- Banner Principal Mobile + Banner Principal Mobile
- +
+ +
+

+ 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 Superior +
+
+ \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 1c2b36a..1c37689 100644 --- a/styles/main.css +++ b/styles/main.css @@ -8,6 +8,12 @@ img{ display: block; } +body{ + color: #000; + font-family: 'Inter', sans-serif; + text-align: center; +} + .page-header{ display: flex; justify-content: center; @@ -19,14 +25,74 @@ img{ width: 100%; } +.top-infocard{ + margin-top: 73px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 65px; +} + +.top-infocard-text{ + max-width: 40%; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.top-infocard-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; + margin-bottom: 28px; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: left; +} + +.top-infocard-figure{ + min-width: 16%; +} + +.top-infocard-image{ + width: 100%; +} + @media screen and (max-width: 1024px){ - #main-banner-desktop{ + .main-banner-desktop{ display: none; } } @media screen and (min-width: 1025px){ - #main-banner-mobile{ + .main-banner-mobile{ display: none; } +} + +@media screen and (min-width: 2500px){ + .top-infocard-subtitle{ + font-size: 64px; + line-height: 78px; + } + + .top-infocard-title{ + font-size: 98px; + line-height: 116px; + } + + .top-infocard-description{ + font-size: 32px; + line-height: 48px; + } } \ No newline at end of file