From 41085f8f39c01d859db020552e5f9a5b9c220282 Mon Sep 17 00:00:00 2001 From: ednabarboza Date: Mon, 10 Oct 2022 11:57:49 -0300 Subject: [PATCH 1/3] feat(home):adicao do top-infocard desktop-incompleto --- assets/images/top-infocard-image.png | Bin 0 -> 4717 bytes assets/style/style.css | 42 ++++++++++++++++ index.html | 72 +++++++++++++++++++-------- 3 files changed, 93 insertions(+), 21 deletions(-) create mode 100644 assets/images/top-infocard-image.png diff --git a/assets/images/top-infocard-image.png b/assets/images/top-infocard-image.png new file mode 100644 index 0000000000000000000000000000000000000000..2af63bd074221902e8d0f9c89b9a9104dbf0a5c7 GIT binary patch literal 4717 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 F;$NsbxNHCb literal 0 HcmV?d00001 diff --git a/assets/style/style.css b/assets/style/style.css index d5cd394..6126fde 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; @@ -16,9 +21,46 @@ } .main-banner{ + display: block; width: 100%; } +.top-infocard{ + display:inline-block; + align-items: center; + justify-content: center; +} + +.top-infocard-text{ + margin: 73px 577px; +} + +.top-infocard-subtitle{ + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; + +} + +.top-infocard-title{ + font-weight: 500; + font-size: 48px; + line-height: 58px; + text-transform: uppercase; +} + +.top-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 28px; +} + +.top-infocard-image{ + margin: 0 803px 179px 802px; +} + /*MEDIAS*/ diff --git a/index.html b/index.html index a0277d6..4e860ae 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,55 @@ - - - - - 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 -- 2.34.1 From af2f9885f404637d3346e36d5f7ebe27f202e6e5 Mon Sep 17 00:00:00 2001 From: ednabarboza Date: Tue, 11 Oct 2022 11:29:22 -0300 Subject: [PATCH 2/3] =?UTF-8?q?fix(home):=20corrigindo=20problemas=20no=20?= =?UTF-8?q?c=C3=B3digo=20referente=20ao=20alinhamento=20de=20itens=20do=20?= =?UTF-8?q?main?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/style/style.css | 42 ++++++++++++++++++++++++++++++++++++------ index.html | 15 ++++++++------- 2 files changed, 44 insertions(+), 13 deletions(-) diff --git a/assets/style/style.css b/assets/style/style.css index 6126fde..8c6074f 100644 --- a/assets/style/style.css +++ b/assets/style/style.css @@ -21,21 +21,25 @@ body{ } .main-banner{ - display: block; width: 100%; } .top-infocard{ - display:inline-block; - align-items: center; + display:flex; justify-content: center; + align-items: center; + margin-top: 73px; } + .top-infocard-text{ - margin: 73px 577px; + max-width: 766px; + } .top-infocard-subtitle{ + display: flex; + justify-content: center; font-weight: 400; font-size: 32px; line-height: 39px; @@ -44,10 +48,13 @@ body{ } .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{ @@ -58,16 +65,38 @@ body{ } .top-infocard-image{ - margin: 0 803px 179px 802px; + display: flex; + justify-content: center; + margin: 84px 0 178px; } - /*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: 28px; + text-align: center; + } + + .top-infocard-image{ + margin: 74px 0 90px; + } } @@ -75,5 +104,6 @@ body{ .main-banner-mobile{ display: none; } + } diff --git a/index.html b/index.html index 4e860ae..4d66099 100644 --- a/index.html +++ b/index.html @@ -36,18 +36,19 @@
-

Lorem ipsum

-

dolor sit amet

+ +

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 -
-
+ +
+ Imagem de um esquema de três computadores +
-- 2.34.1 From 4fc1299dc2371f490b0f8fb81fc45fb299717773 Mon Sep 17 00:00:00 2001 From: ednabarboza Date: Tue, 11 Oct 2022 13:48:50 -0300 Subject: [PATCH 3/3] fix(home): ajustando responsividade --- assets/style/style.css | 87 ++++++++++++++++++++++++++++++++++++++++-- index.html | 2 +- 2 files changed, 84 insertions(+), 5 deletions(-) diff --git a/assets/style/style.css b/assets/style/style.css index 8c6074f..9173997 100644 --- a/assets/style/style.css +++ b/assets/style/style.css @@ -22,6 +22,7 @@ body{ .main-banner{ width: 100%; + display: block; } .top-infocard{ @@ -33,7 +34,8 @@ body{ .top-infocard-text{ - max-width: 766px; + width: 100%; + max-width: 766px; } @@ -67,7 +69,7 @@ body{ .top-infocard-image{ display: flex; justify-content: center; - margin: 84px 0 178px; + margin: 73px 0 178px; } /*MEDIAS*/ @@ -90,14 +92,91 @@ body{ .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: 74px 0 90px; + margin: 73px 0 90px; } - + + .top-infocard-img{ + width: 656px; + height: 656px; + margin-top: 152px; + } + } @media screen and (min-width: 415px){ diff --git a/index.html b/index.html index 4d66099..2ade550 100644 --- a/index.html +++ b/index.html @@ -47,7 +47,7 @@
- Imagem de um esquema de três computadores + Imagem de um esquema de três computadores
-- 2.34.1