forked from M3-Academy/desafio-react-e-typescript
feat: criado responsivo para telas 2500px. #4
@ -1,4 +1,4 @@
|
||||
.header-form {
|
||||
.form {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -7,7 +7,7 @@
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
.form-search {
|
||||
height: 32px;
|
||||
width: 264px;
|
||||
border-radius: 5px;
|
||||
@ -15,6 +15,14 @@
|
||||
outline: 0;
|
||||
border: 2px solid #f2f2f2;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 57px;
|
||||
width: 515px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
@ -25,12 +33,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.header-search-icon {
|
||||
.form-search-icon {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
right: 17px;
|
||||
bottom: 4px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
bottom: 8px;
|
||||
|
||||
img {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,16 +9,16 @@ import search from "../../assets/svg/search.svg";
|
||||
|
||||
const Form = () => {
|
||||
return (
|
||||
<form action="./" className={styleForm["header-form"]}>
|
||||
<form action="./" className={styleForm["form"]}>
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
className={styleForm["header-search"]}
|
||||
className={styleForm["form-search"]}
|
||||
placeholder="Buscar..."
|
||||
required
|
||||
/>
|
||||
|
||||
<button type="submit" className={styleForm["header-search-icon"]}>
|
||||
<button type="submit" className={styleForm["form-search-icon"]}>
|
||||
<img src={search} alt="Lupa de pesquisa" />
|
||||
</button>
|
||||
</form>
|
||||
|
@ -2,12 +2,16 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 76px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
padding: 0 100px;
|
||||
background-color: #000000;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
padding: 22px 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
|
6
src/components/Header/Logo.module.scss
Normal file
6
src/components/Header/Logo.module.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.logo {
|
||||
@media (min-width: 2500px) {
|
||||
height: 50px;
|
||||
width: 265px;
|
||||
}
|
||||
}
|
15
src/components/Header/Logo.tsx
Normal file
15
src/components/Header/Logo.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
// Imagem
|
||||
import logoM3 from "../../assets/svg/logo.svg";
|
||||
|
||||
// Estilo
|
||||
import styleLogo from "./Logo.module.scss";
|
||||
|
||||
const Logo = () => {
|
||||
return (
|
||||
<a href="#logo">
|
||||
<img src={logoM3} alt="M3 Academy" className={styleLogo["logo"]} />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export { Logo };
|
@ -2,11 +2,7 @@
|
||||
import logoM3 from "../../assets/svg/logo.svg";
|
||||
|
||||
const LogoM3 = () => {
|
||||
return (
|
||||
<a href="#logo">
|
||||
<img src={logoM3} alt="M3 Academy" />{" "}
|
||||
</a>
|
||||
);
|
||||
return <img src={logoM3} alt="M3 Academy" />;
|
||||
};
|
||||
|
||||
export { LogoM3 };
|
||||
|
@ -1,4 +1,4 @@
|
||||
.header-nav {
|
||||
.nav {
|
||||
padding: 14px 100px;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
@ -25,6 +25,12 @@
|
||||
text-decoration: none;
|
||||
transition: all 0.3s linear;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
@ -6,7 +6,7 @@ import styleNav from "./Nav.module.scss";
|
||||
|
||||
const Nav = () => {
|
||||
return (
|
||||
<nav className={styleNav["header-nav"]}>
|
||||
<nav className={styleNav["nav"]}>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#cursos">Cursos</a>
|
||||
|
@ -11,6 +11,17 @@
|
||||
text-decoration: none;
|
||||
transition: all 0.3s linear;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 33px;
|
||||
|
||||
img {
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-right: 55px;
|
||||
}
|
||||
|
@ -3,7 +3,7 @@ import React from "react";
|
||||
|
||||
// Componentes
|
||||
import { Menu } from "../components/header/Menu";
|
||||
import { LogoM3 } from "../components/header/LogoM3";
|
||||
import { Logo } from "../components/header/Logo";
|
||||
import { Form } from "../components/header/Form";
|
||||
import { User } from "../components/header/User";
|
||||
import { Nav } from "../components/header/Nav";
|
||||
@ -16,7 +16,7 @@ const Header = () => {
|
||||
<header>
|
||||
<div className={styleHeaderWrapper["header"]}>
|
||||
<Menu />
|
||||
<LogoM3 />
|
||||
<Logo />
|
||||
<Form />
|
||||
<User />
|
||||
</div>
|
||||
|
36
src/styles/partials/Form.module.scss
Normal file
36
src/styles/partials/Form.module.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.header-form {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
height: 32px;
|
||||
width: 264px;
|
||||
border-radius: 5px;
|
||||
padding: 7px 16px 7px 16px;
|
||||
outline: 0;
|
||||
border: 2px solid #f2f2f2;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.header-search-icon {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
right: 17px;
|
||||
bottom: 4px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
20
src/styles/partials/HeaderWrapper.module.scss
Normal file
20
src/styles/partials/HeaderWrapper.module.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 76px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
padding: 0 100px;
|
||||
background-color: #000000;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 21px;
|
||||
height: auto;
|
||||
padding: 25px 16px;
|
||||
}
|
||||
}
|
||||
|
7
src/styles/partials/Menu.module.scss
Normal file
7
src/styles/partials/Menu.module.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.header-menu {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
27
src/styles/partials/Nav.module.scss
Normal file
27
src/styles/partials/Nav.module.scss
Normal file
@ -0,0 +1,27 @@
|
||||
.header-nav {
|
||||
padding: 14px 100px;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
22
src/styles/partials/User.module.scss
Normal file
22
src/styles/partials/User.module.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.header-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
margin-right: 55px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user