Estebanjgg/index.html

## index.html
<body>

  <script>
  var links = $( 'a[href*="#c1"]' );
  var links = $( 'a[href*="#c2"]' );
  var links = $( 'a[href*="#c3"]' );
  var links = $( 'a[href*="#c4"]' );
</script>
<body>

  <nav class="navbar navbar-default  navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#acolapsar">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>

            </button>
        <a href="#" class="navbar-brand">Laura Valenzuela</a>
      </div>

      <div class="collapse navbar-collapse navbar-right" id="#acolapsar">
        <ul class="nav navbar-nav">
          <li><a href="#c1"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
          <li><a href="#c2"><span></span> Acerca de mi</a></li>
          <li>
            <a href="#c4">Portafolio</a>
          </li>
          <li>
            <a href="#c3">Contacto</a>
          </li>


        </ul>

      </div>
    </div>
  </nav>


  <div class="container ct1" id="c1">
    <div class="homee">
      <div class="row center homee" >

        <h1 class="col-xs-8 col-xs-offset-2">

           Mi Portafolio Web,Conoce acerca de mi y mis proyectos.
           </h1>
        <div class="col-xs-3 col-xs-offset-2 boton">
          <a href="#c3" class="boton_a">CONTACTAMe</a>
        </div>
        <div class="col-xs-3 col-xs-offset-2 boton">
          <a href="#c2" class="boton_a">CONOCE ME</a>
        </div>
      </div>
    </div>

  </div>

  <div class="container ct2">

    <div class="row">

      <div class="col-xs-6 div-izq text-justify" id="c2">
        <ul>
          <h3>ACERCA DE MI</h3>
          <li> Soy Laura Elvira Valenzuela Casas,De la Ciudad de Durango, me agrada que me llamen laura.</li>
          <li>Tengo una Ingeniería en Sistemas Computacionales.</li>
          <li>Me llama mucho la atención el desarrollo y diseño de sitios web.

            <li>
              <p>Tengo experiencia en desarrollar sitios con las siguientes tecnologías como:</p>
              <ul>
                <li> Visual Studio con ASP.NET, C# y base de datos en SQL Server.</li>
                <li>HTML5,CSS3,Javascript y algo de Bootstrap y PHP.</li>
              </ul>
            </li>
        </ul>


      </div>
      <div class="col-xs-6 div-der">
        <img src="https://scontent.ftrc1-1.fna.fbcdn.net/v/t1.0-9/7483_10208856427911223_2611255750402141424_n.jpg?oh=09f48375df2d0b113a825f7be54bfe27&oe=57CD522A" class="img-circle img-responsive imglau" alt="miimagenredonda">
      </div>

    </div>
  </div>


   <!--Aqui contenido 3-->
 <div class="container ct3">
    <div class="row">
         <div class="col-xs-12  text-center div-down "id="c3">
          <h3>CONTACTO</h3>
         </div>

    <div class="caja-redes" >


          <div class="col-xs-2">

            <a href="https://www.linkedin.com/in/laura-elvira-valenzuela-casas-80104682"
              target="_blank" class="icon-button linkedin"><i class="icon-linkedin"></i>
  <span></span>
              <img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/linkedin-circle-128.png" class="img img-responsive img-link">
            </a>
          </div>

           <div class="col-xs-2">
             <a href="https://plus.google.com/109274264810258158307"
               target="_blank" class="icon-button google-plus"><i class="icon-google-plus"></i>
               <span></span>
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpQTb8OIXoGaEK6TFGo2MoRSsEnNRAHBcqU4m1SAZaiK3uBq6E"
               class="img img-responsive img-google">
            </a>
           </div>

          <div class="col-xs-2">
            <a href="https://twitter.com/Lawiiiz" target="_blank" class="icon-button twitter">
               <i class="icon-twitter"></i><span></span>
               <img src="http://www.diariodeavisos.com/wp-content/uploads/2012/06/nuevo-logo-twitter.jpg"
                class="img img-responsive  img-twitter">
           </a>
         </div>

        <div class="col-xs-2">

          <a href="https://www.facebook.com/arual.valenzuela"
             target="_blank" class="icon-button facebook"><i class="icon-facebook"></i>
             <span></span>
             <img src="http://st2.depositphotos.com/1144386/7770/v/170/depositphotos_77704938-Original-white-round-blue-facebook.jpg" class="img img-responsive img-fa">
          </a>
        </div>

       <div class="col-xs-2">
          <a href="https://github.com/arualvalenzuela" target="_blank" class="icon-button
            github"><i class="icon-github"></i>
            <span></span>
            <img src="http://swooz.free.fr/utils/img/icon_github.png"
            target="_blank" class="img img-responsive img-github">
          </a>
      </div>

         <div>
          <a href="https://www.freecodecamp.com/arualvalenzuela" target="_blank" class="icon-button free-code"><i class="icon-free-code"></i>
             <span></span>
            <img src="https://avatars0.githubusercontent.com/u/9892522?v=3&s=200" target="_blank" class="img img-responsive img-free-code">
          </a>

        </div>

      </div>
    </div>

 </div>

  <!-- FIN ct3-->

