CodeCampTributtePage

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

Code Camp basic front end challenges

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>CodeCampTributtePage</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container-fluid" id="out-container">
  <div class="well" id="in-container">
  <h1 class="text-center" id="main-title">Richie Kotzen</h1>
  <h2 id="subtitle"><i>A virtuous guitarrist, singer and songwritter</i></h2>
    <div class="row well" id="picture-container">
      <div class="col-md-12">
        <figure class="figure">
          <img src="http://nextmosh.com/wp-content/uploads/2014/11/Richie-Kotzen-10.jpg" class="figure-img img-fluid img-rounded img-responsive" alt="A picture of Richie Kotzen performing with his band"</img>
        
          <figcaption class="figure-caption text-xs-right"><i>Richie Kotzen (right), performing with his band.</i></figcaption>
        </figure>
      </div>
    </div> <!-- picture row -->
  
    <div class="row" id="text-container">
      <div class="col-md-12">
        <h3>Check the discography:</h3>
        <div class="justify" id="disco-container">
          <ul>
            <li><b>(1989)</b> Richie Kotzen</li>
            <li><b>(1990)</b> Fever Dream</li>
            <li><b>(1991)</b> Electric Joy</li>
            <li><b>(1994)</b> Mother Head's Family Reunion</li>
            <li><b>(1995)</b> The Inner Galactic Fusion Experience</li>
            <li><b>(1996)</b> Wave of Emotion</li>
            <li><b>(1997)</b> Something to Say</li>
            <li><b>(1998)</b> What Is...</li>
            <li><b>(1999)</b> Bi-Polar Blues</li>
            <li><b>(1999)</b> Break It All Down</li>
            <li><b>(2001)</b> Slow</li>
            <li><b>(2003)</b> Change</li>
            <li><b>(2003)</b> Acoustic Cuts</li>
            <li><b>(2004)</b> Get Up</li>
            <li><b>(2006)</b> Ai Senshi Z×R (Music from the animation series Gundam)</li>
            <li><b>(2006)</b> Into The Black</li>
            <li><b>(2007)</b> Go Faster/Return Of The Mother Head's Family Reunion</li>
            <li><b>(2009)</b> Peace Sign</li>
            <li><b>(2011)</b> 24 Hours</li>
            <li><b>(2014)</b> The Essential</li>
            <li><b>(2015)</b> Cannibals</li>
          </ul>
          
           <div>
            <blockquote>
              <p>"Are you guilty to the bone? What’s the difference? We are cut from the same stone Stop now but we’ve gone too far its a war we’ve got to wage There’s always someone with a sadder face to pay to pay to pay"</p>
              <footer>Richie Kotzen, Cannibals</footer>
            </blockquote>
          </div>
        </div>
          
          <div id="more-container">
            <p>Wanna know more? Click the link and visit Richie Kotzen <a href="http://richiekotzen.com/" target="_blank">official website</a>.</p>
          </div>
      </div>
    </div> <!-- text row -->
  </div> <!-- in container -->
  <div id="footer-container">
    <hr></hr>
    <p>Written and coded by <a href="https://www.freecodecamp.com/fabiusks" target="_blank">fabiusks</a>.</p>
  </div>
  </div> <!-- out container -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/fabiusks/codecamptributtepage-JXyaXv */
#main-title {
  font-size: 60px;
  margin-top: 5%;
}

#subtitle {
  font-family: arial;
  font-size: 30px;
}

#out-container {
  margin-top: 1%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}

#picture-container {
  padding: 1%;
  margin-left: 11%;
  margin-right: 11%;
}

#in-container {
  margin-top: 3%;
  margin-left: 12%;
  margin-right: 12%;
}

#text-container {
  text-align: left;
  margin-top: 3%;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 3%;
}

#disco-container {
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 3%;
}

#more-container {
  font-size: 18px;
  font-weight: bold;
}

#footer-container {
  margin-left: 12%;
  margin-right: 12%;
}

.justify {
  text-align: justify;
}

.well {
  background-color: #F0F0F0;
  border-radius: 10px;
  border-width: 0;
}

#picture-container.well {
  background-color: white !important;
  border-width: 10 !important;
}

blockquote {
  border: none;
}

blockquote p {
  font-size: 20px;
}

Comments