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 @@
-
- Foto da loja -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
+
+
+ Foto da loja +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
-
- Foto de bolsa da loja -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
+
+ Foto de bolsa da loja +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
-
- Foto de uma moeda -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
+
+ Foto de uma moeda +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
-
+
-
+
foto de dinheiro 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.
-
+
 foto de moeda
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.
-
+
foto de um laptop
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.
-
+
foto de um celular
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 @@
- - - +
+ Foto de um computador e um óculos +
+

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. +

+
+ Foto de computador embasado +
+ \ No newline at end of file