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
<div class="cemetery-container"> <div class="sun-moon-head"> <a href="user.html"> <img src="assets/main/images/extension/sun.png" class="img-responsive sun-moon"> </a> </div> <div class="path-cemetery"> <img src="http://s11.postimg.org/ofw36uu5f/landscape_day.png" class="img-responsive"> <div class="signpost-top"> <a href="#"> <img src="http://s30.postimg.org/r4l27hg01/signpost_path_cemetery.png" class="img-responsive"> </a> </div> <div class="signpost-center"> <a href="#"> <img src="http://s22.postimg.org/sj879j6pt/signpost_path_zoocemetery.png" class="img-responsive"> </a> </div> <div class="signpost-bottom"> <a href="#"> <img src="http://s22.postimg.org/h5lnybw75/signpost_path_church.png" class="img-responsive"> </a> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { width: 100%; height: 100%; } #present-day, #present-night { min-width: 300px; } #present-day { background-color: #ceebfb !important; } #present-night { background-color: #0d181e !important; background: url(../../../main/images/extension/stars.png) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .cemetery-container { width: 100%; height: 100%; min-height: 100%; overflow-x: hidden; overflow-y: auto; } .sun-moon-head { position: absolute; top: 0; left: 0; width: 100%; max-height: 240px; padding: 0; overflow: hidden; display: inline-block; } .sun-moon { max-width: 240px; max-height: 240px; min-width: 150px; min-height: 150px; float: right; } .path-cemetery { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0; display: inline-block; } .path-left, .path-right { overflow: hidden; } .path-left { width: 50%; float: left; } .path-right { width: 50%; float: right; } img { max-width: 100%; max-height: 100%; } .signpost-top { position: absolute; bottom: 250px; left: 480px; margin: 0 auto; padding: 0; max-width: 300px; } .signpost-center { position: absolute; bottom: 200px; left: 480px; margin: 0 auto; padding: 0; max-width: 300px; } .signpost-bottom { position: absolute; bottom: 150px; left: 480px; margin: 0 auto; padding: 0; max-width: 300px; } .signpost-top > a, .signpost-center > a, .signpost-bottom > a { display: block; padding: 0; } .signpost-top > a > img, .signpost-center > a > img, .signpost-bottom > a > img { padding: 0;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>