Добрый вечер, нужна конкретика в правильности написании кода, их позиционирования и расположения. Если есть какие либо другие ошибки пожалуйста напишите. h1ttps://codepen.io/sport_defense/pen/XvZyoz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css">
</head>
<body>
<Header>
<div class="div_0">
<a class="logo" href="#" alt="logo">logo</a>
<form action="/search" method="post">
<input type="search" results=5 size="13" name="" placeholder="Поиск" class="input" />
</form>
<ul class="nav">
<li class="leftmenutop"><a href="#">Новости</a></li>
<li class="left__menu_top"><a href="#">Рейтинг</a></li>
<li class="left__menu_top"><a href="#">Соревнования</a></li>
<li class="left__menu_top"><a href="#">Событие</a></li>
</ul>
<div class="nav_1">
<a class="fas fa-bell" href="#"></a>
<a class="fas fa-cog" href="#"></a>
<a class="fas fa-plus" href="#"></a>
<a class="fas fa-user-alt" href="#"></a>
</div>
</div>
</Header>
<ul class="work-programm">
<li class="programm-work-menu-1-main"><a href="#">Главная</a></li>
<li class="programm-work-menu-1-object"><a href="#">Программы тренировок</a></li>
<li class="programm-work-menu-1"><a href="#">Подтягивания</a></li>
<li class="programm-work-menu-1"><a href="#">Отжимания</a></li>
<li class="programm-work-menu-1"><a href="#">Приседания</a></li>
<li class="programm-work-menu-1"><a href="#">Брусья</a></li>
</ul>
<ul class="task-writing">
<li class="writing-menu"><a href="#">To-Do list</a></li>
<li class="writing"><a href="#">План тренировок</a></li>
<li class="writing"><a href="#">Питание</a></li>
<li class="writing"><a href="#">Задачи</a></li>
<li class="writing"><a href="#">Цели</a></li>
<li class="writing"><a href="#">Своя тренировка</a></li>
</ul>
<ul class="info-block">
<li><a href="#">Политика конфиденциальности</a></li>
<li><a href="#">Пользовательское соглашение</a></li>
<li><a href="#">Правила сообщества</a></li>
</ul>
</body>
</html>
body {
margin: 0;
background-color: #FCFCFE;
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
.logo {
font-size: 45px;
color: #3E4554;
font-weight: 700;
text-decoration: none;
line-height: 0.8;
margin-left: 36px;
}
/* Основной блок на верхнего меню */
.div_0 {
display: flex;
margin-top: 12px;
align-items: center;
}
/* Поиск */
form {
padding-left: 134px;
margin: 0;
}
input {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 27px;
background: url("/images/search.png") no-repeat scroll;
background-position: 7px 11px;
border: 0;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.16);
box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.16);
}
::placeholder {
padding-bottom: 10px;
color: #3E4554;
}
/* Первое меню */
.nav {
display: flex;
flex-grow: 1;
list-style: none;
padding-left: 42px;
}
.nav :first-child {
margin-left: 0;
}
.nav a {
text-decoration: none;
margin-right: 42px;
color: #3E4554;
transition: color .2s linear;
}
.nav a:hover {
color: #6A7BFF;
}
/* Второе меню для настроект */
.nav_1 {
display: flex;
padding-right: 13px;
}
.nav_1 a {
margin-left: 20px;
color: #CFD3DC;
text-decoration: none;
}
.nav_1 a:first-child {
margin-left: 0;
}
.nav_1 a:hover {
color: #B9BCC4;
}
/* ================END MENU================== */
/* Программа тренировок */
.work-programm {
list-style: none;
display: inline-block;
}
.work-programm a {
color: #3E4554;
text-decoration: none;
}
.programm-work-menu-1-main {
padding-left: 16px;
padding-top: 24px;
}
.programm-work-menu-1-main a {
color: #6A7BFF;
}
.programm-work-menu-1-object {
padding-left: 16px;
padding-top: 18px;
}
.programm-work-menu-1-object a:hover {
color: #6A7BFF;
}
.programm-work-menu-1 {
padding-left: 45px;
margin-top: 8px;
}
.programm-work-menu-1 a:hover {
color: #6A7BFF;
}
/* ================END MENU================== */
/* Второе меню настройка задач */
.task-writing {
padding-top: 18px;
display: table;
}
.task-writing a {
text-decoration: none;
color: #3E4554;
}
.writing-menu {
padding-left: 16px;
}
.writing-menu a:hover {
color: #6A7BFF;
}
.writing {
padding-left: 45px;
margin-top: 8px;
}
.writing a:hover {
color: #6A7BFF;
}
/* ================END MENU================== */
/* Информационный блок, низ */
.info-block {
position: absolute;
padding-left: 16px;
list-style: none;
padding-top: 33%;
}
.info-block a {
text-decoration: none;
color: #3E4554;
}
.info-block a:hover {
color: #6a7bff;
}
Простой
Средний