<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Store</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Men <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Carousel Control</a></li>
<li><a href="#">Left & Right Navigation</a></li>
<li><a href="#">Four Columns Grid</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Carousel Control</a></li>
<li><a href="#">Left & Right Navigation</a></li>
<li><a href="#">Four Columns Grid</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Store locator</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li><a href="#">My cart (0) items</a></li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>
<!-- Fim menu-->
<!-- inicio carrocel-->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
<!--fim Carrossel-->
<section id="t-cards">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://unsplash.imgix.net/12/barley.jpg?q=75&fm=jpg&s=f39de5ca1970a13dbe6af6c86b3c47ec" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/mzwlj/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/yboaj/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://unsplash.imgix.net/41/bXoAlw8gT66vBo1wcFoO_IMG_9181.jpg?q=75&fm=jpg&s=a760fd82863937c841f4b3870cdef011" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/josue/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/dstb9/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/2lsao/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/urcon/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/19/waves.JPG?q=75&fm=jpg&s=6f316bc8e1dc9887a7cebe0841096e99" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mutlu82/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/7an8e/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/wntpb/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/jrzxa/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/26/camera-keys.jpg?q=75&fm=jpg&s=b919d3158053cde8e9f0e37b4876c14f" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/nisaanjani/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/sqfuk/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/71mf8/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/1pdrw/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://unsplash.imgix.net/12/barley.jpg?q=75&fm=jpg&s=f39de5ca1970a13dbe6af6c86b3c47ec" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/mzwlj/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/yboaj/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/gv3bp/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://unsplash.imgix.net/41/bXoAlw8gT66vBo1wcFoO_IMG_9181.jpg?q=75&fm=jpg&s=a760fd82863937c841f4b3870cdef011" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/josue/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/dstb9/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/2lsao/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/urcon/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/19/waves.JPG?q=75&fm=jpg&s=6f316bc8e1dc9887a7cebe0841096e99" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mutlu82/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/7an8e/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/wntpb/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/jrzxa/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="panel panel-default panel-card">
<div class="panel-heading">
<img src="https://ununsplash.imgix.net/26/camera-keys.jpg?q=75&fm=jpg&s=b919d3158053cde8e9f0e37b4876c14f" />
<button class="btn btn-primary btn-sm" role="button">Follow</button>
</div>
<div class="panel-figure">
<img class="img-responsive img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/nisaanjani/73.jpg" />
</div>
<div class="panel-body text-center">
<h4 class="panel-header"><a href="https://twitter.com/maridlcrmn">@Maridlcrmn</a></h4>
<small>A short description goes here.</small>
</div>
<div class="panel-thumbnails">
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/sqfuk/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/71mf8/60x60" />
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://placemi.com/1pdrw/60x60" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Inicio Footer-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3 col-md-6">
<div class="container">
<div class="col-lg-3">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center; margin-top:20px;">
<img src="http://placehold.it/500x330" class="img-responsive" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">THIS IS H3</h3>
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<p style="text-align:center; margin-top:20px;">
<img src="http://placehold.it/500x330" class="img-responsive" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">THIS IS H3</h3>
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<h3>Categories:</h3>
<ul>
<li><a href=""><i class="fa fa-file"></i> News</a></li>
<li><a href=""><i class="fa fa-android"></i> Android</a></li>
<li><a href=""><i class="fa fa-code"></i> C#</a></li>
<li><a href=""><i class="fa fa-code"></i> Java</a></li>
<li><a href=""><i class="fa fa-book"></i> Books</a></li>
<li><a href=""><i class="fa fa-globe"></i> Web</a></li>
<li><a href=""><i class="fa fa-windows"></i> Windows</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<h3>Contact:</h3>
<p>Have a question or feedback? Contact me!</p>
<p><a href="" title="Contact me!"><i class="fa fa-envelope"></i> Contact</a></p>
<h3>Follow:</h3>
<a href="" id="gh" target="_blank" title="Twitter"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
Twitter</a>
<a href="" target="_blank" title="GitHub"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x"></i>
</span>
GitHub</a>
</div>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/hu_HU/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="g-plusone" data-annotation="inline" data-width="300" data-href=""></div>
<!-- Helyezd el ezt a címkét az utolsó +1 gomb címke mögé. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<br/>
<hr>
<p>Copyright © Your Website | <a href="">Privacy Policy</a> | <a href="">Terms of Use</a></p>
</footer>
/*
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
Image credits: unsplash.com, uifaces.com/authorized
Image placeholders: placemi.com
*/
.cuadro_intro_hover{
padding: 0px;
position: relative;
overflow: hidden;
height: 200px;
}
.cuadro_intro_hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
.cuadro_intro_hover img{
z-index: 4;
}
.cuadro_intro_hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
.cuadro_intro_hover .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
.cuadro_intro_hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
#t-cards {
padding-top: 80px;
padding-bottom: 80px;
background-color: #000;
}
/********************************/
/* Panel cards */
/********************************/
.panel.panel-card {
position: relative;
height: 241px;
border: none;
overflow: hidden;
}
.panel.panel-card .panel-heading {
position: relative;
z-index: 2;
height: 120px;
border-bottom-color: #fff;
overflow: hidden;
-webkit-transition: height 600ms ease-in-out;
transition: height 600ms ease-in-out;
}
.panel.panel-card .panel-heading img {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 120%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.panel.panel-card .panel-heading button {
position: absolute;
top: 10px;
right: 15px;
z-index: 3;
}
.panel.panel-card .panel-figure {
position: absolute;
top: auto;
left: 50%;
z-index: 3;
width: 70px;
height: 70px;
background-color: #fff;
border-radius: 50%;
opacity: 1;
-webkit-box-shadow: 0 0 0 3px #fff;
box-shadow: 0 0 0 3px #fff;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out;
}
.panel.panel-card .panel-body {
padding-top: 40px;
padding-bottom: 20px;
-webkit-transition: padding 400ms ease-in-out;
transition: padding 400ms ease-in-out;
}
.panel.panel-card .panel-thumbnails {
padding: 0 15px 20px;
}
.panel-thumbnails .thumbnail {
width: 60px;
max-width: 100%;
margin: 0 auto;
background-color: #fff;
}
.panel.panel-card:hover .panel-heading {
height: 55px;
-webkit-transition: height 400ms ease-in-out;
transition: height 400ms ease-in-out;
}
.panel.panel-card:hover .panel-figure {
opacity: 0;
-webkit-transition: opacity 400ms ease-in-out;
transition: opacity 400ms ease-in-out;
}
.panel.panel-card:hover .panel-body {
padding-top: 20px;
-webkit-transition: padding 400ms ease-in-out;
transition: padding 400ms ease-in-out;
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
