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
<html> <body> <div class="container"> <header> <!--icons top--> <i class="far fa-dot-circle current"></i> <i class="far fa-dot-circle"></i> </header> <main id="main"> <div class="main-inside"> <H1> Lorem ipsum dolor</H1> <p>There are many variations of passages of Lorem Ipsum available</p> <button class="button1">Confirm</button> </div> </main> <!--icons footer--> <footer> <i class="fab fa-twitter"></i> <i class="fab fa-facebook-f"></i> </footer> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html { background:linear-gradient(90deg,rgba(0,0,0,0.1),rgba(0,0,0,0.8)) ,url("https://www.tourisme.fr/images/otf_offices/1982/ile-de-sein-port.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-width:320px; } header {color:goldenrod; text-align: center; padding-top:5px; } header i.current{color:white;} .main-inside h1{margin-top: 200px; border:1px solid white; margin-bottom:2px;} .main-inside p{margin-top:5px; font-size:13px;} .main-inside{ text-align: center; color:white;} footer{ margin-top: 80px; color:lightblue ; font-size: 22px; text-align: center; } .button1{color:white; background-color: black; border: none; border-radius: 5px; height: 30px; width: 120px;} /*responsive*/ @media (max-width:960px){ .main-inside h1{margin-top: 230px; border:1px solid white; margin-bottom:2px;} .main-inside p{margin-top:5px; font-size:13px;} .main-inside{ text-align: center; color:white;} footer{ margin-top: 40px; color:lightblue ; font-size: 20px; text-align: center; } @media (max-width:640px){ html{min-width:320px;} .main-inside h1{margin-top: 230px; border:1px solid white; margin-bottom:2px;} .main-inside p{margin-top:5px; font-size:13px;} .main-inside{ text-align: center; color:white;} footer{ margin-top: 48px; color:lightblue ; font-size: 20px; text-align: center; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>