<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Arvo');
@import url('https://fonts.googleapis.com/css?family=Bree+Serif');
* {box-sizing: border-box;}
body{
margin: 0;
}
header a{
text-decoration: none;
color: #7f7f7f;
}
header a:hover{
text-decoration: none;
color: #818FED;
}
header{
position: fixed;
z-index: 50 !important;
background: #F8F8F8;
color: #fff;
border-bottom: 3px solid #818FED;
width: 100%;
height: 50px;
}
.container{
position: absolute;
margin: 5em;
}
.topmenu{
width: 100%;
display: inline-block;
margin-top: 10px;
padding: 0;
}
.topmenu li{
cursor: pointer;
list-style-type: none;
display: inline-block;
padding: 0 1em 0 1em;
color: #7f7f7f;
position: relative;
}
.topmenu > li:hover:not(.logo), .submenu> li:hover{
color: #818FED;
transition: .2s ease-in-out;
}
.submenu{
position: absolute;
z-index: 50 !important;
transition: .3s ease-in-out;
visibility: hidden;
left: -2.5em;
right: 0;
}
.submenu li{
background: #273037;
position: relative;
z-index: 50 !important;
width: 150px;
height: 30px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 30px;
top: 1em;
border-bottom: 0px solid #fff;
}
.topmenu li:hover ul{
visibility: visible;
transition: .3s ease-in-out;
}
.logo{
color: #000;
font-family: 'Bree Serif', serif;
font-weight: bold;
font-size: 20px;
}
.rightNav{
display: inline-block;
float: right;
}
.search{
float: right;
border-radius: 15px;;
border: 1px solid #818FED;
margin-right: 1em;
color: #818FED !important;
}
.searchIcon{
z-index: 5;
}
.searchInput{
padding: 5px;
margin: 0 -16px 0 3px;
z-index: 1;
border: 0;
border-radius: 0 15px 15px 0;
}
.searchInput:active, .searchInput:focus{
background: #fff;
color: #818FED;
outline: 0;
}
code{
padding: 2px;
background: #818FED;
border-radius: 15px;
color: #fff;
}
.message{
z-index: 30;
padding: 10px;
background: #818FED;
border-radius: 10px;
color: #fff;
}
.button{
border: 0px;
padding: 5px;
}
.button:active, .button:focus{
outline: 0;
}
.radius-5{
border-radius: 5px !important;
}
.radius-10{
border-radius: 10px !important;
}
.radius-15{
border-radius: 15px !important;
}
.radius-20{
border-radius: 20px !important;
}
.blue{
background: #818FED !important;
color: #fff !important;
}
.yellow{
background: #F5D76E !important;
color: #fff !important;
}
.green{
background: #87D37C !important;
color: #fff !important;
}
.red{
background: #D91E18 !important;
color: #fff !important;
}
.input{
padding: 5px;
border: 1px solid #818FED;
}
.input:active, .input:focus{
outline: 0;
}
.iblue{
border: 1px solid #818FED !important;
}
.iyellow{
border: 1px solid #F5D76E !important;
}
.igreen{
border: 1px solid #87D37C !important;
}
.ired{
border: 1px solid #D91E18 !important;
}
</style>
<body>
<header>
<ul class="topmenu">
<li class="logo">Menu</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li class="down">link
<ul class="submenu">
<li><a href="#">link</a></li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
<li>link</li>
<li><a class="down">Link Ul</a>
<ul class="submenu">
<li>link1</li>
<li>lin1k1</li>
<li>link1</li>
</ul>
</li>
<li class="search">
<span class="searchIcon">das</span>
<input type="search" class="searchInput" placeholder="">
</li>
</ul>
</header>
<div class="container">
This is <code>teg <span><</span>code> <span><</span>p><span><</span>/p><span><</span>?='hello'?></code> Hello, world!<br>
<br>
<div class="message blue">This is msg and something</div><br>
<div class="message yellow">This is msg and something</div><br>
<div class="message green">This is msg and something</div><br>
<div class="message red">This is msg and something</div><br>
<button class="button blue">Кнопка</button> <button class="button yellow">Кнопка</button> <button class="button green">Кнопка</button> <button class="button red">Кнопка</button><br><br>
<button class="button blue radius-5">Кнопка</button> <button class="button yellow radius-10">Кнопка</button> <button class="button green radius-15">Кнопка</button> <button class="button red radius-20">Кнопка</button><br>
<br><br>
<input class="input" value="input"><input class="input iblue radius-5" value="iblue radius-15">
<input class="input ired radius-15" value="ired radius-15">
</div>
</body>
</html>