diff --git a/assets/banner/banne-footer-mobile.png b/assets/banner/banne-footer-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/banner/banne-footer-mobile.png differ diff --git a/assets/banner/banner-footer.png b/assets/banner/banner-footer.png new file mode 100644 index 0000000..42190a3 Binary files /dev/null and b/assets/banner/banner-footer.png differ diff --git a/assets/banner/banner-header-mobile.png b/assets/banner/banner-header-mobile.png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/assets/banner/banner-header-mobile.png differ diff --git a/assets/banner/banner-header.png b/assets/banner/banner-header.png new file mode 100644 index 0000000..cab0a60 Binary files /dev/null and b/assets/banner/banner-header.png differ diff --git a/assets/img/computer-img-1.png b/assets/img/computer-img-1.png new file mode 100644 index 0000000..5041a6a Binary files /dev/null and b/assets/img/computer-img-1.png differ diff --git a/assets/img/computer-img-2.png b/assets/img/computer-img-2.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/assets/img/computer-img-2.png differ diff --git a/assets/img/computer-img-3.png b/assets/img/computer-img-3.png new file mode 100644 index 0000000..0bbb48c Binary files /dev/null and b/assets/img/computer-img-3.png differ diff --git a/assets/img/midle-computer.png b/assets/img/midle-computer.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/img/midle-computer.png differ diff --git a/assets/svg/Logo-M3Academy 1.svg b/assets/svg/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/svg/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/svg/coin-icon.svg b/assets/svg/coin-icon.svg new file mode 100644 index 0000000..ea11a3d --- /dev/null +++ b/assets/svg/coin-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/facebook-icon.svg b/assets/svg/facebook-icon.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/svg/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/intagram-icon.svg b/assets/svg/intagram-icon.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/svg/intagram-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/svg/laptop-icon.svg b/assets/svg/laptop-icon.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/svg/laptop-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svg/money-icon.svg b/assets/svg/money-icon.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/svg/money-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/svg/phone-icon.svg b/assets/svg/phone-icon.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/svg/phone-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/svg/shop-icon.svg b/assets/svg/shop-icon.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/svg/shop-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/svg/shopping-bag-icon.svg b/assets/svg/shopping-bag-icon.svg new file mode 100644 index 0000000..d330029 --- /dev/null +++ b/assets/svg/shopping-bag-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/svg/youtube-icon.svg b/assets/svg/youtube-icon.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/svg/youtube-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..9f4cf36 --- /dev/null +++ b/index.html @@ -0,0 +1,142 @@ + + + + + + + + + + + + + Challenge M3Academy + + + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+

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 alinhados. Um em cuma e dois embaixo, ligados por setas. + + +
+
+
+ icone de shopping +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ icone de mão segurando uma moeda +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+
+
+ +
+ + +
+ +
+
+
+ Icone de cédulas. +
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.
+
+
+
+
+ icone de mão segurando uma moeda +
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.
+
+
+
+
+ icone de laptop aberto. +
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.
+
+
+
+
+ icone de um smartphone +
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 de um oculos. de frente para uma tela de computador. +
+ +
+ imagem de um oculos. de frente para uma tela de computador. +
+ +
+
+ + + + \ No newline at end of file diff --git a/style/style.css b/style/style.css new file mode 100644 index 0000000..00cc7ed --- /dev/null +++ b/style/style.css @@ -0,0 +1,471 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Inter', sans-serif; +} + + +/* variaveis de cores */ + +:root { + --black: #000000; + --white: #FFFFFF; + --grey-body: #E5E5E5; + --grey: #E0E0E0; + --grey-footer: #BDBDBD; +} + + +/* HEADER DA PAGINA */ + +header { + height: 100px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--black); +} + +img { + display: block; + width: 100%; +} + +.header-logo { + display: block; +} + + +/* BANNER DESKTOP */ + +.banner-img { + width: 100%; +} + +.banner-img-mobile { + display: none; +} + + +/* AREA ABAIXO DO BANNER */ + +.container-midle-flex { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 74px; +} + +.container-midle-title { + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.container-midle-subtitle { + font-weight: 400; + font-size: 32px; + line-height: 40px; + text-transform: uppercase; +} + +.container-midle-paragraph { + width: 100%; + max-width: 766px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 28px 28px 74px; +} + +.container-midle-img { + width: 16.40625%; + height: 16.40625%; + max-width: 315px; + display: block; +} + + +/* GRID INFO CARD TRIPLE */ + +.container-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + gap: 0px 22px; + grid-auto-flow: row; + grid-template-areas: "card-1 card-2 card-3 card-4"; + justify-content: center; + width: 100%; + padding: 10% 22% 4%; +} + +.container-infocard { + grid-template-columns: repeat(4, 1fr); + grid-template-areas: "card-1 card-2 card-3 card-4"; + padding: 130px 72px 108px; +} + +.card-1 { + grid-area: card-1; +} + +.card-2 { + grid-area: card-2; +} + +.card-3 { + grid-area: card-3; +} + +.card-4 { + grid-area: card-4; +} + +.card-1, +.card-2, +.card-3, +.card-4 { + background: var(--white); + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding: 36px 26px 24px; +} + +.icon-card { + width: 6.409rem; + height: 6.409rem; + display: block; + margin: 0 auto; + margin-bottom: 28px; +} + +.subtitle-card { + width: 100%; + min-width: 72%; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} + + +/* Banner Mosaico */ + +.wrapper-banner { + width: 100%; + background-color: var(--grey); + display: flex; + justify-content: center; + align-items: center; +} + +.banner-mosaic { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-template-areas: "mosaic-img1 mosaic-img2 mosaic-img3"; + gap: 40px; + padding: 0 72px; + transform: translateY(60px); + z-index: 999; +} + +.mosaic-img1 { + grid-area: mosaic-img1; +} + +.mosaic-img2 { + grid-area: mosaic-img2; +} + +.mosaic-img3 { + grid-area: mosaic-img3; +} + +.mosaic-wrapper-img { + width: 100%; + display: block; +} + + +/* AREA BOTTON, ANTES DO FOOTER */ + +.bottom-flex { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 70%; + margin: 0 auto; +} + +.bottom-subtitle { + width: 100%; + min-width: 30%; + font-weight: 600; + font-size: 32px; + line-height: 24px; + text-align: center; +} + +.bottom-paraphase { + width: 100%; + max-width: 40%; + text-align: center; + font-size: 16px; + font-weight: 400; + line-height: 24px; + margin: 0 auto; + margin-bottom: 50px; +} + +.botton-img-mobile { + display: none; +} + +footer { + width: 100%; + padding: 38px 38%; + margin-top: 116px; + background: var(--black); +} + +li { + list-style: none; +} + +.container-contact { + display: flex; + justify-content: center; + flex-direction: column; +} + +.contact { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 0 38%; + width: 100px; +} + +.icon-contact { + /* padding: 0 10px; */ + width: 26px; + height: 26px; +} + +.footer-text { + color: var(--grey-footer); + min-width: 398px; + font-size: 10px; + margin: 0 auto; + margin-top: 18px; + text-transform: uppercase; +} + + +/* Medias Queries*/ + +@media screen and (min-width:2500px) { + + /* header */ + .container-midle-title { + font-size: 96px; + line-height: 116px; + } + + .container-midle-subtitle { + font-size: 64px; + line-height: 80px; + } + + .container-midle-paragraph { + font-size: 32px; + line-height: 48px; + max-width: 40%; + } + + /* cards */ + .subtitle-card { + font-weight: 400; + font-size: 32px; + line-height: 48px; + } + + .container-cards { + padding: 6% 30% 4%; + } + + /* Container abaixo do mobile */ + .bottom-subtitle { + font-size: 64px; + line-height: 48px; + } + + .bottom-paraphase { + font-size: 32px; + line-height: 48px; + } + + .contact { + margin: 0px 45%; + width: 100px; + } + + .footer-text { + font-size: 20px; + } +} + +@media screen and (max-width:1024px) { + + /* BANNER MOBILE */ + .banner-img-desktop { + display: none; + } + + .banner-img-mobile { + display: block; + } + + /* AREA ABAIXO DO BANNER */ + .container-midle { + width: 100%; + } + + /* AREA ABAIXO DO BANNER */ + .container-midle-flex { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .container-midle-title { + font-size: 28px; + line-height: 34px; + } + + .container-midle-subtitle { + font-size: 20px; + line-height: 24px; + } + + .container-midle-paragraph { + max-width: 86%; + font-size: 16px; + line-height: 24px; + text-align: center; + } + + .container-midle-img { + width: 58%; + height: 58%; + max-width: 240px; + display: block; + } + + /* Area dos tres cards */ + .container-cards { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + gap: 24px; + grid-auto-flow: row; + grid-template-areas: "card-1" "card-2" "card-3"; + justify-content: center; + padding: 90px 32px 80px; + } + + .container-infocard { + grid-template-rows: repeat(4, 1fr); + grid-template-areas: "card-1" "card-2" "card-3" "card-4"; + } + + .subtitle-card { + max-width: 72%; + margin: 0 auto; + text-align: center; + } + + /*REGIAO DO BANNER MOSAICO */ + .banner-mosaic { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 2fr; + grid-template-areas: "mosaic-img2 mosaic-img1" "mosaic-img3 mosaic-img3"; + gap: 24px 14px; + padding: 0 24px; + transform: translateY(32px); + } + + .img1, + .img2 { + width: 100%; + height: 100%; + min-width: 50%; + min-height: 50%; + } + + .img3 { + min-width: 90%; + min-height: 90%; + } + + /* AREA BOTTON, ANTES DO FOOTER */ + .botton-img-desktop { + display: none; + } + + .botton-img-mobile { + display: block; + width: 100%; + } + + .bottom-paraphase { + max-width: 84%; + } + + .bottom-subtitle { + max-width: 76%; + margin: 50px 12% 10px; + font-size: 24px; + line-height: 30px; + text-align: center; + } + + .bottom-flex { + flex-direction: column-reverse; + width: 100%; + } + + /* FOOTER */ + footer { + padding: 32px 76px; + } + + .footer-text { + color: var(--grey-footer); + font-size: 10px; + min-width: 64%; + margin-top: 10px; + text-align: center; + } + + .contact { + display: flex; + flex-direction: row; + width: 104px; + max-width: 230px; + margin: 0 auto; + justify-content: space-around; + } +} \ No newline at end of file