Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Front-end</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="user_bar">
<div class="user_data">
<span class="out fa fa-sign-out-alt"></span>
<div class="user_name">Дмитрий Попов</div>
<div class="user_status">Online</div>
<div class="user_balance">Баланс:<span class="count"> 9999p</span></div>
<div class="user_photo"></div>
</div>
<div class="social_bar">
<div class="social_icons fab fa-vk"></div>
<div class="social_icons fab fa-facebook"></div>
<div class="social_icons fab fa-twitter"></div>
</div>
</div>
<header>
<ul>
<li class="active"><a href="#">База данных</a></li>
<li><a href="#">Пользователи</a></li>
<li><a href="#">Сайты</a></li>
<li><a href="#">Статистика</a></li>
<li><a href="#">Настройки</a></li>
<li><a href="#">Финансы</a></li>
<li><a href="#">Заказы</a></li>
<li><a href="#">Документация</a></li>
</ul>
</header>
<main>
<div class="nav">
<div class="filter fa fa-filter"></div>
<div id="open" class="fa fa-caret-down"></div>
<ul class="float">
<li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
<li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
</ul>
</div>
<div class="content">
</div>
</main>
<aside>
<div class="messages">
<div class="name">Box-Name</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+AKA
</div>
</div>
<div class="messages">
<div class="name">Its new box name</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="messages">
<div class="name">Im your box-message</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="messages">
<div class="name">Welcome</div>
<div class="content">
Lorem ipsum dolor sit amet.
</div>
</div>
</aside>
</div>
</body>
</html>
Css
body,html {
padding:0;
margin:0;
height:100%;
font-family: 'Roboto', sans-serif;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
width: 75%;
height: 60px;
background: #5393b0;
float: right;
}
.user_bar {
width: 25%;
height: 150px;
background: #2e2e2e;
float: left;
position: fixed;
}
.social_bar {
height: 35px;
width: 35%;
background: #2e2e2e;
float: left;
}
aside {
width: 22%;
background: #c3c3c3;
border-radius: 5px;
margin-left: 1%;
margin-top: 155px;
padding: 30px 5px 30px 5px;
}
main {
width: 65%;
float: right;
background: #e4e4e4;
margin: 55px 6% 0px 0;
border-radius: 5px;
}
.user_data {
width: 100%;
height: 150px;
}
.user_name {
color: #ccc;
font-size: 1.5em;
padding: 10px 0 0 10px;
float: left;
}
.out {
float: right;
color: #fff;
font-size: 1.5em;
margin: 10px 10px 0 0;
}
.user_status {
color: #5f5f5f;
float: left;
margin: 10px 0 0 5px;
}
.user_photo {
width: 70px;
height: 70px;
background: url('../img/ava.jpg');
background-size: 100% 100%;
margin: 10px 0px 0 40px;
float: left;
border-radius: 100%;
border: 1px solid #eee;
}
.user_balance {
color: #eee;
float: right;
clear: both;
padding: 10px;
margin: 23px 10px 0 0;
font-size: 1.5em;
border: 1px solid #5393b0;
border-radius: 5px;
padding-top: 7px;
}
.user_balance .count {
font-size: 0.9em;
}
.social_bar {
padding: 0 0 0 20px;
}
.social_icons {
color: #eee;
font-size: 1.5em;
margin: 0 0 0 5px;
}
ul {
height: 100%;
margin: 16px 0 0 0;
}
ul li {
list-style: none;
float: left;
height: 26px;
border-right: 1px solid #eee;
padding: 0 2% 0 2%;
}
ul li:nth-last-child(1) {
border: none;
}
ul li a {
display: block;
text-decoration: none;
color: #fff;
width: 100%;
height: 100%;
text-align: center;
padding-top: 4px;
}
ul li a:hover {
text-shadow: 0 0 1px #fff;
}
header .active a {
text-shadow: 0 0 3px #000;
font-size: 20px;
padding-top: 1px;
}
.messages {
width: 100%;
}
.messages .name {
height: 17px;
float: right;
background: #5393b0;
margin: -7px 6px 0 0;
color: #eee;
font-size: 13px;
text-align: center;
padding: 0 8px 0 8px;
padding-top: 3px;
}
.messages .content {
width: 84%;
text-align: left;
margin: 10px 0 0 5%;
background: #414141;
padding: 20px 10px 20px 10px;
color: #ccc;
border-radius: 2px;
}
main .content {
width: 96%;
height: 800px;
background: #fff;
margin: 15px auto;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
main .nav {
width: 100%;
height: 50px;
background: #2e2e2e;
margin-top: 15px;
}
main .nav .float {
padding-top: 12px;
position: absolute;
z-index: 999;
margin-top: -12px;
display: none;
}
main .nav .float li {
min-width: 250px;
border: none;
border-bottom: 1px solid #eee;
background: #5393b0;
padding: 10px;
float: none;
margin-left: -40px;
}
main .nav .float li:nth-last-child(1) {
border-bottom: none;
}
main .nav #open {
padding: 0;
}
main .nav #open{
height: 100%;
padding: 0;
font-size: 1.9em;
height: 40px;
width: 35px;
padding-top: 10px;
color: #eee;
padding-left: 15px;
}
main .nav #open:hover .float {
display: block;
}
.filter {
height: 36px;
width: 50px;
float: right;
color: #eee;
text-align: center;
font-size: 1.5em;
padding-top: 14px;
border-left: 1px solid #ccc;
}
Простой
Средний