Validar HTML

Un punto importante es comprobar la validez de nuestro código. HTML tiene por característica mostrar lo que puede, A pesar de que sintácticamente dichas líneas sean incorrectas.

Para reducir estos errores use la validación de HTML5 online. Observe que podría obtener errores de código puesto que está página no reconoce etiquetas role de Bootstrap.

Así mismo puedes validar tu código CSS, aquí

Semántica HTML5

Un sitio web es un conjunto de tecnologías que operan entre sí. HTM5 (por sus siglas en inglés Hyper Text Markup Languaje versión 5 es el principal lenGuaje para desarrrollar estos sitios, de la mano de hojas de estilo en cascada (CSS Cascading Style Sheets por sus siglas en inglés), JavaScript y XML (por sus siglas en inglés Extensible Markup Languaje).

Hasta el momento de escribir está página Agosto 2016, HTML5 no es un estándar y cada navegador implementa partes de dicha propuesta, inclusive de diferente manera. Sin embargo es un estándar de facto. es decir, se trata de una norma generalmente aceptada y ampliamente utilizada por iniciativa propia de un gran número de interesados.

La idea de html5 es darle semántica a nuestro código, es decir, dar significado al mismo. Para lo cual introduce los siguientes elementos.


Tag Descripción
<header> Define una región encabezado o header de una página o de una sección.
<footer>Define una región pie de página o footer de una página o de una sección.
<nav>Define una región de navegación de una página o de una sección.
<section>Define una región lógica de una página o un grupo de contenido.
<article>Define un artículo o una pieza completa de contenido.
<aside>Representa el contenido que es tangencialmente relacionado con el contenido le rodea. Por lo general contiene barras laterales , publicidad, enlaces relacionados, etc.

La siguiente imagen representa una maquetación en HTML6:


Ejemplo:Usaremos CSS para crear este posicionamiento.

<!doctype html>
<html lang='es-es'>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bola</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Abril 26, 2016' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> 
  <link href='bola.css' rel="stylesheet">
</head>
<body>
<div class='container'>
   <header>
     <img alt='' class='img-responsive pull-left' src='http://www.prograweb.com.mx/pweb/ejecutables/images/perro01i.jpg'>
     <h2 class='text-center'>BOLA</h2>
   </header>
   <aside>
     <ul>
       <li><a href="#">Arroz con Pollo</a></li>
       <li><a href="#">Coquetas</a></li>
       <li><a href="#">Pastel Bola</a></li>
       <li><a href="#">Aventura Vegetariana</a></li>
       <li><a href="#">Bocaditos del Mar</a></li>
     </ul>
   </aside>
   <section>
<p><b>Bola</b> destaca por muchas cosas: por sus productos 100% naturales, por la pasión que su creadora imprime a todos sus productos, y por atender a un público de diferente especie a la humana, así es <b>Bola</b> es la primera pastelería que piensa en el paladar canino y felino, también se preocupa por deleitar a nuestras mascotas con galletas y pastelería gourmet de alta calidad llena de sabor.</p>

<p><b>Bola</b> no es otra pastelería más, en esta pastelería especializada se preocupan tanto por los ingredientes como las formulas para que sean aptas y no dañen la salud de nuestras mascotas, es más hasta nosotros podríamos deleitarnos con el rico pastel o las diferentes galletas, el chiste esta en atreverse a probarlas y por supuesto consentir a nuestras mascotas en una ocasión especial como su cumpleaños, o porque no, por el simple hecho de agasajarlos.</p>

<img alt='' class='img-responsive center-block' src='http://www.prograweb.com.mx/pweb/ejecutables/images/perroLogo.jpg'>

<p>Su creadora, ha desarrollado recetas especializadas para consentir a nuestros amigos con ayuda de expertos veterinarios que aprueban cantidades e ingredientes, asegurándonos siempre su bienestar.</p>

<p>Bola también tiene productos para la especie humana, ya sean cupcakes, gelatinas o manzanas cubiertas, ofrece una alternativa para todos. Con ingredientes naturales y de alta calidad ya sea para la línea de mascotas o los productos para personas, Bola busca satisfacer completamente a todos sus clientes.</p>
</section>
<footer>
  <p class='text-center'>© epacheco@hotmail.cpm</p>
</footer>
</div>
</body>
</html>
img {border: 0px;}
h2 { color: red;}   
body {
 font: 16pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}
header, section, article, aside, footer{
    display: block;
}   
aside{
  float: left;
  margin: 0 0 20px 0;
  min-height: 480px;   
  width: 25%;
}
footer{   
  background:red;
  color: white;
  clear:both !important;
  font-size: 16px;
  font-weight:bold;
  height: 40px;
  margin: 0 auto;
}
header {
    height: 60px;   
}
p { 
  text-align: justify;
  padding: 4px;
}
section {
  border-left: 2px dotted #b2a497;
  float: right;
  font-size: 16px;
  margin: 0 0 20px 0px;   
  text-align: justify;
  width: 70%;
}​

El código anterior fue probado en Internet Explorer 11, Opera 34, Safari 5.1.7 y Google Chrome Versión 47.0.2526.111 m (64-bit).

Observe el código CSS y note el elemento display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea).

