From 8cc5374bae6647f7fe2644e5697227204bf3df6b Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Tue, 11 Oct 2022 14:11:05 -0300 Subject: [PATCH] feat(home): adicionando destaque na home desktop e mobile --- assets/images/computes.png | Bin 0 -> 4717 bytes assets/styles/css/main.css | 86 ++++++++++++++++++++++++++++++++++++ assets/styles/css/reset.css | 3 +- index.html | 14 ++++++ 4 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 assets/images/computes.png diff --git a/assets/images/computes.png b/assets/images/computes.png new file mode 100644 index 0000000000000000000000000000000000000000..2af63bd074221902e8d0f9c89b9a9104dbf0a5c7 GIT binary patch literal 4717 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 F;$NsbxNHCb literal 0 HcmV?d00001 diff --git a/assets/styles/css/main.css b/assets/styles/css/main.css index bc9ff5e..6a8e2c1 100644 --- a/assets/styles/css/main.css +++ b/assets/styles/css/main.css @@ -12,11 +12,62 @@ display: block; } +.banner { + margin-bottom: 74px; +} + .banner__img { width: 100%; display: block; } +.home-destaque { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.home-destaque__text { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + max-width: 766px; +} + +.home-destaque__text__subtitle { + font-weight: 400; + font-size: 32px; + line-height: 39px; + + text-transform: uppercase; +} + +.home-destaque__text__title { + font-weight: 500; + font-size: 48px; + line-height: 58px; + margin-bottom: 28px; + + text-transform: uppercase; +} + +.home-destaque__text__description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + + margin-bottom: 74px; +} + +.home-destaque__img { + width: 16%; + margin-bottom: 180px; +} + @media screen and (min-width: 415px) { .banner__img__mobile { display: none; @@ -28,7 +79,42 @@ .header__logo { width: 54%; } + .banner__img__desktop { display: none; } + + .home-destaque__text { + padding: 0 28px; + } + + .home-destaque__text__subtitle { + font-size: 20px; + line-height: 24px; + } + + .home-destaque__text__title{ + font-size: 28px; + line-height: 34px; + } + + .home-destaque__text__description { + text-align: center; + } + + .home-destaque__img { + width: 58%; + } } + +@media screen and (max-width: 300px) { + .home-destaque__text__title{ + font-size: 26px; + } +} + +@media screen and (min-width:414px) and (max-width:768px ) { + .home-destaque__img { + width: 58%; + } +} \ No newline at end of file diff --git a/assets/styles/css/reset.css b/assets/styles/css/reset.css index bdf8f53..7849c3d 100644 --- a/assets/styles/css/reset.css +++ b/assets/styles/css/reset.css @@ -15,7 +15,6 @@ time, mark, audio, video { padding: 0; border: 0; font-size: 100%; - font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ @@ -25,6 +24,8 @@ footer, header, hgroup, menu, nav, section { } body { line-height: 1; + font-family: 'Inter', sans-serif; + color: #000; } ol, ul { list-style: none; diff --git a/index.html b/index.html index be510bc..12da012 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,10 @@ + + + + Desafio M3 Academy @@ -21,6 +25,16 @@ +
+
+

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.

+
+ Monitores + +
+