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

feat: estrutura html criada, e estilização geral

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2023-01-05 17:34:54 -03:00
parent 4da711d470
commit 7c67e0348c
2 changed files with 105 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/header/Header.tsx
View File

@ -1,9 +1,36 @@
import React from 'react';
import styles from '../../styles/Header.module.scss'
import logo from '../../assets/img/logo.png'
import search from '../../assets/img/search.png'
import cart from '../../assets/img/cart.png'
const Header = () => {
return(
<header className={styles['header-top']}>Header</header>
<header>
<div className={styles['header__top']}>
<img className={styles['header__logo']} src={logo} alt=''></img>
<div className={styles['header__container-input']}>
<img className={styles['header__search-icon']} src={search} alt=''/>
<input className={styles['header__search']} type="text" placeholder='Buscar... ' />
</div>
<div className={styles['header__my-account-cart']}>
<p className={styles['header__account']} >Entrar</p>
<img className={styles['header__cart']} src={cart} alt=''></img>
</div>
</div>
<div className={styles['header__line']}></div>
<nav className={styles['header__botton']}>
<p className={styles['header__botton-nav-text']}>
Cursos
</p>
<p className={styles['header__botton-nav-text']}>
Saiba Mais
</p>
<p className={styles['header__botton-nav-text']}>
Institucionais
</p>
</nav>
</header>
)
}

77
src/styles/Header.module.scss
View File

@ -1,7 +1,84 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import 'variables.scss';
header {
width: 100%;
color: $white;
padding: 0;
background-color: $black;
.header__top{
padding: 25.07px 100px;
display: flex;
align-items: center;
justify-content: space-between;
.header__logo{
width: 10.63%;
height: 25.86px;
}
.header__container-input{
display: flex;
align-items: center;
justify-content: end;
position: relative;
width: 20.63%;
.header__search{
display: flex;
width: 100%;
border: 2px solid #F2F2F2;
border-radius: 5px;
height: 32px;
padding-left: 16px;
}
.header__search-icon{
height: 18px;
position: absolute;
color: #303030;
margin-right: 7px;
}
}
.header__my-account-cart{
display: flex;
width: 10.63%;
justify-content: space-between;
align-items: center;
.header__account {
font-style: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
}
.header__cart{
height: 28px;
}
}
}
.header__line{
border-bottom: 1px solid $white;
}
.header__botton{
display: flex;
width: 27.58%;
justify-content: space-between;
margin: 0px 100px;
.header__botton-nav-text {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
}
}
}