<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>D-Coding</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    
    My Empty Site

</body>
</html>
TIPS 
- - - - - - - - - 
Estaremos utilizando los siguiente elementos HTML:
   - División/Sección	<div> 
   - Imagen		<img>
   - Heading 2		<h2>

Les estaremos añadiendo un atributo de identificación (id=“”) 
algunos elemento para así poder estilizarlos luego.

*IMPORTANTE: Asegúrense siempre que comienzen un elemento de HTML lo cierren. 

Ejemplo
Si abren el elemento de división así:  <div>
Asegúrense de cerrar el elemento así: 	</div>


- - - - - - - - - - - - - - - - - - 
Creando nuestro primer HTML
- - - - - - - - - - - - - - - - - - 

1. Añadir el siguiente elemento HTML dentro del elemento <body> para que se muestre en el navegador el logo D-Coding:

  <div id="seccion-logo">
     <img src="http://populardcoding.com/tutorial1/img-logo.gif"> 
  </div>
 
2. Luego vamos añadir la imagen principal con el siguiente elemento HTML:

  <div id="seccion-foto-principal">
    <img src="http://populardcoding.com/tutorial1/img-foto-1.jpg">
  </div>


3. Añadir sección de la iniciativa del evento, el cual contiene una imagen y el texto:

  <div id="seccion-iniciativa">
      <div>
          <img src="http://populardcoding.com/tutorial1/img-foto-2.jpg">
      </div>
      <div>
        <h2>
            Iniciativa
        </h2>  
        Dentro del compromiso comunitario y de innovación de Popular, estamos ofreciendo los talleres D-coding, libres de costo.
      </div>
  </div>


4. Por último añadimos la sección de las 3 columnas(Coding, Expertos y Taller):

  <div id="seccion-iconos">
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-1.gif">
      <h2>
        Coding
      </h2>
      Coding es el lenguaje de programación y análisis que se utiliza en el diseño y funcionamiento de los procesos computadorizados con el propósito de asignar, clasificar y ejecutar.
    </div>
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-2.gif">
      <h2>
        Expertos
      </h2>
      Charlas educativas llevadas a cabo por expertos en la materia, que forman parte de nuestro equipo de tecnología y un empleado actual de la red social LinkedIn.
    </div>
    <div>
      <img src="http://populardcoding.com/tutorial1/img-icon-3.gif">
      <h2>
        Taller
      </h2>
      Se le estará dando la oportunidad a los estudiantes a codificar mediante un taller "hands-on", donde tendrán la oportunidad de completar un juego.
    </div>
  </div>


- - - - - - - - - - - - - - - - - - -  
Para estilizar la página se utiliza el archivo style.css. En este archivo es donde se añaden los tamaños de los elementos, colores de fondo, tamaños de fuentes(texto), etc.

El archivo “style-final.css” contiene unos ya creado que pueden asignarle a su página “index.html”.

¿Cómo asignarle los estilos?

1. En la línea 7 del código HTML hacer referencia(atributo href=“…”) al archivo “style-final.css”:

   <link rel="stylesheet" href="style-final.css">

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
}
h2{
  text-transform: uppercase
}
#seccion-logo{
  background: #000;
  padding: 20px
}
#seccion-foto-principal{
  width: 100% !important;
  height: 300px !important;
  overflow: hidden
}
#seccion-foto-principal img{
  height: auto;
  width: 100% !important;
}
#seccion-iniciativa{
  padding: 20px;
  clear: both;
  min-height: 300px
}
#seccion-iniciativa div{
  float: left;
  width: 45% !important;
  padding-left: 20px
}
#seccion-iniciativa div img{
  height: auto;
  max-width: 100%
}
#seccion-iconos{
  clear: both;
  padding: 20px;
  background: #f5f5f5;
  width: 100%;
  min-height: 300px;
  margin-top: 20px
}
#seccion-iconos img{
  display: block;
  margin-bottom: 10px
}
#seccion-iconos div{
  float: left;
  width:30%;
  padding: 10px;
  min-height: 200px;
}
@media(max-width:480px){
  #seccion-foto-principal{
    height: auto  !important
  }
  #seccion-iniciativa div img{
    width:100%;
    height: auto;
  }
  #seccion-iconos div{
    min-height: 120px;
    width: 90%;
    float: none;
    display: block;
    padding-top: 10px;
  }
}
@media(max-width:768px){
  #seccion-iniciativa div{
    float: none;
    width: 100% !important;
    padding-left: 0px
  }
}