diff --git a/assets/images/m3-logo.png b/assets/images/m3-logo.png new file mode 100644 index 0000000..bd85eb7 Binary files /dev/null and b/assets/images/m3-logo.png differ diff --git a/assets/images/main-banner-mobile.png b/assets/images/main-banner-mobile.png new file mode 100644 index 0000000..098a4dc Binary files /dev/null and b/assets/images/main-banner-mobile.png differ diff --git a/assets/images/main-banner.png b/assets/images/main-banner.png new file mode 100644 index 0000000..5d94877 Binary files /dev/null and b/assets/images/main-banner.png differ diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000..82530bd Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/assets/images/top-infocard-mobile.png b/assets/images/top-infocard-mobile.png new file mode 100644 index 0000000..8b6bc7a Binary files /dev/null and b/assets/images/top-infocard-mobile.png differ diff --git a/assets/index.html b/assets/index.html new file mode 100644 index 0000000..4dba90a --- /dev/null +++ b/assets/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + Desafio landing page + + +
+ + + +
+
+
+ Main banner + Main banner 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 infocard topo +
+ + + + + +
+ + + diff --git a/assets/styles/styles.css b/assets/styles/styles.css new file mode 100644 index 0000000..2cedcb1 --- /dev/null +++ b/assets/styles/styles.css @@ -0,0 +1,141 @@ +@charset "UTF-8"; + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif; + color: black; + +} + +.page-header{ + display: flex; + justify-content: center; + background-color: black; + padding: 28px 0; + + +} + +.header-logo{ + display: block; + +} + +.main-banner-desktop{ + width: 100%; + +} + +.top-infocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0 96px; +} + +.infocard-image{ + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0 96px; + + + +} + +.top-infocard-text{ + max-width: 766px; + margin-right: 124px; + +} + +.top-infocard-subtitle{ + display: flex; + justify-content: center; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; + + + + + +} + +.top-infocard-title{ + display: flex; + justify-content: center; + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; + margin-bottom: 28px; +} + +.top-infocard-description{ + display: flex; + justify-content: center; + font-size: 16px; + line-height: 24px; + padding: 0px 0px 73px; +} + + + +@media screen and (max-width: 414px) { + .main-banner-desktop{ + display: none; + + +} + .main-banner-mobile{ + width: 100%; + + +} + +} +@media screen and (max-width: 768px) { + .top-infocard{ + padding: 84px 28px 158px; + flex-direction: column; + } + + .top-infocard-text{ + margin: 0 0 68px; + + } + + .top-infocard-subtitle{ + font-size: 20px; + + } + + .top-infocard-title{ + font-size: 28px; + + } + + .top-infocard-image{ + width: 100%; + max-width: 240px; + + + } + + +} + + + +@media screen and (min-width: 415px) { + .main-banner-mobile{ + display: none; + } +}