A Pen by Miguel Angel Jerónimo Díaz

Thumbnail
This awesome code was written by Miguel_Infernal, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Miguel_Infernal ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <title>Principal</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="comun/css/estilo.css">
	<script src="https://code.jquery.com/jquery-latest.js"></script>
	<script src="comun/js/header.js"></script> 
	<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head>
<body>
      <header >
      <div class="wrapper">
      <div class="logo">Miguel Jerónimo</div>

         <nav>
       	<a href="#biografia">Biografía</a>
		<a href="#Hobi">Hobbies</a>
		<a href="#formulario">Contacto</a>
       </nav>
      </header>
        <section  class="contenido wrapper" >

    
   <div class="parrafo" id ="biografia">
      <h1 class="titulo1" >Biografía</h1>
     <figure class = "figura1">	
<img class=" img-thumbnail"/ id="figura" src="https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/14666188_1110948955608069_1313975756015988928_n.jpg?oh=9949233d6051f1a2b7bf24f92d2443da&oe=5938EEDF" width="1080" height="450">
 <figcaption  ><em><strong>09/25/16. Posando en las escolleras de playa Miramar CD. Madero, Tamaulipas :'v</strong></em></figcaption>
</figure>
           <p class = "p">Miguel Angel Jerónimo Díaz nacio el 02/03/1993 en Ciudad Madero tamaulipas. Actualmente cursa la carrera en Sistemas Computacionales en el Instituto Tecnologico de Ciudad Madero. <br><br>
Entre sus hobie destancan: La pesca, El Buceo libre, jugar Tibia. 
<br><br>

