Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<header id="home"> <!--HEADER--> <div class="container"> <div class="branding"> <H1><span class="h1">WEBDESIGN </span> Kirupa </H1> </div> <nav> <ul> <li class="active"><a href="#o-nas">O MĚ</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#sablony">ŠABLONA</a></li> <li><a href="#kontakt">KONTAKT</a></li> </ul> </nav> </div> </header>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html { scroll-behavior: smooth; } body{margin: 0; padding: 0;} .container{width: 80%; margin:auto; overflow: hidden; } /* HEADER */ header {background-color: dimgrey; padding: 10px; min-height: 100px;} header.branding{float:left;} H1{color: white;} span.h1{float: left; color: orangered; margin-left: 10px;} nav{float: right; padding:5px; margin-top: -75px; } ul li{display: inline-block; list-style:none; padding: 5px; } li.active a{color: orangered; font-size: 18px; font-weight: bold;} a{text-decoration: none; color: #ffffff;} /* Media */ @media (max-width: 960px){ header.branding{display: block; float:none; text-align: center; width: 100%;} nav{display: block; float:none; text-align: center; width: 100%;} }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>