diff --git a/assets/Image/celular.png b/assets/Image/celular.png new file mode 100644 index 0000000..922f659 Binary files /dev/null and b/assets/Image/celular.png differ diff --git a/assets/Image/coin 1.png b/assets/Image/coin 1.png new file mode 100644 index 0000000..c7a3c94 Binary files /dev/null and b/assets/Image/coin 1.png differ diff --git a/assets/Image/coin 2.png b/assets/Image/coin 2.png new file mode 100644 index 0000000..87b8303 Binary files /dev/null and b/assets/Image/coin 2.png differ diff --git a/assets/Image/compra.png b/assets/Image/compra.png new file mode 100644 index 0000000..664ff18 Binary files /dev/null and b/assets/Image/compra.png differ diff --git a/assets/Image/facebook.png b/assets/Image/facebook.png new file mode 100644 index 0000000..87adee7 Binary files /dev/null and b/assets/Image/facebook.png differ diff --git a/assets/Image/instagram.png b/assets/Image/instagram.png new file mode 100644 index 0000000..0abd451 Binary files /dev/null and b/assets/Image/instagram.png differ diff --git a/assets/Image/m3_logo.png b/assets/Image/m3_logo.png new file mode 100644 index 0000000..b109af0 Binary files /dev/null and b/assets/Image/m3_logo.png differ diff --git a/assets/Image/main-banner-desktop.png b/assets/Image/main-banner-desktop.png new file mode 100644 index 0000000..08b5be8 Binary files /dev/null and b/assets/Image/main-banner-desktop.png differ diff --git a/assets/Image/main-banner-mobile.png b/assets/Image/main-banner-mobile.png new file mode 100644 index 0000000..5118021 Binary files /dev/null and b/assets/Image/main-banner-mobile.png differ diff --git a/assets/Image/mid-banner-desktop.png b/assets/Image/mid-banner-desktop.png new file mode 100644 index 0000000..e03a0ba Binary files /dev/null and b/assets/Image/mid-banner-desktop.png differ diff --git a/assets/Image/middle-banner-mobile.png b/assets/Image/middle-banner-mobile.png new file mode 100644 index 0000000..588ea2b Binary files /dev/null and b/assets/Image/middle-banner-mobile.png differ diff --git a/assets/Image/money (1) 2.png b/assets/Image/money (1) 2.png new file mode 100644 index 0000000..a8768e0 Binary files /dev/null and b/assets/Image/money (1) 2.png differ diff --git a/assets/Image/shop 1.png b/assets/Image/shop 1.png new file mode 100644 index 0000000..3b377c4 Binary files /dev/null and b/assets/Image/shop 1.png differ diff --git a/assets/Image/shopping-bag (1) 1.png b/assets/Image/shopping-bag (1) 1.png new file mode 100644 index 0000000..5f2dd09 Binary files /dev/null and b/assets/Image/shopping-bag (1) 1.png differ diff --git a/assets/Image/top-infocard-image.png b/assets/Image/top-infocard-image.png new file mode 100644 index 0000000..27cec7c Binary files /dev/null and b/assets/Image/top-infocard-image.png differ diff --git a/assets/Image/youtube 2.png b/assets/Image/youtube 2.png new file mode 100644 index 0000000..09d8cd6 Binary files /dev/null and b/assets/Image/youtube 2.png differ diff --git a/assets/Image/youtube 2@2x.png b/assets/Image/youtube 2@2x.png new file mode 100644 index 0000000..bfb24b2 Binary files /dev/null and b/assets/Image/youtube 2@2x.png differ diff --git a/assets/Image/Óculos.png b/assets/Image/Óculos.png new file mode 100644 index 0000000..8c59551 Binary files /dev/null and b/assets/Image/Óculos.png differ diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..73ed097 --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,266 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} +.Page-Header{ + /* Rectangle 12 */ + display: flex; + justify-content: center; + padding: 28px 0; + background: #000000; +} +.Header-Logo{ + display: block; + +} +.main-banner, .mid-banner{ + display: block; + width: 100%; +} +.botom-cards{ + margin-top: 140px; + background:linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); +} +.div-wrapper{ + justify-content: center; + gap: 20px; + padding: 36px 32px 66px; + display: grid; + grid-template-columns: repeat(2,max-content); + position: relative; + top: -60px; +} +.botom-card { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0,23); +} +.botom-card-image{ + display: block; + margin-bottom: 16px; +} +.botom-card-description{ + max-width: 368px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + /* or 150% */ + + text-align: center; +} +.top-infocard { + display: flex; + align-items: center; + justify-content: center; + padding: 90px 0 96px; +} +.top-infocard-text{ + margin-right: 124px; + max-width: 766px; +} +.top-infocard-subtitle{ + /* Lorem ipsum */ + text-transform: uppercase; + font-size: 32px; + font-weight: 400; + /* identical to box height, or 250% */ +} +.top-infocard-title{ + margin-bottom: 24px; + text-transform: uppercase; + font-size: 48px; + font-weight: 500; +} +.top-infocard-description{ + font-size: 16px; + line-height: 24px; +} +.top-cards{ + background: #f0f0f0; + display: grid; + grid-template-columns: repeat(3,max-content); + gap: 20px; + justify-content: center; + padding: 74px 0; + +} +.top-card{ + padding: 26px 26px 34px; + display: flex; + flex-direction: column; + align-items:center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0,23); +} +.top-card-image{ + display: block; + margin-bottom: 26px; +} +.top-card-description{ + text-align: center; + font-size: 16px; + line-height: 24px; + max-width: 300px; +} +.bottom-infocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 142px 0 180px; +} +.infocad-text{ + max-width: 550px; +} +.bottom-inforcard-img{ + width: 100%; + margin-right: 40px; +} +.bottom-infocard-title{ + font-weight: 600; + font-size: 32px; + line-height: 1px; + margin-bottom: 18px; +} +.bottom-infocard-description{ + font-size: 16px; + line-height: 24px; +} + +.rodapé{ + padding: 38px 0; + max-width: 100%; + display: flex; + flex-direction: column; + align-items: center; + width: 1920px; + height: 128px; + left: 0px; + top: 4054px; + + background: #000000; +} + +.icons{ + display: flex; + list-style: none; +} +.icon{ + margin: 0 8px 16px; +} +.footer-text{ + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + + /* Gray 4 */ + + color: #BDBDBD; + +} +@media screen and (max-width: 414px) { + .main-banner-desktop, .mid-banner-desktop{ + display: none; + } +} +@media screen and (min-width: 415px) { + .main-banner-mobile, .mid-banner-mobile{ + display: none; + } +} +@media screen and (max-width: 768px) { + .top-cards{ + grid-template-columns: 1fr; + padding: 36px 26px; + } + .botom-card{ + padding: 26px; + } + .botom-cards{ + margin-top: 114px; + padding: 0 16px; + } + .botom-card-description{ + font-size: 14px; + } + .div-wrapper{ + grid-template-columns: 1fr; + gap: 16px; + } + .rodapé{ + padding-bottom: 26px; + } + .footer-text{ + max-width: 280px; + text-align: center; + } +} +@media screen and (max-width: 992px) { + .top-infocard{ + flex-direction: column; + padding: 84px 26px 158px; +} +.top-infocard-text{ + margin-right: 0 0 68px; +} +.top-infocard-subtitle{ + font-size: 20px; +} +.top-infocard-image{ + margin: 68px 88px 158px; + width: 100%; + max-width: 240px; +} +.top-infocard-title{ + margin-bottom: 20px; + font-size: 28px; +} +.bottom-infocard{ + flex-direction: column; + padding: 80px 0 136px; +} +.bottom-inforcard-img{ + margin: 0 0 50px; + max-width: 596px; +} +.bottom-infocard-description{ + padding: 0 26px; +} +.bottom-infocard-title{ + font-size: 24px; +} +} +@media screen and (min-width: 769) and (max-width: 1200) { + .top-cards{ + grid-template-columns: repeat(2,max-content); + padding: 36px 26px; + } + .div-wrapper{ + grid-template-columns: repeat(2,max-content); + padding: 36px 26px; + } +} +@media screen and (min-width: 769) and (max-width: 1200){ + .botom-card-description{ + max-width:280px; + } +} +@media screen and (min-width: 993px) and (max-width: 1280px) { + .top-infocard-text { + max-width: 520px; + margin-right: 70px; + } + .bottom-inforcard-img{ + max-width: 480px; + } + .bottom-infocard-description{ + max-width: 400px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6f71cc2 --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + + + + + + + + + M3 Landing Page + + +
+ + + +
+
+
+ Banner Principal desktop + Banner Principal mobile +
+
+
+

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.

+
+ Banner do infocard no topo +
+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ +
+ Banner Principal desktop + Banner Principal mobile +
+
+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ ="icone +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+
+
+ Banner bottom desktop +
+

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