</p>
          </div>
        <div class ="parrafo2" id ="Hobi">
      <h1 class = "titulo2">Hobbies</h1>

	<figure class="figura3">
     
      <img class = "img-thumbnail" src="https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/12439087_939632632739703_5505815528304723714_n.jpg?oh=851c84769e33301fb6ff4e86c88bf4bf&oe=592C7FA8" width="1080" height="450">
     <figcaption><em><strong>Jurel de 8Kg aproximadamente sacado en el paso de botes "EL 106" (16/01/16.</strong></em></figcaption>
   </figure>
    <h1 class = "titulo">La Pesca</h1>
    <p class = "p2" >Aprendio el arte de la pesca a sus 10 años de edad gracias a su tío Carlos Rivera. Comenzo sacando Bagres a la orilla del Río Panuco, le gusto tanto este hermoso deporte que se hizo de su propio equipo de pesca.<br>
      
      Ha vivodo grandes aventuras en la pesca en compañia de sus primos y amigos con los que disputa competencias para ver quien es el mejor pescador. 
      
          </br>
 En sus aventuras a aprendido distintas tecnicas de pesca, la más reciente es la técnica de casteo la cual consiste en utilizar un señuelo (para mejor entendimiento "carnada artificial") ya sea de goma o de recina. Los señuelos de goma para su gusto son los que mejor resultados le han dado.
     <br>
     <br>
        En enero de 2016 fue un mes de mucho exito por que logro buenas capturas en las aguas del Río Panuco, la más lograda fue un Jurel de alrededor de 8 Kilos de peso, un animal muy podersos que doblo su caña increiblemente.
          <br>
          <br>

       
      </p>
        </div>
<div class = "parrafo3"> <h1 class = "titulo3">Aventura Tibiana</h1> 
  <figure class="figura4">
  <img class = "img-thumbnail" src="https://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/1010079_928463900523243_5898973702755758625_n.jpg?oh=b7cc35cf75737d4c88c710bf22abcefa&oe=5937D136" width="1080" height="450">
     <figcaption><em><strong>Legendaria foto de avavance a nivel 100. Tron legacy Team.</strong></em></figcaption>
   </figure>
  
      <p>
        <br><br>
       En el año de 2008 comenzo su aventura en el juego Tibia, ya que fue influenciado por sus amigos por lo cuál descidio crear su primera cuenta. Su primer personaje en el juego fue nombrado Garza Infernal (Sorcerer) el cuál logro llegar a nivel 27. Un año mas tarde creo otro personaje llamado Selur Zaole (Royal Paladin. Con Selur actualmente es nivel 147 y ha vivo muchas aventuras en el mundo tibiano, conocio a grandes compañeros y amigos con los que fundo un gremio lamado <strong>Tron Legacy</strong> que tiempo despues tuvo que desaparecer a causa de problemas con un gremio aun mas poderoso.
        <br><br>
        Con Tron Legacy estuvo hasta el final, muchos jugadores se salian por la ambicion y el poder llendoce con el gremio enemigo. Otros fueron corridos por su mal comportamiento y al final terminaban en contra del gremio pero nunca triunfaron.
        <br><br>
        Despues de la desaparición de <strong>Tron Legacy</strong>, fue creado un nuevo gremio pero ahora con mas seguridad solo entraron los legales y gente de confianza entre ellos destacan estos jugadores: 
        <br><br>
        Lord Miyamoto, 
        Usher De Andres,
        Quintin El Ambriado,
        Terewinx,
        Knight Calentanox,Tony Price, Neiku Chan, Muertte Pox, Rey Artturo, Floor de Calabaza, Cavek, Atenea De Chocolate, Malth Slayer, Domy Theyk.<br><br>
        
        
        si es de su interes el juego visite: <a href="https://secure.tibia.com/account/?subtopic=accountmanagement" target="_blank" title="pagina oficial de tibia">www.tibia.com</a></p> </div>
  
  <div class = "parrafo4"> <h1 class = "titulo4">Aventuras Acuaticas :'v</h1> 
  <figure class="figura5">
  <img class = "img-thumbnail" src="https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/11164695_828015617234739_3056522160017639398_n.jpg?oh=0ed2047faab20cfe11410cd24ec93e2b&oe=5944785F" width="1080" height="450">
     <figcaption><em><strong>25/04/15 en playa Miramar :v.</strong></em></figcaption>
   </figure>
  
      <p>
        <br><br>
       a sus 18 años de edad aprendio a nadar, fue instruido por su primo Sergio Cruz, despues de un tempo de aprender a nadar en el río Panuco comezo a aprender sobre el buceo libre.
        <br><br>
        en sus inicios fue en el río, mas tarde el y sus dos primos se pusieron de acuerdo para comenzar un nuevo reto, ir a las escolleras de playa Miramar a intentar algo que nunca antes habian hecho, adentrarse en las aguas de mar. Aun sin sin contar con todo el equipo necesario decidieron intentarlo y descubrir las maravllas de las profundidades.
        <br><br>
        Años mas tarde el logra conseguir sus primeras aletas en una tienda de buceo que esta localizada en Madero (por Arteli Madero). Ya con este nuevo juguete pudo optimizar sus movimientos bajo el agua y asi seguir descubrieron la diversa flora y fauna que habita en las aguas de playa miramar.
        <br><br>
        De vez en cuando suele salir con sus camaradas de la universidad, casi hermanos: Gonzalo Cruz Ceballos, Willian David Hernandez Tristan, Miguel Angl Martinez Salaña y Raúl Alejandro Macias Garcia
         </div>
  <div class = "parrafo5" id="formulario">
  <h1 class = "titulo5">Fomulario</h1>
    <form class = form>
      <fieldset>
      <div class="campos"><p class="renglon">
        <input type="text" class="form-control input-lg" placeholder="Ingrese su nombre" required></p>
     <p class="renglon">
       <input type="text" class="form-control input-lg" placeholder="Ingrese Correo Elctronico" required></p>
      <p class="renglon">
        <textarea placeholder="Comentario" class="form-control input-lg" width="300" height="500"></textarea></p>
        <p><button class="btn btn-block btn-primary">Enviar</button></p>
        </div>
        
      </fieldset>
    </form>
  
  </div>
     </section>
<footer>
<div id="footer" >
		<p>Copyright &copy; <a href="#" class="T">Torneo de Pesca</a> 2017 | Diseñado por <a class T href="https://www.facebook.com/miguelangel.jeronimodiaz">Miguel Angel Jerónimo Díaz</a> </p>
	</div>
</footer>
</body>

/*Downloaded from https://www.codeseek.co/Miguel_Infernal/a-pen-by-miguel-angel-jerandxf3nimo-dandxedaz-Xpvrvq */
    *{margin:0; padding: 0;}

body{
	background: #ff9800;
}


header{
     font-family: fantasy; 
	 width: 100%;
	 overflow: hidden;
	 background: #212121;
	 margin-bottom: 20px;

}

.wrapper{width: 90%;
max-width: 1000px;
margin: auto;
overflow: hidden;
}

header .logo{color: #f2f2f2;
font-size: 50px;
line-height: 200px;
float: left;
}

header nav{
	float: right;
    line-height: 200px;

}

header nav a{
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	line-height: normal;
	font-size: 20px;
	font-weight: bold;
}

header nav a:hover{
	background: #f56f3a;
	border-radius: 50px;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.header2{
	position: fixed;
	height: 100px;

}

.header2 .logo{
	line-height: 100px;
	font-size: 30px;

}

.header2 nav{
	line-height: 100px;
}

.contenido .parrafo{
   background-color:  #0d47a1;
   color: white;
   margin-bottom: 1em;
  font-family: 'Mukta Vaani', sans-serif;
   
  overflow: hidden;
  
 
}

.contenido .parrafo .p , .figura1, .titulo1{
  margin : 10%;
 text-align: justify;
}

.contenido .parrafo2{
   background-color:   #004d40;
   color: white;
   margin-bottom: 1em;
  font-family: 'Mukta Vaani', sans-serif;
   
  overflow: hidden;
  
 
}

.contenido .parrafo2 .p2,.titulo2, .titulo , .figura3{
  margin : 10%;
 text-align: justify;
}

.contenido .parrafo3{
   background-color:   #1b5e20;
   color: white;
   margin-bottom: 1em;
  font-family: 'Mukta Vaani', sans-serif;
   
  overflow: hidden;
  
 
}

.contenido .parrafo3 p, .titulo3, .figura4,ul, li{
  margin : 10%;
 text-align: justify;
}

.contenido .parrafo4{
   background-color:   #827717;
   color: white;
   margin-bottom: 1em;
  font-family: 'Mukta Vaani', sans-serif;
   
  overflow: hidden;
  
 
}

.contenido .parrafo4 p, .titulo4, .figura5,ul, li{
  margin : 10%;
 text-align: justify;
}

.contenido .parrafo5{
   background-color:    #7986cb;
   color: white;
   margin-bottom: 1em;
  font-family: 'Mukta Vaani', sans-serif;
   
  overflow: hidden;
  
 
}

.contenido .parrafo5 ,p, .titulo5, .form,ul, li{
  margin : 10%;
  text-align: center;
}

.contenido .parrafo5 .campos{background-color: #1a237e;
	border:1px solid #eaeaea;
	margin: .75em;
	padding: .75em;}

.contenido .parrafo5 .campos .renglon{margin: 0.5em 0;}

label{width: 150px;
	padding: 3px 6px;
	vertical-align: top;
	cursor: pointer;
	display: inline-block;
	text-align: right;}

footer{width: 100%;
  	color: #fff;
	overflow: hidden;
	background: #212121;
	margin-bottom: 20px;
	line-height: 200px;
    text-align: center;
	font-family: 'Mukta Vaani', sans-serif;
	display: inline-block;
	font-size: 20px;
}

	footer a{
		color: yellow;
        text-decoration: none;
	}

	footer a:hover{
    background: #f56f3a ;
	color: white;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	}


@media screen and (max-width: 950px){
  header .logo{
font-size: 30px;

}

  header .logo, 
  header nav{

  	width: 100%;
  	text-align: center;
  	line-height: 100px;
  }


    .header2{
    	height: auto;

    }
   
.header2 .logo,
.header2 nav{

	line-height: 50px
}


footer{font-size: 10px;}

}

@media screen and (min-width: 450px){

      footer{font-size: 14px;}
        
      .contenedor{
          padding-top: 1000px;
      }

      .contenedor figure{
      	margin-bottom: 17px;
      }

}




/*Downloaded from https://www.codeseek.co/Miguel_Infernal/a-pen-by-miguel-angel-jerandxf3nimo-dandxedaz-Xpvrvq */
    $(document).ready(function(){

	//para detectar cuando el usuario baje la pantalla
	$(window).scroll(function(){
       $('.reglas').addClass("animated bounce");
       if ($(this).scrollTop() > 0) {
       	$('header').addClass('header2');
       }else{
       	$('header').removeClass('header2');
       }

	});
});



Comments