diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000..2af63bd Binary files /dev/null and b/assets/images/top-infocard-image.png differ diff --git a/assets/style/style.css b/assets/style/style.css index d5cd394..9173997 100644 --- a/assets/style/style.css +++ b/assets/style/style.css @@ -4,6 +4,11 @@ box-sizing: border-box; } +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} + .page-header{ display: flex; justify-content: center; @@ -17,8 +22,55 @@ .main-banner{ width: 100%; + display: block; } +.top-infocard{ + display:flex; + justify-content: center; + align-items: center; + margin-top: 73px; +} + + +.top-infocard-text{ + width: 100%; + max-width: 766px; + +} + +.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: 24px; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 28px; +} + +.top-infocard-image{ + display: flex; + justify-content: center; + margin: 73px 0 178px; +} /*MEDIAS*/ @@ -26,12 +78,111 @@ .main-banner-desktop{ display: none; } + + .top-infocard-subtitle{ + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title{ + font-size: 28px; + line-height: 34px; + } + .top-infocard-description{ + font-size: 16px; + line-height: 24px; + margin: 0 28px; + text-align: center; + } + + .top-infocard-image{ + margin: 65px 0 90px; + } + + .top-infocard-img{ + width: 239px; + height: 239px; + } + + +} + +@media screen and (min-width: 415px) and (max-width: 899px) { + .top-infocard-subtitle{ + font-size: 20px; + line-height: 24px; + } + + .top-infocard-title{ + font-size: 28px; + line-height: 34px; + } + + .top-infocard-description{ + font-size: 16px; + line-height: 24px; + margin: 0 28px; + text-align: center; + + } + + .top-infocard-image{ + margin: 73px 0 90px; + } + +} + +@media screen and (min-width: 3000px) and (max-width: 4000px) { + .header-logo{ + width: 470px; + height: 88px; + } + + .main-banner{ + display: block; + } + + .top-infocard-text{ + width: 1915px; + height: 418px; + max-width: 100%; + margin-top: 152px; + } + + .top-infocard-subtitle{ + font-size: 66px; + line-height: 70px; + } + + .top-infocard-title{ + font-size: 100px; + line-height: 120px; + } + + .top-infocard-description{ + font-size: 40px; + line-height: 44px; + margin: 28px; + text-align: center; + } + + .top-infocard-image{ + margin: 73px 0 90px; + } + + .top-infocard-img{ + width: 656px; + height: 656px; + margin-top: 152px; + } + } @media screen and (min-width: 415px){ .main-banner-mobile{ display: none; } + } diff --git a/index.html b/index.html index a0277d6..2ade550 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,56 @@ - - - - - Desafio 1 - M3 Academy - - - -
- - - -
-
-
- Imagem de uma mesa de trabalho com um computador ligado - Imagem de uma mesa de trabalho com um computador ligado -
-
- - + + + + + + + + + + Desafio 1 - M3 Academy + + + + + + + +
+ + + +
+ +
+
+ Imagem de uma mesa de trabalho com um computador ligado + Imagem de uma mesa de trabalho com um computador ligado +
+ +
+
+ +

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.

+
+
+ +
+ Imagem de um esquema de três computadores +
+
+ + + \ No newline at end of file