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

feat(header):logo img desktop responsiva

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-06 00:36:18 -03:00
parent 544ad23153
commit c89eec63aa
4 changed files with 69 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
desafio-5/public/index.html
View File

@ -12,8 +12,14 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<header id="rootheader"></header>
<main id="root"></main>
<footer id="rootfooter"></footer>
<header id="rootheader">
</header>
<main id="root">
</main>
<footer id="rootfooter">
</footer>
</body>
</html>

BIN
desafio-5/src/components/assets/imgs/Logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

32
desafio-5/src/components/modules/header.module.scss
View File

@ -1,4 +1,32 @@
@import "../utils/Variables.scss";
.main_wrapper{
}
.Header_wrapper {
display: flex;
min-height: 120px;
color: white;
background: black;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
&-top {
display: flex;
justify-content: space-around;
width: 100%;
height: 76px !important;
height: 25.86px;
background: pink;
&-logo {
width: 10.27%;
margin: 25px 0;
img {
width: 100%;
}
}
}
&-bottom {
background: orangered;
}
}

32
desafio-5/src/components/scripts/header.tsx
View File

@ -1,11 +1,39 @@
import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react"
import HeaderStyles from "../modules/header.module.scss"
import Logo from '../assets/imgs/Logo.png';
const Header = () =>{
return (
<div className={HeaderStyles["main_wrapper"]}>
conteudo do header
<div className={HeaderStyles["Header_wrapper"]}>
<div className={HeaderStyles["Header_wrapper-top"]}>
<div className={HeaderStyles["Header_wrapper-top-logo"]}>
<a href="/">
<img src={Logo} alt="Logo" />
</a>
</div>
<div>
<input name="search" type="text" placeholder="Buscar">
</input>
<label htmlFor="search">
<button>
<img src="" alt="Lupa" />
</button>
</label>
</div>
<div>
<button>Entrar</button>
<button>
<img src="" alt="Carrinho_icon" />
</button>
</div>
</div>
<div className={HeaderStyles["Header_wrapper-bottom"]}>
opções
</div>
</div>
)
};