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> <!-- Story by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>Síť</title> <meta charset="utf-8-CZ" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="assets/css/main.css" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <!-- Wrapper --> <div id="wrapper" class="divided"> <nav id="menu" class="navbar navbar-default navbar-fixed-top"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Úvod<strong></strong></a><a class="navbar-brand"href="home.html">Home</a></div></span> <!-- Collect the nav links, forms, and other content for toggling --> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- One --> <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"> <div class="content"> <h1>Síť</h1> <p class="major"> </p> <ul class="actions vertical"> </ul> </div> <div class="image"> <img src="images/banner.jpg" alt="" /> </div> </section> <!-- Two --> <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in" id="first""> <div class="content"> <h2>Co dělá</h2> <p>dfsdf</p> </div> <div class="image"> <img src="images/spotlight01.jpg" alt="" /> </div> </section> <!-- Three --> <section class="spotlight style3 orient-left content-align-right image-position-center onscroll-image-fade-in" id="first> <div class="content"> <h2>Na co se zaměřuje</h2> <p>dfsdf</p> </div> <div class="image"> <img src="images/spotlight02.jpg" /> </div> </section> <!-- Four --> <section class="spotlight style4 orient-right content-align-left image-position-center onscroll-image-fade-in"> <div class="content"> <h2>Pro koho tady je</h2> <p>dfsdf</p> </div> <div class="image"> <img src="images/spotlight03.jpeg" alt="" /> </div> </section> <!-- Five --> <section class="wrapper style1 align-center"> <div class="inner"> <h1>Vedoucí</h1> </div> <!-- Gallery --> <div class="gallery style2 medium lightbox onscroll-fade-in"> <article> <a href="images/gallery/fulls/01.jpg" class="image"> <img src="images/gallery/thumbs/01.jpg" alt="" /> </a> <div class="caption"> <h2>Jitka O.</h2> <p>Organizační správce, vedoucí Biblických neděl.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/02.jpg" class="image"> <img src="images/gallery/thumbs/02.jpg" alt="" /> </a> <div class="caption"> <h2>Marek Š.</h2> <p>Technický organizátor, vedoucí kapely Alt+43.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/03.jpg" class="image"> <img src="images/gallery/thumbs/03.jpg" alt="" /> </a> <div class="caption"> <h2>Jitka Š.</h2> <p>Zpěvačka skupiny Alt+43.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/04.jpg" class="image"> <img src="images/gallery/thumbs/04.jpg" alt="" /> </a> <div class="caption"> <h2>Tomáš J.</h2> <p>Organizátor.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/05.jpg" class="image"> <img src="images/gallery/thumbs/05.jpg" alt="" /> </a> <div class="caption"> <h2>Martin O.</h2> <p>Organizátor.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </div> </article> <article> <a href="images/gallery/fulls/06.jpg" class="image"> <img src="images/gallery/thumbs/06.jpg" alt="" /> </a> <div class="caption"> <h3>Jakub Š.</h3> <p>Zvukař, DJ, kytarista.</p> <ul class="actions"> <li><span class="button small">Details</span></li> </ul> </article> </div> </section> <!-- Seven --> <section class="wrapper style1 align-center"> <div class="inner medium"> <h2>Kontakt</h2> <form method="post" action="#"> <div class="field half first"> <label for="name">Jméno</label> <input type="text" name="name" id="name" value="" /> </div> <div class="field half"> <label for="email">Email</label> <input type="email" name="email" id="email" value="" /> </div> <div class="field"> <label for="message">Zpráva</label> <textarea name="message" id="message" rows="6"></textarea> </div> <ul class="actions"> <li><input type="submit" name="submit" id="submit" value="Odeslat" /></li> </ul> <!-- Footer --> <footer class="wrapper style1 align-center"> <div class="inner"> <ul class="icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <href="https://www.facebook.com/jsmesit/" class="icon style2 fa-facebook"><span class="label">Facebook</span></a> <div> </div><i><a href="http://www.aczlin.cz"></a></p></i> <style> p {line-height: 200%} </style> </div> </footer> </div> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.scrollex.min.js"></script> <script src="assets/js/jquery.scrolly.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Spotlight (style3) */ .spotlight.style3 { padding: 7rem 7rem 5rem 7rem ; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; position: relative; overflow-x: hidden; text-align: left; } .spotlight.style3 .content { width: 44.5rem; max-width: 100%; } .spotlight.style3 .image { -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; width: 28rem; height: 15.5rem; margin-top: 0rem; margin-bottom: 1rem; margin-right: 10rem; } .spotlight.style3 .image img { -moz-object-fit: cover; -webkit-object-fit: cover; -ms-object-fit: cover; object-fit: cover; -moz-object-position: center; -webkit-object-position: center; -ms-object-position: center; object-position: center; display: inline-block; width: 100%; height: 100%; border-radius: 0; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>