Open mooneex opened 11 months ago
Header.jsx
import React from "react";
import s from './Header.module.css';
const Header = () => {
return <header className={s.header}>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/512px-LEGO_logo.svg.png'></img>
</header>
}
export default Header;
Header.module.css
.header {
grid-area: h;
background-color: green;
}
.header img {
width: 20px;
}
Navbar.jsx
import React from "react";
import s from './Navbar.module.css';
console.log (s);
const Navbar = () => {
return <nav className={s.nav}>
<div className={'${s.item} ${s.active}'}>
<a>Profile</a>
</div>
<div className={s.item}>
<a>Messages</a>
</div>
<div className={s.item}>
<a>News</a>
</div>
<div className={s.item}>
<a>Music</a>
</div>
<div className={s.item}>
<a>Settings</a>
</div>
</nav>
}
export default Navbar;
Navbar.module.css
.nav {
grid-area: n;
background-color: greenyellow;
}
.item {
color: white;
}
.item.active {
color: gold;
}
Profile.jsx
import React from "react";
import s from './Profile.module.css';
const Profile = () => {
return <div className={s.profile}>
<div>
<img src='https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg'></img>
</div>
<div>
ava + description
</div>
<div>
My post
<div>
New Post
</div>
</div>
<div className={s.posts}>
<div className={s.item}>
Post 1
</div>
<div className={s.item}>
Post 2
</div>
</div>
</div>
}
export default Profile;
Profile.module.css
.profile {
grid-area: c;
background-color: rgb(140, 202, 140);
}
.item {
color:rgb(120, 120, 238);
}
Мы переиминовали наши css в modules.css и так же их импортировали