diff --git a/assets/CSS/main.css b/assets/CSS/main.css new file mode 100644 index 0000000..6de748c --- /dev/null +++ b/assets/CSS/main.css @@ -0,0 +1,354 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap%27'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Inter", sans-serif; + color: #000000; +} + +.page-header { + display: flex; + justify-content: center; + background: #000000; + padding: 28px 0; +} + +.header-logo { + display: block; +} + +.main-banner-desktop, .main-banner-mobile { + display: block; + width: 100%; +} + +.top-infocard { + display: flex; + align-items: center; + justify-content: center; + padding: 72px 0 0 0; +} + +.top-infocard-text { + max-width: 768px; +} + +.top-infocard-subtitle { + text-transform: uppercase; + font-size: 32px; + font-weight: 400; + text-align: center; +} + +.top-infocard-title { + text-transform: uppercase; + font-size: 48px; + font-weight: 500; + margin-bottom: 24px; + text-align: center; +} + +.top-infocard-description { + font-size: 16px; + text-align: left; + line-height: 24px; +} + +.top-infocard-image { + display: flex; + flex-direction: column; + align-items: center; + padding: 90px 0 180px; + margin: 0 auto; +} + +.top-cards { + display: grid; + grid-template-columns: repeat(3,max-content); + gap: 22px; + justify-content: center; + width: 100%; +} +.top-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: 100%; +} + +.top-card-image { + display: block; + margin-bottom: 26px; +} + +.top-card-description { + display: flex; + margin: 0 auto; + max-width: 300px; + font-weight: 400; + font-size: 16px; + text-align: center; +} + +.middle-banner { + background: #E0E0E0; + margin: 80px 0 0 0; + width: 100%; +} + +.middle-banner-container { + display: flex; + justify-content: center; + position: relative; + gap: 40px; + width: 100%; + padding: 0 72px; + bottom: -62px; +} + +.middle-banner-image img { + width: 100%; + max-width: 566px; +} + +.bottom-cards { + display: grid; + grid-template-columns: repeat(auto-fill,432px); + gap: 16px; + justify-content: center; + width: 100%; + padding: 192px 72px 110px 72px; +} +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + width: 100%; +} + +.bottom-card-image { + display: block; + margin-bottom: 26px; +} + +.bottom-card-description { + display: flex; + margin: 0 auto; + max-width: 368px; + font-weight: 400; + font-size: 16px; + text-align: center; +} + +.bottom-infocard { + display: block; +} + +.bottom-infocard-text { + max-width: 550px; + margin: 0 auto; +} + +.bottom-infocard-title { + font-size: 32px; + font-weight: 600; + text-align: center; +} + +.bottom-infocard-description { + font-size: 16px; + text-align: center; + line-height: 24px; +} + +.bottom-image-desktop { + max-width: 1360px; + padding: 50px 0 116px 0; + margin: 0 auto; +} + +.bottom-image-mobile { + max-width: 414px; + margin: 0 auto; + padding: 0; + width: 100%; + height: auto; +} + +.bottom-infocard-image-desktop, .bottom-infocard-image-mobile { + width: 100%; +} + +.page-footer { + display: flex; + flex-direction: column; + align-items: center; + background: #000000; + padding: 38px 0; +} + +.footer-icons { + display: flex; + list-style: none; + margin-bottom: 16px; + align-items: center; +} + +.footer-icon, .footer-icon-3 { + margin: 0 8px; +} + +.footer-text { + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #BDBDBD; + text-align: center; + +} + +@media screen and (min-width:2375px) { + .bottom-cards { + grid-template-columns: repeat(4,max-content); + } +} + +@media screen and (min-width: 769px) and (max-width: 1200px) { + .top-cards { + grid-template-columns: repeat(2, max-content); + } + + .bottom-cards { + grid-template-columns: repeat(2,max-content); + } +} + +@media screen and (max-width:1024px) { + .middle-banner-container { + display: grid; + grid-template-areas: + "b a" + "c c"; + row-gap: 24px; + column-gap: 14px; + padding: 0 24px; + bottom: -32px; + } + + .middle-banner-image img { + max-width: unset; + } + + .middle-banner-image.a { + grid-area: a; + } + + .middle-banner-image.b { + grid-area: b; + } + + .middle-banner-image.c { + grid-area: c; + } +} + +@media screen and (max-width:992px) { + .middle-banner { + flex-wrap: wrap; + } +} + +@media screen and (max-width:768px) { + + .top-infocard { + flex-direction: column; + padding: 90px 0 0 0; + } + + .top-infocard-subtitle { + font-size: 20px; + } + + .top-infocard-title { + margin-bottom: 20px; + font-size: 28px; + } + + .top-infocard-description { + padding: 0 28px 0 28px; + text-align: center; + } + + .top-infocard-image { + width: 100%; + max-width: 240px; + padding-top: 64px; + padding-bottom: 90px; + } + + .top-cards { + grid-template-columns: 1fr; + padding: 0 32px ; + } + + .middle-banner { + padding: 32px 43px 32px 24px; + align-items: center; + } + + .bottom-cards { + grid-template-columns: 1fr; + } + + .bottom-infocard-title { + max-width: 315px; + margin: 0 auto; + padding: 0 0 9px 0; + } + + .bottom-infocard-description { + max-width: 350px; + margin: 0 auto; + } +} + +@media screen and (min-width: 415px) { + .main-banner-mobile, .bottom-image-mobile { + display: none; + } +} +@media screen and (max-width: 414px) { + .main-banner-desktop, .bottom-image-desktop { + display: none; + } + + .bottom-cards { + padding: 80px 24px 98px 24px; + } + + .bottom-infocard { + display: flex; + flex-direction: column-reverse; + } + + .bottom-infocard-title { + font-size: 24px; + } + + .bottom-infocard-description { + padding-bottom: 88px; + } + + .bottom-image-mobile { + margin-bottom: 50px; + } +} diff --git a/assets/images/Banner Infocard Topo.png b/assets/images/Banner Infocard Topo.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/assets/images/Banner Infocard Topo.png differ diff --git a/assets/images/Banner-principal-mobile.png b/assets/images/Banner-principal-mobile.png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/assets/images/Banner-principal-mobile.png differ diff --git a/assets/images/Banner-principal.jpg b/assets/images/Banner-principal.jpg new file mode 100644 index 0000000..9d7f375 Binary files /dev/null and b/assets/images/Banner-principal.jpg differ diff --git a/assets/images/Group.png b/assets/images/Group.png new file mode 100644 index 0000000..2edf5fb Binary files /dev/null and b/assets/images/Group.png differ diff --git a/assets/images/Logo-M3Academy 1.svg b/assets/images/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/images/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/Rectangle 15.png b/assets/images/Rectangle 15.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/images/Rectangle 15.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..f4e55c5 Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ diff --git a/assets/images/coin 1.png b/assets/images/coin 1.png new file mode 100644 index 0000000..cfbd0f1 Binary files /dev/null and b/assets/images/coin 1.png differ diff --git a/assets/images/facebook-logo.png b/assets/images/facebook-logo.png new file mode 100644 index 0000000..170d82f Binary files /dev/null and b/assets/images/facebook-logo.png differ diff --git a/assets/images/instagram-icon-m3.png b/assets/images/instagram-icon-m3.png new file mode 100644 index 0000000..922af3c Binary files /dev/null and b/assets/images/instagram-icon-m3.png differ diff --git a/assets/images/laptop 1.png b/assets/images/laptop 1.png new file mode 100644 index 0000000..6dff7a4 Binary files /dev/null and b/assets/images/laptop 1.png differ diff --git a/assets/images/middle-image1.png b/assets/images/middle-image1.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/assets/images/middle-image1.png differ diff --git a/assets/images/middle-image2.png b/assets/images/middle-image2.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/images/middle-image2.png differ diff --git a/assets/images/middle-image3.png b/assets/images/middle-image3.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/images/middle-image3.png differ diff --git a/assets/images/money (1) 2.png b/assets/images/money (1) 2.png new file mode 100644 index 0000000..7cd0f0f Binary files /dev/null and b/assets/images/money (1) 2.png differ diff --git a/assets/images/shop 1.png b/assets/images/shop 1.png new file mode 100644 index 0000000..4b144a6 Binary files /dev/null and b/assets/images/shop 1.png differ diff --git a/assets/images/shopping-bag (1) 1.png b/assets/images/shopping-bag (1) 1.png new file mode 100644 index 0000000..55c9060 Binary files /dev/null and b/assets/images/shopping-bag (1) 1.png differ diff --git a/assets/images/youtube-logo.png b/assets/images/youtube-logo.png new file mode 100644 index 0000000..2227a63 Binary files /dev/null and b/assets/images/youtube-logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..02b08ac --- /dev/null +++ b/index.html @@ -0,0 +1,234 @@ + + + + + + + Desafio 1: 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. +

+ + Banner Infocard 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. +
+
+
+ +
+
+
+ notebook-image-1 +
+ +
+ notebook-image-2 +
+ +
+ notebook-image-3 +
+
+
+ +
+
+ Imagem do Primeiro Card Debaixo +
+ 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 Debaixo +
+ 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 Debaixo +
+ 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 Debaixo +
+ 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 Infocard Debaixo-Desktop +
+ +
+ Banner Infocard Debaixo-Mobile +
+ +
+
+ + + + \ No newline at end of file