diff --git a/assets/images/handcoin-icon.png b/assets/images/handcoin-icon.png new file mode 100644 index 0000000..11b00d4 Binary files /dev/null and b/assets/images/handcoin-icon.png differ diff --git a/assets/images/laptop-icon.png b/assets/images/laptop-icon.png new file mode 100644 index 0000000..e5d0f23 Binary files /dev/null and b/assets/images/laptop-icon.png differ diff --git a/assets/images/money-icon.png b/assets/images/money-icon.png new file mode 100644 index 0000000..b6d81cf Binary files /dev/null and b/assets/images/money-icon.png differ diff --git a/assets/images/smartphone-icon.png b/assets/images/smartphone-icon.png new file mode 100644 index 0000000..ad9f3c1 Binary files /dev/null and b/assets/images/smartphone-icon.png differ diff --git a/assets/styles.css b/assets/styles.css index f5a5d2d..74572ca 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -85,7 +85,6 @@ body { grid-template-columns: repeat(3, max-content); gap: 20px; justify-content: center; - padding: 0 0; } .top__card { @@ -141,14 +140,39 @@ body { } -.bottom-card-image-3 { +.bottom__card-image-3 { grid-column: initial; } +/* BOTTOM INFOCARDS */ +.bottom__infocards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + padding: 0 76px 108px; +} +.bottom__infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 33px 32px 65px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + min-width: 22%; +} +.bottom__infocard-image { + display: block; + margin-bottom: 30px; +} +.bottom__infocard-description { + min-width: 15%; + font-size: 16px; + text-align: center; +} @@ -211,8 +235,6 @@ body { flex-direction: column; align-items: center; padding: 26px 26px 34px; - background: #FFFFFF; - box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } /* BOTTOM CARDS */ @@ -235,11 +257,31 @@ body { .bottom__card-3 { grid-column: 1/3; } + + .bottom__infocards { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + justify-content: center; + padding: 0 0; + } + + .bottom__infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 26px 26px 34px; + } + } @media screen and (min-width: 769px) and (max-width: 1200px) { - .top-cards { + .top__cards { + grid-template-columns: repeat(2, max-content); + } + + .bottom__infocards { grid-template-columns: repeat(2, max-content); } } @@ -248,16 +290,17 @@ body { @media screen and (max-width: 1200px) { .top__cards { grid-template-columns: 1fr; - padding: 0 32px; + padding: 0 24px; + } + + .bottom__infocards { + grid-template-columns: 1fr; + padding: 0 24px; } } -@media screen and (min-width: 993px ) and (max-width: 1280px) { - .top__infocard-text { - max-width: 520px; - } -} + diff --git a/index.html b/index.html index c5cdbf1..5155ba0 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,29 @@ + +
+
+ Icon de dinheiro 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.

+
+
+ Icone de uma mão com uma moeda 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.

+
+
+ Icone de um laptop 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.

+
+
+ Icone de um celulara 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