From c988e504ec79672e7865866a1edffcb6cbb6048e Mon Sep 17 00:00:00 2001 From: ThiagoMedeiros Date: Thu, 13 Oct 2022 23:16:52 -0300 Subject: [PATCH] feat: cards de baixo desktop e mobile --- assets/imagens/bottom-card-img-01.svg | 14 ++++++ assets/imagens/bottom-card-img-02.svg | 6 +++ assets/imagens/bottom-card-img-03.svg | 14 ++++++ assets/imagens/bottom-card-img-04.svg | 6 +++ assets/imagens/facebook-icon.png | Bin 0 -> 262 bytes assets/imagens/instagram-icon.png | Bin 0 -> 492 bytes assets/imagens/youtube-icon.png | Bin 0 -> 346 bytes assets/styles/main.css | 70 +++++++++++--------------- index.html | 35 +++++++++++++ 9 files changed, 103 insertions(+), 42 deletions(-) create mode 100644 assets/imagens/bottom-card-img-01.svg create mode 100644 assets/imagens/bottom-card-img-02.svg create mode 100644 assets/imagens/bottom-card-img-03.svg create mode 100644 assets/imagens/bottom-card-img-04.svg create mode 100644 assets/imagens/facebook-icon.png create mode 100644 assets/imagens/instagram-icon.png create mode 100644 assets/imagens/youtube-icon.png diff --git a/assets/imagens/bottom-card-img-01.svg b/assets/imagens/bottom-card-img-01.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/imagens/bottom-card-img-01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/imagens/bottom-card-img-02.svg b/assets/imagens/bottom-card-img-02.svg new file mode 100644 index 0000000..547209c --- /dev/null +++ b/assets/imagens/bottom-card-img-02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/bottom-card-img-03.svg b/assets/imagens/bottom-card-img-03.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/imagens/bottom-card-img-03.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/imagens/bottom-card-img-04.svg b/assets/imagens/bottom-card-img-04.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/imagens/bottom-card-img-04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/facebook-icon.png b/assets/imagens/facebook-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f94accb4c141995c7c72447f14921ed7f843a4f8 GIT binary patch literal 262 zcmeAS@N?(olHy`uVBq!ia0vp^d_XM0!3HEx9X}Heq&N#aB8wRqxP?KOkzv*x37{Zj zage(c!@6@aFM%AEbVpxD28NCO+_}kF zT_D(#z#^T&+?&9h&MZBr{V?zGg(vu*@$Y}zTlkpqJHr7crDaQ|ZCT(c8|@>>tE{>4 z&1{!Do+e++mo;~+xO8(I_(JY3~hA)P#R(S@v-Sv#Z3jZVyy zs_~cH=l;Lo!LJRIxXv_KU0QWkJ$d>2x`z7_r*)=~X1^@s6D=Y3@00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPILPp34-5_iLod9=&vO(wwogm$SZXh~AvVkf$G6;$x2JSsQkc{qZ`3Hak z5uMmBY)J7y$u%$qZYXI#l%6;7e5pW#S{K#^Vf0CcQ#OBJXDGZx^prwfgF}}M_)$E)e-c@N{P&(Njv*C{Tc^AgY%<_!3qJSXh{@-HWut5( z?-5R!qoQ|M<~o=&s5kH?#pUjmD|hPpx|4g!-WrqXTiTdr?BtlXa9!euq#nr(kqZ4w z#a2;ATyh@!-3_V=aGiN_`J(?5y03U_2$m?{!qd%ibk0`HQhGGB! literal 0 HcmV?d00001 diff --git a/assets/styles/main.css b/assets/styles/main.css index f64f9e6..00ec5a4 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -115,18 +115,36 @@ body } +.middle-banner +{ + display: flex; + justify-content: center; + background: #E0E0E0; +} + +.middle-banner-top, .middle-banner-bottom +{ + display: flex; + margin: 60px 0 60px; +} + +.middle-banner-img +{ + max-width: 530px; + margin: 0 20px; + +} + .bottom-cards{ - margin-top: 140px; - background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); + padding: 0 72px; } .bottom-cards-wrapper{ - display: grid; - grid-template-columns: repeat(2, max-content); - gap: 20px; + display: flex; + padding: 130px 0 108px; + gap: 16px; justify-content: center; position: relative; - top: -60px; } .bottom-card{ @@ -151,31 +169,6 @@ body } -.middle-banner -{ - display: flex; - justify-content: center; - background: #E0E0E0; -} - -.middle-banner-top, .middle-banner-bottom -{ - display: flex; - margin: 60px 0 -60px; -} - -.middle-banner-img -{ - max-width: 530px; - margin: 0 20px; - -} - - - - - - @@ -261,11 +254,6 @@ body padding: 0 26px; } - .bottom-cards-wrapper{ - grid-template-columns: 1fr; - gap: 16px; - } - .bottom-card-description{ font-size: 14px; } @@ -278,6 +266,10 @@ body max-width: 280px; text-align: center; } + + .bottom-cards-wrapper{ + flex-direction: column; + } } @media screen and (min-width: 769px) and (max-width: 1200px){ @@ -305,12 +297,6 @@ body @media screen and (max-width: 1600px) { -.middle-banner-top, .middle-banner-bottom -{ - display: flex; - margin: 60px 0 -60px; -} - .middle-banner-img { max-width: 430px; diff --git a/index.html b/index.html index 4be7bc5..03adfb7 100644 --- a/index.html +++ b/index.html @@ -86,6 +86,41 @@ +
+
+
+ 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. +

+
+
+