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"> <head> <meta charset="UTF-8"> <title>Basic Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--Upravy CSS--> <link rel="stylesheet" type="text/css" href="C:\Users\ragulin\Disk Google\Tvorba stránek\Example\style.css"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <!--<ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul>--> </div> </div> </nav> <div class="wrapper"> <!--first row--> <div class=firstR> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class=first> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class=first> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <!--second row--> <div class="firstR img-responsive center-block"> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class="first"> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class=first> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <!--third row--> <div class=firstR> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class=first> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <div class=first> <a href="https://www.facebook.com/?ref=logo" class="vata"><p>lorem ipsum</p></a> </div> <!-- end for now--> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header { margin-left: 10%; } .container { margin-left: 20%; margin-right: 5%; } .first, .firstR { width: 30%; float: left; border: 1px solid black; background: url("pokus.jpg"); background-size: 100% auto; position: relative; margin-left: 3.3%; margin-bottom: 3.3%; padding-top: 20%; } .firstR { margin-left: 0; } .wrapper { width: 80%; margin-right: 10%; margin-left: 10%; } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } img { height: auto; width: auto; } body { background-image: url("C:\Users\ragulin\Disk Google\Tvorba stránek\Example\pokus.jpg"); } a.vata { display: block; text-decoration: none; border: 1px solid red; } a.vata:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0px; z-index: 10; left: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>