diff --git a/assets/img/topo card 1.png b/assets/img/topo card 1.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/img/topo card 1.png differ diff --git a/assets/img/topo card 2.png b/assets/img/topo card 2.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/img/topo card 2.png differ diff --git a/assets/img/topo card 3.png b/assets/img/topo card 3.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/img/topo card 3.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 73f2b37..71208ce 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -50,13 +50,45 @@ font-size: 16px; line-height: 24px; text-align: left; - } .top-infocard-img { - margin-top: 72px + margin-top: 72px; } +.top-cards { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + justify-content: center; + margin: 178px 0; +} + +.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-img { + display: block; + margin-bottom: 26px; + +} + + +.top-card-paragrafo{ + max-width: 300px; + text-align: center; + font-size: 16px; + line-height: 24px; + } + + @media screen and (max-width: 1023px) { @@ -73,22 +105,19 @@ } } - @media screen and (max-width: 1023px) { - .top-infocard-subtitulo{ - font-size: 20px; - } - - .top-infocard-titulo{ - font-size: 28px; + .top-infocard-subtitulo { + font-size: 20px; } - .top-infocard-paragrafo{ - font-size: 16px; - line-height: 24px; - text-align: center; - padding: 0 30px; - + .top-infocard-titulo { + font-size: 28px; } -} \ No newline at end of file + .top-infocard-paragrafo { + font-size: 16px; + line-height: 24px; + text-align: center; + padding: 0 30px; + } +} diff --git a/index.html b/index.html index 9ceca2d..d73b00d 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,23 @@ Banner infocard do Topo + +
+ +
Imagem do topo do card 01 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ + + +
Imagem do topo do card 02 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ + +
Imagem do topo do card 03 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+ + +