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/assets/styles/main.css b/assets/styles/main.css index d591648..1a8c47c 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -4,6 +4,11 @@ box-sizing: border-box; /*mantem a largura do elemento determinada no widht e nao adiciona o tamanho do padding no calculo, porem ele vai estar la*/ } +body { + font-family: 'Inter', sans-serif; + color: #000; +} + .page-header { display: flex; justify-content: center; @@ -19,6 +24,39 @@ width: 100%; } +.top-infocard { + display: flex; + align-items: center; + justify-content: center; + padding: 80px 0 96px; +} + +.top-infocard-text { + max-width: 766px; /*tamanho maximo da parte de textos no figma*/ + margin-right: 124px; +} + +.top-infocard-subtitle { + font-size: 32px; + font-weight: 400; + text-transform: uppercase; + +} + +.top-infocard-title { + font-size: 40px; + font-weight: 500; + text-transform: uppercase; + margin-bottom: 24px; +} + +.top-infocard-description { + font-size: 16px; + line-height: 24px; +} + + + @media screen and (max-width: 414px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/ .main-banner-desktop{ @@ -26,6 +64,38 @@ } } +@media screen and (max-width: 992px) { + .top-infocard{ + flex-direction: column; + padding: 84px 26px 158px; + } + + .top-infocard-text{ + margin: 0 0 68px; + } + + .top-infocard-subtitle{ + font-size: 20px; + } + + .top-infocard-title{ + font-size: 28px; + margin-bottom: 20px; + } + + .top-infocard-image{ + width: 100%; + max-width: 240px; + } +} + +@media screen and (min-width: 993px) and (max-width: 1280px) { + .top-infocard-text{ + max-width: 520px; + margin-right: 70px; + } +} + @media screen and (min-width: 415px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/ .main-banner-mobile{ diff --git a/index.html b/index.html index 044c1f6..ac989dc 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,10 @@ + + + + @@ -9,6 +13,9 @@ M3 Landing Page + + + @@ -19,9 +26,20 @@
-
+
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