diff --git a/assets/imagens/Logo-M3Academy 1.png b/assets/imagens/Logo-M3Academy 1.png deleted file mode 100644 index bd85eb7..0000000 Binary files a/assets/imagens/Logo-M3Academy 1.png and /dev/null differ diff --git a/assets/imagens/Logo-M3Academy 1.svg b/assets/imagens/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/imagens/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/imagens/middle-banner-1.png b/assets/imagens/middle-banner-1.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/assets/imagens/middle-banner-1.png differ diff --git a/assets/imagens/middle-banner-2.png b/assets/imagens/middle-banner-2.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/imagens/middle-banner-2.png differ diff --git a/assets/imagens/middle-banner-3.png b/assets/imagens/middle-banner-3.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/imagens/middle-banner-3.png differ diff --git a/assets/imagens/top-card image-3.svg b/assets/imagens/top-card image-3.svg new file mode 100644 index 0000000..3795393 --- /dev/null +++ b/assets/imagens/top-card image-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/top-card-image-1.svg b/assets/imagens/top-card-image-1.svg new file mode 100644 index 0000000..e5f7cff --- /dev/null +++ b/assets/imagens/top-card-image-1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/top-card-image-2.svg b/assets/imagens/top-card-image-2.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/imagens/top-card-image-2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/imagens/top-infocard-image.png b/assets/imagens/top-infocard-image.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/assets/imagens/top-infocard-image.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 71536df..ed85398 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -3,12 +3,20 @@ padding: 0; box-sizing: border-box; } +body{ + font-family: 'Inter', sans-serif; + color: #000; +} .page-header{ display: flex; justify-content: center; padding: 29px 0; background-color: #000; } +.header-logo{ + width: 12vw; + min-width: 226px; +} .main-banner-desktop{ width: 100%; display: block; @@ -16,18 +24,84 @@ .main-banner-mobile{ display: none; } +.top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + padding: 73px 0 0; +} +.top-inforcard-subtitle{ + text-align: center; + font-weight: 400; + font-size: 32px; + text-transform: uppercase; +} +.top-infocard-title{ + text-align: center; + font-weight: 500; + font-size: 48px; + text-transform: uppercase; + padding: 0 0 28px; +} +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +.top-infocard-text{ + max-width: 40%; + padding: 0 0 73px; +} +.top-infocard-image{ + width: 16%; + min-width: 239px; +} +.top-cards{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 21px; + justify-content: center; + padding: 178px 20% 80px; +} +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 36px; + background: #FFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.top-card-image{ + display: block; + min-width: 5vw; + margin-bottom: 30px; +} +.top-card-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} +.Banners-middle{ + display: grid; + grid-area: 1fr 1fr 1fr; + justify-content: center; + gap: 36px; + background: #E0E0E0 +} +.middle-banner{ + display: block; + width: 100%; +} + @media screen and (min-width: 2500px) { .page-header{ padding: 58px } - .header-logo{ - width: 532px; - height: 86px; - } } - -@media screen and (max-width: 1024px) { + +@media screen and (max-width: 1025px) { .main-banner-desktop{ display: none; } @@ -35,4 +109,37 @@ width: 100%; display: block; } + /* top infocard */ + .top-inforcard-subtitle{ + font-size: 20px; + } + .top-infocard-title{ + font-size: 28px; + } + .top-infocard-text{ + text-align: center; + max-width: 86%; + padding: 0 0 73px; + } + .top-cards{ + padding: 90px 7%; + } } + +@media screen and (max-width: 992px){ + .top-infocard-image{ + width: 34%; + } + /* top-cards */ + .top-cards{ + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (max-width: 540px) { + .top-cards{ + grid-template-columns: 1fr; + padding: 90px 26px 80px; + gap: 24px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index e004338..d1a9dc0 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,25 @@ - - + + + Challenge-landing-page + + +
- +
@@ -23,6 +27,43 @@ Banner-principal-do-topo Banner-principal-do-topo + +
+
+ +

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. +

+
+ + Imagem-do-infocard-do-topo +
+ +
+
+ Primeira-card-do-topo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ Segundo-card-do-topo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ Terceiro-card-do-topo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ +
+ Primeira-imagem-do-meio + Segunda-imagem-do-meio + Terceira-imagem-do-meio