From d44d469ebcd930bdd0a09d9368a7ee5ad9441a1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20Guimar=C3=A3es?= Date: Wed, 12 Oct 2022 15:38:36 -0300 Subject: [PATCH] resposividade do infocard1 --- desafio.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++- desafio.html | 16 ++++++++++- 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/desafio.css b/desafio.css index 5a07841..5440cfe 100644 --- a/desafio.css +++ b/desafio.css @@ -3,6 +3,12 @@ padding: 0; box-sizing:border-box; } + +body{ + font-family: 'inter', sans-serif; + color: #000000; +} + .pageheader{ background-color: #000000; height: 101px; @@ -23,14 +29,86 @@ width: 100%; } +.infocard1{ + display: flex; + align-items: center; + flex-direction: column; + margin: 88px; +} + +.infocard-text{ + display: flex; + align-items: center; + flex-direction: column; + max-width: 766px; +} + +.infocard-text1{ + text-transform: uppercase; + font-size: 32px; + font-weight: 400; + font-family: 'inter'; + +} + +.infocard-text2{ + font-family: 'inter'; + font-style: normal; + line-height: 58px; + font-size: 48px; + font-weight: 500; + text-transform: uppercase; + margin: 0; +} + +.infocard-text3{ + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-bottom: 73px; + padding: 25px; +} + +.infocard-image { + + display: flex; +} + + @media (max-width:414px) { .main-banner{ display: none; } + .infocard-image{ + display: none; + } + .infocard-text1{ + margin: 0; + font-size: 20px; + line-height: 24px; + } + + .infocard-text2{ + font-size: 28px; + line-height: 34px; + width: 235px; + } + + .infocard-text3{ + + font-size: 16px; + line-height: 24px; + } + } @media (min-width:415px) { .main-bannermobile{ display: none; } -} + .infocard-imagemobile{ + display: none; + } +} \ No newline at end of file diff --git a/desafio.html b/desafio.html index ce9bc2b..c40ffa7 100644 --- a/desafio.html +++ b/desafio.html @@ -1,12 +1,15 @@ + + Landing Page Desafio - + +
@@ -20,6 +23,17 @@ mainbanner mainbannermobile
+ +
+
+

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.

+
+ infocard image + infocard image mobile +
+ \ No newline at end of file