diff --git a/assets/imgs/bottom-banner-desktop.png b/assets/imgs/bottom-banner-desktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/imgs/bottom-banner-desktop.png differ diff --git a/assets/imgs/bottom-banner-mobile.png b/assets/imgs/bottom-banner-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/imgs/bottom-banner-mobile.png differ diff --git a/assets/imgs/main-banner-desktop.png b/assets/imgs/main-banner-desktop.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/assets/imgs/main-banner-desktop.png differ diff --git a/assets/imgs/main-banner-mobile.png b/assets/imgs/main-banner-mobile.png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/assets/imgs/main-banner-mobile.png differ diff --git a/assets/svgs/bottom-card-image01.svg b/assets/svgs/bottom-card-image01.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/svgs/bottom-card-image01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svgs/bottom-card-image02.svg b/assets/svgs/bottom-card-image02.svg new file mode 100644 index 0000000..a2c9fed --- /dev/null +++ b/assets/svgs/bottom-card-image02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svgs/bottom-card-image03.svg b/assets/svgs/bottom-card-image03.svg new file mode 100644 index 0000000..23a4b24 --- /dev/null +++ b/assets/svgs/bottom-card-image03.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svgs/bottom-card-image04.svg b/assets/svgs/bottom-card-image04.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/svgs/bottom-card-image04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svgs/facebook-icon.svg b/assets/svgs/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/svgs/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svgs/instagram-icon.svg b/assets/svgs/instagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/svgs/instagram-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svgs/m3-logo.svg b/assets/svgs/m3-logo.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/svgs/m3-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svgs/middle-card-image01.svg b/assets/svgs/middle-card-image01.svg new file mode 100644 index 0000000..0b697a9 --- /dev/null +++ b/assets/svgs/middle-card-image01.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svgs/middle-card-image02.svg b/assets/svgs/middle-card-image02.svg new file mode 100644 index 0000000..403305c --- /dev/null +++ b/assets/svgs/middle-card-image02.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svgs/middle-card-image03.svg b/assets/svgs/middle-card-image03.svg new file mode 100644 index 0000000..e2da7ac --- /dev/null +++ b/assets/svgs/middle-card-image03.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svgs/top-card01.svg b/assets/svgs/top-card01.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/svgs/top-card01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svgs/top-card02.svg b/assets/svgs/top-card02.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/svgs/top-card02.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/svgs/top-card03.svg b/assets/svgs/top-card03.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/svgs/top-card03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svgs/top-infocard-image.svg b/assets/svgs/top-infocard-image.svg new file mode 100644 index 0000000..64c1cf8 --- /dev/null +++ b/assets/svgs/top-infocard-image.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/svgs/youtube -icon.svg b/assets/svgs/youtube -icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/svgs/youtube -icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8edc367 --- /dev/null +++ b/index.html @@ -0,0 +1,196 @@ + + + + + + + + + + + + + Desafio 1 Landing Page + + + + + + + +
+ + Logo da M3 + +
+ +
+
+ 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 Superior +
+
+ +
+ +
+
+ Imagem do Primeiro Card Superior + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+
+ +
+
+ Imagem do Segundo Card Superior + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+
+ +
+
+ Imagem do Terceiro Card Superior + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+
+
+ +
+ +
+
+
+ Imagem do Primeiro Card Central +
+ +
+ Imagem do Segundo Card Central +
+ +
+ Imagem do Terceiro Card Central +
+
+
+ +
+ +
+
+ Imagem do Primeiro Card Inferior + +
+ 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 Inferior + +
+ 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 Inferior + +
+ 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 Inferior + +
+ 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 Inferior Desktop + Banner Inferior Mobile +
+
+ + + + + + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..46bd9b5 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,345 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +img{ + display: block; +} + +body{ + color: #000; + font-family: 'Inter', sans-serif; + text-align: center; +} + +.page-header{ + display: flex; + justify-content: center; + background: #000000; + padding: 29px 0; +} + +.main-banner, +.top-infocard-image, +.middle-card-image, +.bottom-banner{ + width: 100%; +} + +.top-infocard{ + margin: 73px 0 187px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 65px; +} + +.top-infocard-text{ + max-width: 40%; +} + +.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; + margin-bottom: 28px; +} + +.top-infocard-description, +.top-card-text, +.bottom-card-text{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.top-infocard-figure{ + min-width: 16%; +} + +.top-cards{ + display: flex; + gap: 21px; + justify-content: center; + margin-bottom: 80px; +} + +.top-card{ + width: 18%; + background: #FFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 35px 0 27px; +} + +.top-card-figure{ + display: flex; + flex-direction: column; + align-items: center; + gap: 27px; +} + +.top-card-text, +.bottom-card-text{ + width: 85%; +} + +.top-card-image{ + width: 29%; +} + +.middle-card-images{ + background: #E0E0E0; + margin-bottom: 191px; +} + +.middle-card-images-wrapper{ + position: relative; + bottom: -62px; + display: grid; + grid-template-columns: repeat(3, 29%); + gap: 39px; + justify-content: center; +} + +.bottom-cards{ + display: flex; + gap: 16px; + align-items: center; + justify-content: center; + margin-bottom: 108px; +} + +.bottom-card{ + width: 22%; + background: #FFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 35px 0 65px; +} + +.bottom-card-figure{ + display: flex; + flex-direction: column; + align-items: center; + gap: 14px; +} + +.bottom-card-image{ + width: 24%; +} + +#bottom-card-image04{ + width: 20%; +} + +.bottom-article{ + display: flex; + flex-direction: column; + align-items: center; + gap: 50px; + margin-bottom: 116px; +} + +.bottom-article-text{ + max-width: 29%; +} + +.bottom-article-figure{ + width: 71%; +} + +.bottom-article-title{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-article-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.page-footer{ + background: #000; + padding: 38px 0; + display: flex; + align-items: center; + flex-direction: column; + gap: 16px; +} + +.footer-list{ + display: flex; + justify-content: center; + list-style: none; + gap: 16px; +} + +.footer-text{ + color: #BDBDBD; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; +} + +@media screen and (max-width: 1024px){ + .main-banner-desktop, + .bottom-banner-desktop{ + display: none; + } + + .top-infocard{ + margin-bottom: 90px; + } + + .top-infocard-text{ + max-width: 86%; + } + + .top-infocard-subtitle{ + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title{ + font-size: 28px; + line-height: 34px; + margin-bottom: 46px; + } + + .top-infocard-figure{ + max-width: 58%; + } + + .top-infocard-image{ + max-width: 100%; + } + + .top-cards{ + flex-direction: column; + gap: 24px; + align-items: center; + } + + .top-card{ + min-width: 85%; + } + + .middle-card-images{ + margin-bottom: 112px; + } + + .middle-card-images-wrapper{ + grid-template-columns: repeat(2, 43%); + column-gap: 14px; + row-gap: 23px; + bottom: -32px; + } + + #middle-card02{ + order: -1; + } + + #middle-card03{ + grid-area: 2/1/2/3; + } + + .bottom-cards{ + flex-direction: column; + margin-bottom: 98px; + } + + .bottom-card{ + min-width: 89%; + } + + .bottom-card-image{ + width: 28%; + } + + #bottom-card-image04{ + width: 23%; + } + + .bottom-card-text{ + max-width: 82%; + font-size: 14px; + line-height: 24px; + } + + .bottom-article{ + flex-direction: column-reverse; + margin-bottom: 87px; + } + + .bottom-article-text{ + max-width: 85%; + } + + .bottom-article-title{ + font-size: 24px; + line-height: 29px; + } + + .bottom-article-figure{ + width: 100%; + } + + .page-footer{ + gap: 17px; + padding: 32px 0; + } + + .footer-text{ + max-width: 63%; + } +} + +@media screen and (min-width: 1025px){ + .main-banner-mobile, + .bottom-banner-mobile{ + display: none; + } + + .top-infocard-description{ + text-align: left; + } +} + +@media screen and (min-width: 2500px){ + .top-infocard-subtitle, + .bottom-article-title{ + font-size: 64px; + line-height: 78px; + } + + .top-infocard-title{ + font-size: 98px; + line-height: 116px; + } + + .top-infocard-description, + .top-card-text, + .bottom-card-text, + .bottom-article-description{ + font-size: 32px; + line-height: 48px; + } + + .footer-text{ + font-size: 20px; + line-height: 24px; + } +} \ No newline at end of file