forked from M3-Academy/desafio-react-e-typescript
fix: faz os ajustes finais na página
This commit is contained in:
parent
fd012b7cf6
commit
f0628358a1
@ -8,6 +8,12 @@
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Pagina Institucional</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.1162 3.60396L1.67632 0.164193C1.45751 -0.0547314 1.10273 -0.0547314 0.884018 0.164193C0.665288 0.382921 0.665288 0.737679 0.884018 0.95639L3.92778 4.00006L0.884106 7.04362C0.665377 7.26244 0.665377 7.61716 0.884106 7.83589C1.10284 8.0547 1.45759 8.0547 1.67641 7.83589L5.11629 4.39607C5.22566 4.28665 5.28028 4.1434 5.28028 4.00008C5.28028 3.85668 5.22555 3.71332 5.1162 3.60396Z" fill="#C4C4C4"/>
|
||||
<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 509 B After Width: | Height: | Size: 891 B |
@ -16,21 +16,43 @@ const FooterBottom = () => {
|
||||
<div className={styles.footer_wrapper}>
|
||||
<div className={styles.footerBox}>
|
||||
<div className={styles.footerText}>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
</div>
|
||||
|
||||
<div className={styles.footerLogos}>
|
||||
<figure>
|
||||
<img src={master} alt="logo mastercard" />
|
||||
<img src={visa} alt="logo visa" />
|
||||
<img src={diners} alt="logo mastercard" />
|
||||
<img src={elo} alt="logo mastercard" />
|
||||
<img src={hiper} alt="logo mastercard" />
|
||||
<img src={pagseguro} alt="logo mastercard" />
|
||||
<img src={boleto} alt="logo mastercard" />
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={master}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img className={styles.footerLogosimg} src={visa} alt="logo visa" />
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={diners}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={elo}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={hiper}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={pagseguro}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={boleto}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<p className={styles.footerRisco}>____</p>
|
||||
<img src={vtexpci} alt="logo vtexpci" />
|
||||
</figure>
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
import master from "../../../src/assets/Master.svg";
|
||||
import visa from "../../../src/assets/Visa.svg";
|
||||
import diners from "../../../src/assets/Diners.svg";
|
||||
import elo from "../../../src/assets/Elo.svg";
|
||||
import hiper from "../../../src/assets/Hiper.svg";
|
||||
import pagseguro from "../../../src/assets/Pagseguro.svg";
|
||||
import boleto from "../../../src/assets/Boleto.svg";
|
||||
import vtexpci from "../../../src/assets/vtex-pci-200.svg";
|
||||
import vtex from "../../../src/assets/vtex.svg";
|
||||
import m3 from "../../../src/assets/m3footer.svg";
|
||||
import styles from "../../style/FooterBottomMobile.module.scss";
|
||||
|
||||
const FooterBottomMobile = () => {
|
||||
return (
|
||||
<div className={styles.footer_wrapper}>
|
||||
<div className={styles.footerBox}>
|
||||
<div className={styles.footerLogos}>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={master}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img className={styles.footerLogosimg} src={visa} alt="logo visa" />
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={diners}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={elo}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={hiper}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={pagseguro}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<img
|
||||
className={styles.footerLogosimg}
|
||||
src={boleto}
|
||||
alt="logo mastercard"
|
||||
/>
|
||||
<p className={styles.footerRisco}>____</p>
|
||||
<img src={vtexpci} alt="logo vtexpci" />
|
||||
</div>
|
||||
<div className={styles.footerText}>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor
|
||||
|
||||
</div>
|
||||
|
||||
<div className={styles.FooterName}>
|
||||
<p className={styles.footerDevLogo}>Powered by</p>
|
||||
<img className={styles.footerdeveloped} src={vtex} alt="logo vtex" />
|
||||
<p className={styles.footerDevLogom3}>Developed by</p>
|
||||
<img className={styles.footerdevelopedm3} src={m3} alt="logo m3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FooterBottomMobile };
|
||||
@ -7,6 +7,7 @@ import youtube from "../../../src/assets/youtube.svg";
|
||||
import linkedin from "../../../src/assets/linkedin.svg";
|
||||
import whatsapp from "../../../src/assets/whatsapp.svg";
|
||||
import elipse from "../../../src/assets/elipse.svg";
|
||||
import seta from "../../../src/assets/seta.svg";
|
||||
|
||||
const FooterMenu = () => {
|
||||
return (
|
||||
@ -93,23 +94,39 @@ const FooterMenu = () => {
|
||||
<div>
|
||||
<div className={styles.logos}>
|
||||
<a href="https://www.facebook.com" target="_blank" rel="noreferrer">
|
||||
<img src={face} alt="logo facebook" />
|
||||
<img className={styles.logosimg} src={face} alt="logo facebook" />
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img src={insta} alt="logo instagram" />
|
||||
<img
|
||||
className={styles.logosimg}
|
||||
src={insta}
|
||||
alt="logo instagram"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.twitter.com" target="_blank" rel="noreferrer">
|
||||
<img src={twitter} alt="logo twitter" />
|
||||
<img
|
||||
className={styles.logosimg}
|
||||
src={twitter}
|
||||
alt="logo twitter"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.youtube.com" target="_blank" rel="noreferrer">
|
||||
<img src={youtube} alt="logo youtube" />
|
||||
<img
|
||||
className={styles.logosimg}
|
||||
src={youtube}
|
||||
alt="logo youtube"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com" target="_blank" rel="noreferrer">
|
||||
<img src={linkedin} alt="logo linkedin" />
|
||||
<img
|
||||
className={styles.logosimg}
|
||||
src={linkedin}
|
||||
alt="logo linkedin"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<p className={styles.textSite}>www.loremipsum.com</p>
|
||||
@ -123,7 +140,8 @@ const FooterMenu = () => {
|
||||
<img src={whatsapp} alt="logo whatsapp" />
|
||||
</a>
|
||||
<a href="/" target="_blank" rel="noreferrer">
|
||||
<img src={elipse} alt="logo whatsapp" />
|
||||
<img className={styles.imgZap} src={elipse} alt="logo whatsapp" />
|
||||
<img className={styles.imgSeta} src={seta} alt="seta" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,9 @@ import insta from "../../../src/assets/insta.svg";
|
||||
import twitter from "../../../src/assets/twitter.svg";
|
||||
import youtube from "../../../src/assets/youtube.svg";
|
||||
import linkedin from "../../../src/assets/linkedin.svg";
|
||||
import whatsapp from "../../../src/assets/whatsapp.svg";
|
||||
import elipse from "../../../src/assets/elipse.svg";
|
||||
import seta from "../../../src/assets/seta.svg";
|
||||
|
||||
const FooterTopMobile = () => {
|
||||
return (
|
||||
@ -37,6 +40,14 @@ const FooterTopMobile = () => {
|
||||
<p>www.loremipsum.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.linkZap}>
|
||||
<a href="https://wa.me/5521991111111" target="_blank" rel="noreferrer">
|
||||
<img src={whatsapp} alt="logo whatsapp" />
|
||||
</a>
|
||||
<img className={styles.imgZap} src={elipse} alt="logo whatsapp" />
|
||||
<img className={styles.imgSeta} src={seta} alt="seta" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import close from "../assets/close.svg";
|
||||
import styles from "../style/HamburguerHeader.module.scss";
|
||||
import close from "../../assets/close.svg";
|
||||
import styles from "../../style/HamburguerHeader.module.scss";
|
||||
|
||||
const MenuContext = React.createContext<{
|
||||
isOpen: boolean;
|
||||
@ -1,8 +1,8 @@
|
||||
import React from "react";
|
||||
import logo from "../assets/Logo-M3Academy.png";
|
||||
import searchImage from "../assets/search-img.png";
|
||||
import cart from "../assets/cart.png";
|
||||
import styles from "../style/Header.module.scss";
|
||||
import logo from "../../assets/Logo-M3Academy.png";
|
||||
import searchImage from "../../assets/search-img.png";
|
||||
import cart from "../../assets/cart.png";
|
||||
import styles from "../../style/Header.module.scss";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styles from "../style/HeaderBottom.module.scss";
|
||||
import styles from "../../style/HeaderBottom.module.scss";
|
||||
|
||||
const HeaderBottom = () => {
|
||||
return (
|
||||
@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import { HamburguerHeader } from "./HamburguerHeader";
|
||||
import logom3 from "../assets/Logo-M3Academy.png";
|
||||
import cart from "../assets/cart.png";
|
||||
import searchImage from "../assets/search-img.png";
|
||||
import styles from "../style/HeaderMobile.module.scss";
|
||||
import logom3 from "../../assets/Logo-M3Academy.png";
|
||||
import cart from "../../assets/cart.png";
|
||||
import searchImage from "../../assets/search-img.png";
|
||||
import styles from "../../style/HeaderMobile.module.scss";
|
||||
|
||||
const HeaderMobile = () => {
|
||||
return (
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styles from "../style/AccordionMenu.module.scss";
|
||||
import styles from "../../style/AccordionMenu.module.scss";
|
||||
type AccordionMenuProps = {
|
||||
items: {
|
||||
title: string;
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
import FormSchema from "./schema/FormSchema";
|
||||
import styles from "../style/FormCustom.module.scss";
|
||||
import FormSchema from "../schema/FormSchema";
|
||||
import styles from "../../style/FormCustom.module.scss";
|
||||
|
||||
interface IFormikValues {
|
||||
name: string;
|
||||
@ -26,8 +26,6 @@ const FormCustom = () => {
|
||||
values: IFormikValues,
|
||||
actions: FormikHelpers<IFormikValues>
|
||||
) => {
|
||||
actions.resetForm();
|
||||
actions.setStatus({ success: "Email sent !" });
|
||||
};
|
||||
return (
|
||||
<div className={styles.Form_Wrapper}>
|
||||
@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
import AccordionMenu from "../components/AccordionMenu";
|
||||
import styles from "../style/Main.module.scss";
|
||||
import { MenuInfo } from "../components/MenuInfo";
|
||||
import { FormCustom } from "../components/FormCustom";
|
||||
import home from "../assets/home.svg";
|
||||
import seta from "../assets/seta.svg";
|
||||
import AccordionMenu from "./AccordionMenu";
|
||||
import styles from "../../style/Main.module.scss";
|
||||
import { MenuInfo } from "./MenuInfo";
|
||||
import { FormCustom } from "./FormCustom";
|
||||
import home from "../../assets/home.svg";
|
||||
import seta from "../../assets/seta.svg";
|
||||
|
||||
const items = [
|
||||
{
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styles from "../style/MenuInfo.module.scss";
|
||||
import styles from "../../style/MenuInfo.module.scss";
|
||||
|
||||
const MenuInfo = () => {
|
||||
return (
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import styles from "../style/Newsletter.module.scss";
|
||||
import styles from "../../style/Newsletter.module.scss";
|
||||
|
||||
const Newsletter = () => {
|
||||
return (
|
||||
@ -7,8 +7,14 @@ const Newsletter = () => {
|
||||
<div className={styles.box}>
|
||||
<h3 className={styles.title}>Assine nossa Newsletter</h3>
|
||||
<div className={styles.boxNews}>
|
||||
<input className={styles.emailInput} type="email" placeholder="Email" />
|
||||
<button className={styles.btn} type="submit">Enviar</button>
|
||||
<input
|
||||
className={styles.emailInput}
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
<button className={styles.btn} type="submit">
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,18 +1,19 @@
|
||||
import React from "react";
|
||||
import { Route } from "react-router";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Header } from "../components/Header";
|
||||
import { HeaderBottom } from "../components/HeaderBottom";
|
||||
import { Main } from "../components/Main";
|
||||
import { HeaderMobile } from "../components/HeaderMobile";
|
||||
import { Newsletter } from "../components/Newsletter";
|
||||
import { Header } from "../components/Header/Header";
|
||||
import { HeaderBottom } from "../components/Header/HeaderBottom";
|
||||
import { Main } from "../components/Main/Main";
|
||||
import { HeaderMobile } from "../components/Header/HeaderMobile";
|
||||
import { Newsletter } from "../components/Newsletter/Newsletter";
|
||||
import { FooterMenu } from "../components/Footer/FooterMenu";
|
||||
import { FooterBottom } from "../components/Footer/FooterBottom";
|
||||
import { FooterBottomMobile } from "../components/Footer/FooterBottomMobile";
|
||||
import { FooterTopMobile } from "../components/Footer/FooterTopMobile";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<HeaderMobile />
|
||||
<Header />
|
||||
<HeaderBottom />
|
||||
@ -20,8 +21,9 @@ const Home = () => {
|
||||
<Newsletter />
|
||||
<FooterMenu />
|
||||
<FooterTopMobile />
|
||||
<FooterBottomMobile />
|
||||
<FooterBottom />
|
||||
</>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -2,12 +2,18 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.accordionItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-height: 500px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.accordionTitle {
|
||||
@ -18,7 +24,6 @@
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 302px;
|
||||
max-height: 50px;
|
||||
height: 39px;
|
||||
display: flex;
|
||||
@ -26,6 +31,10 @@
|
||||
margin-left: 100px;
|
||||
color: #7d7d7d;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
@ -39,6 +48,13 @@
|
||||
.accordionTitle.active {
|
||||
background-color: black;
|
||||
color: white;
|
||||
max-width: 302px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96.88%;
|
||||
max-width: none;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
}
|
||||
width: 590px;
|
||||
@ -47,11 +63,16 @@
|
||||
|
||||
.accordionContent {
|
||||
margin-left: 50px;
|
||||
width: 748px;
|
||||
max-height: 50px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
max-height: 0;
|
||||
width: 96.78%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-left: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,15 @@
|
||||
background: #000;
|
||||
color: white;
|
||||
margin-top: 64px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.footerBox {
|
||||
display: flex;
|
||||
@ -12,14 +21,21 @@
|
||||
|
||||
.footerText {
|
||||
width: 234px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
margin: 17px 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
width: 467px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerLogos,
|
||||
@ -28,6 +44,15 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footerLogosimg {
|
||||
width: 35px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerRisco {
|
||||
transform: rotate(90deg);
|
||||
margin: 0;
|
||||
@ -35,6 +60,7 @@
|
||||
}
|
||||
|
||||
.FooterName {
|
||||
margin-right: 100px;
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
}
|
||||
@ -43,10 +69,23 @@
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 44.92px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 84.22px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerdevelopedm3 {
|
||||
width: 28.66px;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.95px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerDevLogo {
|
||||
@ -59,6 +98,12 @@
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerDevLogom3 {
|
||||
@ -72,5 +117,13 @@
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 125px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
113
pagina-institucional/src/style/FooterBottomMobile.module.scss
Normal file
113
pagina-institucional/src/style/FooterBottomMobile.module.scss
Normal file
@ -0,0 +1,113 @@
|
||||
.footer_wrapper {
|
||||
background: #000;
|
||||
color: white;
|
||||
margin-top: 64px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
min-height: 96px;
|
||||
}
|
||||
|
||||
.footerBox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 0 100px;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
justify-content: none;
|
||||
flex-direction: column;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerText {
|
||||
width: 234px;
|
||||
height: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
width: 467px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerLogos {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.footerLogosimg {
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.footerRisco {
|
||||
transform: rotate(90deg);
|
||||
margin: 0;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.FooterName {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.footerdeveloped {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 44.92px;
|
||||
}
|
||||
|
||||
.footerdevelopedm3 {
|
||||
width: 28.66px;
|
||||
}
|
||||
|
||||
.footerDevLogo {
|
||||
width: 53px;
|
||||
height: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.footerDevLogom3 {
|
||||
width: 61px;
|
||||
height: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
@ -9,6 +9,7 @@
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
font-family: "Roboto", sans-serif;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 50px 0 0 100px;
|
||||
@ -25,6 +26,13 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li,
|
||||
@ -44,6 +52,13 @@
|
||||
width: 155px;
|
||||
height: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.textCont {
|
||||
@ -55,6 +70,14 @@
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
width: 100%;
|
||||
color: #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.telCont {
|
||||
@ -66,6 +89,15 @@
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
text-transform: capitalize;
|
||||
color: #303030;
|
||||
}
|
||||
}
|
||||
|
||||
.logos {
|
||||
@ -73,11 +105,23 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.logosimg {
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.textSite {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.linkZap {
|
||||
@ -86,5 +130,20 @@
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgZap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imgSeta {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.Footer_Wrapper {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
@ -18,4 +20,27 @@
|
||||
.link {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.linkZap {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgZap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imgSeta {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
width: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
span {
|
||||
color: #ff0000;
|
||||
@ -11,7 +12,20 @@
|
||||
text-align: center;
|
||||
margin-bottom: 13px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
input {
|
||||
@media (min-width: 2500px) {
|
||||
position: relative;
|
||||
width: 36.4px;
|
||||
height: 35.15px;
|
||||
top: 9px;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -24,26 +38,67 @@
|
||||
label {
|
||||
margin-bottom: 12px;
|
||||
margin-left: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 89.755%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #100d0e;
|
||||
border-radius: 25px;
|
||||
height: 46px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 12px;
|
||||
color: #b9b7b7;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
width: 1638px;
|
||||
height: 63px;
|
||||
color: #b9b7b7;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 748px;
|
||||
width: 95.095%;
|
||||
height: 52.44px;
|
||||
background: #000000;
|
||||
border-radius: 25px;
|
||||
margin-bottom: 25px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.05em;
|
||||
width: 1680px;
|
||||
height: 63px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,5 +116,5 @@
|
||||
color: #ff0000;
|
||||
margin: 0;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
right: 55px;
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
padding: 5px 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.buttonOpen {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
height: 76px;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
display: grid;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 101px;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.header___wrapper {
|
||||
background: #000;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
.headerContainer {
|
||||
display: flex;
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
display: grid;
|
||||
background: black;
|
||||
height: 139px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
.HeaderBox {
|
||||
margin: 0 16px;
|
||||
@ -51,7 +52,7 @@
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 90.4%;
|
||||
width: 91.47%;
|
||||
}
|
||||
|
||||
.searchtext {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 80px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-style: normal;
|
||||
@ -28,6 +29,13 @@ h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #292929;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 48px;
|
||||
@ -39,6 +47,12 @@ h2 {
|
||||
.boxPagamento {
|
||||
margin-top: -50px;
|
||||
height: 500px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: -90px;
|
||||
@ -47,6 +61,13 @@ h2 {
|
||||
|
||||
.boxEntrega {
|
||||
margin-top: -100px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: -140px;
|
||||
}
|
||||
@ -54,19 +75,46 @@ h2 {
|
||||
|
||||
.boxTroca {
|
||||
margin-top: -150px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: -190px;
|
||||
}
|
||||
}
|
||||
|
||||
.boxSobre {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
}
|
||||
|
||||
.boxSegurança {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
margin-top: -200px;
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: -240px;
|
||||
}
|
||||
}
|
||||
|
||||
.boxContato {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: relative;
|
||||
top: 235px;
|
||||
}
|
||||
margin-top: -250px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: -290px;
|
||||
@ -74,15 +122,22 @@ h2 {
|
||||
}
|
||||
|
||||
.itemBox {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
height: 585px;
|
||||
}
|
||||
|
||||
.mainIcon {
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin-top: 30px;
|
||||
margin-left: 100px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.IconHouse {
|
||||
@media (min-width: 2500px) {
|
||||
width: 31.22px;
|
||||
@ -98,6 +153,7 @@ h2 {
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.container {
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
@ -5,8 +5,14 @@
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
|
||||
color: #7d7d7d;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96.875%;
|
||||
height: 142px;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
@ -5,8 +5,19 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: 325px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 340px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
@ -16,16 +27,56 @@
|
||||
margin-top: 16;
|
||||
margin-bottom: 8px;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInput {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
width: 306px;
|
||||
height: 14px;
|
||||
padding: 13px 16px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
color: #c4c4c4;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 87.555%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 668px;
|
||||
height: 59px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
.boxNews {
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
@ -41,6 +92,26 @@
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 16px;
|
||||
width: 96.875%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
display: flex;
|
||||
width: 246px;
|
||||
height: 59px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user