diff --git a/assets/images/Banner-Bottom-Desktop.png b/assets/images/Banner-Bottom-Desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/images/Banner-Bottom-Desktop.png differ diff --git a/assets/images/Banner-Bottom-Mobile.png b/assets/images/Banner-Bottom-Mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/images/Banner-Bottom-Mobile.png differ diff --git a/assets/images/Banner-Top-Desktop.png b/assets/images/Banner-Top-Desktop.png new file mode 100644 index 0000000..67dc789 Binary files /dev/null and b/assets/images/Banner-Top-Desktop.png differ diff --git a/assets/images/Banner-Top-Mobile.png b/assets/images/Banner-Top-Mobile.png new file mode 100644 index 0000000..2da3a66 Binary files /dev/null and b/assets/images/Banner-Top-Mobile.png differ diff --git a/assets/images/Bottom-Card-Image-01.png b/assets/images/Bottom-Card-Image-01.png new file mode 100644 index 0000000..b6d81cf Binary files /dev/null and b/assets/images/Bottom-Card-Image-01.png differ diff --git a/assets/images/Bottom-Card-Image-03.png b/assets/images/Bottom-Card-Image-03.png new file mode 100644 index 0000000..e5d0f23 Binary files /dev/null and b/assets/images/Bottom-Card-Image-03.png differ diff --git a/assets/images/Bottom-Card-Image-04.png b/assets/images/Bottom-Card-Image-04.png new file mode 100644 index 0000000..ad9f3c1 Binary files /dev/null and b/assets/images/Bottom-Card-Image-04.png differ diff --git a/assets/images/Facebook-Icon.png b/assets/images/Facebook-Icon.png new file mode 100644 index 0000000..34769d9 Binary files /dev/null and b/assets/images/Facebook-Icon.png differ diff --git a/assets/images/Instagram-Icon.png b/assets/images/Instagram-Icon.png new file mode 100644 index 0000000..a0129a3 Binary files /dev/null and b/assets/images/Instagram-Icon.png differ diff --git a/assets/images/Logo-M3Academy.svg b/assets/images/Logo-M3Academy.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/images/Logo-M3Academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/Middle-Image-01.png b/assets/images/Middle-Image-01.png new file mode 100644 index 0000000..23fd072 Binary files /dev/null and b/assets/images/Middle-Image-01.png differ diff --git a/assets/images/Middle-Image-02.png b/assets/images/Middle-Image-02.png new file mode 100644 index 0000000..4544597 Binary files /dev/null and b/assets/images/Middle-Image-02.png differ diff --git a/assets/images/Middle-Image-03.png b/assets/images/Middle-Image-03.png new file mode 100644 index 0000000..a12898d Binary files /dev/null and b/assets/images/Middle-Image-03.png differ diff --git a/assets/images/Top-Card-Image-01.png b/assets/images/Top-Card-Image-01.png new file mode 100644 index 0000000..8cf9fb5 Binary files /dev/null and b/assets/images/Top-Card-Image-01.png differ diff --git a/assets/images/Top-Card-Image-02.png b/assets/images/Top-Card-Image-02.png new file mode 100644 index 0000000..0d27090 Binary files /dev/null and b/assets/images/Top-Card-Image-02.png differ diff --git a/assets/images/Top-Card-Image-03.png b/assets/images/Top-Card-Image-03.png new file mode 100644 index 0000000..11b00d4 Binary files /dev/null and b/assets/images/Top-Card-Image-03.png differ diff --git a/assets/images/Top-Infocard-Image.png b/assets/images/Top-Infocard-Image.png new file mode 100644 index 0000000..ad45609 Binary files /dev/null and b/assets/images/Top-Infocard-Image.png differ diff --git a/assets/images/Youtube-Icon.png b/assets/images/Youtube-Icon.png new file mode 100644 index 0000000..397ea3e Binary files /dev/null and b/assets/images/Youtube-Icon.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css new file mode 100644 index 0000000..2706fe2 --- /dev/null +++ b/assets/styles/main.css @@ -0,0 +1,335 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} +.page-header{ + display: flex; + justify-content: center; + padding: 28px 0; + background: #000000; +} +.header-logo{ + display: block; +} +.main-banner{ + width: 100%; + display: block; +} +.top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + padding: 3.8% 0 9.4%; +} +.top-infocard-text{ + max-width: 40.4%; +} +.top-infocard-subtitle{ + font-size: 32px; + font-weight: 400; + text-align: center; + text-transform: uppercase; +} +.top-infocard-title{ + font-size: 48px; + font-weight: 500; + text-align: center; + margin-bottom: 3.6%; + text-transform: uppercase; +} +.top-infocard-description{ + margin-bottom: 9.4%; + line-height: 24px; +} +.top-infocard-image{ + width: 32.5vmin; +} +.top-cards{ + display: flex; + justify-content: center; + gap: 1.2%; + padding: 0 0 4.2%; +} +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + width: 36.2vmin; + padding: 1.9% 0 1.4%; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} +.top-card-images{ + padding-bottom: 6%; +} +.top-card-image{ + width: 10.4vmin; +} +.top-card-description{ + text-align: center; + line-height: 24px; + padding: 0 7.4%; +} +.middle-images-section-desktop{ + background: #E0E0E0; +} +.middle-images-wrapper-desktop{ + display: flex; + justify-content: center; + position: relative; + bottom: -62px; +} +.middle-images-desktop{ + display: flex; + width: 90%; + justify-content: center; + gap: 2%; +} +.middle-image-desktop{ + width: 33.3%; +} +.middle-images-section-mobile{ + display: none; +} +.bottom-cards{ + padding: 10.1% 0 5.7% 0; + display: flex; + justify-content: center; + gap: 1%; +} +.bottom-card{ + display: flex; + flex-direction: column; + width: 44.6vmin; + align-items: center; + padding: 1.57% 0 2%; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.bottom-card-images{ + padding-bottom: 3.25%; +} +.bottom-card-image{ + width: 10.8vmin; +} +.bottom-card-description{ + line-height: 24px; + text-align: center; + width: 85%; +} +.bottom-infocard{ + display: flex; + flex-direction: column; + align-items: center; +} +.bottom-infocard-text{ + text-align: center; + margin-bottom: 2.65%; + width: 29%; +} +.bottom-infocard-title{ + font-size: 32px; +} +.bottom-infocard-description{ + line-height: 24px; +} +.bottom-infocard-images{ + display: flex; + justify-content: center; + width: 100%; +} +.bottom-infocard-image-desktop{ + width: 75%; + margin-bottom: 6.1%; +} +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + padding: 2% 0; + background: #000000; +} +.footer-icons{ + display: flex; + list-style-type: none; + align-items: center; + margin-bottom: 1%; +} +.footer-icon{ + margin: 0 8px; +} +.footer-icon-image{ + width: 2.48vmin; +} +.footer-description{ + font-size: 10px; + text-transform: uppercase; + color: #BDBDBD; +} +@media screen and (max-width: 1024px){ + .main-banner-desktop{ + display: none; + } + .top-infocard-subtitle{ + font-size: 20px; + } + .top-infocard-title{ + font-size: 28px; + } + .top-infocard{ + padding-top: 18.12%; + } + .top-infocard-description{ + text-align: center; + margin-bottom: 18.2%; + } + .top-infocard-text{ + max-width: 86.25%; + } + .top-infocard-image{ + width: 57.75vmin; + margin-bottom: 21.4%; + } + .top-cards{ + flex-direction: column; + align-items: center; + } + .top-card{ + width: 84.6%; + margin-bottom: 5.8%; + } + .top-card-image{ + width: 102px; + padding-top: 36%; + } + .top-card-description{ + width: 85.5%; + margin-bottom: 7.7%; + } + .middle-image-desktop{ + display: none; + } + .middle-images-section-mobile{ + display: flex; + margin-bottom: 16.9%; + padding-bottom: 10.9%; + background: #E0E0E0; + } + .middle-images-wrapper-mobile{ + display: flex; + position: relative; + bottom: -32px; + } + .middle-images-mobile{ + display: flex; + justify-content: center; + gap: 3.5%; + flex-wrap: wrap; + } + .middle-image-mobile{ + width: 42.76%; + height: 32.8%; + } + .middle-image-mobile2{ + margin-top: 1%; + width: 89%; + height: 71.6%; + } + .bottom-cards{ + flex-direction: column; + align-items: center; + margin-bottom: 14%; + } + .bottom-card{ + width: 84.6%; + margin-bottom: 3.8%; + } + .bottom-card-image{ + width: 100%; + padding-top: 29%; + } + .bottom-card-description{ + font-size: 14px; + margin: 0 0 14%; + } + .bottom-infocard-image-mobile{ + width: 100%; + } + .bottom-infocard-image-desktop{ + display: none; + } + .bottom-infocard-text{ + flex-direction: column; + width: 85%; + margin: 12% 0 19.8%; + } + .bottom-infocard-title{ + font-size: 24px; + line-height: 29px; + margin-bottom: 2.2%; + } + .page-footer{ + padding: 32px 0; + } + .footer-icons{ + margin-bottom: 3%; + } + .footer-icon-image{ + width: 100%; + } + .footer-description.desktop{ + display: none; + } + .footer-description.mobile{ + width: 260px; + text-align: center; + } +} +@media screen and (min-width: 1025px){ + .main-banner-mobile{ + display: none; + } + .bottom-infocard-image-mobile{ + display: none; + } + .footer-description.mobile{ + display: none; + } +} +@media screen and (min-width: 2500px){ + .top-infocard-subtitle{ + font-size: 64px; + line-height: 78px; + } + .top-infocard-title{ + font-size: 48px; + line-height: 58px; + } + .top-infocard-description{ + font-size: 32px; + line-height: 48px; + } + .top-card-description{ + font-size: 32px; + line-height: 48px; + } + .bottom-card-description{ + font-size: 32px; + line-height: 48px; + } + .bottom-infocard-title{ + font-size: 64px; + line-height: 78px; + } + .bottom-infocard-description{ + font-size: 32px; + line-height: 48px; + } + .footer-description{ + font-size: 20px; + line-height: 24px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..83d4da2 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + + + + + + Document + + + + +
+ +
+ +
+ +
+
+
+ + Banner Principal do Desktop + Banner Principal do 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.

+
+
+ Imagem do Infocard +
+
+ +
+
+
+ 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. +

+
+
+ +
+
+
+ Primeira Imagem Middle + Segunda Imagem Middle + Terceira Imagem Middle +
+
+
+ +
+
+
+ Segunda Imagem Middle + Primeira Imagem Middle + Terceira Imagem Middle +
+
+
+ +
+
+
+ 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. +

+
+
+ +
+
+ Banner do Infocard de Baixo Mobile +
+
+

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 +
+
+ +
+ + + \ No newline at end of file