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
<a href="#" id="example" class="hidden"> <div class="hiddencentered" id="example2"> sgojngojndgkmogd </div> </a> <div id="main"> <div class="boxesline"> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorieNějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie</p> </div> </a> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie</p> </div> </a> </div> <div class="boxesline"> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie, může být i několikařádkovýPopis této kategorie Popis této kategorie, může být i několikařádkový</p> </div> </a> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie</p> </div> </a> <div class="boxesline"> </div> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie</p> </div> </a> <a class="box" href="#example"> <div class="inbox"> <h2>Nějaká kategorie</h2> <p>Popis této kategorie Popis této kategorie</p> </div> </a> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@keyframes fadein{ from { opacity: 0; } to { opacity: 1; } } body{ font-family: Tahoma, Verdana; } #main{ text-align: center; } a.box{ width: 350px; height: 300px; margin: 10px; background-image: url("bg1.jpg"); background-size: 100% 100%; display: inline-block; } a.box > .inbox{ background-color: rgba(0, 115, 0, 1); width: 100%; height: 300px; opacity: 0.95; transition: 200ms; color: #fff; display: flex; justify-content: center; flex-direction: column; } a.box > .inbox:hover{ background-color: rgba(0, 115, 0, 0.7); cursor: pointer; } a.box > .inbox h2{ margin: 0; padding: 0; font-size: 2.2em; } a.box > .inbox p{ padding: 0; margin: 5px 0 0 0; font-size: 0.9em; font-style: italic; word-break: break-word; overflow: hidden; } a.box{ text-decoration: none; } .hidden{ display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; transition: 300ms; z-index: 100; background-color: rgba(125, 125, 125, 0.9); } .hidden:target{ display: block; animation-name: fadein; animation-duration: 500ms; } .hidden .hiddencentered{ background-color: #fff; height: 60vh; margin-top: 20vh; } a.hidden:hover{ cursor: default; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>