diff --git a/assets/images/bottom-card-01.svg b/assets/images/bottom-card-01.svg
new file mode 100644
index 0000000..da2a95d
--- /dev/null
+++ b/assets/images/bottom-card-01.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/bottom-card-02.svg b/assets/images/bottom-card-02.svg
new file mode 100644
index 0000000..a2c9fed
--- /dev/null
+++ b/assets/images/bottom-card-02.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/bottom-card-03.svg b/assets/images/bottom-card-03.svg
new file mode 100644
index 0000000..7d13645
--- /dev/null
+++ b/assets/images/bottom-card-03.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/bottom-card-04.svg b/assets/images/bottom-card-04.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/assets/images/bottom-card-04.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/bottom-infocard-image-desktop.png b/assets/images/bottom-infocard-image-desktop.png
new file mode 100644
index 0000000..87b48a2
Binary files /dev/null and b/assets/images/bottom-infocard-image-desktop.png differ
diff --git a/assets/images/bottom-infocard-image-mobile.png b/assets/images/bottom-infocard-image-mobile.png
new file mode 100644
index 0000000..5399732
Binary files /dev/null and b/assets/images/bottom-infocard-image-mobile.png differ
diff --git a/assets/images/facebook-icon.svg b/assets/images/facebook-icon.svg
new file mode 100644
index 0000000..65142aa
--- /dev/null
+++ b/assets/images/facebook-icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg
new file mode 100644
index 0000000..9221bab
--- /dev/null
+++ b/assets/images/instagram-icon.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/assets/images/logo-m3academy.svg b/assets/images/logo-m3academy.svg
new file mode 100644
index 0000000..698965a
--- /dev/null
+++ b/assets/images/logo-m3academy.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png
new file mode 100644
index 0000000..a2c9f47
Binary files /dev/null and b/assets/images/main-banner-desktop.png differ
diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png
new file mode 100644
index 0000000..a0f7541
Binary files /dev/null and b/assets/images/main-banner-mobile.png differ
diff --git a/assets/images/mini-banner-01.png b/assets/images/mini-banner-01.png
new file mode 100644
index 0000000..3fd3851
Binary files /dev/null and b/assets/images/mini-banner-01.png differ
diff --git a/assets/images/mini-banner-02.png b/assets/images/mini-banner-02.png
new file mode 100644
index 0000000..b8b9043
Binary files /dev/null and b/assets/images/mini-banner-02.png differ
diff --git a/assets/images/mini-banner-03.png b/assets/images/mini-banner-03.png
new file mode 100644
index 0000000..babc07d
Binary files /dev/null and b/assets/images/mini-banner-03.png differ
diff --git a/assets/images/top-card-image-01.svg b/assets/images/top-card-image-01.svg
new file mode 100644
index 0000000..be82592
--- /dev/null
+++ b/assets/images/top-card-image-01.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/top-card-image-02.svg b/assets/images/top-card-image-02.svg
new file mode 100644
index 0000000..d330029
--- /dev/null
+++ b/assets/images/top-card-image-02.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/top-card-image-03.svg b/assets/images/top-card-image-03.svg
new file mode 100644
index 0000000..ea11a3d
--- /dev/null
+++ b/assets/images/top-card-image-03.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png
new file mode 100644
index 0000000..41cf659
Binary files /dev/null and b/assets/images/top-infocard-image.png differ
diff --git a/assets/images/youtube-icon.svg b/assets/images/youtube-icon.svg
new file mode 100644
index 0000000..c2ef882
--- /dev/null
+++ b/assets/images/youtube-icon.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/styles/style.css b/assets/styles/style.css
new file mode 100644
index 0000000..8736e30
--- /dev/null
+++ b/assets/styles/style.css
@@ -0,0 +1,438 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Inter', sans-serif;
+ color: #000000;
+}
+
+a {
+ text-decoration: none;
+}
+
+/* HEADER */
+
+.header-container {
+ display: flex;
+ width: 100%;
+ background: #000000;
+ padding: 29px 0;
+ justify-content: center;
+ align-items: center;
+}
+
+.logo-link {
+ width: 12%;
+}
+
+.logo {
+ width: 98%;
+}
+
+/* MAIN BANNER */
+
+.main-banner {
+ display: block;
+ width: 100%;
+}
+
+.main-banner-mobile {
+ display: none;
+}
+
+/* MAIN TOP INFOCARD */
+
+.top-infocard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.top-infocard-text {
+ max-width: 40%;
+ text-align: center;
+ padding: 73px 0;
+}
+
+.top-infocard-subtitle {
+ text-transform: uppercase;
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 38px;
+}
+
+.top-infocard-title {
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 48px;
+ line-height: 58px;
+}
+
+.top-infocard-description {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ padding-top: 28px;
+}
+
+.top-infocard-image {
+ width: 17%;
+}
+
+.image-top-infocard {
+ width: 100%;
+}
+
+/* MAIN TOP CARDS */
+
+.top-cards {
+ display: flex;
+ max-width: 100%;
+ align-items: center;
+ justify-content: center;
+ gap: 21px;
+ padding: 178px 0 80px;
+}
+
+.top-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 18%;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card-image {
+ display: block;
+ width: 29%;
+ padding: 35px 0 27px;
+}
+
+.top-card-description {
+ max-width: 80%;
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ padding-bottom: 27px;
+}
+
+/* MAIN - TRÊS IMAGENS MINI BANNER CENTRAL */
+
+.mini-banner-container {
+ background: #E0E0E0;
+}
+
+.mini-banner-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ bottom: -62px;
+ gap: 39px;
+}
+
+.mini-banner {
+ width: 29%;
+}
+
+.mini-banner-image {
+ display: block;
+ width: 100%;
+}
+
+/* MAIN BOTTOM CARDS */
+
+.bottom-cards {
+ display: flex;
+ max-width: 100%;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ padding-top: 191px;
+}
+
+.bottom-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 22%;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.20);
+}
+
+.bottom-card-image {
+ display: block;
+ width: 24%;
+ padding: 44px 0 24px;
+}
+
+.imgage-bottom-card-4 {
+ width: 20%;
+}
+
+.bottom-card-description {
+ max-width: 84%;
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ padding-bottom: 65px;
+}
+
+/* MAIN BOTTOM INFORCARD */
+
+.bottom-infocard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.bottom-infocard-text {
+ width: 28%;
+ text-align: center;
+ padding: 108px 0 50px;
+}
+
+.bottom-infocard-subtitle {
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+
+.bottom-infocard-description {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.bottom-infocard-image {
+ width: 70%;
+ padding-bottom: 116px;
+}
+
+.image-bottom-infocard {
+ width: 100%;
+}
+
+.bottom-infocard-image-mobile {
+ display: none;
+}
+
+/* FOOTER */
+
+.page-footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #000000;
+ padding: 38px 0;
+}
+
+.footer-redes-sociais {
+ display: flex;
+ margin-bottom: 17px;
+ gap: 16px;
+ justify-content: center;
+ align-items: center;
+}
+
+.redes-sociais img {
+ width: 24px;
+ height:24px;
+}
+
+.footer-text {
+ text-transform: uppercase;
+ font-weight: 400;
+ line-height: 12px;
+ font-size: 10px;
+ color: #BDBDBD;
+}
+
+/* MOBILE */
+
+@media (max-width: 1024px) {
+ .logo-link {
+ width: 55%;
+ }
+
+ .logo {
+ width: 99%;
+ }
+
+ .main-banner-desktop {
+ display: none;
+ }
+
+ .main-banner-mobile {
+ display: block;
+ }
+
+ .top-infocard-text {
+ max-width: 86%;
+ padding: 73px 0 65px;
+ }
+
+ .top-infocard-subtitle {
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ .top-infocard-title {
+ font-size: 28px;
+ line-height: 34px;
+ }
+
+ .top-infocard-description {
+ padding-top: 22px;
+ }
+
+ .top-infocard-image {
+ width: 58%;
+ }
+
+ .top-cards{
+ flex-direction: column;
+ padding-top: 90px;
+ gap: 24px;
+ }
+
+ .top-card{
+ width: 84%;
+ }
+
+ .mini-banner-wrapper {
+ display: grid;
+ grid-template-columns: auto auto;
+ justify-items: center;
+ row-gap: 23px;
+ column-gap: 14px;
+ bottom: -32px;
+ padding-left: 5%;
+ padding-right: 5%;
+ }
+
+ .mini-banner {
+ width: 100%;
+ }
+
+ .img-1 {
+ grid-area: 1 / 2 / 2 / 3;
+ }
+
+ .img-2 {
+ grid-area: 1 / 1 / 2 / 2;
+ }
+
+ .img-3 {
+ grid-area: 2 / 1 / 3 / 3;
+ }
+
+ .bottom-cards{
+ flex-direction: column;
+ padding-top: 112px;
+ }
+
+ .bottom-card{
+ width: 88%;
+ }
+
+ .bottom-infocard-image-desktop {
+ display: none;
+ }
+
+ .bottom-infocard-image-mobile {
+ display: block;
+ }
+
+ .bottom-infocard {
+ flex-direction: column-reverse;
+ }
+
+ .bottom-infocard-text {
+ width: 84%;
+ padding: 50px 0 87px;
+ }
+
+ .bottom-infocard-subtitle {
+ font-size: 24px;
+ line-height: 29px;
+ padding-bottom: 9px;
+ }
+
+ .bottom-infocard-image {
+ width: 100%;
+ padding: 98px 0 0;
+ }
+
+ .page-footer {
+ padding: 32px 0;
+ }
+
+ .footer-text {
+ text-align: center;
+ max-width: 261px;
+ }
+}
+
+/* TELAS GRANDES */
+
+@media (min-width: 2500px) {
+ .top-infocard-subtitle {
+ font-size: 64px;
+ line-height: 76px;
+ }
+
+ .top-infocard-title {
+ font-size: 96px;
+ line-height: 116px;
+ }
+
+ .top-infocard-description,
+ .top-card-description,
+ .bottom-card-description,
+ .bottom-infocard-description {
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .top-cards {
+ gap: 30px;
+ }
+
+ .top-card, .bottom-card {
+ box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.23);
+ }
+
+ .mini-banner-wrapper {
+ gap: 52px;
+ }
+
+ .bottom-cards {
+ gap: 30px;
+ }
+
+ .bottom-infocard-text {
+ width: 40%;
+ }
+
+ .bottom-infocard-subtitle {
+ font-size: 64px;
+ line-height: 78px;
+ padding-bottom: 10px;
+ }
+
+ .redes-sociais img {
+ width: 48px;
+ height: 48px;
+ }
+
+ .footer-text {
+ line-height: 24px;
+ font-size: 20px;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5ddfd90
--- /dev/null
+++ b/index.html
@@ -0,0 +1,175 @@
+
+
+
+
+
+
+
+
+
+
+
+ M3 Academy Landing Page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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