<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div id="wrap">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Logo Nav by Start Bootstrap</h1>
<p>Note: You may need to adjust some CSS based on the size of your logo. The default logo size is 150x50 pixels.</p>
</div>
</div>
</div>
<!-- /.container -->
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-5">
<!-- artigo em destaque -->
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/482x350" alt="" class="thumb">
</a>
<div class="block-title">
<h2>Lorem ipsum dolor asit amet</h2>
<p class="by-author"><small>By Jhon Doe</small></p>
</div>
</div>
<!-- /.featured-article -->
</div>
<div class="col-md-7 col-lg-7">
<ul class="media-list main-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/150x90" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor asit amet</h4>
<p class="by-author">By Jhon Doe</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /.container -->
<div class="container dynamicTile">
<div class="row ">
<div class="col-sm-2 col-xs-4">
<div id="tile1" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/twitter1.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/twitter2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile2" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/hot.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/hot2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/hot3.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile3" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/weather2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/weather.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile4" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/facebook3.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/facebook2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile5" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/neews.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/neews2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile6" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/skype.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/skype2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-xs-8">
<div id="tile7" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/gallery.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/gallery2.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/gallery3.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile8" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/music.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/music2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile9" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://handsontek.net/demoimages/tiles/calendar.png" class="img-responsive"/>
</div>
<div class="item">
<img src="http://handsontek.net/demoimages/tiles/calendar2.png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-8">
<div id="tile10" class="tile">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<h3 class="tilecaption"><i class="fa fa-child fa-4x"></i></h3>
</div>
<div class="item">
<h3 class="tilecaption">Customize your tiles</h3>
</div>
<div class="item">
<h3 class="tilecaption">Text, Icons, Images</h3>
</div>
<div class="item">
<h3 class="tilecaption">Combine them and create your metro style</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted credit">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropup <span class="caret caret-up"></span>
</button>
<ul class="dropdown-menu drop-up" 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>
</div>
</p>
</div>
</div>
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
@media(min-width:768px) {
body {
padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 15px 0;
}
}
/* image thumbnail */
.thumb {
display: block;
width: 100%;
margin: 0;
}
/* Style to article Author */
.by-author {
font-style: italic;
line-height: 1.3;
color: #aab6aa;
}
/* Main Article [Module]
-------------------------------------
* Featured Article Thumbnail
* have a image and a text title.
*/
.featured-article {
width: 482px;
height: 350px;
position: relative;
margin-bottom: 1em;
}
.featured-article .block-title {
/* Position & Box Model */
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
/* background */
background: rgba(0,0,0,0.7);
/* Width/Height */
padding: .5em;
width: 100%;
/* Text color */
color: #fff;
}
.featured-article .block-title h2 {
margin: 0;
}
/* Featured Articles List [BS3]
--------------------------------------------
* show the last 3 articles post
*/
.main-list {
padding-left: .5em;
}
.main-list .media {
padding-bottom: 1.1em;
border-bottom: 1px solid #e8e8e8;
}
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
.caret-up {
/* Safari */
-webkit-transform: rotate(-180deg);
/* Firefox */
-moz-transform: rotate(-180deg);
/* IE */
-ms-transform: rotate(-180deg);
/* Opera */
-o-transform: rotate(-180deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);
}
.drop-up {
top: auto;
bottom: 100% !important;
}
.dynamicTile .col-sm-2.col-xs-4{
padding:5px;
}
.dynamicTile .col-sm-4.col-xs-8{
padding:5px;
}
#tile1{
background: rgb(0,172,238);
}
#tile2{
background: rgb(243,243,243);
}
#tile3{
background: rgb(71,193,228);
}
#tile4{
background-image: url('http://handsontek.net/demoimages/tiles/facebook.png');
background-size: cover;
}
#tile5{
background: rgb(175,26,63);
}
#tile6{
background: rgb(62,157,215);
}
#tile7{
background: white;
}
#tile8{
background: rgb(209,70,37);
}
#tile9{
background: rgb(0,142,0);
}
#tile10{
background: rgb(0,93,233);
}
.tilecaption{
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
margin:0!important;
text-align: center;
color:white;
font-family: Segoe UI;
font-weight: lighter;
}
$( document ).ready(function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 10);
});
$(window).bind('resizeEnd', function() {
$(".tile").height($("#tile1").width());
$(".carousel").height($("#tile1").width());
$(".item").height($("#tile1").width());
});
});
