diff --git a/assets/bottom-card1.svg b/assets/bottom-card1.svg
new file mode 100644
index 0000000..1090b7b
--- /dev/null
+++ b/assets/bottom-card1.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/bottom-card3.svg b/assets/bottom-card3.svg
new file mode 100644
index 0000000..7d13645
--- /dev/null
+++ b/assets/bottom-card3.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/bottom-card4.svg b/assets/bottom-card4.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/assets/bottom-card4.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/logoM3.svg b/assets/logoM3.svg
new file mode 100644
index 0000000..698965a
--- /dev/null
+++ b/assets/logoM3.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/assets/main-banner-desktop.png b/assets/main-banner-desktop.png
new file mode 100644
index 0000000..cab0a60
Binary files /dev/null and b/assets/main-banner-desktop.png differ
diff --git a/assets/main-banner-mobile.png b/assets/main-banner-mobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/main-banner-mobile.png differ
diff --git a/assets/mid-banner-01.png b/assets/mid-banner-01.png
new file mode 100644
index 0000000..d7ff618
Binary files /dev/null and b/assets/mid-banner-01.png differ
diff --git a/assets/mid-banner-02.png b/assets/mid-banner-02.png
new file mode 100644
index 0000000..f7ed233
Binary files /dev/null and b/assets/mid-banner-02.png differ
diff --git a/assets/mid-banner-03.png b/assets/mid-banner-03.png
new file mode 100644
index 0000000..0bbb48c
Binary files /dev/null and b/assets/mid-banner-03.png differ
diff --git a/assets/top-card01.svg b/assets/top-card01.svg
new file mode 100644
index 0000000..be82592
--- /dev/null
+++ b/assets/top-card01.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/assets/top-card02.svg b/assets/top-card02.svg
new file mode 100644
index 0000000..d330029
--- /dev/null
+++ b/assets/top-card02.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/assets/top-card03.svg b/assets/top-card03.svg
new file mode 100644
index 0000000..ea11a3d
--- /dev/null
+++ b/assets/top-card03.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/top-infocard-image.png b/assets/top-infocard-image.png
new file mode 100644
index 0000000..2af63bd
Binary files /dev/null and b/assets/top-infocard-image.png differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..f5ba729
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,225 @@
+* {
+ margin: 0;
+ box-sizing: border-box;
+}
+
+body{
+ font-family: 'Inter', sans-serif;
+ color: #000000;
+}
+
+/*** HEADER ***/
+
+.page-header{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #000000;
+ padding: 28px 0;
+}
+
+.header-logo{
+ display: block;
+}
+
+/*** MAIN BANNER ***/
+
+.main-banner-desktop{
+ display: block;
+ width: 100%;
+}
+.main-banner-mobile{
+ display: block;
+ width: 100%;
+}
+
+/*** TOP INFOCARD ***/
+
+.top-infocard {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 74px;
+}
+
+.top-infocard-subtitle{
+ font-weight: 400;
+ font-size: 32px;
+ line-height: 39px;
+ text-transform: uppercase;
+}
+
+.top-infocard-title{
+ font-weight: 500;
+ font-size: 48px;
+ line-height: 58px;
+ text-transform: uppercase;
+}
+
+.top-infocard-description{
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ margin-top: 28px;
+ max-width: 40%;
+}
+
+.top-infocard-image{
+ display: block;
+ margin-top: 74px;
+}
+
+/*** TOP CARDS ***/
+.top-cards{
+ margin-top: 178px;
+ display: grid;
+ grid-template-columns: repeat(3, 18%);
+ gap: 20px;
+ justify-content: center;
+}
+
+.card{
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.card-image{
+ margin-top: 36px;
+}
+
+.card-description{
+ align-items: center;
+ max-width: 85%;
+ margin: 28px auto;
+}
+
+/*** MID BANNER ***/
+
+.mid-banners{
+ background: #E0E0E0;
+ margin-top: 80px;
+}
+
+.mid-banner-wrapper{
+ display: grid;
+ grid-template-columns: repeat(3, 29%);
+ width: 100%;
+ gap: 40px;
+ justify-content: center;
+ position: relative;
+ bottom: -62px;
+
+}
+
+.mid-banner-image{
+ display: block;
+ width: 100%;
+}
+
+/*** BOTTOM CARDS ***/
+
+.bottom-cards{
+ margin-top: 190px;
+ display: grid;
+ grid-template-columns: repeat(4, 22%);
+ gap: 16px;
+ justify-content: center;
+}
+
+@media screen and (max-width: 1024px){
+ /*** MAIN BANNER ***/
+ .main-banner-desktop{
+ display: none;
+ }
+
+ /*** TOP INFOCARD ***/
+ .top-infocard{
+ padding: 0 28px 0;
+ }
+
+ .top-infocard-subtitle{
+ font-size: 20px;
+ line-height: 24px;
+ text-align: center;
+ }
+
+ .top-infocard-title{
+ text-align: center;
+ font-size: 28px;
+ line-height: 34px;
+ }
+
+ .top-infocard-description{
+ max-width: 100%;
+ text-align: center;
+ }
+
+ .top-infocard-image{
+ margin-top: 65px;
+ width: 100%;
+ }
+
+ /*** TOP CARDS ***/
+ .top-cards{
+ grid-template-columns: repeat(1, 100%);
+ padding: 0 28px 0;
+ margin-top: 90px;
+ gap: 24px;
+ }
+
+ .card{
+ font-size: 16px;
+ line-height: 24px;
+ }
+
+ .card-description{
+ width: 82%;
+ }
+
+ /*** MID BANNER ***/
+ .mid-banners{
+ padding: 0 24px 0;
+ }
+ .mid-banner-wrapper{
+ width: 100%;
+ grid-template-columns: repeat(2, 45%);
+ gap: 0;
+ column-gap: 14px;
+ row-gap: 24px;
+ bottom: -32px;
+ }
+
+ .mid-banner-3{
+ grid-area: 2 / 1 /span 2/ span 2;
+ }
+
+ /*** BOTTOM CARDS ***/
+
+ .bottom-cards{
+ grid-template-columns: repeat(1, 100%);
+ padding: 0 28px 0;
+ margin-top: 112px;
+ }
+
+ .bottom-card-description{
+ font-size: 14px;
+ line-height: 24px;
+ }
+}
+
+@media screen and (min-width: 1025px){
+ /*** MAIN BANNER ***/
+ .main-banner-mobile{
+ display: none;
+ }
+}
+
+/*** 2500 px ***/
+@media (min-width: 2500px){
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..628fdc9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,160 @@
+
+
+
+
+ Challenge 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.
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+