From 19f785b1d1ae56f30852612d543b4c8daa22fbf9 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sun, 9 Oct 2022 22:31:36 -0300 Subject: [PATCH] feat: Cria sessao de infocard e incia a responsividade mobile --- index.html | 20 ++++++------- style/style.css | 79 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 87 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 83fd430..9761e99 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,11 @@ + + + + @@ -26,18 +31,13 @@
-

Lorem ipsum

-

dolor sit amet

+

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.

+ interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna + dui.

-
-
- -
-
- +
diff --git a/style/style.css b/style/style.css index 1e76a58..e2c0b00 100644 --- a/style/style.css +++ b/style/style.css @@ -4,6 +4,10 @@ box-sizing: border-box; } +body { + font-family: 'Inter', sans-serif; +} + header { display: flex; @@ -24,7 +28,31 @@ header { display: flex; justify-content: center; align-items: center; - padding: 80px 0; + padding: 80px 0 96px; +} + +.infocard-text { + width: 47.875rem; + margin-right: 7.75rem; +} + +.infocard-text h1 { + font-weight: 500; + font-size: 3rem; + text-transform: uppercase; + margin-bottom: 1.5rem; +} + +.infocard-text h2 { + font-weight: 400; + font-size: 2em; + text-transform: uppercase; +} + +.infocard-text p { + font-weight: 400; + font-size: 1rem; + line-height: 1.5rem; } .banner-infocard { @@ -33,9 +61,50 @@ header { display: block; } -@media (max-width:414px) { + +@media screen and (min-width:280px) and (max-width: 768px) { .banner-principal-desktop { display: none; + + } + + + .container-infocard { + display: flex; + flex-direction: column; + align-items: center; + + } + + .infocard-text { + width: 100%; + max-width: 357px; + margin: 1.875rem; + + } + + .infocard-text h1 { + width: 100%; + max-width: 14.6875rem; + font-size: 1.75rem; + font-weight: 500; + } + + .infocard-text h2 { + max-width: 14.6875rem; + font-size: 20px; + font-weight: 400; + } + + .infocard-text p { + font-size: 1rem; + line-height: 1.5rem; + } + + .banner-infocard { + height: 15rem; + width: 15rem; + margin: 68px 88px 157px; } } @@ -44,4 +113,10 @@ header { .banner-principal-mobile { display: none; } +} + +@media screen and (min-width:2500px) { + body { + background: red; + } } \ No newline at end of file