diff --git a/assets/images/Logo-M3Academy 1.svg b/assets/images/Logo-M3Academy 1.svg new file mode 100644 index 0000000..698965a --- /dev/null +++ b/assets/images/Logo-M3Academy 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/card-image1.png b/assets/images/card-image1.png new file mode 100644 index 0000000..d7ff618 Binary files /dev/null and b/assets/images/card-image1.png differ diff --git a/assets/images/card-image2.png b/assets/images/card-image2.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/assets/images/card-image2.png differ diff --git a/assets/images/card-image3.png b/assets/images/card-image3.png new file mode 100644 index 0000000..0bbb48c Binary files /dev/null and b/assets/images/card-image3.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-card-image-01.png b/assets/images/top-card-image-01.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/images/top-card-image-01.png differ diff --git a/assets/images/top-card-image-02.png b/assets/images/top-card-image-02.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/images/top-card-image-02.png differ diff --git a/assets/images/top-card-image-03.png b/assets/images/top-card-image-03.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/images/top-card-image-03.png differ 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 new file mode 100644 index 0000000..8b97cc4 --- /dev/null +++ b/assets/style/style.css @@ -0,0 +1,288 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + font-family: 'Inter', sans-serif; + color: #000000; +} + +.page-header{ + display: flex; + justify-content: center; + background: #000000; + padding: 29px 0; +} + +.header-logo{ + display: block; +} + +.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; +} + +.top-cards{ + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 21px; + justify-content: center; + margin-bottom: 80px; + +} + +.top-card{ + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image{ + display: block; + margin-bottom: 26px; +} + +.top-card-description{ + max-width: 300px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.cards-image{ + display: grid; + grid-template-columns: repeat(3, max-content); + justify-content: center; + background: #E0E0E0; + gap: 39px; +} + +.card-image{ + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + background: #FFFFFF; + padding: 0px; + margin-top: 62px; +} + +.card-img{ + display: block; + margin-bottom: 26px; +} + + + + + + + +/*MEDIAS*/ + +@media screen and (max-width:414px) { + .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; + } + + .top-cards{ + grid-template-columns: 1fr; + padding: 36px 26px; + } +} + +@media screen and (min-width: 415px) and (max-width: 1199px) { + .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; + } + + .top-cards{ + grid-template-columns: 1fr; + padding: 36px 26px; + } + +} + + + +@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 178px; + } + + .top-infocard-img{ + width: 656px; + height: 656px; + } + + .top-card{ + width: 730px; + height: 598px; + } + + .top-cards{ + gap: 44px; + } + + .img1{ + display: block; + margin-bottom: 27px; + width: 214.58px; + height: 214.58px; + margin: 47px 0 38px 0; + } + + .img2{ + display: block; + margin-bottom: 27px; + width: 212.5px; + height: 214.58.8px; + margin: 35px 0 27px 0; + } + + .top-card-description{ + max-width: 625px; + font-size: 34px; + line-height: 50px; + text-align: center; + } + +} + +@media screen and (min-width: 415px){ + .main-banner-mobile{ + display: none; + } + +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d13d7f6 --- /dev/null +++ b/index.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + 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 +
+ +
+
+ Card com desenho de uma loja física +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+ Card com desenho de uma bolsa de compras +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+ +
+ Card com desenho de uma mão segurando uma moeda +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+ +
+
+ Imagem de um computador fechando visto de frente +
+ +
+ Imagem de um computador ligado visto de frente com a tela fechada na metade +
+ +
+ Imagem de um computador ligado visto de lado +
+
+
+ + + + + + \ No newline at end of file