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
<!DOCTYPE HTML> <html lang=""> <head> <meta charset="UTF-8"> <title>Ukázka</title> </head> <body> <section> <div class="top-container"> <div class="showcase1"></div> <div class="showcase2"></div> <div class="add"><img src="https://cdn.pixabay.com/photo/2018/05/13/17/48/rust-3397227_960_720.jpg" height="300"></div> </div> </section> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background-color: #ECECEC; } section { width: 80%; margin: auto; } .top-container { display: grid; grid-template-areas: 'img img info info add'; height: 300px; } .showcase1 { grid-area: img; background: url(https://cdn.pixabay.com/photo/2018/05/20/16/13/dandelion-3416140_960_720.jpg) no-repeat; background-position: center; background-size: cover; } .showcase2 { grid-area: info; background-color: #DFDEDE; } .add { grid-area: add; justify-self: end; } @media (max-width: 600px) { .top-container { grid-template-areas: 'img' 'info' 'add'; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>