<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar-wrapper">
<div class="container navigation">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Zobrazit navigaci</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Název projektu</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">Funkce</a></li>
<li><a href="#contacts">Kontakt</a></li>
</ul>
<div class="nav navbar-right">
<button type="button" class="btn btn-success navbar-btn dropdown-toggle button-login" data-toggle="dropdown">Přihlášení</button>
<div class="dropdown-menu" style="padding:17px;">
<form class="form" id="formLogin" role="login">
<input name="username" id="username" type="text" class="form-control" placeholder="Jméno" required autofocus>
<input name="password" id="password" type="password" class="form-control" placeholder="Heslo" required>
<button id="btnLogin" class="btn btn-primary pull-right" type="submit">Přihlásit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- /navbar wrapper -->
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/55/Brno-Lesna_-_bytovy_dum_komplexu_Majdalenky_I_pri_Okruzni_ulici.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Slajd 1 Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ullamcorper nibh. Vivamus eget rhoncus metus, tempor tristique odio. Nullam nisl turpis, fringilla ut quam sit amet, aliquet venenatis sem. Fusce dictum sagittis arcu non hendrerit. In ut mollis augue, eu volutpat ligula. </p>
</div>
</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Majdalenky_3_%28Brno%29.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ullamcorper nibh. Vivamus eget rhoncus metus, tempor tristique odio. Nullam nisl turpis, fringilla ut quam sit amet, aliquet venenatis sem. </p>
</div>
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/30/Panel%C3%A1ky_Ko%C5%A1%C3%ADk.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Třetí slajd</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ullamcorper nibh. Vivamus eget rhoncus metus, tempor tristique odio. Nullam nisl turpis, fringilla ut quam sit amet, aliquet venenatis sem. Fusce dictum sagittis arcu non hendrerit. In ut mollis augue, eu volutpat ligula.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row" id="about">
<div class="col-md-4 text-center">
<img src="http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/newspaper-icon.png">
<h2>Aktuality</h2>
<p>Buďte informování a informujte ostatní. Aktuality, které jsou dostupné i ve formátu RSS, jsou nejlepším způsobem, jak zveřejňvat novinky.</p>
</div>
<div class="col-md-4 text-center">
<img src="http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/folder-open-icon.png">
<h2>Schůze</h2>
<p>Záznam z každé schůze s přehlednou historií. Vše na jednom místě s pohodlným vyhledáváním.</p>
</div>
<div class="col-md-4 text-center">
<img src="http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/disk-icon.png">
<h2>Soubory</h2>
<p>Nabídněte členům ke stažení soubory, které mohou potřebovat. Formuláře, žádosti, postupy a seznamy. Cokoliv by mohl některý z nich potřebovat.</p>
</div>
</div><!-- /.row -->
<div class="row contacts" id="contacts">
<div class="col-sm-4">
<h3>Kontaktujte nás!</h3>
<hr>
<address>
<strong>Email:</strong> <a href="mailto:#"> info@domain.com</a><br>
<strong>Adresa:</strong> Ulice 123, 12345 Město <br>
<strong>Phone:</strong> <span itemprop="telephone"><a href="tel:+420123456789">123 456 789</a></span>
</address>
</div>
<div class="col-sm-8 contact-form">
<form id="contact" method="post" class="form" role="form">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Jméno" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="E-mail" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Zpráva" rows="5"></textarea>
<br />
<div class="row">
<div class="col-xs-12 col-md-12 form-group">
<button class="btn btn-primary pull-right" type="submit">Odeslat</button>
</div>
</div>
</form>
</div>
</div>
<!-- /END THE CONTACTS -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Zpět nahoru</a></p>
<p>© 2014 · <a href="http://www.bootply.com/62603">ninjanuts.cz</a></p>
</footer>
</div><!-- /.container -->
/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
.container.navigation{
padding-right: 0px;
padding-left: 0px;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.button-login{
margin-right:15px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
margin: 0 15px;
background-color: rgba(0, 0, 0, 0.6);
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color:#bbb;
}
.carousel img {
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
height: 500px;
width: 100%;
vertical-align: middle;
min-height: 100%;
/* max-height: none; */
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */
.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
margin-bottom: 20px;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.contacts {
margin: 40px 0; /* Space out the Bootstrap <hr> more */
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
$('.dropdown-menu input, .dropdown-menu label, .dropdown-menu button').click(function(e) {
e.stopPropagation();
});
$(function(){
$('.carousel').carousel({
interval: 15000
});
});
