diff --git a/README.md b/README.md
index 49e6b70..429556f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
+Primeiro desafio do treinamento da M3 Academy, uma landing page usando apenas HTML e CSS, com responsividade para todos os tipos de dispositivos.
+
# challenge-landing-page
-
-
## Getting started
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
diff --git a/assets/images/bag.svg b/assets/images/bag.svg
new file mode 100644
index 0000000..d330029
--- /dev/null
+++ b/assets/images/bag.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/banner-article-desktop.png b/assets/images/banner-article-desktop.png
new file mode 100644
index 0000000..42190a3
Binary files /dev/null and b/assets/images/banner-article-desktop.png differ
diff --git a/assets/images/banner-article-mobile.png b/assets/images/banner-article-mobile.png
new file mode 100644
index 0000000..7a674f6
Binary files /dev/null and b/assets/images/banner-article-mobile.png differ
diff --git a/assets/images/banner-top-desktop.png b/assets/images/banner-top-desktop.png
new file mode 100644
index 0000000..cab0a60
Binary files /dev/null and b/assets/images/banner-top-desktop.png differ
diff --git a/assets/images/banner-top-mobile.png b/assets/images/banner-top-mobile.png
new file mode 100644
index 0000000..5118021
Binary files /dev/null and b/assets/images/banner-top-mobile.png differ
diff --git a/assets/images/coin.svg b/assets/images/coin.svg
new file mode 100644
index 0000000..ea11a3d
--- /dev/null
+++ b/assets/images/coin.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/coin2.svg b/assets/images/coin2.svg
new file mode 100644
index 0000000..547209c
--- /dev/null
+++ b/assets/images/coin2.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/facebook.svg b/assets/images/facebook.svg
new file mode 100644
index 0000000..061ff85
--- /dev/null
+++ b/assets/images/facebook.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg
new file mode 100644
index 0000000..2126204
--- /dev/null
+++ b/assets/images/instagram.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/assets/images/laptop.svg b/assets/images/laptop.svg
new file mode 100644
index 0000000..7d13645
--- /dev/null
+++ b/assets/images/laptop.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/logo-m3.svg b/assets/images/logo-m3.svg
new file mode 100644
index 0000000..698965a
--- /dev/null
+++ b/assets/images/logo-m3.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/money.svg b/assets/images/money.svg
new file mode 100644
index 0000000..1090b7b
--- /dev/null
+++ b/assets/images/money.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/network.svg b/assets/images/network.svg
new file mode 100644
index 0000000..aa8344a
--- /dev/null
+++ b/assets/images/network.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/notebook1.png b/assets/images/notebook1.png
new file mode 100644
index 0000000..d7ff618
Binary files /dev/null and b/assets/images/notebook1.png differ
diff --git a/assets/images/notebook2.png b/assets/images/notebook2.png
new file mode 100644
index 0000000..f7ed233
Binary files /dev/null and b/assets/images/notebook2.png differ
diff --git a/assets/images/notebook3.png b/assets/images/notebook3.png
new file mode 100644
index 0000000..0bbb48c
Binary files /dev/null and b/assets/images/notebook3.png differ
diff --git a/assets/images/shop.svg b/assets/images/shop.svg
new file mode 100644
index 0000000..be82592
--- /dev/null
+++ b/assets/images/shop.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/smartphone.svg b/assets/images/smartphone.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/assets/images/smartphone.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/images/youtube.svg b/assets/images/youtube.svg
new file mode 100644
index 0000000..de6f9a7
--- /dev/null
+++ b/assets/images/youtube.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/styles/main.css b/assets/styles/main.css
new file mode 100644
index 0000000..bc14502
--- /dev/null
+++ b/assets/styles/main.css
@@ -0,0 +1,418 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body{
+ font-family: 'Inter', sans-serif;
+ color: #000;
+}
+
+.page-header{
+ display: flex;
+ justify-content: center;
+ padding: 28px 0;
+ background: #000;
+}
+
+.logo-header{
+ display: block;
+ width: 12%;
+}
+
+.main-banner{
+ width: 100%;
+ display: block;
+}
+
+.top-infocard{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 72px;
+}
+
+.top-infocard-text{
+ width: 40%;
+ text-align: center;
+
+}
+
+.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;
+ padding-bottom: 28px;
+}
+
+.top-infocard-description{
+ font-size: 16px;
+ line-height: 24px;
+ text-align: left;
+}
+
+.network{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 73px;
+}
+
+.network-image{
+ width: 17%;
+}
+
+.cards{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 178px;
+ gap: 21px;
+}
+
+.card{
+ width: 18%;
+ text-align: center;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ padding: 35px 26px 26px 26px;
+}
+
+.card-text{
+ font-size: 16px;
+ line-height: 24px;
+ width: 85%;
+ display: inline-block;
+}
+
+.card-icon{
+ width: 29%;
+ margin-bottom: 30px;
+}
+
+.notebooks{
+ width: 100%;
+ background: #E0E0E0;
+ margin-top: 80px;
+ display: flex;
+ justify-content: center;
+ gap: 29px;
+}
+
+.notebook1, .notebook2, .notebook3{
+ width: 29.50%;
+ bottom: -62px;
+ position: relative;
+}
+
+.notebook1{
+ order: 1;
+}
+
+.notebook2{
+ order: 2;
+}
+
+.notebook3{
+ order: 3;
+}
+
+.cards-bottom{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 190px;
+ gap: 16px;
+}
+
+.card-bottom{
+ width: 22.35%;
+ text-align: center;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+ padding: 40px 26px 65px 32px;
+}
+
+.card-bottom-text{
+ font-size: 16px;
+ line-height: 24px;
+ width: 95%;
+ display: inline-block;
+}
+
+.card-bottom-icon{
+ width: 29%;
+ margin-bottom: 17px;
+}
+
+.smartphone{
+ width: 24%;
+}
+
+
+.article{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 108px;
+}
+
+.article-text{
+ width: 28.64%;
+ text-align: center;
+}
+
+.article-title{
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+
+.article-description{
+ font-size: 16px;
+ line-height: 24px;
+ padding: 0 14px;
+}
+
+.article-figure{
+ text-align: center;
+ margin-top: 50px;
+ margin-bottom: 116px;
+ width: 70.83%;
+}
+
+.article-banner-desktop{
+ width: 100%;
+}
+
+.article-figure-mobile{
+ width: 100%;
+}
+
+.footer{
+ background: #000;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.footer-content{
+ width: 20.67%;
+ margin-bottom: 38px;
+ margin-top: 38px;
+}
+
+.social-medias{
+ display: flex;
+ flex-direction: row;
+ gap: 18px;
+ justify-content: center;
+}
+
+.social-media{
+ display: contents;
+}
+
+.icon-social-media{
+ width: 7%;
+}
+
+.footer-text{
+ margin-top: 16px;
+}
+
+.footer-copyright{
+ font-size: 10px;
+ line-height: 12px;
+ text-transform: uppercase;
+ color: #BDBDBD;
+}
+
+/*4K*/
+@media screen and (min-width: 2500px) {
+ .top-infocard-subtitle{
+ font-size: 40px;
+ line-height: 48px;
+ }
+
+ .top-infocard-title{
+ font-size: 56px;
+ line-height: 68px;
+ }
+
+ .top-infocard-description{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .card-text{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .card-bottom-text{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .article-title{
+ font-weight: 600;
+ font-size: 64px;
+ line-height: 78px;
+ }
+
+ .article-description{
+ font-size: 32px;
+ line-height: 48px;
+ }
+
+ .footer-copyright{
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+}
+
+/*MOBILE*/
+@media screen and (max-width: 1024px) {
+ .logo-header{
+ width: 55%;
+ }
+
+ .banner-main-desktop{
+ display: none;
+ }
+
+ .top-infocard-text{
+ width: 86%;
+ }
+
+ .top-infocard-subtitle{
+ font-size: 20px;
+ line-height: 24px;
+ }
+
+ .top-infocard-title{
+ font-size: 28px;
+ line-height: 34px;
+ padding-bottom: 10px;
+ }
+
+ .top-infocard-description{
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ }
+
+ .network{
+ padding-top: 65px;
+ }
+
+ .network-image{
+ width: 58%;
+ }
+
+ .cards{
+ flex-direction: column;
+ gap: 24px;
+ margin-top: 90px;
+ }
+
+ .card{
+ width: 84.54%;
+ }
+
+ .notebooks{
+ display: block;
+ text-align: center;
+ row-gap: 14px;
+ }
+
+ .notebook1{
+ margin-top: 25px;
+ width: 43.52%;
+ bottom: -7px;
+ margin-left: 7px;
+ }
+
+ .notebook2{
+ margin-top: 25px;
+ width: 43.52%;
+ bottom: -7px;
+ margin-right: 7px;
+ }
+
+ .notebook3{
+ width: 90.80%;
+ bottom: -32px;
+ }
+
+ .cards-bottom{
+ flex-direction: column;
+ margin-top: 112px;
+ }
+
+ .card-bottom{
+ width: 88.88%;
+ }
+
+ .card-bottom-text{
+ font-size: 14px;
+ }
+
+ .article-figure{
+ display: none;
+ }
+
+ .article{
+ margin-top: 98px;
+ }
+
+ .article-banner-mobile{
+ width: 100%;
+ }
+
+ .article-text{
+ width: 84.54%;
+ margin-top: 50px;
+ }
+
+ .article-title{
+ font-size: 24px;
+ line-height: 29px;
+ margin-bottom: 9px;
+ }
+
+ .article-description{
+ padding: 0;
+ margin-bottom: 87px;
+ }
+
+ .footer-content{
+ width: 63%;
+ margin-bottom: 32px;
+ margin-top: 32px;
+ }
+
+}
+
+/*DESKTOP*/
+@media screen and (min-width: 1025px) {
+ .banner-main-mobile{
+ display: none;
+ }
+
+ .article-figure-mobile{
+ display: none;
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..66b1302
--- /dev/null
+++ b/index.html
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
+
+
+
+ Desafio Landing Page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loren 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