const main = document.querySelector('.container');
class Header extends React.Component {
render() {
return (
<header>
<div class="brand">History</div>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
);
}
}
class LeftSidebar extends React.Component {
render() {
return (
<aside class="leftSidebar">
</aside>
);
}
}
class RightSidebar extends React.Component {
render() {
return (
<aside class="RightSidebar">
</aside>
);
}
}
ReactDOM.render(<Header/>,main);
ReactDOM.render(<RightSidebar/>,main);
ReactDOM.render(<LeftSidebar/>,main);
body,html {
padding: 0;
margin: 0;
height: 100%;
background: #002136;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
}
.leftSidebar {
width: 15%;
height: 98%;
background: url('../img/sidebar.png');
background-size: 100% 100%;
margin-top: 1%;
float: left;
}
.RightSidebar {
width: 15%;
height: 85%;
background: url('../img/sidebarright.png');
background-size: 100% 100%;
float: right;
}
Вот так выглядит, css reset подрубил навсякий но толку 0
Средний
