From d87038f5fed65912b139a612e24c310519798135 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 8 Oct 2022 16:00:28 -0300 Subject: [PATCH] Adiciona o top infocard desktop e mobile --- index.html | 18 ++++++ materiais/imagens/top-infocard-image.png | Bin 0 -> 4707 bytes materiais/styles/main.css | 78 +++++++++++++++++++++++ 3 files changed, 96 insertions(+) create mode 100644 materiais/imagens/top-infocard-image.png diff --git a/index.html b/index.html index 45e621b..14ba794 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,18 @@ + + + Atividade 1 m3 + + + @@ -24,6 +30,18 @@ baner 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..

+
+ + Banner do infocard do Topo + +
\ No newline at end of file diff --git a/materiais/imagens/top-infocard-image.png b/materiais/imagens/top-infocard-image.png new file mode 100644 index 0000000000000000000000000000000000000000..b71511887eff4754f5d78d4c3ea8f42539f68962 GIT binary patch literal 4707 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 VLe&`*%=br$=x7>fl!4v`{uj0Xk@)}s literal 0 HcmV?d00001 diff --git a/materiais/styles/main.css b/materiais/styles/main.css index 8571989..5cfdea4 100644 --- a/materiais/styles/main.css +++ b/materiais/styles/main.css @@ -1,6 +1,12 @@ *{ margin: 0; padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif; + color: #000000; } @@ -19,14 +25,86 @@ width: 100%; } +.top-infocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0px 96px; +} + +.top-infocard-text{ + max-width: 766px; +} + +.top-infocard-subtitle{ + font-weight: normal; + font-size: 32px; + text-transform: uppercase; + color: #000000; +} + +.top-infocard-title{ + margin-bottom: 24px; + text-transform: uppercase; + font-size: 48px; + font-weight: 500; + +} + +.top-infocard-description{ + line-height: 24px; + font-size: 16px; + margin-right: 124px; +} + @media screen and (max-width: 414px) { .principal-baner-desktop{ display: none; } } + +@media screen and (max-width: 992px) { + .top-infocard{ + flex-direction: column; + padding: 84px 26px 158px; + } + + .top-infocard-text{ + margin-right: 0px 0px 68px; + + } + + .top-infocard-subtitle{ + font-size: 20px; + + } + + .top-infocard-title{ + font-size: 28px; + margin-bottom: 20px; + + } + + .top-infocard-image{ + width: 100%; + max-width: 240px; + padding: 67px 0px 0px 0px; + } +} + + + @media screen and (min-width: 415px){ .principal-baner-mobile{ display: none; + } } + +@media screen and (min-width: 993px ) and ( max-width: 1280px) { + + .top-infocard-text{ + max-width: 520px; + margin-right: 70px; + }