diff --git a/Assets/SVG/Cellphone-icon.svg b/Assets/SVG/Cellphone-icon.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/Assets/SVG/Cellphone-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/Assets/SVG/Laptop-icon.svg b/Assets/SVG/Laptop-icon.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/Assets/SVG/Laptop-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/Assets/SVG/Money-icon.svg b/Assets/SVG/Money-icon.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/Assets/SVG/Money-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/Styles/index.css b/Styles/index.css index be10cb4..cba8c91 100644 --- a/Styles/index.css +++ b/Styles/index.css @@ -63,7 +63,7 @@ body{ .top-cards{ display: flex; justify-content: center; - padding: 178px 32px 80px; + padding: 178px 150px 80px; gap: 26px; } @@ -74,8 +74,8 @@ body{ text-align: center; width: 100%; max-width: 350px; - padding: 40px; - gap: 40px; + padding: 30px; + gap: 30px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } @@ -108,6 +108,29 @@ body{ gap: 39px; } +.bottom-cards{ + display: flex; + justify-content: center; + padding: 178px 30px 80px; + gap: 16px; + + +} + +.bottom-card{ + display: flex; + flex-direction: column; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + + padding: 30px; + gap: 30px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + + @media screen and (max-width: 414px){ .banner-principal-desktop, @@ -139,6 +162,16 @@ body{ align-items: center; padding: 90px 32px 80px; } + .bottom-cards{ + flex-direction: column; + align-items: center; + padding: 112px 23px 98px; + + + } + .bottom-card{ + max-width: 350px; + } } @media screen and (min-width: 2000px){ @@ -150,7 +183,7 @@ body{ } .infocard-description, .card-description{ - font-size: 30px; + font-size: 25px; } .top-infocard{ display: flex; @@ -163,10 +196,20 @@ body{ align-items: unset; } .top-cards{ - padding: 200px 300px 80px; + padding: 200px 250px 80px; } .top-card{ max-width: 450px; - height: 400px; + height: 350px; + padding: 40px; + gap: 40px; + } + .bottom-cards{ + padding: 178px 72px 80px; + } + .bottom-card{ + padding: 40px; + gap: 40px; + } } diff --git a/index.html b/index.html index fe8e1b2..377a26f 100644 --- a/index.html +++ b/index.html @@ -75,7 +75,7 @@ -