first commit
This commit is contained in:
73
src/widgets/header/ui/Header.module.css
Normal file
73
src/widgets/header/ui/Header.module.css
Normal file
@@ -0,0 +1,73 @@
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 48px;
|
||||
backdrop-filter: blur(20px);
|
||||
background: rgba(10, 11, 46, 0.7);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 48px;
|
||||
width: 80px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 28px;
|
||||
border: 1px solid var(--text-primary);
|
||||
border-radius: 100px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-deep);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.nav {
|
||||
padding: 10px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.nav {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
22
src/widgets/header/ui/Header.tsx
Normal file
22
src/widgets/header/ui/Header.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import logo from '@shared/assets/logo-full-white.png'
|
||||
import styles from './Header.module.css'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ROUTES } from '@shared/config/routes'
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<nav className={styles.nav}>
|
||||
<a className={styles.logo} href="/">
|
||||
<img src={logo} alt="ЭКСА" />
|
||||
</a>
|
||||
<div className={styles.right}>
|
||||
<a className={styles.link} href="#about">
|
||||
О нас
|
||||
</a>
|
||||
<Link className={styles.btn} to={ROUTES.WALLET}>
|
||||
Личный кабинет
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user