<!-- CT4 -->
 <div class="container ct4" id="c4">
      <div class="row">
                  <div class="col-sm-12 col-md-12"><h3 class="ct4-h3">Portafolio</h3></div>
            <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg/200px-Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg" alt="malala">
                   <div class="caption">
                       <h3 class="ct4-h3">Malala Yousafzai</h3>
                          <p>Esta pagina la hice como practica de un proyecto. La página es sobre la vida de Malala.</p>
                          <p>Mejor conocida como: "La niña que utilizo la educacion en contra de los talibanes".</p>
                          <p></p>
                          <p><a href="https://codepen.io/Arual-Valenzuela/pen/LZEgga" target="_blank" class="btn ct4-boton-a  " role="button">Ir a página</a> <a href="https://es.wikipedia.org/wiki/Malala_Yousafzai" target="_blank" class="btn  ct4-boton-a" role="button">Biografía</a></p>
                   </div>
                </div>
             </div>
              <!--dos-->
              <div class="col-sm- col-md-4">
                <div class="thumbnail">
                   <img src="http://elvocerito.com/sitio2013/wp-content/uploads/2014/04/1378381820_542826867_1-perros-cachorros-peluqueria-canina-la-mora.jpg" alt="perrosgatos">
                   <div class="caption">
                       <h3 class="ct4-h3">Perros & Gatos</h3>
                          <p>Estas es una página orientada a gatos y perros. Dentro de esta se podra encontrar distintas opciones para ver imagenes de estas mascotas. </p>
                          <p><a href="https://codepen.io/Arual-Valenzuela/full/mEmqEV/" target="_blank" class="btn ct4-boton-a  " role="button">Ir a página</a> <a href="http://www.notagram.net/razas-enanas-de-perros/#" target="_blank" class="btn  ct4-boton-a" role="button">Perros</a></p>
                   </div>
                </div>
             </div>
              <!--fin-->
              <!--tres-->
              <div class="col-sm-4 col-md-4">
                <div class="thumbnail">
                   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg/200px-Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg" alt="malala">
                   <div class="caption">
                       <h3 class="ct4-h3">Malala Yousafzai</h3>
                          <p>Esta pagina la hice como practica de un proyecto. La página es sobre la vida de Malala. </p>
                          <p>Mejor conocida como: "La niña que utilizo la educacion en contra de los talibanes".</p>

                          <p><a href="https://codepen.io/Arual-Valenzuela/pen/LZEgga" target="_blank" class="btn ct4-boton-a  " role="button">Ir a página</a> <a href="https://es.wikipedia.org/wiki/Malala_Yousafzai" target="_blank" class="btn  ct4-boton-a" role="button">Biografía</a></p>
                   </div>
                </div>
             </div>
              <!--fin-->

       </div>
 </div>


  <!--FIN -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          2016 - <a href="https://www.facebook.com/arual.valenzuela" target="_blank" class="layout_a">Laura Valenzuela</a>
        </div>
      </div>
    </div>
  </footer>


</body>

</body>

## portafolio.markdown

      
    Raw
  

              portafolio.markdown
            
          
    Portafolio

A Pen by esteban on CodePen.
License.

  
## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

## style.css
/*Reset.CSS*/


/* https://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}


ol,
ul {
  /*list-style:none;*/
  list-style: circle;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*reticula*/


