diff --git a/assents/imagens/banner-bottom-reverse.png b/assents/imagens/banner-bottom-reverse.png
new file mode 100644
index 0000000..03e43ac
Binary files /dev/null and b/assents/imagens/banner-bottom-reverse.png differ
diff --git a/assents/style/estilo.css b/assents/style/estilo.css
index 484eb7f..7fb05a8 100644
--- a/assents/style/estilo.css
+++ b/assents/style/estilo.css
@@ -80,21 +80,49 @@ body {
padding: 0 28px;
width: 45%;
}
+/*texto final*/
+
+.text-title-final {
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+
+.text-description-final {
+ text-align: center;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.text-final {
+ display: block;
+ margin: 0 36% 50px;
+ width: 29%;
+}
/*Cards do topo*/
.cards-top {
- display: grid;
- grid-template-columns: repeat(3, max-content);
- gap: 20px;
+ display: flex;
+ align-items: center;
justify-content: center;
+ padding: 0 72px;
+}
+
+.card-top-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ width: 100%;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
- padding: 36px 26px 27px ;
+ justify-content: center;
+ padding: 35px 25px 26px ;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@@ -113,11 +141,13 @@ body {
text-align: center;
}
/*Card de baixo */
-.amiga {
+
+.card-bottom {
display: flex;
align-items: center;
justify-content: center;
- padding: 0 4.5rem;
+ padding: 0 72px;
+ margin-top: 81px;
}
@@ -154,7 +184,8 @@ body {
background-color: #E0E0E0;
height: 14%;
max-height: 570px;
- padding-top: 62px;
+ padding-top: 31px;
+ margin: 0 0 5%;
}
.gallery-box {
@@ -164,6 +195,7 @@ body {
gap: 39px;
width: 30%;
height: 89%;
+ transform: translateY(31px);
}
.gallery-foto {
@@ -174,6 +206,24 @@ body {
max-height: 530px;
}
+/*foto final*/
+
+.foto-final {
+ display: block;
+ align-items: center;
+ width: 71%;
+ height: 7%;
+ margin: 0 15%;
+}
+
+.foto-final-reverse {
+ display: none;
+ width: 100%;
+ height: 8%;
+ margin-bottom: 50px;
+
+}
+
@media screen and (max-width: 1023px) {
.banner-big {
display: none;
@@ -189,8 +239,10 @@ body {
width: 100%;
}
- .text-card {
- max-width: max-content;
+ .text-final {
+ text-align: center;
+ margin: 0 0 50px;
+ width: 100%;
}
.theree-computer {
@@ -199,7 +251,43 @@ body {
}
.cards-top {
- grid-template-columns: 1fr;
+ padding: 0 32px;
+ }
+
+ .card-top-box {
+ flex-direction: column;
margin: 0 32px;
}
-}
+
+ .gallery {
+ padding: 0;
+ }
+
+ .gallery-box {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ width: 100%;
+ padding: 0 23px;
+ }
+
+ .gallery-foto-mobile-3 {
+ grid-column: 1/3 ;
+ grid-row: 2/3;
+ }
+
+ .card-bottom {
+ padding: 0 8% 1rem;
+ }
+
+ .card-total-bottom {
+ flex-direction: column;
+ }
+
+ .foto-final-reverse {
+ display: block;
+ }
+
+ .foto-final {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 5b92c6d..a771fbc 100644
--- a/index.html
+++ b/index.html
@@ -38,55 +38,57 @@
-
-
- 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.
-
+
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.
@@ -95,8 +97,18 @@
-
-
-
+
+
+
+
Lorem ipsum dolor sit amet
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
+ Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+ Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+
+
+
+
+