Build a tribute page

In this example below you will see how to do a Build a tribute page with some HTML / CSS and Javascript

First project on Free code camp

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Build a tribute page</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    </head>
  <body>
    <section>
    <div class="content">
    <h1 class="text-center">Will Eisner</h1>
    <h2 class="text-center"><em>A comic revolutionary</em></h2>
    <div class="thumbnail">
    <img src="https://www.companhiadasletras.com.br/images/autores/00560_gg.jpg" class="img-responsive">
    <div class="caption text-center">Will Eisner talking at his studio</div>
     </div>
    <ul>
     <h3>Here's a timeline of Will Eisner</h3>     
      <li><b>1917</b> - Born in New York</li>
      <li><b>1930</b> - The Eisner family's situation was desperate 'cause the Great Depression, and Eisner's mother demanded that he, at thirteen, find some way to contribute to the family income.</li>
          <li><b>1936</b> - His friend and fellow Bob Kane (Batman creator) suggested that the 19-year-old Will Eisner try to selling cartoon to a new comic book <em>WOW!What a magazine!</em> </li>
      <li><b>1939</b> - Eisner was comissioned to creat Wonder Man to Victor-Fox (who had worked previously at DC Comics) </em> </li>
   <li><b>Late 41 - early 42</b> - Eisner was drafted to the U.S Army, where he worked at the newspaper, then he got involved in the use of comics for training</li>
  <li><b>2005</b> - Eisner did many things trough his life, I've already read his biography and I could spent a lot of topics talking 'bout his characters and stories, but I'm trying to finish this exercise. He died at january 3 at Florida.</li>
      <p class="quote">"As for me, I am in pursuit of excellence. I have no time to get old."</p>
    <cite>- Will Eisner</cite>
      </ul>    
        <blockquote>
    <h3>If you have time, you should read more about Will Eisner <a href="https://en.wikipedia.org/wiki/Will_Eisner">here</a></h3>
    </blockquote>
  </div>
  </section>
   <hr>
<p class="text-center">written and coded by <a href="#">Bruno Barreira</a></p>
    </body>
  <footer class="text-center">
    </footer>
  </html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/barreira/build-a-tribute-page-apyxem */
body{
  font-size: 14px;
  line-height: 1.5;
}
section{
  background-color:#eee;
  width: 85%;
  margin-right: auto;
  margin-left: auto;
  border-radius: 20px;
}
h1 {
  padding-top: 30px;
  font-size: 60px;
}
h2{
  padding-bottom: 15px;
}
ul{
  width: 70%;
  margin-right: auto;
  margin-left: auto;
}
.content {
  border-width: 30px;
  border-color: #fff;
  border-radius: 15px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.thumbnail {
  border-color: #fff;
  border width: 3px;
  border radius: 10px;
  padding: 5px;
  margin-bottom: 20px;
}
blockquote {
  width: 65%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 30px;
}

.quote {
  padding-top: 30px;
  font-size: 18px; 
}

cite {
  color: #777;
}

hr{
  width: 85%;
  display: block;
}

Comments