diff --git a/assets/images/computes.png b/assets/images/computes.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/images/computes.png differ 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 + +
+