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/bottom-infocard-image-desktop.png b/assets/bottom-infocard-image-desktop.png
new file mode 100644
index 0000000..42190a3
Binary files /dev/null and b/assets/bottom-infocard-image-desktop.png differ
diff --git a/assets/bottom-infocard-image-mobile.png b/assets/bottom-infocard-image-mobile.png
new file mode 100644
index 0000000..7a674f6
Binary files /dev/null and b/assets/bottom-infocard-image-mobile.png differ
diff --git a/assets/facebook-icon.svg b/assets/facebook-icon.svg
new file mode 100644
index 0000000..061ff85
--- /dev/null
+++ b/assets/facebook-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/assets/instagram-icon.svg b/assets/instagram-icon.svg
new file mode 100644
index 0000000..9221bab
--- /dev/null
+++ b/assets/instagram-icon.svg
@@ -0,0 +1,5 @@
+
+
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/assets/youtube-icon.svg b/assets/youtube-icon.svg
new file mode 100644
index 0000000..de6f9a7
--- /dev/null
+++ b/assets/youtube-icon.svg
@@ -0,0 +1,3 @@
+
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..15598c3
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,388 @@
+* {
+ 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;
+ width: 100%;
+}
+
+/*** 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;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+/*** 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;
+}
+
+/*** BOTTOM INFOCARD ***/
+.bottom-infocard{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 108px;
+ width: 100%;
+}
+
+.bottom-infocard-title{
+ text-align: center;
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+
+.bottom-infocard-description{
+ text-align: center;
+ font-size: 16px;
+ line-height: 24px;
+ max-width: 40%;
+}
+
+.bottom-infocard-image-desktop{
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ padding: 0 14% 0;
+ margin-top: 50px;
+}
+
+/** PAGE FOOTER **/
+.page-footer{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #000000;
+ margin-top: 116px;
+}
+
+.footer-icons{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ text-decoration: none;
+ margin-top: 38px;
+}
+
+.copyright{
+ color: #BDBDBD;
+ margin: 16px 0 38px;
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: uppercase;
+ text-align: center;
+
+}
+
+@media screen and (max-width: 1024px){
+ /*** MAIN BANNER E BOTTOM INFOCARD ***/
+ .main-banner-desktop,
+ .bottom-infocard-image-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;
+ }
+
+ /*** BOTTOM INFOCARD ***/
+ .bottom-infocard{
+ margin-top: 98px;
+ margin-left: 0;
+ margin-right: 0;
+ max-width: 100%;
+ }
+
+ .bottom-infocard-title{
+ order: 2;
+ font-size: 24px;
+ line-height: 29px;
+ margin-top: 50px;
+ }
+
+ .bottom-infocard-description{
+ order: 3;
+ font-size: 16px;
+ line-height: 24px;
+ max-width: 100%;
+ margin: 10px 32px 0;
+ }
+
+ .bottom-infocard-image-mobile{
+ order: 1;
+ display: block;
+ width: 100%;
+ }
+
+ /** PAGE FOOTER **/
+ .page-footer{
+ margin-top: 88px;
+ }
+
+ .footer-icons{
+ margin-top: 32px;
+ }
+
+ .copyright{
+ margin: 16px 0 32px;
+ width: 64%;
+ }
+
+}
+
+@media screen and (min-width: 1025px){
+ /*** MAIN BANNER E BOTTOM INFOCARD ***/
+ .main-banner-mobile,
+ .bottom-infocard-image-mobile{
+ display: none;
+ }
+}
+
+/*** 2500 px ***/
+@media (min-width: 2500px){
+ /*** TOP INFOCARD ***/
+ .top-infocard-subtitle{
+ font-size: 64px;
+ line-height: 78px;
+ }
+
+ .top-infocard-title{
+ font-size: 96px;
+ line-height: 116px;
+ }
+
+ .top-infocard-description{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .top-infocard-image{
+ width: 470px;
+ }
+
+ /*** CARDS ***/
+ .card-description{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .card-image{
+ width: 150px;
+ height: 150px;
+ }
+
+ /*** BOTTOM INFOCARD ***/
+ .bottom-infocard-title{
+ font-size: 64px;
+ line-height: 78px;
+ }
+
+ .bottom-infocard-description{
+ font-size: 32px;
+ line-height: 48px;
+ margin: 0 auto 0;
+ }
+
+ .bottom-infocard{
+ display: grid;
+ }
+
+ /*** FOOTER ***/
+ .copyright{
+ font-size: 20px;
+ line-height: 24px;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..503c867
--- /dev/null
+++ b/index.html
@@ -0,0 +1,206 @@
+
+
+
+
+ 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.
+
+
+
+
+
+
+ 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
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+