/*Reticula*/


/*.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2%;
  padding-left: 2%;
  max-width: 98%;
  border: 1px solid blue;


}*/
/*.homee {
  background-color: #EB6D6D;
  text-align: center;
  color: #ffffff;
  padding: 20%;
  box-sizing: border-box;
  height: 10%;
}*/

/*Editorial*/
h1 {
  font-size: 50px;
  text-transform: uppercase;
  font-weight: 700;
  top: 200px;
  color: #ffffff;

}
a {
  text-decoration: none;
}

/*Formas*/
.boton {
  background-color: #6662B0;
  padding: 20px;
  border-bottom: 6px solid #AA8CCC;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 100%;
  margin-right: 10px;
  text-decoration: none;
  top: 300px;
}
.boton:hover {
  background-color: #AA8CCC;
  border-top: 6px solid #6662B0;
  border-bottom: 0 none;
  text-decoration: none;
}
.boton:last-of-type {
  margin-right: 0;
}
.btn {
  background-color: #6662B0;
  padding: 10px;
  border-bottom: 6px solid #AA8CCC;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 25%;
  margin-right: 10px;
  text-decoration: none;
  color:white;
}
.btn:hover {
  background-color: #AA8CCC;
  border-top: 6px solid #6662B0;
  border-bottom: 0 none;
  text-decoration: none;
  color:#ffffff;
}
.btn:last-of-type {
  margin-right: 0;
}

.ct2 {
  width: 100%;
  height: 100%;
}
.ct3 {
  width: 100%;
  height: 100%;

}
.div-izq {
  background: #AA8CCC;
  position: absolute;
  top: 800px;
  left: 0;
  height: 600px;
  color: white;
  line-height: 40px;
  padding: 30px;
}
.div-down {
  /*#6662B0*/

  background: #6662B0;
  position: absolute;
  top: 1400px;
  left: 0;
  height: 100%;

  color: white;
  line-height: 40px;


}

