diff --git a/assets/images/banner-principal-desktop.png b/assets/images/banner-principal-desktop.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/assets/images/banner-principal-desktop.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/bottom-aside-picture-desktop.png b/assets/images/bottom-aside-picture-desktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/images/bottom-aside-picture-desktop.png differ diff --git a/assets/images/bottom-aside-picture-mobile.png b/assets/images/bottom-aside-picture-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/images/bottom-aside-picture-mobile.png differ diff --git a/assets/images/galeria-photo-1.png b/assets/images/galeria-photo-1.png new file mode 100644 index 0000000..834d573 Binary files /dev/null and b/assets/images/galeria-photo-1.png differ diff --git a/assets/images/galeria-photo-2.png b/assets/images/galeria-photo-2.png new file mode 100644 index 0000000..6561eb0 Binary files /dev/null and b/assets/images/galeria-photo-2.png differ diff --git a/assets/images/galeria-photo-3.png b/assets/images/galeria-photo-3.png new file mode 100644 index 0000000..8eba01f Binary files /dev/null and b/assets/images/galeria-photo-3.png differ diff --git a/assets/images/top-infocard-computers.png b/assets/images/top-infocard-computers.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/assets/images/top-infocard-computers.png differ diff --git a/assets/styles/styles.css b/assets/styles/styles.css new file mode 100644 index 0000000..1d2f75e --- /dev/null +++ b/assets/styles/styles.css @@ -0,0 +1,349 @@ +/*resets da página*/ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', sans-serif; + color: #000000; +} +/*Definindo estilos gerais*/ +.bottom-aside, +.galeria-photo, +.galeria-content, +.content, +.top-infocard, +.page-banner-principal-mobile, +.page-logo, +.page-banner-principal-desktop{ + width: 100%; +} +/*Estilo menu/header*/ +.page-logo{ + display: flex; + align-items: center; + justify-content: center; + padding: 29px 0; + background: #000000; +} + +.logo-m3academy{ + display: block; +} + +/*Banner mobile*/ + +.page-banner-principal-mobile{ + display: none; +} + +/*Estilo do top infocard*/ + +.top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 73px 0px 0px 0px; +} + +.top-infocard-text{ + width: 40%; +} + +.top-infocard-text > h2,h1{ + text-align: center; + text-transform: uppercase; +} + +.top-infocard-text h2{ + font-weight: 400; + font-size: 32px; + line-height: 39px; +} + +.top-infocard-text h1{ + font-weight: 500; + font-size: 48px; + line-height: 58px; +} + +.top-infocard-text p{ + font-size: 16px; + line-height: 24px; +} + +.top-infocard-image{ + width: 16%; + padding: 65px 0 0 0; +} + +/*Estilo do primeiro setor de boxes e do segundo*/ +.content{ + display: flex; + align-content: center; + justify-content: center; + gap: 20px; + padding: 129px 0; +} + +.box{ + display: flex; + flex-direction: column; + align-items: center; + justify-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.box-text{ + margin-top: 27px; + width: 84%; + text-align: center; + font-size: 16px; + line-height: 24px; +} + +.box1{ + width: 18%; + padding: 35px 26px 27px 26px; +} + +.box2{ + width: 22%; + padding: 35px 32px 65px 32px; +} + +/*Estilo da galeria*/ + +.galeria-content{ + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-content: center; + padding: 0 72px; + gap: 36px; + background: #E0E0E0; +} + +.galeria-photo{ + position: relative; + bottom: -62px; +} + +/*Estilo do aside de baixo*/ + +.bottom-aside{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.bottom-text{ + width: 28%; + text-align: center; + margin-bottom: 50px; +} + +.bottom-text h3{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.bottom-text p{ + font-size: 16px; + line-height: 24px; +} + +.bottom-image-desktop{ + display: block; + margin: 0 auto; + width: 70%; +} + +.bottom-image-mobile{ + display: none; +} + +.footer-page{ + display: block; + margin-top: 116px; + padding: 38px 0; + background: #000000; +} + +.footer-image, .footer-text{ + display: flex; + align-items: center; + justify-content: center; + gap: 16px; +} + +.footer-text{ + font-size: 10px; + line-height: 12px; + margin-top: 16px; + text-transform: uppercase; + color: #BDBDBD; +} + +@media screen and (max-width: 412px){ + .top-infocard-text{ + width: 100%; + } + + .box1{ + width: 100%; + } + + .box2{ + width: 100%; + } + + .footer-text{ + padding: 0 76px; + text-align: center; + } + +} + +@media screen and (max-width: 1024px){ + .page-banner-principal-mobile{ + display: block; + } + + .page-banner-principal-desktop{ + display: none; + } + + .top-infocard{ + padding: 73px 28px 0px 28px; + } + + .top-infocard-text{ + width: 86%; + text-align: center; + } + + .top-infocard-text h2{ + font-size: 20px; + line-height: 24px; + } + + .top-infocard-text h1{ + font-size: 28px; + line-height: 34px; + } + + .top-infocard-image{ + width: 58%; + } + + .content{ + display: flex; + flex-direction: column; + padding: 90px 32px; + row-gap: 20px; + } + + .box{ + width: 100%; + } + + .galeria-content{ + grid-template-columns: repeat(2, 1fr); + column-gap: 14px; + row-gap: 24px; + padding: 0 23px; + } + + .galeria-photo{ + bottom: -32px; + } + + .first{ + grid-column: 2; + } + + .second{ + grid-column: 1; + grid-row: 1; + } + + .big{ + grid-column: 1 / -1; + } + + .bottom-aside{ + display: flex; + flex-direction: column-reverse; + } + + .bottom-text { + width: 84%; + margin-bottom: 0; + margin-top: 50px; + } + + .bottom-text h3{ + font-size: 24px; + line-height: 29px; + } + + .bottom-image-desktop{ + display: none; + } + + .bottom-image-mobile{ + display: block; + width: 100%; + } + + .footer-text{ + text-align: center; + } + +} + +@media screen and (min-width: 2500px){ + .top-infocard-text p{ + font-size: 24px; + line-height: 32px; + } + + .box-text{ + font-size: 24px; + line-height: 32px; + } + + .bottom-text p{ + font-size: 24px; + line-height: 32px + } + + .bottom-image-desktop{ + width: 100%; + } + + .footer-text{ + font-size: 16px; + line-height: 24px; + } +} + +@media screen and (min-width: 4000px){ + .top-infocard-text p{ + font-size: 32px; + line-height: 40px; + } + + .box-text{ + font-size: 32px; + line-height: 40px; + } + + .bottom-text p{ + font-size: 32px; + line-height: 40px; + } +} \ No newline at end of file diff --git a/assets/svgs/box-figure-bag.svg b/assets/svgs/box-figure-bag.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/svgs/box-figure-bag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/svgs/box-figure-coin.svg b/assets/svgs/box-figure-coin.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/svgs/box-figure-coin.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svgs/box-figure-laptop.svg b/assets/svgs/box-figure-laptop.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/svgs/box-figure-laptop.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svgs/box-figure-money.svg b/assets/svgs/box-figure-money.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/svgs/box-figure-money.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svgs/box-figure-phone.svg b/assets/svgs/box-figure-phone.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/svgs/box-figure-phone.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svgs/box-figure-shop.svg b/assets/svgs/box-figure-shop.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/svgs/box-figure-shop.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svgs/footer-figure-facebook.svg b/assets/svgs/footer-figure-facebook.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/svgs/footer-figure-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svgs/footer-figure-instagram.svg b/assets/svgs/footer-figure-instagram.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/svgs/footer-figure-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svgs/footer-figure-youtube.svg b/assets/svgs/footer-figure-youtube.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/svgs/footer-figure-youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svgs/logo-m3academy.svg b/assets/svgs/logo-m3academy.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/svgs/logo-m3academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2b3ca86 --- /dev/null +++ b/index.html @@ -0,0 +1,119 @@ + + + + + + + + + + + M3 Academy + + + + + + + + + +
+
+ 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. +

+
+ Computadores do card de cima +
+ + +
+
+
Loja da box um
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+
Sacola da box dois
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+
Moeda da box três
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ + +
+ Foto da Galeria 1 + Foto da Galeria 2 + Foto da Galeria 3 +
+ + +
+
+
Dinheiro da box quatro
+
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.
+
+ +
+
Moeda da box cinco
+
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.
+
+ +
+
Laptop da box seis
+
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.
+
+ +
+
Celular da box sete
+
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.
+
+
+ + + + +
+ + \ No newline at end of file