<div class="header">
<h3><a href="#">DevDoc</a></h3>
<div onclick="openMenu()" class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<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>
</div>
</div>
<div id="cards">
<div id="card"></div>
<div id="card"></div>
<div id="card"></div>
<div id="card"></div>
</div>#cards {
display: block;
}
#card {
width: 80%;
height: 150px;
background: #66FCF1;
margin: 10px auto 10px;
}
.header {
width: 100%;
height: 45px;
background: #0B0C10;
position: fixed;
}
.header h3 {
color: white;
margin-top: 11px;
margin-left: 11px;
}
.header h3 a {
text-decoration: none;
color: #D1E8E2;
}
.header h3 a:hover {
color: #fff;
}
.toggle-btn span {
display: block;
width: 25px;
height: 3px;
background: #D1E8E2;
margin: 4px 0;
}
.toggle-btn {
position: absolute;
right: 10px;
top: 10px;
}
#menu {
width: 100%;
height: 100vh;
background: #272727;
margin-top: 12px;
text-align: center;
position: fixed;
left: 100%;
transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
}
#menu.active {
left: 0;
}
#menu ul li {
padding: 20px 20px;
list-style: none;
}
#menu ul li a {
text-decoration: none;
color: #D1E8E2;
font-size: 1.7em;
}
#menu ul li a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}
