Características técnicas

Modelo de página web

Especificaciones

HTML5 & CSS3
Responsive Web Design
Galería de Imágenes
HTML 5 Validado
CSS3 Validado
Shorthand Css
Font Awesome

Estructura CSS

Se utiliza el archivo main.css personalizado que interactua con el bootstrap:

           /*Archivo style.css*/
body {
  margin-bottom: 283px;
  background: url(../img/mitin.jpg) center center no-repeat;
  background-size: cover;
}
.page-header{
    border-bottom: #E8E8E8 dotted 1px;
    margin: 15px 0 20px;
    padding-top: 1px;
    background-color: #F0F0F0;
}
.page-header h1{
  font-family: 'robotobold';
}
.page-header h2{
  font-family: 'robotolight';
  margin-top: 0;
  padding-top: 0;
  color: #9a0822;
  font-size: 40px;
  font-weight: bolder;
}
.contenedor-principal{
  background-color: #FFFFFF;
}
.contenedor-principal section{
  padding: 0 20px;
}
.full-width-slider .slide{
  width:750px;
}
.post-inner{
  padding:0 15px 15px 15px;
  text-align: justify;
}
.blog-post.big .post-image{
  float:none;
  display:block;
  width:100%;
  margin:0 0 20px;
}
.blog-post:before,
.blog-post:after{
	content:"";
    display:table;
}
.blog-post:after {
    clear:both;
}
.blog-post {
    zoom:1;
    text-align: justify;
}
.blog-post.big{
	margin-bottom:50px;
	margin-top:10px;
  text-align: justify;
	overflow:hidden;
}
.blog-post.big.no-bottom{
  margin-bottom:15px;
}
.blog-post.big .post-image{
	float:left;
	width:20%;
	margin-right:30px;
}
.post-image img{
	width:100%;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
.post-title{
	margin:20px 0 7px;
}
.blog-post.big .post-title{
	margin-top:0;
	font-size:24px;
	font-weight:400;
}
.post-meta{
	margin-bottom:15px;
	line-height:16px;
}
.post-meta>span{
	display:inline-block;
	font-size:13px;
	color:#95999e;
	line-height:16px;
}
.blog-post a.button{
	margin-top:11px;
}
.estructura img{
  width: 100%;
}
.title-form{
  padding-bottom: 20px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 283px;
  background-color: #f5f5f5;
}
body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}
.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}
code {
  font-size: 80%;
}
.navbar-default{
  background: #830411; /* Old browsers */
}
#footer{
	-webkit-transform: translateZ(0px);
	position:relative;
}
#main-footer{
	background:#242327;
	color:#D6D5D9;
}
#lower-footer{
  background: #161517;
  color:#D6D5D9;
  padding-top: 15px;
  padding-bottom: 15px;
}
#main-footer,
#lower-footer{
  -webkit-transform: translateZ(0px);
  transition: margin 0.3s, padding 0.3s;
  -webkit-transition: margin 0.3s, padding 0.3s;
  -moz-transition: margin 0.3s, padding 0.3s;
}
.boxed-layout #main-footer,
.boxed-layout #lower-footer{
	padding-left:30px;
	padding-right:30px;
	margin-left:-30px;
	margin-right:-30px;
}
#main-footer>.row>div:before,
#main-footer>.row>div:after {
	content:"";
	display:table;
}
#main-footer>.row>div:after {
	clear:both;
}
#main-footer>.row>div {
	zoom:1;
}
#main-footer{
	padding-top:50px;
	padding-bottom:30px;
	-webkit-transform: translateZ(0px);
}
#main-footer h4{
	margin-top:0;
	text-transform:uppercase;
	font-weight:400;
	margin-bottom:22px;
}
#lower-footer .social-media ul{
	float:right;
	margin:0;
}
#lower-footer .social-icons{
	margin-left:20px;
}
.copyright {
    padding-top: 13px;
    margin: 0;
}
.banner-wrapper + .social-media,
.sidebar-box + .social-media,
.social-media + .banner-wrapper,
.social-media + .sidebar-box {
	margin-top:20px;
}
.social-icons,
.social-buttons{
	list-style:none;
	margin:0;
	padding:0;
}
.social-buttons{
	overflow:hidden;
}
.small-caption + .social-icons{
	margin-top:3px;
}
.social-icons li,
.social-buttons li{
	display:inline-block;
	margin:4px 0;
}
.social-buttons li{
	float:left;
	margin-right:4px;
	height:25px;
}
.social-buttons li.facebook-share>div{
	position:relative;
	top:-2px;
}
.social-buttons li.twitter-share>iframe{
	width:95px!important;
}
.social-buttons li:last-child{
	margin-right:0;
}
.social-icons li>a{
	display:block;
	width:35px;
	height:35px;
	color:#fff;
	background:#444;
	text-align:center;
	font-size:16px;
	padding-top:5px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
.social-icons .facebook>a{
	background-color:#4862a3;
	border-top:1px solid #5e80bf;
	border-bottom:1px solid #3a4e82;
}
.social-icons .twitter>a{
	background-color:#40bff5;
	border-top:1px solid #53d2f8;
	border-bottom:1px solid #36a6d6;
}
.social-icons .google>a{
	background-color:#eb5b4c;
	border-top:1px solid #f17663;
	border-bottom:1px solid #cc4f42;
}
.social-icons .youtube>a{
	background-color:#cd322c;
	border-top:1px solid #dc4139;
	border-bottom:1px solid #ac2823;
}
.social-icons .flickr>a{
	background-color:#ff1981;
	border-top:1px solid #ff21a7;
	border-bottom:1px solid #d8166e;
}
.social-icons .email>a{
	background-color:#324e79;
	border-top:1px solid #41669e;
	border-bottom:1px solid #243f6a;
}
.social-icons .instagram>a {
    background-color: #444;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}
.team-box {
  color: #8f8f8f;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
  position: relative;
  background: #f8f8f8;
  text-transform: uppercase;
}
                                                            

Estructura HTML

La página Web Index.html tiene el siguiente código: