diff --git a/assets/imagens/bottom-card-1.svg b/assets/imagens/bottom-card-1.svg
new file mode 100644
index 0000000..1090b7b
--- /dev/null
+++ b/assets/imagens/bottom-card-1.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/imagens/bottom-card-2.svg b/assets/imagens/bottom-card-2.svg
new file mode 100644
index 0000000..2d06e62
--- /dev/null
+++ b/assets/imagens/bottom-card-2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/imagens/bottom-card-3.svg b/assets/imagens/bottom-card-3.svg
new file mode 100644
index 0000000..7d13645
--- /dev/null
+++ b/assets/imagens/bottom-card-3.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/imagens/bottom-card-4.svg b/assets/imagens/bottom-card-4.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/assets/imagens/bottom-card-4.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/imagens/top-card-imag-1.svg b/assets/imagens/top-card-imag-1.svg
new file mode 100644
index 0000000..be82592
--- /dev/null
+++ b/assets/imagens/top-card-imag-1.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/assets/imagens/top-card-image-1.svg b/assets/imagens/top-card-image-1.svg
deleted file mode 100644
index e5f7cff..0000000
--- a/assets/imagens/top-card-image-1.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
diff --git a/assets/imagens/top-card image-3.svg b/assets/imagens/top-card-image-3.svg
similarity index 100%
rename from assets/imagens/top-card image-3.svg
rename to assets/imagens/top-card-image-3.svg
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 849c5c5..e7b7618 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -17,6 +17,7 @@ body{
width: 12vw;
min-width: 226px;
}
+/* main-banner */
.main-banner-desktop{
width: 100%;
display: block;
@@ -24,6 +25,7 @@ body{
.main-banner-mobile{
display: none;
}
+/* top-infocard */
.top-infocard{
display: flex;
flex-direction: column;
@@ -56,25 +58,26 @@ body{
width: 16%;
min-width: 239px;
}
+/* top-cards */
.top-cards{
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 21px;
+ display: flex;
justify-content: center;
- padding: 178px 20% 50px;
+ gap: 21px;
+ padding: 178px 31px 50px;
}
.top-card{
display: flex;
flex-direction: column;
align-items: center;
- padding: 26px 26px 36px;
+ padding: 36px 26px 26px;
+ gap: 27px;
background: #FFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ width: 18%;
+ min-height: 287px;
}
.top-card-image{
- display: block;
- min-width: 5vw;
- margin-bottom: 80px;
+ width: 34%;
}
.top-card-description{
font-weight: 400;
@@ -82,6 +85,7 @@ body{
line-height: 24px;
text-align: center;
}
+/* middle-banner */
.middle-banner-wrapper{
background: #E0E0E0
}
@@ -93,20 +97,47 @@ body{
bottom: -62px;
}
.middle-banner{
+ justify-content: center;
width: 29%;
}
.middle-banner-image{
- display: block;
width: 100%;
}
-
+/* bottom-cards */
+.bottom-cards{
+ display: flex;
+ justify-content: center;
+ padding: 191px 0 54px;
+ gap: 16px;
+
+}
+.bottom-figures-card{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 23%;
+ padding: 35px 32px 65px;
+ gap: 15px;
+ min-height: 332px;
+ background: #FFF;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+.bottom-figures-image{
+ width: 34%;
+}
+.bottom-figcapiton{
+ text-align: center;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+}
+ /* layout 4K */
@media screen and (min-width: 2500px) {
.page-header{
padding: 58px
}
}
-
-
+ /* layaut mobile */
@media screen and (max-width: 1024px) {
.main-banner-desktop{
display: none;
@@ -127,11 +158,21 @@ body{
max-width: 86%;
padding: 0 0 73px;
}
- .top-cards{
- padding: 90px 7%;
+ .top-infocard-image {
+ width: 58%
}
- .top-infocard-image{
- width: 34%;
+ /* top-cards */
+ .top-cards{
+ flex-direction: column;
+ align-items: center;
+ padding: 90px 0;
+ }
+ .top-card{
+ width: 84%;
+ gap: 37px;
+ }
+ .top-card-image{
+ width: 25%;
}
.banners-middle{
display: grid;
@@ -154,12 +195,13 @@ body{
} .Banner3{
grid-area: b3;
}
-}
-
-@media screen and (max-width: 540px) {
- .top-cards{
- grid-template-columns: 1fr;
- padding: 90px 26px 80px;
- gap: 24px;
+ /* bottom-cards */
+ .bottom-cards{
+ flex-direction: column;
+ align-items: center;
+ padding: 96px 23px;
}
-}
\ No newline at end of file
+ .bottom-figures-card{
+ width: 94%;
+ }
+}
diff --git a/index.html b/index.html
index 8e53354..6829ba3 100644
--- a/index.html
+++ b/index.html
@@ -45,17 +45,19 @@
+
+
+
+ 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.
+ 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.
+
+
+
+
+
+ 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.
+
+
+
+ 
+ 
- 
+ 
+ 
+ 
+