diff --git a/assets/images/Group.svg b/assets/images/Group.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/images/Group.svg @@ -0,0 +1,6 @@ + + + + + + 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/banner-desktop.svg b/assets/images/banner-desktop.svg new file mode 100644 index 0000000..b414c27 --- /dev/null +++ b/assets/images/banner-desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/banner-mobile.svg b/assets/images/banner-mobile.svg new file mode 100644 index 0000000..bcf9505 --- /dev/null +++ b/assets/images/banner-mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/bottom-banner-desktop.svg b/assets/images/bottom-banner-desktop.svg new file mode 100644 index 0000000..b02651a --- /dev/null +++ b/assets/images/bottom-banner-desktop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/bottom-banner-mobile.svg b/assets/images/bottom-banner-mobile.svg new file mode 100644 index 0000000..1773c5e --- /dev/null +++ b/assets/images/bottom-banner-mobile.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/coin.svg b/assets/images/coin.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/images/coin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/facebook-logo.svg b/assets/images/facebook-logo.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/images/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/fxemoji_threenetworkedcomputers.svg b/assets/images/fxemoji_threenetworkedcomputers.svg new file mode 100644 index 0000000..aa8344a --- /dev/null +++ b/assets/images/fxemoji_threenetworkedcomputers.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/image-01.svg b/assets/images/image-01.svg new file mode 100644 index 0000000..24fb77f --- /dev/null +++ b/assets/images/image-01.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/image-02.svg b/assets/images/image-02.svg new file mode 100644 index 0000000..403305c --- /dev/null +++ b/assets/images/image-02.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/image-03.svg b/assets/images/image-03.svg new file mode 100644 index 0000000..e2da7ac --- /dev/null +++ b/assets/images/image-03.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/images/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/laptop.svg b/assets/images/laptop.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/images/laptop.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/money.svg b/assets/images/money.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/images/money.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/shop.svg b/assets/images/shop.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/images/shop.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/shopping-bag.svg b/assets/images/shopping-bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/images/shopping-bag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/youtube 2.svg b/assets/images/youtube 2.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/images/youtube 2.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/styles/styles.css b/assets/styles/styles.css new file mode 100644 index 0000000..c344b13 --- /dev/null +++ b/assets/styles/styles.css @@ -0,0 +1,422 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Inter", sans-serif; + color: #000000; +} + +header { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100px; + background: #000000; +} + +/* Estilos do banner superior */ + +.banner-desktop { + display: flex; + justify-content: center; + width: 100%; +} + +.banner-desktop figure img { + display: block; + width: 100%; +} + +.banner-mobile { + display: none; +} + +/* Estilos do inforcard superior */ + +.infocard { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.infocard-title { + display: flex; + flex-direction: column; + align-items: center; + margin: 74px 0; + width: 80%; +} + +.infocard h2 { + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; +} + +.infocard h1 { + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.infocard-paragraph { + display: flex; + justify-content: center; + width: 100%; +} + +.infocard p { + display: flex; + justify-content: center; + font-size: 16px; + line-height: 24px; + margin-top: 28px; + width: 100%; +} + +.infocard figure { + display: flex; + justify-content: center; + margin-bottom: 90px; +} + +/* Estilos do top cards */ + +.top-cards { + display: flex; + justify-content: center; + margin: 90px 0 80px; + width: 100%; +} + +.top-cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + justify-content: center; + gap: 20px; + width: 57%; +} + +.top-cards-container div { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 35px 26px 26px; + width: 100%; +} + +.top-cards-container img { + display: block; + margin-bottom: 27px; +} + +.top-cards-container p { + text-align: center; + font-size: 16px; + line-height: 24px; +} + +/* Estilos da galeria */ + +.gallery { + display: flex; + justify-content: center; + width: 100%; + background: #e0e0e0; + margin-bottom: 190px; +} + +.gallery-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(31%, 1fr)); + justify-content: center; + gap: 40px; + width: 92%; +} + +.gallery-container figure { + display: flex; + justify-content: center; + position: relative; + top: 60px; + width: 100%; +} + +.gallery-container img { + width: 100%; +} + +/* Estilos do bottom cards */ + +.bottom-cards { + display: flex; + justify-content: center; + margin-bottom: 108px; + width: 100%; +} + +.bottom-cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(415px, 1fr)); + justify-content: center; + gap: 16px; + width: 92%; +} + +.bottom-cards-container div { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + padding: 35px 32px 65px 32px; + width: 100%; +} + +.bottom-cards-container img { + display: block; + margin-bottom: 15px; +} + +.bottom-cards-container p { + text-align: center; + font-size: 16px; + line-height: 24px; +} + +/* Estilos do infocard inferior desktop*/ + +.bottom-ifocard-desktop { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 116px; + width: 100%; +} + +.bottom-ifocard-desktop img { + width: 100%; +} + +.bottom-ifocard-desktop-container { + display: flex; + justify-content: center; + text-align: center; + width: 70%; + margin-bottom: 50px; +} + +.bottom-ifocard-desktop-container div { + width: 40%; +} + +.bottom-ifocard-desktop-container h1 { + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-ifocard-desktop-container p { + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.bottom-ifocard-mobile { + display: none; +} + +/* Estilos do footer */ + +footer { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + background: #000000; +} + +footer p { + font-size: 10px; + line-height: 12px; + text-align: center; + text-transform: uppercase; + color: #bdbdbd; + margin-bottom: 38px; +} + +.footer-container div { + display: flex; + justify-content: center; + gap: 16px; + margin: 38px 0 16px; +} + +/* Media queries */ + +@media (min-width: 1920px) { + .top-cards-container { + display: flex; + } + + .bottom-cards-container { + display: flex; + } +} + +@media (min-width: 1623px) and (max-width: 1912px) { + .top-cards-container { + width: 75%; + } +} + +@media (min-width: 1264px) and (max-width: 1622px) { + .top-cards-container { + width: 90%; + } +} + +@media (min-width: 600px) and (max-width: 1123px) { + .bottom-ifocard-desktop-container div { + width: 75%; + } +} + +@media (min-width: 415px) and (max-width: 599px) { + .gallery-container { + grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); + } + + .gallery-container img { + width: 94%; + } + + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } + + .bottom-ifocard-desktop-container div { + width: 85%; + } +} + +/* Estilos mobile */ + +@media (max-width: 414px) { + .banner-desktop { + display: none; + } + + .banner-mobile { + display: flex; + justify-content: center; + width: 100%; + } + + .banner-mobile figure img { + width: 100%; + } + + .infocard div { + width: 86%; + } + + .infocard h2 { + font-size: 20px; + line-height: 24px; + } + + .infocard h1 { + font-size: 28px; + line-height: 34px; + } + + .infocard figure img { + width: 58%; + } + + .infocard p { + text-align: center; + } + + .top-cards { + margin-top: 0; + } + + .gallery { + margin-bottom: 112px; + } + + .gallery-container { + gap: 24px 14px; + } + + .gallery-container figure { + top: 30px; + } + + .image03 { + position: relative; + left: 54%; + } + + .image03 img { + width: 208%; + } + + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } + + .bottom-ifocard-desktop { + display: none; + } + + .bottom-ifocard-mobile { + display: flex; + flex-direction: column; + margin-bottom: 87px; + } + + .bottom-ifocard-mobile img { + width: 100%; + } + + .bottom-ifocard-mobile-container { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 0 32px; + } + + .bottom-ifocard-mobile-container h1 { + margin: 50px 0 9px; + } + + .footer-container { + width: 63%; + } +} + +@media (min-width: 350px) and (max-width: 380px) { + .top-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } +} + +@media (min-width: 280px) and (max-width: 349px) { + .top-cards-container { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..db6e6d3 --- /dev/null +++ b/index.html @@ -0,0 +1,256 @@ + + + + + + + + + + + + + Landing Page Desafio + + + + + + +
+ + Logo da M3 Academy + +
+ + + +
+ + + + + + + + + + +
+
+

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

+
+
+
+ Três computadores em rede +
+
+ + + +
+
+
+
+ Ícone de loja +
+

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

+
+
+
+ Ícone de uma sacola +
+

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

+
+
+
+ Ícone de uma moeda sobre uma mão +
+

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

+
+
+
+ + + +
+
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+
+
+
+ Ícone de dinheiro +
+

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

+
+
+
+ Ícone de uma moeda sobre uma mão +
+

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

+
+
+
+ Ícone de um laptop +
+

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

+
+
+
+ Ícone de um celular +
+

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

+
+
+
+ +
+
+ + + +
+
+ +
+
+

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

+
+
+
+ + + + + +