El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p, form, header, footer y section.

Una de las mejores cosas de CSS es su capacidad de posicionar el contenido y los elementos de una página en casi cualquier forma imaginable, con lo que la estructura de nuestros diseños y contenidos son más digeribles.

Hay unos cuantos tipos diferentes de posicionamiento dentro de CSS, y cada uno tiene su propia aplicación.

Posicionamiento con float

float es una propiedad versatil que permite posicionar un elemento generalmente a la izquierda o a la derecha. Note que en el código anterior aside flota a la izquierda mientras que el elemento section flota a la derecha

Media queries

En la mayoría de los casos gracias a todas las clases que provee Bootstrap nos será suficiente para componer nuestra web. Sin embargo, en algunas situaciones es posible que queramos modificar dicho comportamiento, por ejemplo para aplicar determinados estilos CSS (como colores, alineaciones, etc.) que cambien según el tamaño de pantalla. En estos casos será necesario que creemos nuestra propia media query para aplicar los estilos deseados.

Una media query se define de la forma:

@media (min-width: TAMAÑO-EN-PÍXELES) {
    /* Los estilos aquí contenidos solo se aplicarán a partir
    del tamaño de pantalla indicado */
}

En este caso, los estilos que estén dentro de esta media query se aplicarán solo a partir del tamaño en píxeles indicado. Además de un tamaño mínimo podemos indicar el tamaño máximo o el rango de tamaño en el que se aplicarán, de la forma:

@media (max-width: TAMAÑO-EN-PÍXELES) {
    /* Estos estilos solo se aplicarán hasta el tamaño indicado */
}
@media (min-width: TAMAÑO-EN-PÍXELES) and (max-width: TAMAÑO-EN-PÍXELES) {
    /* Solo se aplicarán entre los tamaños indicados */
}

Recordamos que los rangos que define Bootstrap son:

Ejemplo: Comportamiento según el tamaño del navegador

<!DOCTYPE html>
<html lang='es-es'>
<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1 user-scalable=no'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Media Queries</title>
  <meta name='Author' content='© epacheco' />
  <meta name='date' content='Abril 25, 2016' /> 
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> 
  <link href='pacheco.css' rel="stylesheet" />
  <link href='../../../images/favicon.ico' type='image/x-icon' rel='shortcut icon'>
  <link href='../../../images/favicon.ico' rel='icon' />
</head>
<body>
  <div class="container">
   <p>Hola Mundo</p>
 </div>  
</body>
</html>
body {
  padding-top: 60px;
}
img {
  border: 0px;
  padding: 10px;
}
p {
  margin-bottom: 5px;
  margin-top:    5px;
  text-align:justify;
}
@media only screen and (max-width:767px){
  body {
	background: url(solid-blue-background-2.jpg);
	color: white;  
  }
}
@media only screen and (min-width:768px){
  body {
	background: red;
	color: white;  
  }
}
@media only screen and (min-width:992px){
  body {
	background: silver; 
	font-size: 18px;
  }
}
@media only screen and (min-width:1200px){
  body {
    background-color: lightblue;
	font-family: 'Roboto', sans-serif;
	font-size: 36px;
  }
}

JWPlayer

Como en gustos y sabores se rompen generos se presenta una alternativa más para incluir todo tipo de audio y video. JWPlayer

Desde la versión 6.4 este plugin soporta video responsive. Es un estándar de facto en la industria de la reproducción de audio y video

<!doctype html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>jwplayer</title>
  <meta name='Author' content='M.C. Jose Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Marzo 19, 2016' /> 
  <meta name='Description' content='Relacion de aspecto en video youtube 4:3 con Bootstrap'>
  <meta name='Keywords' content='bootstrap, relacion, aspecto, jquery video' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-2 '>
      <h4 class="text-center">JW Player 6</h4>
        <div class='embed-responsive embed-responsive-4by3' id='mediaplayer'></div>
    </div>
  </div>
</div>
</body>

 Coloca aquí tus SCRIPT
