Skip to content
This repository has been archived by the owner on Apr 13, 2024. It is now read-only.

Commit

Permalink
Enhancmente: Enhancment details
Browse files Browse the repository at this point in the history
  • Loading branch information
Ericles Dos Santos committed Aug 14, 2022
1 parent 878fec4 commit cc59bfc
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 47 deletions.
102 changes: 64 additions & 38 deletions src/components/layout/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ButtonSubmit from "./ButtonSubmit.js";

function Footer() {
return (
<footer id={styles.footer}>
<>
<button
onClick={() => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
Expand All @@ -14,45 +14,71 @@ function Footer() {
>
<FontAwesomeIcon icon={faCircleArrowUp} />
</button>
<p id="contact">Contato</p>
<form
id={styles.formComments}
action="mailto:ericlesdsantos@gmail.com"
method="POST"
name="EmailForm"
>
<div className={styles.formBlock}>
<label htmlFor="name">Nome:</label>
<input type="text" name="name" id="name" />
</div>

<div className={styles.formBlock}>
<label htmlFor="email">E-mail:</label>
<input
type="email"
name="email"
id="email"
placeholder="example@email.com"
required
/>
</div>
<footer id={styles.footer}>
<section className={styles.blockContainer} id={styles.aboutBlockContainer}>
<h2>Sobre nós</h2>
<p>Somos uma Startup no ramo de pisos cerâmicos de luxo</p>
<p>Mas também temos pisos acessíveis para todos</p>
<p>Todos os pisos são feitos a mão</p>
<p>Amamos o que fazemos</p>
<p>Nosso ambiente é agradável, descontraído e aconchegante</p>
<p>Somos uma empresa pet-friendly</p>
<p>Não agredimos a natureza na fabricação dos nossos produtos</p>
<p>Não aceitamos qualquer tipo de preconceito</p>

<div className={styles.formBlock}>
<label htmlFor="message">Mensagem:</label>
<textarea
name="message"
id="message"
cols="30"
rows="10"
required
></textarea>
</div>
<ButtonSubmit />
</form>
<p>Venha nós fazer uma visita</p>
</section>

<p>Todos os direitos reservados</p>
<p>&copy;Ita Cerâmicas - 2022 - Éricles dos Santos Cunha</p>
</footer>
<section className={styles.blockContainer} id={styles.formBlockContainer}>
<h2 id="contact">Contato</h2>
<form
id={styles.formComments}
action="mailto:ericlesdsantos@gmail.com"
method="POST"
name="EmailForm"
>
<div className={styles.formBlock}>
<label htmlFor="name">Nome:</label>
<input type="text" name="name" id="name" />
</div>
<div className={styles.formBlock}>
<label htmlFor="email">E-mail:</label>
<input
type="email"
name="email"
id="email"
placeholder="example@email.com"
required
/>
</div>
<div className={styles.formBlock}>
<label htmlFor="message">Mensagem:</label>
<textarea
name="message"
id="message"
cols="30"
rows="10"
required
></textarea>
</div>
<ButtonSubmit />
</form>
<p>Todos os direitos reservados</p>
<p>&copy;Ita Cerâmicas - 2022 - Éricles dos Santos Cunha</p>
</section>
<section className={styles.blockContainer} id={styles.locationBlockContainer}>
<h2>Localização</h2>
<p>País: Brasil</p>
<p>Estado: Sergipe</p>
<p>Cidade: Itabaiana</p>
<p>Bairro: Marianga</p>
<p>Rua: Ita Cerâmicas</p>
<p>Nº: 100</p>
<p>CEP: 49.000-000</p>
<p>+55 (79) 9 9999-9999</p>
</section>
</footer>
</>
);
}
export default Footer;
71 changes: 65 additions & 6 deletions src/components/layout/Footer.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
#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 {
background-color: var(--color-gray);
}

#scrollUpButton {
transform: translate(40vw, -20px);
transform: translate(80vw, 20px);
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
}
1 change: 0 additions & 1 deletion src/components/layout/Header.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
}

#header {
padding: 0 0px;
background-color: var(--color-gray);
display: flex;
flex-direction: row;
Expand Down
4 changes: 2 additions & 2 deletions src/db.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -185,7 +185,7 @@ const categories = [
],
},
{
title: "Clássico",
title: "Pisos Clássicos",
products: [
{
to: "/piso/classico/argila",
Expand Down

1 comment on commit cc59bfc

@vercel
Copy link

@vercel vercel bot commented on cc59bfc Aug 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ita-ceramicas-react – ./

ita-ceramicas-react.vercel.app
ita-ceramicas-react-ericles-porty.vercel.app
ita-ceramicas-react-git-main-ericles-porty.vercel.app

Please sign in to comment.