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