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/bottom-card-01.png b/assets/images/bottom-card-01.png new file mode 100644 index 0000000..7cd0f0f Binary files /dev/null and b/assets/images/bottom-card-01.png differ diff --git a/assets/images/bottom-card-02.png b/assets/images/bottom-card-02.png new file mode 100644 index 0000000..17999e1 Binary files /dev/null and b/assets/images/bottom-card-02.png differ diff --git a/assets/images/bottom-card-03.png b/assets/images/bottom-card-03.png new file mode 100644 index 0000000..6dff7a4 Binary files /dev/null and b/assets/images/bottom-card-03.png differ diff --git a/assets/images/bottom-card-04.png b/assets/images/bottom-card-04.png new file mode 100644 index 0000000..2edf5fb Binary files /dev/null and b/assets/images/bottom-card-04.png differ diff --git a/assets/images/bottom-image-desktop.png b/assets/images/bottom-image-desktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/images/bottom-image-desktop.png differ diff --git a/assets/images/bottom-image-mobile.png b/assets/images/bottom-image-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/images/bottom-image-mobile.png differ diff --git a/assets/images/icon-facebook.png b/assets/images/icon-facebook.png new file mode 100644 index 0000000..170d82f Binary files /dev/null and b/assets/images/icon-facebook.png differ diff --git a/assets/images/icon-instagram.png b/assets/images/icon-instagram.png new file mode 100644 index 0000000..922af3c Binary files /dev/null and b/assets/images/icon-instagram.png differ diff --git a/assets/images/icon-youtube.png b/assets/images/icon-youtube.png new file mode 100644 index 0000000..79cbe29 Binary files /dev/null and b/assets/images/icon-youtube.png differ diff --git a/assets/images/mid-image-01.png b/assets/images/mid-image-01.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/assets/images/mid-image-01.png differ diff --git a/assets/images/mid-image-02.png b/assets/images/mid-image-02.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/images/mid-image-02.png differ diff --git a/assets/images/mid-image-03.png b/assets/images/mid-image-03.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/images/mid-image-03.png differ diff --git a/assets/images/top-banner-desktop.png b/assets/images/top-banner-desktop.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/assets/images/top-banner-desktop.png differ diff --git a/assets/images/top-banner-mobile.png b/assets/images/top-banner-mobile.png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/assets/images/top-banner-mobile.png differ diff --git a/assets/images/top-card-01.png b/assets/images/top-card-01.png new file mode 100644 index 0000000..4b144a6 Binary files /dev/null and b/assets/images/top-card-01.png differ diff --git a/assets/images/top-card-02.png b/assets/images/top-card-02.png new file mode 100644 index 0000000..55c9060 Binary files /dev/null and b/assets/images/top-card-02.png differ diff --git a/assets/images/top-card-03.png b/assets/images/top-card-03.png new file mode 100644 index 0000000..cfbd0f1 Binary files /dev/null and b/assets/images/top-card-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..82530bd Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index e69de29..0b64091 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -0,0 +1,343 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} + +.header-page{ + background: #000000; + display: flex; + justify-content: center; + padding: 29px 0; +} + +.header-link{ + display: flex; + width: 12%; + justify-content: center; +} + +.header-img{ + width: 100%; +} + +.top-banner{ + width: 100%; + display: block; +} + +.top-infocard{ + display: flex; + align-items: center; + text-align: center; + justify-content: center; + flex-direction: column; +} + +.top-infocard-text{ + width: 40%; + margin: 72px 0; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.top-infocard-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.top-infocard-image{ + width: 17%; + margin: 0 0 178px; +} + +.top-cards{ + display: grid; + grid-template-columns: repeat(3, 18%); + gap: 20px; + justify-content: center; + margin: 0 0 80px; +} + +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 36px 26px 26px; + gap: 27px; +} + +.top-card-image{ + display: block; + width: 34%; +} + +.top-card-description{ + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.mid-banners{ + background: #E0E0E0; + margin: 0 0 192px; +} + +.mid-banner-wrapper{ + display: grid; + grid-template-columns: repeat(3, 29%); + justify-content: center; + gap: 38px; + position: relative; + top: 62px; +} + + +.mid-banner-image{ + width: 100%; + } + +.bottom-cards{ + display: grid; + grid-template-columns: repeat(4, 23%); + gap: 16px; + justify-content: center; + margin: 0 0 108px; +} + +.bottom-card{ + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + gap: 16px; + padding: 36px 32px 64px; +} + +.bottom-card-image{ + display: block; + width: 24%; + height: 100%; +} + +.bottom-card-description{ + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.bottom-section{ + display: flex; + align-items: center; + text-align: center; + justify-content: center; + flex-direction: column; + gap: 50px; + margin: 0 0 116px; +} + +.bottom-section-text{ + width: 29%; + text-align: center; + +} + +.bottom-section-text-title{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-section-text-description{ + font-size: 16px; + line-height: 24px; +} + +.bottom-section-image-desktop{ + width: 71%; +} + +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + padding: 38px 0; + background: #000000; +} + +.page-footer-content{ + display: flex; + flex-direction: column; + width: 21%; + align-items: center; + text-align: center; +} + +.footer-icons{ + display: flex; + list-style: none; + margin-bottom: 16px; + justify-content: center; + gap: 16px; + width: 100%; +} + +.footer-link{ + display: flex; + width: 6%; +} + +.footer-text{ + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #BDBDBD; +} + +@media screen and (min-width: 2500px) { + .top-infocard-subtitle{ + font-size: 64px; + line-height: 78px; + } + .top-infocard-title{ + font-size: 96px; + line-height: 116px; + } + .bottom-section-text-title{ + font-size: 64px; + line-height: 78px; + } + + .top-infocard-description, + .top-card-description, + .bottom-card-description, + .bottom-section-text-description { + font-size: 32px; + line-height: 48px; + } + .footer-text{ + font-size: 20px; + line-height: 24px; + } +} + +@media screen and (min-width: 1025px) { + .top-banner-mobile, + .bottom-section-image-mobile{ + display: none; + } + +} + +@media screen and (max-width: 1024px) { + .top-banner-desktop, + .bottom-section-image-desktop{ + display: none; + } + .header-link{ + width: 55%; + } + .top-infocard-text{ + width: 86%; + margin: 72px 0 64px; + } + .top-infocard-subtitle{ + font-size: 20px; + line-height: 24px; + } + .top-infocard-title{ + font-size: 28px; + line-height: 34px; + } + .top-infocard-image{ + width: 58%; + margin: 0 0 91px; + } + .top-cards{ + display: grid; + grid-template-columns: repeat(1, 85%); + gap: 20px; + justify-content: center; + margin: 0 0 80px; + } + .top-card{ + padding: 36px 26px 28px; + gap: 24px; + } + + .mid-banners{ + margin: 0 0 112px; + } + .mid-banner-wrapper{ + display: grid; + grid-template-columns: repeat(2, 43%); + justify-content: center; + column-gap: 14px; + row-gap: 24px; + position: relative; + top: 32px; + } + .area2{ + grid-area: 1/1/1/1 ; + } + .area3{ + grid-area: 2/1/4/3; + } + .bottom-cards{ + display: grid; + grid-template-columns: repeat(1, 89%); + gap: 16px; + justify-content: center; + margin: 0 0 98px; + } + .bottom-card-image{ + display: block; + width: 29% + } + .bottom-section{ + flex-direction: column-reverse; + margin: 0 0 87px; + } + .bottom-section-image, + .bottom-section-image-mobile{ + width: 100%; + } + .bottom-section-text{ + width: 85%; + text-align: center; + } + .bottom-section-text-title{ + font-weight: 600; + font-size: 24px; + line-height: 29px; + } + .page-footer{ + padding: 32px 0; + } + .page-footer-content{ + width: 63%; + align-items: center; + } + +} \ No newline at end of file diff --git a/index.html b/index.html index ac29e02..3323e06 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,178 @@ + + + - Document - - + + + + Landing Page + + + + + +
+ + M3 Academy + + +
+ +
+
+
+ Imagem de um notebook + Imagem de um notebook +
+
+ +
+
+

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

+
+ + Tres icones de computadores interligados por setas + +
+ +
+
+ Imagem 1 + +

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

+ +
+ +
+ Imagem 2 + +

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

+ +
+ +
+ Imagem 3 + +

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

+ +
+
+ +
+
+
+ Notebook meio aberto primeiro angulo +
+ +
+ Notebook meio aberto segundo angulo +
+ +
+ Notebook meio aberto terceiro angulo +
+
+
+ +
+
+ Imagem 1 + +

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

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

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

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

+
+ +
+ + Imagem + Imagem + +
+ +
+ + + +
+ \ No newline at end of file