diff --git a/assets/images/m3-logo.png b/assets/images/m3-logo.png new file mode 100644 index 0000000..b109af0 Binary files /dev/null and b/assets/images/m3-logo.png differ diff --git a/assets/images/main-banner-desktop.png b/assets/images/main-banner-desktop.png new file mode 100644 index 0000000..cab0a60 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..5118021 Binary files /dev/null and b/assets/images/main-banner-mobile.png differ diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000..27cec7c Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..be9c3f8 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + M3 Landing Page + + + + + +
+ + + +
+ +
+
+ Banner Principal Desktop + Banner Principal Desktop +
+ +
+
+

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 topo +
+
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..9fb93fa --- /dev/null +++ b/styles/style.css @@ -0,0 +1,101 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} + + +.page-header{ + display: flex; + justify-content: center; + align-items: center; + background-color: #000000; + padding: 28px 0; +} + +.header-logo{ + display: block; +} + +.main-banner-desktop{ + width: 100%; +} + +.top-infocard{ + display: flex; + align-itens: center; + justify-content: center; + padding: 80px 0 96px; +} + +.top-infocard-text{ + max-width: 766px; + margin-right: 124px; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + text-transform: uppercase; +} + +.top-infocard-title{ + margin-bottom: 24px; + font-weight: 500; + font-size: 48px; + text-transform: uppercase; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +@media screen and (max-width: 414px){ + .main-banner-desktop{ + display: none; + } +} + +@media screen and (max-width: 992px){ + .top-infocard{ + flex-direction: column; + padding: 54px 26px 158px; + } + + .top-infocard-text{ + margin: 0 0 68px; + } + + .top-infocard-subtitle{ + font-size: 20px; + } + + .top-infocard-title{ + margin-bottom: 20px; + font-size: 28px; + } + + .top-infocard-image{ + width: 100%; + max-width: 240px; + margin: auto; + + } +} + +@media screen and (min-width: 993px) and (max-width: 1200px) { + +} + +@media screen and (min-width: 415px){ + .main-banner-mobile{ + display: none; + } +} \ No newline at end of file