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/styles/main.css b/assets/styles/main.css index 1284e53..56bc624 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -4,6 +4,11 @@ box-sizing: border-box; } +body{ + font-family: 'Inter', sans-serif; + color:#000000; +} + .page-header{ background: #000000; display: flex; @@ -20,6 +25,51 @@ display: block; } +.top-infocard{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 80px 0 96px; + gap: 73px; +} + +.top-infocard-text{ + max-width:40%; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + text-transform: uppercase; +} + +.top-infocard-title{ + margin-bottom: 28px; + font-weight: 500; + font-size: 48px; + text-transform: uppercase; +} + +.top-infocard-description{ + font-size: 16px; + line-height: 24px; +} + +.top-infocard-subtitle, +.top-infocard-title{ + text-align: center; +} + +.figure-infocard{ + width: 16%; +} + +.top-infocard-image{ + min-width: 100%; +} + + /* BREAKPOINTS */ @@ -33,4 +83,5 @@ .main-banner-mobile{ display: none; } -} \ No newline at end of file +} + diff --git a/index.html b/index.html index 4a4d642..7e7f94a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -19,10 +19,33 @@
+
+
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 Infocard do Topo + +
+ +
+