</html>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src="http://p.jwpcdn.com/6/10/jwplayer.js"></script>

<script>
    $(document).ready(function(){        
      jwplayer('mediaplayer').setup({
        playlist: [{
          file: 'https://youtu.be/ZuupMrAhGXw',
          title: 'Mi verdad',
          mediaid: '123456'
        },{
          file: 'https://www.youtube.com/watch?v=44kityInDvM',
          image: '',
          title: 'Bendita tu Luz',
          mediaid: '234567'
        }],
		width: "100%",
        aspectratio: "4:3"
      });
   });	
</script>

Redes sociales

Una red social es una estructura social compuesta por un conjunto de actores (tales como individuos u organizaciones) que están relacionados de acuerdo a algún criterio (relación profesional, amistad, parentesco, etc.).

Las plataformas en Internet que facilitan la comunicación entre personas de una misma estructura social se denominan servicios de red social. Hay muchos pros y contras alrededor de ellas, sin embargo están ahí y tienen un gran impacto en la actualidad

Se presenta un ejemplo adaptado de Bootsnipp.com, el cual implementa el uso de redes sociales. Su aplicación puede ser diversa.

Para este ejemplo se usaron dos conocidos restaurantes del Puerto de Veracruz sin fines de lucro o publicidad. Se anexa código de descarga

Note que se usan fuentes de letras externas a Bootstrap y un tipo de iconos llamado font awesome el cual proporciona una mayor cantidad de iconos a nuestras aplicaciones, puedes ovbservar uan lista detallada y su uso aquí

Coloque su apuntador sobre cualquiera de las imagenes y observe el efecto. Los iconos apuntan a las redes sociales de cada negocio


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Information Card - Bootsnipp.com</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' />
  <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' />
  <link href='information_card.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="[ col-sm-6 col-md-offset-2 col-md-4 ]">
      <div class="[ info-card ]">
        <img alt='' style="width: 100%" src='Mrpampas.jpg'>
        <div class="[ info-card-details ] animate">
           <div class="[ info-card-header ]">
             <h1> Mr. Pampas </h1>
             <h3>Dirección: Blvd. Adolfo Ruiz Cortines 9, Costa Verde,<br>
                Boca del Río, Ver.<br>
                Teléfono:01 229 980 8510</h3>
           </div>
           <div class="[ info-card-detail ]">  <!-- Description -->
             <p>Se ha colocado como una marca líder en su categoría de gastronomía brasileña. El
             principal objetivo es ofrecerle a sus clientes el mejor servicio y los más finos cortes de carne al carbón en
             espadas brasileñas.</p>
             <div class="social">
                <a href="https://www.facebook.com/MrPampasVeracruz" class="[ social-icon facebook ] animate">
                  <span class="fa fa-facebook"></span>
                </a>

               <a href="https://twitter.com/mrpampasver" class="[ social-icon twitter ] animate">
                 <span class="fa fa-twitter"></span>
               </a>

              <a href="https://plus.google.com/106902394653787748416/about" class="[ social-icon google-plus ] animate">
                 <span class="fa fa-google-plus"></span>
              </a>
            </div> <!-- social -->
          </div>
        </div> 
      </div>
    </div>
    <div class="[ col-sm-6 col-md-4 ]">
      <div class="[ info-card ]">
        <img alt='' style="width: 100%" src='Bayo.jpg'>
        <div class="[ info-card-details ] animate">
           <div class="[ info-card-header ]">
             <h1>Mariscos El Bayo</h1>
            <h3>Dirección: Blvd.Adolfo Ruíz Cortines #3324,<br>
                Costa de Oro, 94599 Boca del Río, Ver.<br>
                Teléfono:01 229 130 4729</h3>
            </div>
          <div class="[ info-card-detail ]"> <!-- Description -->
            <p>Su historia de éxito se escribe a diario bajo su lema: 
            <b>Calidad</b>, <b>precio</b> y <b>buen sazón</b>; 
            Características que los han distinguido a través del tiempo de servicio a sus clientes.</p>

             <div class="social">
                <a href="https://www.facebook.com/pages/Restaurant-Mariscos-El-Bayo-Veracruz/418519188162805"
                   class="[ social-icon facebook ] animate">
                   <span class="fa fa-facebook"></span>
                </a>

               <a href="https://twitter.com/mariscoselbayo" class="[ social-icon twitter ] animate">
                 <span class="fa fa-twitter"></span>
               </a>

            </div> <!-- social -->

          </div>
        </div>
      </div>
    </div> <!--   <div class="[ col-sm-6 col-md-4 ]">-->
  </div> <!-- <div class="row">  -->
