diff --git a/Assets/Images/Banner-bottom-mobile.png b/Assets/Images/Banner-bottom-mobile.png
new file mode 100644
index 0000000..50df8d7
Binary files /dev/null and b/Assets/Images/Banner-bottom-mobile.png differ
diff --git a/Assets/Images/Banner-midle-first.png b/Assets/Images/Banner-midle-first.png
new file mode 100644
index 0000000..23fd072
Binary files /dev/null and b/Assets/Images/Banner-midle-first.png differ
diff --git a/Assets/Images/Banner-midle-mobile.png b/Assets/Images/Banner-midle-mobile.png
new file mode 100644
index 0000000..e7b1c0b
Binary files /dev/null and b/Assets/Images/Banner-midle-mobile.png differ
diff --git a/Assets/Images/Banner-midle-second.png b/Assets/Images/Banner-midle-second.png
new file mode 100644
index 0000000..4544597
Binary files /dev/null and b/Assets/Images/Banner-midle-second.png differ
diff --git a/Assets/Images/Banner-midle-third.png b/Assets/Images/Banner-midle-third.png
new file mode 100644
index 0000000..a12898d
Binary files /dev/null and b/Assets/Images/Banner-midle-third.png differ
diff --git a/Assets/Images/Banner-principal-desktop.png b/Assets/Images/Banner-principal-desktop.png
new file mode 100644
index 0000000..67dc789
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..2da3a66
Binary files /dev/null and b/Assets/Images/Banner-principal-mobile.png differ
diff --git a/Assets/Images/Bannner-bottom-desktop.png b/Assets/Images/Bannner-bottom-desktop.png
new file mode 100644
index 0000000..74d0711
Binary files /dev/null and b/Assets/Images/Bannner-bottom-desktop.png differ
diff --git a/Assets/SVG/Cellphone-icon.svg b/Assets/SVG/Cellphone-icon.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/Assets/SVG/Cellphone-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
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/Computer-image-desktop.svg b/Assets/SVG/Computer-image-desktop.svg
new file mode 100644
index 0000000..aa8344a
--- /dev/null
+++ b/Assets/SVG/Computer-image-desktop.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Assets/SVG/Computer-image-mobile.svg b/Assets/SVG/Computer-image-mobile.svg
new file mode 100644
index 0000000..f54ff1e
--- /dev/null
+++ b/Assets/SVG/Computer-image-mobile.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/Assets/SVG/Facebook-logo.svg b/Assets/SVG/Facebook-logo.svg
new file mode 100644
index 0000000..061ff85
--- /dev/null
+++ b/Assets/SVG/Facebook-logo.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/Assets/SVG/Instagram-logo.svg b/Assets/SVG/Instagram-logo.svg
new file mode 100644
index 0000000..9221bab
--- /dev/null
+++ b/Assets/SVG/Instagram-logo.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/Logo-M3Academy.svg b/Assets/SVG/Logo-M3Academy.svg
new file mode 100644
index 0000000..698965a
--- /dev/null
+++ b/Assets/SVG/Logo-M3Academy.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
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/Store-icon.svg b/Assets/SVG/Store-icon.svg
new file mode 100644
index 0000000..e5f7cff
--- /dev/null
+++ b/Assets/SVG/Store-icon.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/Assets/SVG/Youtube-logo.svg b/Assets/SVG/Youtube-logo.svg
new file mode 100644
index 0000000..de6f9a7
--- /dev/null
+++ b/Assets/SVG/Youtube-logo.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/Assets/SVG/shopping-bag.svg b/Assets/SVG/shopping-bag.svg
new file mode 100644
index 0000000..d330029
--- /dev/null
+++ b/Assets/SVG/shopping-bag.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Styles/index.css b/Styles/index.css
new file mode 100644
index 0000000..e0b8508
--- /dev/null
+++ b/Styles/index.css
@@ -0,0 +1,367 @@
+*{
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body{
+ font-family: 'Inter', sans-serif
+}
+
+.page-header{
+ display: flex;
+ justify-content: center;
+ padding: 29px 0;
+ background-color: #000000;
+}
+
+.banner-principal{
+ width: 100%;
+}
+
+.banner-principal-mobile,
+.infocard-image-mobile,
+.banner-bottom-mobile{
+ display: none;
+}
+
+
+.text-infocard{
+ display: flex;
+ flex-direction: column;
+ padding: 73px 0;
+ align-items: center;
+ text-align: center;
+}
+.infocard-subtitle{
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 39px;
+ text-transform: uppercase;
+}
+.infocard-title{
+ font-weight: 500;
+ font-size: 48px;
+ line-height: 58px;
+ margin-bottom: 20px;
+ text-transform: uppercase;
+}
+.infocard-description{
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ width: 38%;
+}
+.infocard-image{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+
+.top-cards{
+ display: flex;
+ justify-content: center;
+ padding: 178px 150px 80px;
+ gap: 26px;
+}
+.top-card{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ max-width: 350px;
+ padding: 30px;
+ gap: 30px;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+
+.banners-midle{
+ display: flex;
+ padding: 0 72px;
+ gap: 4.3%;
+ justify-content: center;
+ background: #E0E0E0;
+}
+.banners-midle img{
+ position: relative;
+ top: 35px;
+ gap: 20px;
+}
+.banner-midle{
+ display: flex;
+ gap: 3.4%;
+}
+.banner-midle img{
+ max-width: 50%;
+}
+.banner-midle-third{
+ gap: 39px;
+ width: 32%;
+}
+
+
+.bottom-cards{
+ display: flex;
+ justify-content: center;
+ padding: 178px 30px 108px;
+ gap: 16px;
+}
+.bottom-card{
+ display: flex;
+ flex-direction: column;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ padding: 30px;
+ gap: 30px;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+
+.bottom-infocard{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.text-bottom-infocard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 80%;
+ padding: 0 0 50px;
+}
+.bottom-infocard-title{
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+.bottom-infocard img{
+ justify-content: center;
+ width: 70%;
+ padding: 0 0 116px;
+}
+
+
+.page-footer{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 128px;
+ gap: 16px;
+ background-color: #000000;
+}
+.page-footer p{
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 12px;
+ width: 65%;
+ text-align: center;
+ text-transform: uppercase;
+ color: #BDBDBD;
+}
+
+
+@media screen and (max-width: 414px){
+ .banner-principal-desktop,
+ .infocard-image-desktop{
+ display: none;
+ }
+ .banner-principal-mobile,
+ .infocard-image-mobile{
+ display: unset;
+ }
+
+
+ .text-bottom-infocard{
+ width: 100%;
+ }
+ .bottom-infocard-title{
+ font-size: 24px;
+ }
+ .bottom-infocard img{
+ width: 100%;
+ }
+
+
+ .page-footer p{
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 768px){
+ .infocard-subtitle{
+ font-size: 20px;
+ line-height: 24px;
+ }
+ .infocard-title{
+ font-size: 28px;
+ line-height: 34px;
+ }
+ .infocard-description{
+ width: 100%;
+ padding: 0 40px;
+ }
+
+
+ .top-cards{
+ flex-direction: column;
+ align-items: center;
+ padding: 90px 32px 80px;
+ }
+
+
+ .banners-midle{
+ display: flex;
+ flex-direction: column;
+ padding: 0 23px;
+ gap: 24px;
+ }
+ .banners-midle img{
+ position: relative;
+ top: 32px;
+ }
+ .banner-midle{
+ display: flex;
+ flex-direction: row-reverse;
+ gap: 14px;
+ justify-content: center;
+ }
+ .banner-midle img{
+ width: 48%;
+ }
+ .banner-midle-third{
+ gap: 24px;
+ width: 100%;
+ }
+
+
+ .bottom-cards{
+ flex-direction: column;
+ align-items: center;
+ padding: 112px 23px 98px;
+ }
+ .bottom-card{
+ max-width: 350px;
+ }
+
+
+ .bottom-infocard{
+ flex-direction: column-reverse;
+ }
+ .bottom-infocard img{
+ padding: unset;
+ }
+ .text-bottom-infocard{
+ padding: 50px 0 87px;
+ }
+
+
+ .banner-bottom-desktop{
+ display: none;
+ }
+ .banner-bottom-mobile{
+ display: unset;
+ }
+}
+
+@media screen and (min-width: 2000px){
+ .infocard-subtitle,
+ .bottom-infocard-title{
+ font-size: 40px;
+ }
+ .infocard-title{
+ font-size: 56px;
+ }
+ .infocard-description,
+ .card-description{
+ font-size: 25px;
+ }
+
+
+ .top-infocard{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .infocard-image{
+ width: 100%;
+ max-width: 400px;
+ align-items: unset;
+ }
+
+
+ .top-cards{
+ padding: 200px 250px 80px;
+ }
+ .top-card{
+ max-width: 450px;
+ height: 350px;
+ padding: 40px;
+ gap: 40px;
+ }
+
+
+ .bottom-cards{
+ padding: 178px 72px 80px;
+ }
+ .bottom-card{
+ padding: 40px;
+ gap: 40px;
+ }
+
+
+ .banner-midle{
+ gap: 50px;
+ }
+ .banners-midle{
+ gap: 50px;
+ }
+ .banners-midle img{
+ max-width: 566px;
+ }
+
+
+ .page-footer p{
+ font-size: 15px;
+ }
+}
+
+@media screen and (min-width: 3000px){
+ .infocard-subtitle,
+ .bottom-infocard-title{
+ font-size: 55px;
+ }
+ .infocard-title{
+ font-size: 67px;
+ }
+ .infocard-description,
+ .card-description{
+ font-size: 36px;
+ }
+ .infocard-description,
+ .infocard-subtitle{
+ line-height: 50px;
+ }
+
+
+ .top-card{
+ max-width: 20%;
+ height: 500px;
+ padding: 60px;
+ gap: 90px;
+ }
+
+
+ .bottom-card{
+ max-width: 100%;
+ height: 580px;
+ padding: 60px;
+ gap: 50px;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6925352
--- /dev/null
+++ b/index.html
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Desafio 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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