forked from M3-Academy/desafio-react-e-typescript
feat(home): adicionando header no desktop
home
This commit is contained in:
parent
617e33c2c2
commit
3ea66a1d21
@ -1,13 +1,13 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
|
||||
@ -1,43 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta 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"
|
||||
/>
|
||||
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
--></body>
|
||||
</html>
|
||||
|
||||
37
src/_variaveis.scss
Normal file
37
src/_variaveis.scss
Normal file
@ -0,0 +1,37 @@
|
||||
/* fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
|
||||
$font-family: 'Roboto', sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #000;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-primary-700: #F2F2F2;
|
||||
|
||||
$color-primary-400: #C4C4C4;
|
||||
$color-primary-500: #C6C6C6;
|
||||
|
||||
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25
|
||||
) !default;
|
||||
|
||||
//media-queries
|
||||
$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)";
|
||||
$mq-tablet: "(min-width: 491px) and (max-width: 1024px)";
|
||||
$mq-mobile: "(min-width: 280px) and (max-width: 490px)";
|
||||
BIN
src/assets/imgs/cart-icon-header.png
Normal file
BIN
src/assets/imgs/cart-icon-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
BIN
src/assets/imgs/m3-acdemy-logo.png
Normal file
BIN
src/assets/imgs/m3-acdemy-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/imgs/search-icon-header.png
Normal file
BIN
src/assets/imgs/search-icon-header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
113
src/components/Header/Header.module.scss
Normal file
113
src/components/Header/Header.module.scss
Normal file
@ -0,0 +1,113 @@
|
||||
@import '../../_variaveis.scss';
|
||||
|
||||
.header-top {
|
||||
width: calc(100% - 200px);
|
||||
height: 32px;
|
||||
padding: 22px 100px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid $color-primary-400;
|
||||
background: $color-black;
|
||||
|
||||
&__logo {
|
||||
width: 136px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 7px 16px;
|
||||
gap: 10px;
|
||||
|
||||
background: $color-white;
|
||||
border: 2px solid $color-primary-700;
|
||||
border-radius: 5px;
|
||||
|
||||
width: 25%;
|
||||
height: 12px;
|
||||
|
||||
background-image: url("../../assets/imgs/search-icon-header.png");
|
||||
background-size: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 50% right 16px;
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-primary-500;
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
&__log-cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__log {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-white;
|
||||
text-decoration: none;
|
||||
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
||||
&__cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
width: calc(100% - 200px);
|
||||
height: 16px;
|
||||
padding: 14px 100px;
|
||||
background-color: $color-black;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
&__list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__items-menu {
|
||||
margin-right: 55px;
|
||||
|
||||
a {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/components/Header/Header.tsx
Normal file
32
src/components/Header/Header.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import logo from '../../assets/imgs/m3-acdemy-logo.png'
|
||||
import cart from '../../assets/imgs/cart-icon-header.png'
|
||||
|
||||
import styles from './Header.module.scss'
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className={styles['header']}>
|
||||
<div className={styles['header-top']}>
|
||||
<img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
|
||||
<input placeholder='Buscar...' className={styles['header-top__input']}/>
|
||||
<div className={styles['header-top__log-cart']}>
|
||||
<a href='/' className={styles['header-top__log']}>
|
||||
ENTRAR
|
||||
</a>
|
||||
<a href='/' className={styles['header-top__cart']}>
|
||||
<img src={cart} alt='Img do Carrinho' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['header-bottom']}>
|
||||
<ul className={styles['header-bottom__list']}>
|
||||
<li className={styles['header-bottom__list__items-menu']}><a href="/">CURSOS</a></li>
|
||||
<li className={styles['header-bottom__list__items-menu']}><a href="/">SAIBA MAIS</a></li>
|
||||
<li className={styles['header-bottom__list__items-menu']}><a href="/">INSTITUCIONAIS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export { Header }
|
||||
@ -4,10 +4,10 @@ import './global.scss';
|
||||
import { Home } from './pages/Home';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Header } from '../components/Header/Header';
|
||||
|
||||
import './Home.scss';
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div className="home">
|
||||
<p>Iniciando Projeto</p>
|
||||
</div>
|
||||
<Header />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user