diff --git a/Assets/SVG/Coin-icon.svg b/Assets/SVG/Coin-icon.svg
new file mode 100644
index 0000000..ea11a3d
--- /dev/null
+++ b/Assets/SVG/Coin-icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/Assets/SVG/Store-icon.svg b/Assets/SVG/Store-icon.svg
new file mode 100644
index 0000000..e5f7cff
--- /dev/null
+++ b/Assets/SVG/Store-icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/Assets/SVG/shopping-bag.svg b/Assets/SVG/shopping-bag.svg
new file mode 100644
index 0000000..d330029
--- /dev/null
+++ b/Assets/SVG/shopping-bag.svg
@@ -0,0 +1,12 @@
+
diff --git a/Styles/index.css b/Styles/index.css
index 07c2664..9d5553e 100644
--- a/Styles/index.css
+++ b/Styles/index.css
@@ -24,6 +24,8 @@ body{
display: none;
}
+
+
.text-infocard{
display: flex;
flex-direction: column;
@@ -32,14 +34,14 @@ body{
text-align: center;
}
-.text-subtitle{
+.infocard-subtitle{
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
}
-.text-title{
+.infocard-title{
font-weight: 500;
font-size: 48px;
line-height: 58px;
@@ -47,7 +49,7 @@ body{
text-transform: uppercase;
}
-.text-description{
+.infocard-description{
font-weight: 400;
font-size: 16px;
line-height: 24px;
@@ -60,6 +62,33 @@ body{
align-items: center;
}
+.top-cards{
+ display: flex;
+ justify-content: center;
+ padding: 178px 32px 80px;
+ gap: 26px;
+}
+
+.top-card{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 100%;
+ max-width: 350px;
+ padding: 40px;
+ gap: 40px;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.card-icon{
+ width: 100%;
+ height: 100%;
+ max-width: 103px;
+ max-height: 104px;
+}
+
+
@media screen and (max-width: 414px){
.banner-principal-desktop,
.infocard-image-desktop{
@@ -83,5 +112,39 @@ body{
.text-description{
width: 100%;
}
-
+ .top-cards{
+ flex-direction: column;
+ align-items: center;
+ padding: 90px 32px 80px;
+ }
+}
+
+@media screen and (min-width: 2000px){
+ .infocard-subtitle{
+ font-size: 40px;
+ }
+ .infocard-title{
+ font-size: 56px;
+ }
+ .infocard-description,
+ .card-description{
+ font-size: 30px;
+ }
+ .top-infocard{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ .infocard-image{
+ width: 100%;
+ max-width: 400px;
+ align-items: unset;
+ }
+ .top-cards{
+ padding: 200px 300px 80px;
+ }
+ .top-card{
+ max-width: 450px;
+ height: 400px;
+ }
}
diff --git a/index.html b/index.html
index 69ca642..98f0541 100644
--- a/index.html
+++ b/index.html
@@ -33,23 +33,49 @@
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
Lorem ipsum
- dolor sit amet
+ Lorem ipsum
+ dolor sit amet
-
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. +
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Cras euismod enim non dui fringilla interdum. +
+