From b2850a36cc16c214622c9d38e548b3b9902b0e2d Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 9 Oct 2022 22:47:08 -0300 Subject: [PATCH] Adiciona os cards de baixo desktop, mobile e telas grandes e altera css --- assets/images/bottom-card-01.svg | 14 ++++ assets/images/bottom-card-02.svg | 14 ++++ assets/images/bottom-card-03.svg | 6 ++ assets/images/bottom-card-04.svg | 6 ++ assets/styles/main.css | 126 +++++++++++++++++++++++++++---- index.html | 37 +++++++++ 6 files changed, 187 insertions(+), 16 deletions(-) create mode 100644 assets/images/bottom-card-01.svg create mode 100644 assets/images/bottom-card-02.svg create mode 100644 assets/images/bottom-card-03.svg create mode 100644 assets/images/bottom-card-04.svg diff --git a/assets/images/bottom-card-01.svg b/assets/images/bottom-card-01.svg new file mode 100644 index 0000000..ef7dde1 --- /dev/null +++ b/assets/images/bottom-card-01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/bottom-card-02.svg b/assets/images/bottom-card-02.svg new file mode 100644 index 0000000..10f0b00 --- /dev/null +++ b/assets/images/bottom-card-02.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/bottom-card-03.svg b/assets/images/bottom-card-03.svg new file mode 100644 index 0000000..a35b36f --- /dev/null +++ b/assets/images/bottom-card-03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/bottom-card-04.svg b/assets/images/bottom-card-04.svg new file mode 100644 index 0000000..be408ca --- /dev/null +++ b/assets/images/bottom-card-04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/styles/main.css b/assets/styles/main.css index 2e31fd7..0e0b554 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -57,10 +57,10 @@ body { .top-cards { display: grid; - grid-template-columns: repeat(3, max(350px)); + grid-template-columns: repeat(3, 33%); gap: 20px; justify-content: center; - padding: 74px 0; + padding: 74px 23%; background: #F0F0F0; } @@ -85,6 +85,44 @@ body { line-height: 24px; } +.bottom-cards { + margin-top: 142px; + padding-bottom: 66px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); +} + +.bottom-cards-wrapper { + position: relative; + display: grid; + grid-template-columns: repeat(2, 50%); + gap: 20px; + justify-content: center; + margin-left: 27%; + margin-right: 27%; + top: -62px; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 36px 0 66px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.bottom-card-image { + display: block; + margin-bottom: 14px; +} + +.bottom-card-description { + max-width: 85%; + text-align: center; + font-size: 16px; + line-height: 24px; +} + @media screen and (max-width: 340px) { .top-card { padding: 22px 0 20px; @@ -99,6 +137,14 @@ body { font-size: 14px; line-height: 22px; } + + .bottom-card { + padding: 28px 0 40px; + } + + .bottom-card-image { + max-width: 25%; + } } @media screen and (max-width: 1024px) { @@ -130,13 +176,33 @@ body { } .top-cards { - grid-template-columns: 1fr; + grid-template-columns: 100%; padding: 36px 26px; justify-items: center; } .top-card { - max-width: 350px; + margin-left: 2%; + margin-right: 2%; + } + + .bottom-cards { + margin-top: 134px; + padding-bottom: 30px; + } + + .bottom-cards-wrapper { + grid-template-columns: 100%; + gap: 16px; + justify-items: center; + margin-left: 5.5%; + margin-right: 5.5%; + top: -80px; + } + + .bottom-card-description { + max-width: 82%; + font-size: 14px; } } @@ -146,13 +212,15 @@ body { } } -@media screen and (min-width: 1025px) and (max-width: 1200px) { - .top-cards { - grid-template-columns: repeat(3, max(300px)); - } -} - @media screen and (min-width: 2500px) { + .top-infocard { + padding: 160px 0 192px; + } + + .top-infocard-text { + margin-right: 10%; + } + .top-infocard-subtitle { font-size: 64px; } @@ -167,27 +235,53 @@ body { } .top-infocard-image { - width: 800px; + width: 600px; } .top-cards { - grid-template-columns: repeat(3, max(700px)); - gap: 30px; - padding: 148px 0; + gap: 40px; + padding: 148px 25%; } .top-card { padding: 72px 0 52px; + box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.23); } .top-card-image { margin-bottom: 52px; - width: 100%; - max-width: 200px; + width: 30%; } .top-card-description { font-size: 32px; line-height: 48px; } + + .bottom-cards { + margin-top: 284px; + padding-bottom: 132px; + } + + .bottom-cards-wrapper { + gap: 40px; + margin-left: 29%; + margin-right: 29%; + top: -124px; + } + + .bottom-card { + padding: 72px 0 132px; + box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.15); + } + + .bottom-card-image { + margin-bottom: 28px; + width: 25%; + } + + .bottom-card-description { + font-size: 32px; + line-height: 48px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 0135ab9..9a69baa 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,43 @@ Banner do Meio Mobile + +
+
+
+ Imagem do Primeiro Card de Baixo + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+ +
+
+ Imagem do Segundo Card de Baixo + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+ +
+
+ Imagem do Terceiro Card de Baixo + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+ +
+
+ Imagem do Quarto Card de Baixo + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +
+ +
+
+
\ No newline at end of file