</div> <!-- <div class="container">  -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
body {
  padding: 60px 0px;
}
.animate {
  -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;
}
.info-card {
  border: 1px solid rgb(215, 215, 215);
  font-family: 'Lato', sans-serif;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.info-card > img {
  margin-bottom: 60px;
  width: 100px;
}
.info-card .info-card-details,
.info-card .info-card-details .info-card-header  {
  background: rgb(255, 255, 255);
  bottom: -100%;
  height: 100%;
  left: 0;
  padding: 0 15px;
  position: absolute;
  text-align: center;
  width: 100%;
}
.info-card .info-card-details::-webkit-scrollbar {
  width: 8px;
}
.info-card .info-card-details::-webkit-scrollbar-button {
  height: 0px;
  width: 8px;
}
.info-card .info-card-details::-webkit-scrollbar-track {
  background: transparent;
}
.info-card .info-card-details::-webkit-scrollbar-thumb {
  background: rgb(160, 160, 160);
}
.info-card .info-card-details::-webkit-scrollbar-thumb:hover {
  background: rgb(130, 130, 130);
}           

.info-card .info-card-details .info-card-header {
  bottom: 100%;
  height: auto;
  padding: 10px 5px;
}
.info-card:hover .info-card-details {
  bottom: 0px;
  overflow: auto;
  padding-bottom: 25px;
}
.info-card:hover .info-card-details .info-card-header {
  bottom: 0px;
  padding-top: 45px;
  padding-bottom: 25px;
  position: relative;
}
.info-card .info-card-details .info-card-header h1,
.info-card .info-card-details .info-card-header h3 {
   color: rgb(62, 62, 62);
   font-size: 22px;
   font-weight: 900;
   margin: 0 !important;
   padding: 0 !important;
   text-transform: uppercase;
}
.info-card .info-card-details .info-card-header h3 {
  color: rgb(142, 182, 52);
  font-size: 15px;
  font-weight: 400;
  margin-top: 5px;
}
.info-card .info-card-details .info-card-detail .social {
  list-style: none;
  margin-top: 25px;
  padding: 0px;
  text-align: center;
}
.info-card .info-card-details .info-card-detail .social a {
  background-color: rgb(215, 215, 215);
  border-radius: 40px;
  display: inline-block;
  min-width: 40px;
  margin: 0px 5px;
  overflow: hidden;
  padding: 10px 0px;
  position: relative;
  text-align: center;
}
a.social-icon {
  box-shadow: 0px 0px 1px rgb(51, 51, 51);
  box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7);
  text-decoration: none !important;
}
a.social-icon:hover {
  color: rgb(255, 255, 255) !important;
}
a.facebook {
  color: rgb(59, 90, 154) !important;
}
a.facebook:hover {
  background-color: rgb(59, 90, 154) !important;
}
a.twitter {
  color: rgb(45, 168, 225) !important;
}
a.twitter:hover {
  background-color: rgb(45, 168, 225) !important;
}
a.github {
  color: rgb(51, 51, 51) !important;
}
a.github:hover {
  background-color: rgb(51, 51, 51) !important;
}
a.google-plus {
  color: rgb(244, 94, 75) !important;
}
a.google-plus:hover {
  background-color: rgb(244, 94, 75) !important;
}
a.linkedin {
  color: rgb(1, 116, 179) !important;
}
a.linkedin:hover {
  background-color: rgb(1, 116, 179) !important;
}


Ejemplo: Efecto Hover Animation y redes sociales


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Zoom Social Icon Hover Animation - Bootsnipp.com</title>
  <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' />
  <link href='estilo.css' rel='stylesheet' />
