diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js index 59a88c2..6345902 100644 --- a/src/components/layout/Footer.js +++ b/src/components/layout/Footer.js @@ -5,7 +5,7 @@ import ButtonSubmit from "./ButtonSubmit.js"; function Footer() { return ( - + ); } export default Footer; diff --git a/src/components/layout/Footer.module.css b/src/components/layout/Footer.module.css index e4e6e19..abcbe6c 100644 --- a/src/components/layout/Footer.module.css +++ b/src/components/layout/Footer.module.css @@ -1,9 +1,11 @@ #footer { display: flex; - flex-direction: column; - justify-content: center; + flex-direction: row; + justify-content: space-evenly; align-items: center; background-color: var(--color-gray); + flex-wrap: wrap; + padding: 40px 0; } #sobre { @@ -11,7 +13,7 @@ } #scrollUpButton { - transform: translate(40vw, -20px); + transform: translate(80vw, 20px); display: flex; justify-content: center; align-items: center; @@ -25,6 +27,21 @@ cursor: pointer; } +.blockContainer { + margin: 10px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + height: 650px; + width: 30%; + border: 1px solid var(--color-golden); + padding: 20px; + font-size: 1.2em; +} +.blockContainer > p { + text-align: center; +} #formComments { padding: 10px; display: flex; @@ -43,8 +60,8 @@ } .formBlock { - width: 35vw; - margin: 10px; + width: 29vw; + margin: 10px 0; display: flex; flex-direction: column; border: var(--color-golden) solid 1px; @@ -64,9 +81,51 @@ textarea { background-color: var(--color-light-gray-t); border-radius: 2px; } +@media (max-width: 1000px) { + h2 { + font-size: 1.5em; + } + .blockContainer p { + font-size: 0.8em; + font-weight: 400; + } +} + +@media screen and (max-width: 1885px) { + #formBlockContainer { + order: 3; + } + #aboutBlockContainer { + order: 1; + } + #locationBlockContainer { + order: 2; + } + + .formBlock { + width: 40vw; + } + #formBlockContainer { + width: 40vw; + } +} @media (max-width: 600px) { .formBlock { - width: 80vw; + width: 60vw; + } + #formBlockContainer { + width: 60vw; + } + #aboutBlockContainer { + width: 60vw; + } + #locationBlockContainer { + width: 60vw; + } + #footer{ + flex-direction: column; + align-items: center; + justify-content: center; } } diff --git a/src/components/layout/Header.module.css b/src/components/layout/Header.module.css index e7a047b..de15c32 100644 --- a/src/components/layout/Header.module.css +++ b/src/components/layout/Header.module.css @@ -3,7 +3,6 @@ } #header { - padding: 0 0px; background-color: var(--color-gray); display: flex; flex-direction: row; diff --git a/src/db.js b/src/db.js index 0979e7a..7f43911 100644 --- a/src/db.js +++ b/src/db.js @@ -32,7 +32,7 @@ import pisoClassicoTijolos from "./img/pisos/piso-classico-tijolos.webp"; const categories = [ { - title: "Premium", + title: "Pisos Premium", products: [ { to: "/piso/premium/avorio-di-brescia", @@ -185,7 +185,7 @@ const categories = [ ], }, { - title: "Clássico", + title: "Pisos Clássicos", products: [ { to: "/piso/classico/argila",