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="cs-cz"> <head> <meta charset="UTF-8"> <title>Vojta Korduliak - Web development</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> </head> <body> <section> <div id="aboutme"> <div id="character"> <div class="row"> <div class="col-xl-1"><span class="heading-character"><em>Name:</em></span></div> <div class="col-xl-2"><span class="text-character"><em>Vojta Korduliak</em></span></div> <div class="col-xl-3"><span class="heading-character"><em>Skills on high-level:</em></span></div> <div class="col-xl-3"><span class="text-character"><em>HTML5, CSS3, Bootstrap</em></span></div> </div> <div class="row"> <div class="col-xl-1"><span class="heading-character"><em>Age:</em></span></div> <div class="col-xl-2"><span class="text-character"><em>15</em></span></div> <div class="col-xl-3"><span class="heading-character"><em>Skills on medium-level:</em></span></div> <div class="col-xl-3"><span class="text-character"><em>PHP</em></span></div> </div> <div class="row"> <div class="col-xl-1"><span class="heading-character"><em>Nation:</em></span></div> <div class="col-xl-2"><span class="text-character"><em>Czech Republic</em></span></div> <div class="col-xl-3"><span class="heading-character"><em>Hobbies:</em></span></div> <div class="col-xl-3"><span class="text-character"><em>Programming, Photography</em></span></div> </div> </div> <div id="character-img"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/200px-Circle_-_black_simple.svg.png" > <div class="clr"></div> </div> </div> </section> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.clr { clear } .center { text-align: center; } .underline { position: relative; bottom: 20px; } #aboutme { width: 90%; margin: auto; margin-top: 50px; } #character-img { float: right; margin-top: -120px; } @media(max-width: 800px) { #character-img { margin-top: 0px; float: none; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>