</head>
<body>
 <!-- The Team -->
  <div class="home-doctors  clearfix">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 ">
          <div class="slogan-section animated fadeInUp clearfix ae-animation-fadeInUp">
            <h2>Zoom Social Icon Hover Animation</h2>
            <p>Ejemplo modificado de Bootsnipp.com. Es muy sensible al tamaño de las imagenes 
               que deben tener orientación <b>vertical</b></p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">
          <ul class="list-inline social-lists animate">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class='fa fa-instagram'></i></a></li>
            <li><a href="#"><i class='fa fa-google-plus'></i></a></li>
          </ul>
          <figure>
            <img alt='' class="doc-img animate attachment-gallery-post-single wp-post-image" src='Rihanna.jpg'> 
          </figure>
          <div class="text-content">
            <h5>Rihanna</h5>
            <h5><small>Diseñadora</small></h5>
          </div>
        </div>
      </div>

        <!-- Foto 2 -->
      <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
        <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">
          <ul class="list-inline social-lists animate">
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class='fa fa-instagram'></i></a></li>
            <li><a href="#"><i class='fa fa-google-plus'></i></a></li>
          </ul>
          <figure>
            <img alt='' class="doc-img animate attachment-gallery-post-single wp-post-image" src='JessicaAlba.jpg'> 
          </figure>

          <div class="text-content">
            <h5>Jessica Alba</h5>
            <h5><small>Diseñadora</small></h5>
          </div>
        </div>
      </div>
      
     <!-- Foto 3 -->
     <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
       <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">
         <ul class="list-inline social-lists animate">
           <li><a href="#"><i class="fa fa-facebook"></i></a></li>
           <li><a href="#"><i class="fa fa-twitter"></i></a></li>
           <li><a href="#"><i class='fa fa-instagram'></i></a></li>
           <li><a href="#"><i class='fa fa-google-plus'></i></a></li>
         </ul>
         <figure>
           <img alt='' class="doc-img animate attachment-gallery-post-single wp-post-image" src='mascota.jpg'> 
         </figure>
         <div class="text-content">
           <h5>Pacheco</h5>
           <h5><small>Gerente</small></h5>
         </div>
       </div>
     </div>
      
     <!-- Foto 4 -->
     <div class="col-lg-3 col-md-3 col-sm-6  text-center doc-item">
       <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp">
         <ul class="list-inline social-lists animate">
           <li><a href="#"><i class="fa fa-facebook"></i></a></li>
           <li><a href="#"><i class="fa fa-twitter"></i></a></li>
           <li><a href="#"><i class='fa fa-instagram'></i></a></li>
           <li><a href="#"><i class='fa fa-google-plus'></i></a></li>
         </ul>
         <figure>
           <img alt='' class="doc-img animate attachment-gallery-post-single wp-post-image" src='MeganFox.jpg'> 
         </figure>
         <div class="text-content">
           <h5>Megan Fox</h5>
           <h5><small>Desarrolladora</small></h5>
         </div>
       </div>
     </div>
     <div class="visible-sm clearfix margin-gap"></div>
   </div>
 </div>
</div>
</body>
</html>
.animate {
  -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;
}

/*=============== Home-team ===============*/

.home-doctors {
  text-align: center;
  padding: 70px 0 80px;
  background: #f0f5f6;
}
.home-doctors h2 {
    font-weight: normal;
}
.home-doctors .common-doctor {
  background-color: #fff;
}
.home-doctors .common-doctor figure {
  overflow: hidden;
   width: 100%;
   height: 300px;
}
.home-doctors img {
//	width: 100%;
	height: auto;
	margin-top: -6em;
}
.home-doctors .common-doctor h5 {
  margin: 0 0 7px;
  font-size: 18px;
	font-weight: 700;
	color: #3a3c41;
}
.home-doctors .common-doctor .for-border {
  margin-bottom: 20px;
}
.home-doctors .common-doctor .text-content {
  padding: 19px 14px 13px;
}
.home-doctors.doctors-var-two {
  text-align: left;
  background-color: #fff;
}
.home-doctors.doctors-var-two .slogan-section {
  text-align: left;
}
.home-doctors.doctors-var-two .common-doctor {
  background-color: transparent;
}
.home-doctors.doctors-var-two .common-doctor .for-border {
  display: none;
}
.home-doctors.doctors-var-two .common-doctor .text-content {
  padding: 20px 0 20px;
}
.home-doctors.doctors-var-two .text-center {
  text-align: left;
}

.slogan-section {
	margin-bottom: 50px;
	text-align: center;
}

.home-doctors .common-doctor .for-border {
	margin-bottom: 20px;
}
.for-border {
	height: 11px;
	width: 100%;
	background: transparent url(http://omarhabash.com/nova/wp-content/uploads/2014/08/feature-border.png) 
	            center center no-repeat;
	border: none;
}
.home-doctors .common-doctor h5 small {
	color: #008fd5;
	font-weight: bold;
	font-size: 0.8em;
	font-style: italic;
}
.home-doctors .common-doctor ul{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -28px;
	text-align: center;
	margin-top: 10em;
	opacity: 0;
	z-index: 1;
}
.home-doctors .common-doctor li a {
	background: #008fd5;
	color: white;
	padding: 0.75em;
	border: 5px solid rgba(255, 255, 255, 0.33);
}
.doc-img{
	 /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}
.doc-item:hover .doc-img{
	 /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
  opacity: 0.7;
}
.doc-item:hover .social-lists{
	margin-top: -2em;
	opacity: 1;
}