<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 ---------->
<!DOCTYPE html>
<html>
<head>
<title>Template Seven</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid nav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 brand" href="#">Template <span class="logo">Seven</span></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 navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="articles.html">Articles</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Categorias <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Sexo</a></li>
<li><a href="#">Drogas</a></li>
<li><a href="#">Rockin'Roll</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--end navbar-->
<!-- <div class='container'>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>-->
<div class='container carousel'>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<div class="col-lg-8 pull-right">
<img src="http://lorempixel.com/g/750/350/transport">
</div>
<div class="col-lg-4">
<h2>Sed vel lectus<br>
<small>by Merovingio in Jun 22, 2017 at
21:59</small></h2>
<p>
Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus.
Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi.
Pellentesque ipsum. Nulla non arcu lacinia neque faucibus...
Pellentesque ipsum. Nulla non arcu lacinia neque faucibus...
Pellentesque ipsum. Nulla non arcu lacinia neque faucibus...
Pellentesque ipsum. Nulla non arcu lacinia neque faucibus...
</p>
<a class='btn btn-info pull-right'
href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
<div class="item">
<div class="col-lg-8 pull-right">
<img src="http://lorempixel.com/g/750/350/nature">
</div>
<div class="col-lg-4">
<h2>Proin porta auctor nisi<br>
<small>by Merovingio in Jun 22, 2017 at
00:34</small></h2>
<p>
Proin porta auctor nisi in interdum. Praesent a accumsan neque. Quisque ut nulla ac libero egestas tristique. Nunc venenatis elit lorem, ut viverra neque rhoncus a. Proin erat risus, pharetra vitae elementum eget, accumsan ornare mauris.
Praesent...
</p>
<a class='btn btn-info pull-right'
href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
<div class="item">
<div class="col-lg-8 pull-right">
<img src="http://lorempixel.com/g/750/350/fashion">
</div>
<div class="col-lg-4">
<h2>Aenean sodales<br>
<small>by Merovingio in Jun 22, 2017 at
00:33</small></h2>
<p>
Aenean sodales, leo eu euismod tincidunt, felis odio aliquam velit,
quis porta lorem erat eget erat. Aliquam porta libero erat, sed aliquet est
sollicitudin a. Curabitur nec tellus in eros egestas venenatis ac sed nisl. In consectetur nisl eget...
</p>
<a class='btn btn-info pull-right'
href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class='container'>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="http://lorempixel.com/g/600/200/transport" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>in Category</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="http://lorempixel.com/g/600/200/nature" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>in Category</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="http://lorempixel.com/g/600/200/technics" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>in Category</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="http://lorempixel.com/g/600/200/cats" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>in Category</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="http://lorempixel.com/g/600/200/cats" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>in Category</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a></p>
</div>
</div>
</div>
<nav aria-label="Page navigation" id="div-pagination">
<ul class="pager">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<footer>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<h3> Mais Acessados</h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<h3> Últimas publicações </h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
<h3> Social </h3>
<ul>
<li>
<form method='post' action='/newsletter'>
<label>Inscreva-se:</label><br>
<input type="text" class="full text-center" placeholder="Email ">
<button class="btn bg-gray" type="button"> Enviar <i class="fa fa-long-arrow-right"> </i> </button>
</form>
</li>
</ul>
<ul id="menu-social-menu" class=" social menu-items list-unstyled">
<li><a href="https://www.facebook.com"><i class="fa fa-facebook-square fa-3x social"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter-square fa-3x social"></i></a></li>
<li><a href="https://plus.google.com"><i class="fa fa-google-plus-square fa-3x social"></i></a></li>
<li><a href="https://pinterest.com/"><i class="fa fa-pinterest-square fa-3x social"></i></a></li>
<li> <a href="https://www.youtube.com/"><i class="fa fa-youtube-square fa-3x social"></i></a></li>
<li><a href="mailto:myemail@gmail.com"><i class="fa fa-envelope-square fa-3x social"></i></a></li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.container-->
</div>
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<p class="pull-left"> Copyright © Template Seven 2017. All right reserved. </p>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
/* Nav Bar */
body { padding-top: 70px; }
.logo {color:red;}
.navbar-inner{
/*height: 90px*/
min-height: 60px
}
.nav {
background-color: white;
}
.navbar{
padding: 0 10px;
}
.navbar .nav > li > a {
padding: 20px 15px;
font-size: 150%;
}
.navbar .btn-navbar {
/*margin-right: 0px;*/
margin-top:15px;
}
.navbar-brand {
padding: 20px 15px;
font-size: 190%;
}
@media (max-width:768px) {
.brand img{
margin-bottom: 5px
}
.navbar .btn-navbar{
/*margin-right: -15px;*/
}
.navbar .nav > li > a {
padding: 10px 15px;
}
}
.jumbotron{background-color: transparent;}
#div-pagination{clear: both;}
.carousel {padding-bottom: 25px}
.carousel img{padding-top: 20px;}
.carousel h2 {color: #0072b5;}
.carousel h2 small{color: #289bde}
.carousel col-lg-4 p {text-align: center;}
/*footer*/
.footer {
background: #EDEFF1;
height: auto;
padding-bottom: 30px;
position: relative;
width: 100%;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #DDDDDD;
}
.footer p {
margin: 0;
}
.footer h3 {
border-bottom: 1px solid #BAC1C8;
color: #54697E;
font-size: 18px;
font-weight: 600;
line-height: 27px;
padding: 40px 0 10px;
text-transform: uppercase;
}
.footer ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.footer ul li a {
padding: 0 0 5px 0;
display: block;
}
.footer a {
color: #78828D
}
.footer-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
#menu-social-menu li{display: inline-table}
/*footer*/
