CSS záhlaví stránky
Kód:
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.side {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background: linear-gradient(to bottom, #f9fafc 0%, #e6ebf5 100%);
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 16px;
line-height: 12px;
border-radius: 5px;
}
.header a.logo {
font-size: 25px;
font-weight: 700;
}
.header a:hover {
background-color: white;
color: black! important;
}
.header a.active {
background-color: #1A73E8! important;
color: white! important;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
<div class="side">
<div class="header">
<a href="#no" class="logo">Název firmy</a>
<div class="header-right">
<a class="active" href="#no">Domov</a>
<a href="#no">Výroba</a>
<a href="#no">Produkty</a>
<a href="#no">O nás</a>
<a href="#no">Kontakt</a>
</div>
</div>
<div style="padding-left:20px">
<h3>Responzivní záhlaví</h3>
<p>Změňte velikost okna prohlížeče, abyste viděli efekt.</p>
<p>Nějaký další obsah stránky..</p>
</div>
</div>