/*.div-redes{
  background:#6662B0;
  position:absolute;
 left:0;
height:100%;
 color:white;
 line-height:40px;
}
*/
div h3 {
  color: white;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.ct4-h3{
  color:grey;
}
div .ct2 {
  width: 100%;
  height: 20px;
}
.ct3 {
  width: 100%;
  height: 100%;

}
.ct4{
  background: #ffffff;
  width:100%;
  height:100%;
  top:2200px;
  position:absolute;
}


.div-der {
  background: #AA8CCC;
  position: absolute;
  top: 800px;
  right: 0;
  height: 600px;
  padding: 100px;
}
.boton_a {
  color: #ffffff;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.ct4-boton-a{
  color: #ffffff;
  font-weight: 50;
  text-decoration: none;
}

.col-xs-3 {
  max-width: 25%;
  flex-basis: 25%;
}

body {
   background: url("http://www.fondox.net/wallpapers/puesta-de-sol-color-purpura-4435.jpg");
  /*color:#282828;*/
  /*height: 100%;*/
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;

}
.center {
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
header,
footer {
  /*background-color: #282828;*/
  position: fixed;
  padding: 20px 0;
  box-sizing: border-box;
  color: #6662B0;
  width: 100%;
}
.layout_a {
  color: #33f;
  text-decoration:none;
}
header {
  top: 0;
}
footer {
  bottom: 0;
  color: #6662B0;
  background:#c0c0ff;

}
.navbar{
background-color: rgba(192, 192, 255, 1);

}

.imglau {
  height: 300px;
  width:300px;

  border: white solid 2px;
  right: 30px;
  margin: 40px;

}
.img-fa {
  height: 40px;
  width:40px;
  margin: 38px;
  position: absolute;
  border-radius: 2rem;
}
.img-link {
  height: 40px;
  width: 40px;
  margin: 40px;
  position: absolute;
  border-radius: 2rem;
}
.img-google {
  height: 40px;

  margin: 40px;
  position: absolute;
  border-radius: 2rem;
}
.img-github {
  height: 40px;
  width:40px;
  margin: 40px;
  position: absolute;
  border-radius: 2rem;
}
.img-twitter {
  width:40px;
  height: 40px;
  margin: 40px;
  position: absolute;
  border-radius: 6em;
}
.img-free-code {
  height: 40px;
  width:40px;
  margin: 40px;
  position: absolute;
  border-radius: 2rem;
}

.caja-redes {
  margin: 0 auto;
  padding: 15% 15px;
  position: absolute;
  width: 100%;
  top: 1500px;

}
.caja-redes a {
  text-align: center;
  font-size: 40px;

}
.icon-button {
  background-color: white;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  height: 3em;
  line-height: 3em;
  margin: 0 8px;
  position: relative;
  width: 3em;
}
.icon-button span {
  border-radius: 0;
  display: block;
  height: 0;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 0;
}
.icon-button:hover span {
  width: 3em;
  height: 3em;
  border-radius: 3em;
  margin: -1.5em;
}
.linkedin span {
  background-color: #4393BB;
}
.github span {
  background-color: #c3c1c1;
}
.twitter span {
  background-color: #4099ff;
}
.facebook span {
  background-color: #3B5998;
}
.google-plus span {
  background-color: #db5a3c;
}
.free-code span{
  background-color:#044E11;
}
.icon-button i {
  background: none;
  color: white;
  left: 0;
  line-height: 3em;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 3em;
  z-index: 2;
}
.icon-button .icon-linkedin {
  color: #4393BB;
}
.icon-button .icon-github {
  color: black;
}
.icon-button .icon-twitter {
  color: #4099ff;
}
.icon-button .icon-facebook {
  color: #3B5998;
}
.icon-button .icon-google-plus {
  color: #db5a3c;
}
.icon-button .icon-free-code {
  color: #044E11;
}
.icon-button:hover .icon-linkedin,
.icon-button:hover .icon-github,
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .icon-free-code {
  color: white;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" />
	<body>

	<script>
	var links = $( 'a[href*="#c1"]' );
	var links = $( 'a[href*="#c2"]' );
	var links = $( 'a[href*="#c3"]' );
	var links = $( 'a[href*="#c4"]' );
	</script>
	<body>

	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#acolapsar">
	<span class="sr-only">Toggle Navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

	</button>
	<a href="#" class="navbar-brand">Laura Valenzuela</a>
	</div>

	<div class="collapse navbar-collapse navbar-right" id="#acolapsar">
	<ul class="nav navbar-nav">
	<li><a href="#c1"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
	<li><a href="#c2"><span></span> Acerca de mi</a></li>
	<li>
	<a href="#c4">Portafolio</a>
	</li>
	<li>
	<a href="#c3">Contacto</a>
	</li>


	</ul>

	</div>
	</div>
	</nav>


	<div class="container ct1" id="c1">
	<div class="homee">
	<div class="row center homee" >

	<h1 class="col-xs-8 col-xs-offset-2">

	Mi Portafolio Web,Conoce acerca de mi y mis proyectos.
	</h1>
	<div class="col-xs-3 col-xs-offset-2 boton">
	<a href="#c3" class="boton_a">CONTACTAMe</a>
	</div>
	<div class="col-xs-3 col-xs-offset-2 boton">
	<a href="#c2" class="boton_a">CONOCE ME</a>
	</div>
	</div>
	</div>

	</div>

	<div class="container ct2">

	<div class="row">

	<div class="col-xs-6 div-izq text-justify" id="c2">
	<ul>
	<h3>ACERCA DE MI</h3>
	<li> Soy Laura Elvira Valenzuela Casas,De la Ciudad de Durango, me agrada que me llamen laura.</li>
	<li>Tengo una Ingeniería en Sistemas Computacionales.</li>
	<li>Me llama mucho la atención el desarrollo y diseño de sitios web.

	<li>
	<p>Tengo experiencia en desarrollar sitios con las siguientes tecnologías como:</p>
	<ul>
	<li> Visual Studio con ASP.NET, C# y base de datos en SQL Server.</li>
	<li>HTML5,CSS3,Javascript y algo de Bootstrap y PHP.</li>
	</ul>
	</li>
	</ul>


	</div>
	<div class="col-xs-6 div-der">
	<img src="https://scontent.ftrc1-1.fna.fbcdn.net/v/t1.0-9/7483_10208856427911223_2611255750402141424_n.jpg?oh=09f48375df2d0b113a825f7be54bfe27&oe=57CD522A" class="img-circle img-responsive imglau" alt="miimagenredonda">
	</div>

	</div>
	</div>


	<!--Aqui contenido 3-->
	<div class="container ct3">
	<div class="row">
	<div class="col-xs-12 text-center div-down "id="c3">
	<h3>CONTACTO</h3>
	</div>

	<div class="caja-redes" >



	<div class="col-xs-2">

	<a href="https://www.linkedin.com/in/laura-elvira-valenzuela-casas-80104682"
	target="_blank" class="icon-button linkedin"><i class="icon-linkedin"></i>
	<span></span>
	<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/linkedin-circle-128.png" class="img img-responsive img-link">
	</a>
	</div>

	<div class="col-xs-2">
	<a href="https://plus.google.com/109274264810258158307"
	target="_blank" class="icon-button google-plus"><i class="icon-google-plus"></i>
	<span></span>
	<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpQTb8OIXoGaEK6TFGo2MoRSsEnNRAHBcqU4m1SAZaiK3uBq6E"
	class="img img-responsive img-google">
	</a>
	</div>

	<div class="col-xs-2">
	<a href="https://twitter.com/Lawiiiz" target="_blank" class="icon-button twitter">
	<i class="icon-twitter"></i><span></span>
	<img src="http://www.diariodeavisos.com/wp-content/uploads/2012/06/nuevo-logo-twitter.jpg"
	class="img img-responsive img-twitter">
	</a>
	</div>

	<div class="col-xs-2">

	<a href="https://www.facebook.com/arual.valenzuela"
	target="_blank" class="icon-button facebook"><i class="icon-facebook"></i>
	<span></span>
	<img src="http://st2.depositphotos.com/1144386/7770/v/170/depositphotos_77704938-Original-white-round-blue-facebook.jpg" class="img img-responsive img-fa">
	</a>
	</div>

	<div class="col-xs-2">
	<a href="https://github.com/arualvalenzuela" target="_blank" class="icon-button
	github"><i class="icon-github"></i>
	<span></span>
	<img src="http://swooz.free.fr/utils/img/icon_github.png"
	target="_blank" class="img img-responsive img-github">
	</a>
	</div>

	<div>
	<a href="https://www.freecodecamp.com/arualvalenzuela" target="_blank" class="icon-button free-code"><i class="icon-free-code"></i>
	<span></span>
	<img src="https://avatars0.githubusercontent.com/u/9892522?v=3&s=200" target="_blank" class="img img-responsive img-free-code">
	</a>

	</div>

	</div>
	</div>

	</div>

	<!-- FIN ct3-->

	<!-- CT4 -->
	<div class="container ct4" id="c4">
	<div class="row">
	<div class="col-sm-12 col-md-12"><h3 class="ct4-h3">Portafolio</h3></div>
	<div class="col-sm-4 col-md-4">
	<div class="thumbnail">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg/200px-Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg" alt="malala">
	<div class="caption">
	<h3 class="ct4-h3">Malala Yousafzai</h3>
	<p>Esta pagina la hice como practica de un proyecto. La página es sobre la vida de Malala.</p>
	<p>Mejor conocida como: "La niña que utilizo la educacion en contra de los talibanes".</p>
	<p></p>
	<p><a href="https://codepen.io/Arual-Valenzuela/pen/LZEgga" target="_blank" class="btn ct4-boton-a " role="button">Ir a página</a> <a href="https://es.wikipedia.org/wiki/Malala_Yousafzai" target="_blank" class="btn ct4-boton-a" role="button">Biografía</a></p>
	</div>
	</div>
	</div>
	<!--dos-->
	<div class="col-sm- col-md-4">
	<div class="thumbnail">
	<img src="http://elvocerito.com/sitio2013/wp-content/uploads/2014/04/1378381820_542826867_1-perros-cachorros-peluqueria-canina-la-mora.jpg" alt="perrosgatos">
	<div class="caption">
	<h3 class="ct4-h3">Perros & Gatos</h3>
	<p>Estas es una página orientada a gatos y perros. Dentro de esta se podra encontrar distintas opciones para ver imagenes de estas mascotas. </p>
	<p><a href="https://codepen.io/Arual-Valenzuela/full/mEmqEV/" target="_blank" class="btn ct4-boton-a " role="button">Ir a página</a> <a href="http://www.notagram.net/razas-enanas-de-perros/#" target="_blank" class="btn ct4-boton-a" role="button">Perros</a></p>
	</div>
	</div>
	</div>
	<!--fin-->
	<!--tres-->
	<div class="col-sm-4 col-md-4">
	<div class="thumbnail">
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg/200px-Malala_Yousafzai-_Education_for_girls_%2822419395331%29.jpg" alt="malala">
	<div class="caption">
	<h3 class="ct4-h3">Malala Yousafzai</h3>
	<p>Esta pagina la hice como practica de un proyecto. La página es sobre la vida de Malala. </p>
	<p>Mejor conocida como: "La niña que utilizo la educacion en contra de los talibanes".</p>

	<p><a href="https://codepen.io/Arual-Valenzuela/pen/LZEgga" target="_blank" class="btn ct4-boton-a " role="button">Ir a página</a> <a href="https://es.wikipedia.org/wiki/Malala_Yousafzai" target="_blank" class="btn ct4-boton-a" role="button">Biografía</a></p>
	</div>
	</div>
	</div>
	<!--fin-->

	</div>
	</div>


	<!--FIN -->
	<footer>
	<div class="container">
	<div class="row">
	<div class="col-xs-12">
	2016 - <a href="https://www.facebook.com/arual.valenzuela" target="_blank" class="layout_a">Laura Valenzuela</a>
	</div>
	</div>
	</div>
	</footer>


	</body>

	</body>
	/Reset.CSS/


	/* https://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}


	/* HTML5 display-role reset for older browsers */

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
	display: block;
	}



	ol,
	ul {
	/list-style:none;/
	list-style: circle;
	}

	blockquote,
	q {
	quotes: none;
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
	content: '';
	content: none;
	}

	table {
	border-collapse: collapse;
	border-spacing: 0;
	}


	/reticula/


	/Reticula/


	/*.container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 2%;
	padding-left: 2%;
	max-width: 98%;
	border: 1px solid blue;


	}*/
	/*.homee {
	background-color: #EB6D6D;
	text-align: center;
	color: #ffffff;
	padding: 20%;
	box-sizing: border-box;
	height: 10%;
	}*/

	/Editorial/
	h1 {
	font-size: 50px;
	text-transform: uppercase;
	font-weight: 700;
	top: 200px;
	color: #ffffff;

	}
	a {
	text-decoration: none;
	}

	/Formas/
	.boton {
	background-color: #6662B0;
	padding: 20px;
	border-bottom: 6px solid #AA8CCC;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 100%;
	margin-right: 10px;
	text-decoration: none;
	top: 300px;
	}
	.boton:hover {
	background-color: #AA8CCC;
	border-top: 6px solid #6662B0;
	border-bottom: 0 none;
	text-decoration: none;
	}
	.boton:last-of-type {
	margin-right: 0;
	}
	.btn {
	background-color: #6662B0;
	padding: 10px;
	border-bottom: 6px solid #AA8CCC;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 25%;
	margin-right: 10px;
	text-decoration: none;
	color:white;
	}
	.btn:hover {
	background-color: #AA8CCC;
	border-top: 6px solid #6662B0;
	border-bottom: 0 none;
	text-decoration: none;
	color:#ffffff;
	}
	.btn:last-of-type {
	margin-right: 0;
	}

	.ct2 {
	width: 100%;
	height: 100%;
	}
	.ct3 {
	width: 100%;
	height: 100%;

	}
	.div-izq {
	background: #AA8CCC;
	position: absolute;
	top: 800px;
	left: 0;
	height: 600px;
	color: white;
	line-height: 40px;
	padding: 30px;
	}
	.div-down {
	/#6662B0/

	background: #6662B0;
	position: absolute;
	top: 1400px;
	left: 0;
	height: 100%;

	color: white;
	line-height: 40px;



	}

	/*.div-redes{
	background:#6662B0;
	position:absolute;
	left:0;
	height:100%;
	color:white;
	line-height:40px;
	}
	*/
	div h3 {
	color: white;
	font-weight: 400;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	padding: 20px;
	}
	.ct4-h3{
	color:grey;
	}
	div .ct2 {
	width: 100%;
	height: 20px;
	}
	.ct3 {
	width: 100%;
	height: 100%;

	}
	.ct4{
	background: #ffffff;
	width:100%;
	height:100%;
	top:2200px;
	position:absolute;
	}


	.div-der {
	background: #AA8CCC;
	position: absolute;
	top: 800px;
	right: 0;
	height: 600px;
	padding: 100px;
	}
	.boton_a {
	color: #ffffff;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	}
	.ct4-boton-a{
	color: #ffffff;
	font-weight: 50;
	text-decoration: none;
	}

	.col-xs-3 {
	max-width: 25%;
	flex-basis: 25%;
	}

	body {
	background: url("http://www.fondox.net/wallpapers/puesta-de-sol-color-purpura-4435.jpg");
	/color:#282828;/
	/height: 100%;/
	line-height: 1.4;
	font-family: 'Montserrat', sans-serif;

	}
	.center {
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	}
	header,
	footer {
	/background-color: #282828;/
	position: fixed;
	padding: 20px 0;
	box-sizing: border-box;
	color: #6662B0;
	width: 100%;
	}
	.layout_a {
	color: #33f;
	text-decoration:none;
	}
	header {
	top: 0;
	}
	footer {
	bottom: 0;
	color: #6662B0;
	background:#c0c0ff;

	}
	.navbar{
	background-color: rgba(192, 192, 255, 1);

	}

	.imglau {
	height: 300px;
	width:300px;

	border: white solid 2px;
	right: 30px;
	margin: 40px;

	}
	.img-fa {
	height: 40px;
	width:40px;
	margin: 38px;
	position: absolute;
	border-radius: 2rem;
	}
	.img-link {
	height: 40px;
	width: 40px;
	margin: 40px;
	position: absolute;
	border-radius: 2rem;
	}
	.img-google {
	height: 40px;

	margin: 40px;
	position: absolute;
	border-radius: 2rem;
	}
	.img-github {
	height: 40px;
	width:40px;
	margin: 40px;
	position: absolute;
	border-radius: 2rem;
	}
	.img-twitter {
	width:40px;
	height: 40px;
	margin: 40px;
	position: absolute;
	border-radius: 6em;
	}
	.img-free-code {
	height: 40px;
	width:40px;
	margin: 40px;
	position: absolute;
	border-radius: 2rem;
	}

	.caja-redes {
	margin: 0 auto;
	padding: 15% 15px;
	position: absolute;
	width: 100%;
	top: 1500px;

	}
	.caja-redes a {
	text-align: center;
	font-size: 40px;

	}
	.icon-button {
	background-color: white;
	border-radius: 3em;
	cursor: pointer;
	display: inline-block;
	height: 3em;
	line-height: 3em;
	margin: 0 8px;
	position: relative;
	width: 3em;
	}
	.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	width: 0;
	}
	.icon-button:hover span {
	width: 3em;
	height: 3em;
	border-radius: 3em;
	margin: -1.5em;
	}
	.linkedin span {
	background-color: #4393BB;
	}
	.github span {
	background-color: #c3c1c1;
	}
	.twitter span {
	background-color: #4099ff;
	}
	.facebook span {
	background-color: #3B5998;
	}
	.google-plus span {
	background-color: #db5a3c;
	}
	.free-code span{
	background-color:#044E11;
	}
	.icon-button i {
	background: none;
	color: white;
	left: 0;
	line-height: 3em;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	width: 3em;
	z-index: 2;
	}
	.icon-button .icon-linkedin {
	color: #4393BB;
	}
	.icon-button .icon-github {
	color: black;
	}
	.icon-button .icon-twitter {
	color: #4099ff;
	}
	.icon-button .icon-facebook {
	color: #3B5998;
	}
	.icon-button .icon-google-plus {
	color: #db5a3c;
	}
	.icon-button .icon-free-code {
	color: #044E11;
	}
	.icon-button:hover .icon-linkedin,
	.icon-button:hover .icon-github,
	.icon-button:hover .icon-twitter,
	.icon-button:hover .icon-facebook,
	.icon-button:hover .icon-google-plus,
	.icon-button:hover .icon-free-code {
	color: white;
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" />