FreeCodeCamp : Build a Tribute Page

In this example below you will see how to do a FreeCodeCamp : Build a Tribute Page with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp : Build a Tribute Page</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Codigo/CODE -->
<div class="container">
  
  <div class="jumbotron">
      <h1 class="text-center">Stephen Hawking</h1> 
      
      <div class="citas text-center"> <!-- citas -->
        <p><i class="fa fa-quote-left"></i> <b>Inteligencia</b> es la habilidad de adaptarse a los cambios.</p>
         <p><i class="fa fa-quote-left"></i> Me he dado cuenta que incluso las personas que dicen que todo está predestinado y que no podemos hacer nada para cambiar nuestro destino, igual miran antes de cruzar la calle.</p>
      </div>
    
      <div class="thumbnail"><img src="https://2.bp.blogspot.com/-fvnZ4lZzmMo/VVYWFzu0q5I/AAAAAAAAfg4/QT-ZQfD-FEg/w1200-h630-p-nu/Stephen%2BHawking.png">
          <div class="caption text-center">Stephen Hawking, flotando en el espacio.</div>
     </div>
    <br>
    <h1 class="text-center">Físico teórico, astrofísico, cosmólogo y divulgador científico británico</h1>	
    <div class="row">
      <br>
      <div class="lista">
         <h4 class="text-center">Principalmente conocido por..</h4>	
          <ul>
            <li>Agujeros negros</li>
            <li>Teorías cosmológicas</li>
            <li>Historia del Tiempo</li>
         </ul>
      </div>
    </div>
   
    <h5 class="text-center"> Si tienes tiempo y quieres leer más información acerca de <a href="https://es.wikipedia.org/wiki/Stephen_Hawking" target="_blank">S.Hawking</a>.</h5>
    
  </div>
  <footer class="text-center">
    <hr>
    <p>Escrito y desarrollado por <a href="https://www.freecodecamp.com/bannanamilk" target="_blank">Carlos Torregrosa</a>.</p>
  </footer>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/BannanaMilikita/freecodecamp-build-a-tribute-page-aBazqM */
body{
  margin:30px;
}
.container{
  padding:20px;
}
.citas{
  margin-bot: 20px;
}
ul{
  list-style:none;
}
.lista{
  display: flex;
  
}

Comments