<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<section class="header-border">
<header class="header">
<article class="container">
<div class="header-left">
<p class="header-title">
<a href="app_03.html">_ANGEL MOKUZ</a>
</p>
<p>Developer and web developer</p>
</div>
<div class="header-right">
<ul class="header-ul">
<li><i class="fa fa-phone"></i> +00 (000) 000 0000</li>
<li><i class="fa fa-envelope"></i> <a href="#">mymail@example.com</a></li>
</ul>
<nav>
<ul class="header-ul">
<li><a href="#">Home</a></li>
<li><a href="#">students</a></li>
<li><a href="#">teachers</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</div>
</article>
</header>
</section>
<section class="nav-border container-fluid">
<article class="row">
<nav class="navbar nav-bg">
<div class="container">
<div class="navbar-header">
<a role="button" class="navbar-toggle" data-toggle="collapse" data-target="#_navbar" aria-expanded="false">MENU</a>
</div>
<div class="collapse navbar-collapse" id="_navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">US SCHOOL<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">LOCATION</a></li>
</ul>
</div>
</div>
</nav>
</article>
</section>
<!-- CAROUSEL -->
<section id="_carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#_carousel" data-slide-to="0" class="active"></li>
<li data-target="#_carousel" data-slide-to="1"></li>
<li data-target="#_carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="background-image: url('https://picsum.photos/1050');">
<div class="item active">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-md-3 text-right">
<img class="img-responsive carousel-img" src="https://cdn.pixabay.com/photo/2013/07/13/12/30/eagle-159752__340.png">
</div>
<div class="col-md-8 col-md-offset-1">
<div class="carousel-info text-left">
<p class="h2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="hidden-xs">You must provide CSS for the positioning and width of your affixed content.Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-md-3 text-right">
<img class="img-responsive carousel-img" src="https://cdn.pixabay.com/photo/2013/07/13/12/30/eagle-159752__340.png">
</div>
<div class="col-md-8 col-md-offset-1">
<div class="carousel-info text-left">
<p class="h2">Donec odio. Quisque volutpat mattis eros.</p>
<p class="hidden-xs">Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.Use the affix plugin via data attributes or manually with your own JavaScript. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<div class="container">
<div class="row">
<div class="col-md-3 text-right">
<img class="img-responsive carousel-img" src="https://cdn.pixabay.com/photo/2013/07/13/12/30/eagle-159752__340.png">
</div>
<div class="col-md-8 col-md-offset-1">
<div class="carousel-info text-left">
<p class="h2">Aliquam porttitor mauris sit amet orci.</p>
<p class="hidden-xs">Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.such as a pulled or pushed column, due to a Safari rendering bug.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CAROUSEL -->
<!-- ICONOS -->
<section class="icono-color">
<article class="container">
<div class="row">
<div class="icono-content">
<ul class="icono-ul">
<li>
<a href="#">
<div class="icono-info">
<i class="fa fa-flag"></i>
<p class="h5">ANTHEM</p>
<p class="p">Letra de Nuestro Anthem</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="icono-info">
<i class="fa fa fa-book"></i>
<p class="h5">HISTORY</p>
<p class="p">Nuestra History </p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="icono-info">
<i class="fa fa-trophy"></i>
<p class="h5">Vision</p>
<p class="p">urna consequat velit</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="icono-info">
<i class="fa fa-group"></i>
<p class="h5">Mission</p>
<p class="p">urna consequat velit</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="icono-info">
<i class="fa fa-legal"></i>
<p class="h5">Gallery</p>
<p class="p">urna consequat velit</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</article>
</section>
<!-- ICONOS -->
<!-- NOTICIAS -->
<section class="section">
<article class="container">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="https://cdn.pixabay.com/photo/2013/07/13/12/33/shelf-159852__340.png" alt="">
</div>
<div class="col-md-8">
<div class="descrip">
<p class="h2">The Modern Business template by Start Bootstrap includes:</p>
<ul>
<li><strong>Bootstrap v3.3.7</strong></li>
<li>jQuery v1.11.1</li>
<li>Font Awesome v4.2.0</li>
<li>Working PHP contact form with validation</li>
<li>Unstyled page elements for easy customization</li>
<li>17 HTML pages</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p><a href="#">Continuar ...</a></p>
<p><i class="fa fa-calendar"></i> 10-03-2017 / <i class="fa fa-user-o"></i> Angel tantarico vela</p>
</div>
</div>
</div>
</article>
</section>
<!-- TITULO -->
<section class="wp-separator">
<article class="section">
<div class="container">
<div class="row text-center">
<p class="h1">ACTIVITIES & EVENTS</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum nam numquam voluptates cumque </p>
</div>
</div>
</article>
</section>
<!-- NOTICIAS & EVENTOS -->
<section class="section">
<article class="container">
<div class="row">
<div class="col-md-9">
<!-- ITEM -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#">
<img class="img-responsive" src="https://cdn.pixabay.com/photo/2017/02/27/23/35/student-2104585__340.jpg" alt="">
</a>
</div>
<div class="col-md-9">
<div class="descrip">
<a href="#">
<p class="h3">Lorem ipsum dolor ipsum dolor sit amet consectetur ipsum dolor sit amet consectetur ipsum dolor sit amet consectetur sit amet
</p>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt.
</p>
<p><a href="#">Continuar ...</a></p>
<p><i class="fa fa-calendar"></i> 10-03-2017 / <i class="fa fa-user-o"></i> Angel tantarico vela</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<!-- ITEM -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#">
<img class="img-responsive" src="https://cdn.pixabay.com/photo/2016/05/20/10/35/pupils-1404785__340.jpg" alt="">
</a>
</div>
<div class="col-md-9">
<div class="descrip">
<a href="#">
<p class="h3">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
</p>
<p><a href="#">Continuar ...</a></p>
<p><i class="fa fa-calendar"></i> 10-03-2017 / <i class="fa fa-user-o"></i> Angel tantarico vela</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<!-- ITEM -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#">
<img class="img-responsive" src="https://cdn.pixabay.com/photo/2016/05/20/10/35/pupils-1404784__340.jpg" alt="">
</a>
</div>
<div class="col-md-9">
<div class="descrip">
<a href="#">
<p class="h3">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
</p>
<p><a href="#">Continuar ...</a></p>
<p><i class="fa fa-calendar"></i> 10-03-2017 / <i class="fa fa-user-o"></i> Angel tantarico vela</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<!-- ITEM -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a href="#">
<img class="img-responsive" src="https://cdn.pixabay.com/photo/2017/02/27/23/34/college-2104580__340.jpg" alt="">
</a>
</div>
<div class="col-md-9">
<div class="descrip">
<a href="#">
<p class="h3">Lorem ipsum dolor sit amet consectetur adipisicing elit ipsum dolor sit amet consectetur</p>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.
</p>
<p><a href="#">Continuar ...</a></p>
<p><i class="fa fa-calendar"></i> 10-03-2017 / <i class="fa fa-user-o"></i> Angel tantarico vela</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
</div>
<div class="col-md-3">
<!-- ITEM -->
<div class="item">
<div class="thumbnail">
<div class="caption">
<div class="descrip">
<p class="strong">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit.</p>
<p>
<a href="#" class="btn btn-link" role="button">Leer mas...</a>
</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<div class="item">
<div class="thumbnail">
<div class="caption">
<div class="descrip">
<p class="strong">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit.</p>
<p>
<a href="#" class="btn btn-link" role="button">Leer mas...</a>
</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<div class="item">
<div class="thumbnail">
<div class="caption">
<div class="descrip">
<p class="strong">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit.</p>
<p>
<a href="#" class="btn btn-link" role="button">Leer mas...</a>
</p>
</div>
</div>
</div>
</div>
<!-- ITEM -->
<div class="item">
<div class="thumbnail">
<div class="caption">
<div class="descrip">
<p class="strong">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit.</p>
<p>
<a href="#" class="btn btn-link" role="button">Leer mas...</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation">
<ul class="pager">
<li><a href="#"><i aria-hidden="true">←</i> Anterior</a></li>
<li><a href="#">Siguiente <i aria-hidden="true">→</i></a></li>
</ul>
</nav>
</article>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-geo">
<h3>Location</h3>
<address>
1355 Market Street, Suite 900
<br>
San Francisco, CA 94103
<br>
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
</div>
<div class="col-sm-4 footer-social text-center">
<h3>Social networks</h3>
<ul class="footer-nav">
<li>
<a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
</li>
</ul>
</div>
<div class="col-sm-4 footer-info">
<h3>Information</h3>
<p>
1355 Market Street, Suite 900
<br>
San Francisco, CA 94103
</p>
</div>
</div>
</div>
<div class="container-fluid footer-p">
<div class="row">
<div class="col-md-12">
<p>
© 2016 - _ANGEL MOKUS & CINNOVA.NET. Todos los derechos reservados
</p>
</div>
</div>
</div>
</footer>
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #7F7F7F;
}
a:hover, a:focus {
text-decoration: none;
}
.strong {
font-weight: bold;
color: #777;
}
.section {
padding: 50px 0;
}
/*Header*/
.header {
padding: 35px 0;
}
.header-border {
border-top: 2px solid #337AB7;
}
.header-left {
float: left;
}
.header-title {
font-size: 22px;
font-variant: small-caps;
font-weight: 500;
}
.header-right {
float: right;
text-align: right;
}
.header-right .header-ul {
list-style: none;
padding: 0;
}
.header-right .header-ul li {
margin-left: 10px;
display: inline-block;
list-style: none;
}
.header-right .header-ul li i {
margin-right: 5px;
}
.header-right nav li {
margin-right: 5px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.header-right nav li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}
/*Header*/
/* Nav */
.navbar {
border: 0;
}
.nav>li a {
display: block;
color: #737373;
border-bottom: 2px solid transparent;
transition: all 0.8s;
}
.nav>li a:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #024D8E;
border-bottom: 2px solid #337AB7;
}
.nav>li a:focus {
color: #737373;
}
.nav-border {
border-top: 3px solid #E1E0DF;
}
.nav-bg {
background-color: #F7F7F7;
margin-bottom: 0;
}
/* Nav */
/* Carousel */
.carousel-inner {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 500px;
width: 100%;
z-index: -1000;
}
.carousel-caption {
position: static;
}
.carousel-info {
background-color: rgba(0, 0, 0, 0.3);
padding: 20px 20px;
min-height: 210px;
}
.carousel-inner .item {
transition-property: opacity;
}
.carousel-img {
max-width: 200px;
margin: auto;
}
.carousel-indicators {
bottom: 0;
}
.carousel-indicators li {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.carousel-indicators .active {
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 0.2);
}
/* Carousel */
/* Icono */
.icono-color {
background-color: #1D5280;
}
.icono-content {
display: block;
}
.icono-ul {
display: table;
width: 100%;
margin-bottom: 0;
border-collapse: collapse;
list-style: none;
}
.icono-ul li {
display: table-cell;
text-align: center;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.icono-ul li a {
display: inline-block;
color: #EEE;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
transition: all 1s;
}
.icono-info {
padding: 15px 0;
}
.icono-info i {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
font-size: 30px;
height: 70px;
padding: 20px 0 0 0;
margin: 30px;
width: 70px;
}
.icono-info .h5 {
text-transform: uppercase
}
.icono-info .p {
text-transform: lowercase;
font-size: 12px;
}
/* Icono */
/* Noticia*/
.wp-separator {
background-color: #EEE;
}
.descrip {
font-size: 15px;
text-align: justify;
}
.item {
padding-bottom: 20px;
}
.thumbnail {
border-radius: 0;
}
/* Noticia */
/* Footer */
.footer {
background-color: #337AB7;
color: #EEE;
padding-top: 30px;
}
.foot-geo {
text-align: left;
}
.footer-p {
background-color: #2B679A;
color: #EEE;
padding-top: 20px;
text-align: center;
}
.footer-nav {
display: inline-block;
list-style: none;
}
.footer-nav li {
float: left;
margin-right: 15px;
}
.footer-nav li a {
display: inline-block;
background-color: #EEE;
border-radius: 50%;
font-size: 25px;
height: 45px;
width: 45px;
padding-top: 3px;
transition: all 1s;
}
.footer-nav li a:hover {
background-color: #FFF;
}
.footer-info {
text-align: right;
}
/*PAGINA GALERIA */
.galeria {
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.26);
margin-top: 20px;
}
.galeria-img {
max-width: 100%;
margin: auto;
}
.galeria-info {
padding: 20px;
min-height: 180px;
}
/* Footer */
@media screen and (max-width: 768px) {
/*Header*/
.header-left, .header-right {
float: none;
text-align: center;
}
.header-right {
display: block;
width: auto;
}
/* Header */
/* Nav*/
.navbar-collapse {
background-color: #EEE;
}
.navbar-toggle {
border: 1px solid rgb(220, 220, 220);
}
/*Icono*/
.icono-ul {
margin: auto;
width: 90%;
}
.icono-ul li {
display: block;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.icono-info {
padding: 5px 0;
}
.icono-info i {
margin: 0;
}
/* Noticia*/
.descrip {
text-align: start;
}
/* Footer*/
.footer-geo, .footer-info {
text-align: center;
}
}
@media screen and (min-width: 768px) {
/* Nav */
.nav>li.active {
background-color: #EAEAEA;
}
.navbar-collapse {
padding-left: 0;
}
.navbar-nav>li>a {
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-menu {
padding: 0;
margin: 0;
border-radius: 0;
}
.dropdown-menu>li>a {
padding: 15px 20px;
}
/* Nav */
/*Carousel*/
.carousel-caption {
padding-top: 100px;
}
/* Icono */
.icono-ul li a:hover {
color: #FFF;
border-top: 3px solid #FFF;
border-bottom: 3px solid #FFF;
}
}
