<body>
<section class="header">
<div class="header__top">
<a href="/">
<img class="logo" src="https://logoza.ru/img/rock.png" alt="logo"></a>
<ul class="list__header">
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт 2 </a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
</div>
<div class="header__title">
<h1>Заголовок</h1>
<h1>Ешё один заголовок</h1>
<button class="header__btn">Кнопка</button>
</div>
</section>
</body>
</html>
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
}
li {
list-style: none;
display: inline;
}
ul {
margin: 0;
}
a {
text-decoration: none;
color: black;
}
.logo {
width: 79px;
height: 28px;
margin-left: 110px;
margin-top: 50px;
}
.header {
display: flex;
flex-flow: column;
width: 100%;
height: 729px;
}
.header__top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.list__header li{
padding-right: 20px;
}
.header__title {
text-align:center;
margin: 150px auto 0px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.