diff --git a/assets/images/bottom-card-01.svg b/assets/images/bottom-card-01.svg new file mode 100644 index 0000000..da2a95d --- /dev/null +++ b/assets/images/bottom-card-01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/bottom-card-02.svg b/assets/images/bottom-card-02.svg new file mode 100644 index 0000000..a2c9fed --- /dev/null +++ b/assets/images/bottom-card-02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/bottom-card-03.svg b/assets/images/bottom-card-03.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/images/bottom-card-03.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/bottom-card-04.svg b/assets/images/bottom-card-04.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/images/bottom-card-04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/bottom-infocard-image-desktop.png b/assets/images/bottom-infocard-image-desktop.png new file mode 100644 index 0000000..87b48a2 Binary files /dev/null and b/assets/images/bottom-infocard-image-desktop.png differ diff --git a/assets/images/bottom-infocard-image-mobile.png b/assets/images/bottom-infocard-image-mobile.png new file mode 100644 index 0000000..5399732 Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ diff --git a/assets/images/facebook-icon.svg b/assets/images/facebook-icon.svg new file mode 100644 index 0000000..65142aa --- /dev/null +++ b/assets/images/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/images/instagram-icon.svg @@ -0,0 +1,5 @@ + + + + + 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/main-banner-desktop.png b/assets/images/main-banner-desktop.png new file mode 100644 index 0000000..a2c9f47 Binary files /dev/null and b/assets/images/main-banner-desktop.png differ diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png new file mode 100644 index 0000000..a0f7541 Binary files /dev/null and b/assets/images/main-banner-mobile.png differ diff --git a/assets/images/mini-banner-01.png b/assets/images/mini-banner-01.png new file mode 100644 index 0000000..3fd3851 Binary files /dev/null and b/assets/images/mini-banner-01.png differ diff --git a/assets/images/mini-banner-02.png b/assets/images/mini-banner-02.png new file mode 100644 index 0000000..b8b9043 Binary files /dev/null and b/assets/images/mini-banner-02.png differ diff --git a/assets/images/mini-banner-03.png b/assets/images/mini-banner-03.png new file mode 100644 index 0000000..babc07d Binary files /dev/null and b/assets/images/mini-banner-03.png differ diff --git a/assets/images/top-card-image-01.svg b/assets/images/top-card-image-01.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/images/top-card-image-01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/top-card-image-02.svg b/assets/images/top-card-image-02.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/images/top-card-image-02.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/top-card-image-03.svg b/assets/images/top-card-image-03.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/images/top-card-image-03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000..41cf659 Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/assets/images/youtube-icon.svg b/assets/images/youtube-icon.svg new file mode 100644 index 0000000..c2ef882 --- /dev/null +++ b/assets/images/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/styles/style.css b/assets/styles/style.css new file mode 100644 index 0000000..8736e30 --- /dev/null +++ b/assets/styles/style.css @@ -0,0 +1,438 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', sans-serif; + color: #000000; +} + +a { + text-decoration: none; +} + +/* HEADER */ + +.header-container { + display: flex; + width: 100%; + background: #000000; + padding: 29px 0; + justify-content: center; + align-items: center; +} + +.logo-link { + width: 12%; +} + +.logo { + width: 98%; +} + +/* MAIN BANNER */ + +.main-banner { + display: block; + width: 100%; +} + +.main-banner-mobile { + display: none; +} + +/* MAIN TOP INFOCARD */ + +.top-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.top-infocard-text { + max-width: 40%; + text-align: center; + padding: 73px 0; +} + +.top-infocard-subtitle { + text-transform: uppercase; + font-weight: 400; + font-size: 32px; + line-height: 38px; +} + +.top-infocard-title { + text-transform: uppercase; + font-weight: 500; + font-size: 48px; + line-height: 58px; +} + +.top-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding-top: 28px; +} + +.top-infocard-image { + width: 17%; +} + +.image-top-infocard { + width: 100%; +} + +/* MAIN TOP CARDS */ + +.top-cards { + display: flex; + max-width: 100%; + align-items: center; + justify-content: center; + gap: 21px; + padding: 178px 0 80px; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + width: 18%; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image { + display: block; + width: 29%; + padding: 35px 0 27px; +} + +.top-card-description { + max-width: 80%; + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding-bottom: 27px; +} + +/* MAIN - TRÊS IMAGENS MINI BANNER CENTRAL */ + +.mini-banner-container { + background: #E0E0E0; +} + +.mini-banner-wrapper { + position: relative; + display: flex; + justify-content: center; + align-items: center; + bottom: -62px; + gap: 39px; +} + +.mini-banner { + width: 29%; +} + +.mini-banner-image { + display: block; + width: 100%; +} + +/* MAIN BOTTOM CARDS */ + +.bottom-cards { + display: flex; + max-width: 100%; + align-items: center; + justify-content: center; + gap: 16px; + padding-top: 191px; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + width: 22%; + background: #FFFFFF; + box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.20); +} + +.bottom-card-image { + display: block; + width: 24%; + padding: 44px 0 24px; +} + +.imgage-bottom-card-4 { + width: 20%; +} + +.bottom-card-description { + max-width: 84%; + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; + padding-bottom: 65px; +} + +/* MAIN BOTTOM INFORCARD */ + +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.bottom-infocard-text { + width: 28%; + text-align: center; + padding: 108px 0 50px; +} + +.bottom-infocard-subtitle { + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.bottom-infocard-image { + width: 70%; + padding-bottom: 116px; +} + +.image-bottom-infocard { + width: 100%; +} + +.bottom-infocard-image-mobile { + display: none; +} + +/* FOOTER */ + +.page-footer { + display: flex; + flex-direction: column; + align-items: center; + background-color: #000000; + padding: 38px 0; +} + +.footer-redes-sociais { + display: flex; + margin-bottom: 17px; + gap: 16px; + justify-content: center; + align-items: center; +} + +.redes-sociais img { + width: 24px; + height:24px; +} + +.footer-text { + text-transform: uppercase; + font-weight: 400; + line-height: 12px; + font-size: 10px; + color: #BDBDBD; +} + +/* MOBILE */ + +@media (max-width: 1024px) { + .logo-link { + width: 55%; + } + + .logo { + width: 99%; + } + + .main-banner-desktop { + display: none; + } + + .main-banner-mobile { + display: block; + } + + .top-infocard-text { + max-width: 86%; + padding: 73px 0 65px; + } + + .top-infocard-subtitle { + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title { + font-size: 28px; + line-height: 34px; + } + + .top-infocard-description { + padding-top: 22px; + } + + .top-infocard-image { + width: 58%; + } + + .top-cards{ + flex-direction: column; + padding-top: 90px; + gap: 24px; + } + + .top-card{ + width: 84%; + } + + .mini-banner-wrapper { + display: grid; + grid-template-columns: auto auto; + justify-items: center; + row-gap: 23px; + column-gap: 14px; + bottom: -32px; + padding-left: 5%; + padding-right: 5%; + } + + .mini-banner { + width: 100%; + } + + .img-1 { + grid-area: 1 / 2 / 2 / 3; + } + + .img-2 { + grid-area: 1 / 1 / 2 / 2; + } + + .img-3 { + grid-area: 2 / 1 / 3 / 3; + } + + .bottom-cards{ + flex-direction: column; + padding-top: 112px; + } + + .bottom-card{ + width: 88%; + } + + .bottom-infocard-image-desktop { + display: none; + } + + .bottom-infocard-image-mobile { + display: block; + } + + .bottom-infocard { + flex-direction: column-reverse; + } + + .bottom-infocard-text { + width: 84%; + padding: 50px 0 87px; + } + + .bottom-infocard-subtitle { + font-size: 24px; + line-height: 29px; + padding-bottom: 9px; + } + + .bottom-infocard-image { + width: 100%; + padding: 98px 0 0; + } + + .page-footer { + padding: 32px 0; + } + + .footer-text { + text-align: center; + max-width: 261px; + } +} + +/* TELAS GRANDES */ + +@media (min-width: 2500px) { + .top-infocard-subtitle { + font-size: 64px; + line-height: 76px; + } + + .top-infocard-title { + font-size: 96px; + line-height: 116px; + } + + .top-infocard-description, + .top-card-description, + .bottom-card-description, + .bottom-infocard-description { + font-size: 32px; + line-height: 48px; + } + + .top-cards { + gap: 30px; + } + + .top-card, .bottom-card { + box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.23); + } + + .mini-banner-wrapper { + gap: 52px; + } + + .bottom-cards { + gap: 30px; + } + + .bottom-infocard-text { + width: 40%; + } + + .bottom-infocard-subtitle { + font-size: 64px; + line-height: 78px; + padding-bottom: 10px; + } + + .redes-sociais img { + width: 48px; + height: 48px; + } + + .footer-text { + line-height: 24px; + font-size: 20px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5ddfd90 --- /dev/null +++ b/index.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + M3 Academy Landing Page + + + + + + + +
+ + + +
+ +
+ +
+ 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. +

+
+ +
+ Imagem 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. +
+
+
+ +
+
+
+ Primeira Imagem Mini Banner +
+ +
+ Segunda Imagem Mini Banner +
+ +
+ Terceira Imagem Mini Banner +
+
+
+ +
+
+ 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 Teceiro 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