naianfelix/desafio-react-e-typescript-naian-felix
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona função dos float bottons

Browse Source
This commit is contained in:
Naian Felix dos Santos 2023-01-17 15:03:18 -03:00
parent 4092ee89be
commit 5b6bd759de
12 changed files with 90 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
desafio5/package-lock.json generated
View File

@ -20,6 +20,9 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"sass": "^1.57.1"
}
},
"node_modules/@adobe/css-tools": {
@ -8609,6 +8612,12 @@
"url": "https://opencollective.com/immer"
}
},
"node_modules/immutable": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
"integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
"devOptional": true
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -14479,6 +14488,23 @@
"resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
"integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
},
"node_modules/sass": {
"version": "1.57.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
"integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/sass-loader": {
"version": "12.6.0",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

3
desafio5/package.json
View File

@ -39,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.57.1"
}
}

29
desafio5/src/components/Footer/Footer.tsx
View File

@ -14,18 +14,14 @@ import instagram from "../../assets/img/insta.svg";
import twitter from "../../assets/img/twitter.svg";
import youtube from "../../assets/img/youtube.svg";
import linkedin from "../../assets/img/link.svg";
import style from "./footer.module.css";
import style from "./footer.module.scss";
const Footer = () => {
// const [open, setOpen] = useState(false);
// const clickAccordion = () => {
// setOpen(true);
// };
return (
<>
<div className={style["footer-top"]}>
<section className={style["institucional"]}>
<h1>INSTITUCIONAL</h1>
<h2>INSTITUCIONAL</h2>
<div className={style["wrapper"]}>
<a href="/">Quem Somos</a>
@ -40,7 +36,7 @@ const Footer = () => {
</section>
<section className={style["duvidas"]}>
<h1>DÚVIDAS</h1>
<h2>DÚVIDAS</h2>
<div className={style["wrapper"]}>
<a href="/">Entrega</a>
@ -55,11 +51,11 @@ const Footer = () => {
</section>
<section className={style["fale-conosco"]}>
<h1>FALE CONOSCO</h1>
<h2>FALE CONOSCO</h2>
<div className={style["wrapper"]}>
<h2>Atendimento ao Consumidor</h2>
<h3>Atendimento ao Consumidor</h3>
<a href="/">(11) 4159 9504</a>
<h2>Atendimento Online</h2>
<h3>Atendimento Online</h3>
<a className={style["last-link"]} href="/">
(11) 99433-8825
</a>
@ -109,8 +105,15 @@ const Footer = () => {
</a>
</div>
<div className={style["float-buttons"]}>
<button className={style["button-whats"]}></button>
<button className={style["up-button"]}></button>
<a
className={style["button-whats"]}
target="blank"
href="https://wa.me/+55022997886109">
.
</a>
<a href="#header" className={style["up-button"]}>
.
</a>
</div>
</div>
@ -129,7 +132,7 @@ const Footer = () => {
<img className={style["icons"]} src={hiper} alt="Hipercard" />
<img className={style["icons"]} src={paypal} alt="Pay Pal" />
<img className={style["icons"]} src={boleto} alt="Boleto" />
<span className="divisor"></span>
<span className={style["divisor"]}></span>
<img className={style["icon-vtex"]} src={vtex} alt="Vtex" />
</div>
<div className={style["powered"]}>

17
desafio5/src/components/Footer/FooterMobile.tsx
View File

@ -100,9 +100,9 @@ const FooterMobile = () => {
className={`${style["wrapper"]} ${
accordions.faleConosco ? style["active"] : ""
}`}>
<h2>Atendimento ao Consumidor</h2>
<h3>Atendimento ao Consumidor</h3>
<a href="/">(11) 4159 9504</a>
<h2>Atendimento Online</h2>
<h3>Atendimento Online</h3>
<a className={style["last-link"]} href="/">
(11) 99433-8825
</a>
@ -152,8 +152,15 @@ const FooterMobile = () => {
</a>
</div>
<div className={style["float-buttons"]}>
<button className={style["button-whats"]}></button>
<button className={style["up-button"]}></button>
<a
className={style["button-whats"]}
target="blank"
href="https://wa.me/+55022997886109">
.
</a>
<a href="#header-mobile" className={style["up-button"]}>
.
</a>
</div>
</div>
@ -172,7 +179,7 @@ const FooterMobile = () => {
<img className={style["icons"]} src={hiper} alt="Hipercard" />
<img className={style["icons"]} src={paypal} alt="Pay Pal" />
<img className={style["icons"]} src={boleto} alt="Boleto" />
<span className="divisor"></span>
<span className={style["divisor"]}></span>
<img className={style["icon-vtex"]} src={vtex} alt="Vtex" />
</div>
<div className={style["powered"]}>

16
desafio5/src/components/Footer/footer.module.css → desafio5/src/components/Footer/footer.module.scss
View File

@ -5,9 +5,8 @@
padding: 50px 100px;
}
h1 {
font-family: "Roboto";
font-style: normal;
h2 {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 16px;
@ -17,8 +16,8 @@ h1 {
text-transform: uppercase;
}
h2 {
font-family: "Roboto";
h3 {
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 12px;
@ -30,7 +29,7 @@ h2 {
}
a {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
@ -51,6 +50,7 @@ a {
.last-link {
margin: 0;
text-decoration: underline;
}
.icons-top {
@ -127,7 +127,7 @@ a {
}
p {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10px;
@ -153,6 +153,7 @@ p {
background-size: 100% 100%;
background-color: transparent;
border: 0;
margin: 0;
cursor: pointer;
}
@ -164,6 +165,7 @@ p {
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
margin-bottom: 0;
border: 0;
}

16
desafio5/src/components/Footer/footerMobile.module.css
View File

@ -6,7 +6,7 @@
.button-title {
margin-bottom: 12px;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;
@ -59,7 +59,7 @@ button {
}
p {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 10px;
@ -72,7 +72,6 @@ p {
.footer-bottom {
flex-direction: column;
align-items: flex-start;
padding: 15px 16px;
background: #000000;
display: flex;
justify-content: space-between;
@ -87,10 +86,6 @@ p {
min-width: 234px;
}
.cards {
margin-bottom: 15px;
}
.powered {
display: flex;
align-items: center;
@ -100,6 +95,7 @@ p {
.cards {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.icons {
@ -132,6 +128,10 @@ p {
width: 1px;
}
.last-link {
text-decoration: underline;
}
.float-buttons {
position: fixed;
top: 80%;
@ -148,6 +148,7 @@ p {
background-size: 100% 100%;
background-color: transparent;
border: 0;
margin: 0;
cursor: pointer;
}
@ -159,6 +160,7 @@ p {
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: transparent;
margin-bottom: 0;
border: 0;
}

2
desafio5/src/components/Header/Header.tsx
View File

@ -6,7 +6,7 @@ import style from "./header.module.css";
const Header = () => {
return (
<div className={style["header"]}>
<div id="header" className={style["header"]}>
<div>
<div className={style["header-wrapper"]}>
<div>

2
desafio5/src/components/Header/HeaderMobile.tsx
View File

@ -9,7 +9,7 @@ const HeaderMobile = () => {
};
return (
<>
<div className={style["header"]}>
<div id="header-mobile" className={style["header"]}>
<div className={style["header-wrapper"]}>
<button onClick={clickBurguer} className={style["burguer"]} />
<img className={style["logom3"]} src={logoM3} alt="Logo M3" />

6
desafio5/src/components/Header/header.module.css
View File

@ -20,7 +20,7 @@
height: 14px;
outline: 0;
margin: 8px 0 8px 16px;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@ -58,7 +58,7 @@
background: transparent;
color: #ffffff;
margin: 0 55px 0 0;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@ -88,7 +88,7 @@
.cursos,
.saiba-mais,
.institucionais {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;

7
desafio5/src/components/Header/headerMobile.module.css
View File

@ -26,12 +26,11 @@
}
.input {
height: 100%;
width: 100%;
height: 36px;
border: 0;
outline: 0;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@ -111,7 +110,7 @@
.button-login {
background-color: transparent;
border: 0;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -143,7 +142,7 @@
}
.menu-burguer-li {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 14px;

6
desafio5/src/components/Newsletter/newsletter.module.css
View File

@ -22,7 +22,7 @@
}
.newsletter-label {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 18px;
@ -34,7 +34,7 @@
.button-submit {
background-color: #000;
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 12px;
@ -60,7 +60,7 @@
}
.newsletter-wrapper input::placeholder {
font-family: "Roboto";
font-family: "Roboto", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;

4
desafio5/src/style/index.css
View File

@ -4,6 +4,10 @@
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",