diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..666cdd5 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,407 @@ +/* Tirar as margins e paddings iniciais*/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/*Fonte e cores no body*/ +body { + font-family: "Inter", sans-serif; + color: #000000; +} + +/*Estilização do Cabeçalho*/ +.page-header { + display: flex; + padding: 28px 0; + justify-content: center; + background-color: #000000; +} + +.header-logo { + display: block; +} + +/*Ajuste da imagem do banner principal*/ +.main-banner { + width: 100%; + display: block; +} + +/*Estilização do Infocard do topo */ +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 74px 0 180px; + max-width: 40%; + margin: 0 auto 0; +} + +.top-infocard-subtitle { + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-align: center; + text-transform: uppercase; +} + +.top-infocard-title { + font-style: normal; + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-align: center; + text-transform: uppercase; + margin-bottom: 28px; +} + +.top-infocard-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} +.top-infocard-text { + margin-bottom: 74px; +} + +/*Estilização dos cards topo*/ +.top-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin: 0 auto 80px; + width: 57%; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image { + display: block; + margin-top: 35px; +} +.top-card-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 26px; + text-align: center; +} + +/*Estilização dos banners do meio*/ +.middle-banners { + display: flex; + justify-content: center; + background: #e0e0e0; + width: 100%; + margin-bottom: 192px; +} + +.image-01 { + grid-area: image01; +} +.image-02 { + grid-area: image02; +} +.image-03 { + grid-area: image03; +} + +.middle-banners-wrapper { + display: grid; + grid-template-areas: "image01 image02 image03"; + width: 88%; + gap: 40px; + position: relative; + bottom: -62px; +} +.mb-imagens { + width: 100%; +} + +/* Estilização dos cards inferiores*/ +.bottom-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin: 0 auto 0; + width: 92%; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.bottom-card-image { + display: block; + margin-top: 35px; +} + +.bottom-card-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 15px 32px 65px; + text-align: center; +} + +/*Estilização do Infocard inferior */ +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 108px 280px 0px; + margin-bottom: 116px; +} + +.bottom-infocard-text { + margin-bottom: 50px; + max-width: 41%; +} + +.bottom-infocard-subtitle { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; +} +.bottom-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} +.bottom-banner-desktop { + width: 100%; +} + +/*Estilização do Rodapé*/ +.page-footer { + display: flex; + flex-direction: column; + align-items: center; + background: #000000; + padding: 38px 0 38px; +} + +.footer-icons { + display: flex; + list-style: none; + margin-bottom: 16px; +} + +.footer-icon { + margin: 0 8px; +} + +.footer-text { + font-size: 10px; + line-height: 12px; + font-weight: 400; + text-transform: uppercase; + color: #bdbdbd; +} + +/* Estilização de telas menores que 1024px*/ +@media screen and (max-width: 1024px) { + .main-banner-desktop { + display: none; + } + .bottom-banner-desktop { + display: none; + } + + .top-infocard { + padding: 73px 32px 90px; + margin: 0 auto 0; + max-width: 100%; + } + .top-infocard-text { + margin-bottom: 65px; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + } + .top-infocard-title { + font-size: 28px; + line-height: 34px; + margin-bottom: 14px; + } + .top-infocard-description { + line-height: 24px; + margin-bottom: 0; + } + .top-infocard-image { + width: 100%; + } + + .top-cards { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + margin: 0 auto 80px; + width: 84%; + } + .middle-banners { + margin-bottom: 112px; + } + .middle-banners-wrapper { + grid-template-areas: "image02 image01 " "image03 image03"; + bottom: -32px; + row-gap: 24px; + column-gap: 14px; + margin: 0 24px 0; + } + + .bottom-cards { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + margin: 0 auto 98px; + width: 88%; + } + + .bottom-card-description { + font-size: 14px; + } + + .bottom-infocard { + flex-direction: column-reverse; + margin: 0; + padding: 0; + width: 100%; + } + .bottom-infocard-text { + margin-top: 50px; + max-width: 100%; + margin: 50px 32px 88px; + } + .bottom-infocard-subtitle { + font-size: 24px; + line-height: 29px; + margin-bottom: 9px; + } + .bottom-banner-mobile { + width: 100%; + } + .page-footer { + padding: 32px 76px; + } + .footer-text { + width: 260px; + text-align: center; + } +} +@media screen and (min-width: 1024px) { + .main-banner-mobile { + display: none; + } + .bottom-banner-mobile { + display: none; + } +} + +/*Estilização para telas maiores que 2500px*/ +@media screen and (min-width: 2500px) { + .page-header { + padding: 56px 0; + } + .header-logo { + width: 200%; + } + .top-infocard-text { + margin-bottom: 0; + } + .top-infocard-subtitle { + font-size: 64px; + line-height: 78px; + } + .top-infocard-title { + font-size: 96px; + line-height: 116px; + } + .top-infocard-description { + font-size: 32px; + line-height: 48px; + margin-bottom: 100px; + } + + .top-infocard-image { + height: 600px; + margin: 20px 0 84px; + } + .top-card-description { + font-size: 40px; + line-height: 40px; + margin: 50px 30px; + } + .top-card-image { + height: 200px; + margin-top: 100px; + } + .bottom-card-description { + font-size: 33px; + line-height: 52px; + margin: 25px 100px 73px; + } + .bottom-card-image { + height: 200px; + margin-top: 70px; + } + .bottom-banner-desktop { + width: 2500px; + } + + .bottom-infocard { + margin-bottom: 210px; + padding: 200px 280px 0px; + } + .bottom-infocard-text { + width: 1174px; + } + + .bottom-infocard-subtitle { + font-size: 75px; + margin-bottom: 40px; + line-height: 80px; + } + + .bottom-infocard-description { + font-size: 40px; + margin-top: 20px; + line-height: 50px; + } + + .page-footer { + padding: 74px 0 74px; + } + + .rede-social-imagem { + height: 66px; + margin-bottom: 12px; + } + + .footer-text { + font-size: 20px; + } +} 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/bottom-card-image-01.png b/assets/imagens/bottom-card-image-01.png new file mode 100644 index 0000000..b6d81cf Binary files /dev/null and b/assets/imagens/bottom-card-image-01.png differ diff --git a/assets/imagens/bottom-card-image-02.png b/assets/imagens/bottom-card-image-02.png new file mode 100644 index 0000000..a239b00 Binary files /dev/null and b/assets/imagens/bottom-card-image-02.png differ diff --git a/assets/imagens/bottom-card-image-03.png b/assets/imagens/bottom-card-image-03.png new file mode 100644 index 0000000..e5d0f23 Binary files /dev/null and b/assets/imagens/bottom-card-image-03.png differ diff --git a/assets/imagens/bottom-card-image-04.png b/assets/imagens/bottom-card-image-04.png new file mode 100644 index 0000000..ad9f3c1 Binary files /dev/null and b/assets/imagens/bottom-card-image-04.png differ diff --git a/assets/imagens/bottom-infocard-image-desktop.png b/assets/imagens/bottom-infocard-image-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/imagens/bottom-infocard-image-desktop.png differ diff --git a/assets/imagens/bottom-infocard-image-mobile.png b/assets/imagens/bottom-infocard-image-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/imagens/bottom-infocard-image-mobile.png differ diff --git a/assets/imagens/facebook-icon.png b/assets/imagens/facebook-icon.png new file mode 100644 index 0000000..34769d9 Binary files /dev/null and b/assets/imagens/facebook-icon.png differ diff --git a/assets/imagens/instagram-icon.png b/assets/imagens/instagram-icon.png new file mode 100644 index 0000000..a0129a3 Binary files /dev/null and b/assets/imagens/instagram-icon.png differ diff --git a/assets/imagens/main-banner-desktop.png b/assets/imagens/main-banner-desktop.png new file mode 100644 index 0000000..67dc789 Binary files /dev/null and b/assets/imagens/main-banner-desktop.png differ diff --git a/assets/imagens/main-banner-mobile.png b/assets/imagens/main-banner-mobile.png new file mode 100644 index 0000000..2da3a66 Binary files /dev/null and b/assets/imagens/main-banner-mobile.png differ diff --git a/assets/imagens/middle-banner-image-01.png b/assets/imagens/middle-banner-image-01.png new file mode 100644 index 0000000..23fd072 Binary files /dev/null and b/assets/imagens/middle-banner-image-01.png differ diff --git a/assets/imagens/middle-banner-image-02.png b/assets/imagens/middle-banner-image-02.png new file mode 100644 index 0000000..4544597 Binary files /dev/null and b/assets/imagens/middle-banner-image-02.png differ diff --git a/assets/imagens/middle-banner-image-03.png b/assets/imagens/middle-banner-image-03.png new file mode 100644 index 0000000..a12898d Binary files /dev/null and b/assets/imagens/middle-banner-image-03.png differ diff --git a/assets/imagens/top-card-image-01.png b/assets/imagens/top-card-image-01.png new file mode 100644 index 0000000..8cf9fb5 Binary files /dev/null and b/assets/imagens/top-card-image-01.png differ diff --git a/assets/imagens/top-card-image-02.png b/assets/imagens/top-card-image-02.png new file mode 100644 index 0000000..0d27090 Binary files /dev/null and b/assets/imagens/top-card-image-02.png differ diff --git a/assets/imagens/top-card-image-03.png b/assets/imagens/top-card-image-03.png new file mode 100644 index 0000000..11b00d4 Binary files /dev/null and b/assets/imagens/top-card-image-03.png differ diff --git a/assets/imagens/top-infocard-image.png b/assets/imagens/top-infocard-image.png new file mode 100644 index 0000000..ad45609 Binary files /dev/null and b/assets/imagens/top-infocard-image.png differ diff --git a/assets/imagens/youtube-icon.png b/assets/imagens/youtube-icon.png new file mode 100644 index 0000000..09d8cd6 Binary files /dev/null and b/assets/imagens/youtube-icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a9c7374 --- /dev/null +++ b/index.html @@ -0,0 +1,203 @@ + + + + + + + + + + Desafio 1 - M3 Academy + + + + + + + + + +
+ +
+
+ Banner principal desktop + Banner 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 +
+
+ + +
+
+ Imagem do Primeiro Card do Topo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ Imagem do Segundo Card do Topo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ Imagem do Terceiro Card do Topo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

+
+
+
+ + +
+
+
+ Imagem do Banner do Meio +
+
+ Imagem do Banner do Meio +
+
+ Imagem do Banner do Meio +
+
+
+ + +
+
+ Imagem do Primeiro Card de Baixo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui + fringilla interdum. +

+
+
+
+ Imagem do Segundo Card de Baixo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui + fringilla interdum. +

+
+
+
+ Imagem do Terceiro Card de Baixo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui + fringilla interdum. +

+
+
+
+ Imagem do Quarto Card de Baixo +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui + fringilla interdum. +

+
+
+
+ + +
+
+

Lorem ipsum dolor sit amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras + vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur + venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+
+
+ Banner do Infocard de Baixo Desktop +
+
+ Banner do Infocard de Baixo Mobile +
+
+ +
+ + + + + + \ No newline at end of file