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 0000000..f94accb Binary files /dev/null and b/assets/imagens/facebook-icon.png differ diff --git a/assets/imagens/instagram-icon.png b/assets/imagens/instagram-icon.png new file mode 100644 index 0000000..a0129a3 Binary files /dev/null and b/assets/imagens/instagram-icon.png differ diff --git a/assets/imagens/youtube-icon.png b/assets/imagens/youtube-icon.png new file mode 100644 index 0000000..397ea3e Binary files /dev/null and b/assets/imagens/youtube-icon.png differ 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. +

+
+
+