Build a Tribute Page (FCC)

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
        <!-- font import -->
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet" type="text/css">

<!-- Font Awesome import -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<!-- nest all HTML within div element
-->
<div class="container-fluid">
  <div class="img-responsive">
  <body>
<!-- Title -->
    <div class="header">
      turtles
    </div>
    <h1 class="text-center">Texas Longhorn Football
    </h1>
    
<!-- First box "Quick Facts" -->
    <div id="QuickFact">
      <h2 class="text-center">Quick Facts 
      </h2>
      <div class="row">
        <div class="col-md-4">
          <p class="box-text" style=" padding-left:30px"; > Total Wins
          </p>
        </div>
        <div class="col-md-4">
          <p class="box-text"> National Championships
          </p>
        </div>
        <div class="col-md-4">
          <p class="box-text" style=" padding-left:50px";> Heisman Winners
          </p>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-4">
          <p id="record">888</p>
        </div>
        <div class="col-md-4">
          <i id ="trophy" class="fa fa-trophy">
          </i>
          <i id ="trophy" class="fa fa-trophy">
          </i>
          <i id ="trophy" class="fa fa-trophy">
          </i>
          <i id ="trophy" class="fa fa-trophy">
          </i>
        </div>
        <div class="col-md-4">
          <div id="winners">
            <p> Earl Campbell </p>
            <p> Ricky Williams </p>
          </div>
        </div>
      </div>
    </div>
<!-- 3 boxes to a row -->
    <div class="row">
      <div class="col-md-6">
        <div class="pictureBox">
          <img class="picture" src="http://www.dailytexanonline.com/sites/default/files/images/2016/11/2016-11-28_Tom_Herman_Joshua.Guerra47374.jpg" alt="Coach Tom Herman">
          <p class="text-center"> Head Coach Tom Herman </p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="pictureBox">
          <img class="picture" src="http://alcalde.texasexes.org/bevoxv/img/bevomobile.jpg" alt="Baby Bevo">
          <p class="text-center"> Bevo XV, current mascot </p>
        </div>
      </div>
    </div>
    
<!-- Info Box -->
    <div id=infobox>
      <p> The Texas Longhorns are a collegiate football team representing the University of Texas at Austin. They compete in the NCAA Div 1 FBS and are a part of the Big 12 Conference. Some facts about the prestigious history of the Texas Longhorns:
        <br>
        <ul>
          <li> Played their first season in 1893  </li>
          <li> Hold an all-time record of 888-353-33 (.710) </li>
          <li> Have claimed 4 national championships (1963, 1969, 1970, 2005)
          </li>
          <li> Current head coach Tom Herman is the 30th head coach in Longhorn history </li>
          <li> Longhorns play at Darrell K Royal-Texas Memorial Stadium, which has a capacity of 100,119 </li>
      </ul>
     </p>
     <br>
    
    <p> For more information on Texas Longhorn football, please visit <a href="https://en.wikipedia.org/wiki/Texas_Longhorns_football#Traditions" target="_blank"> Wikipedia </a> or <a href="http://www.texassports.com/" target="_blank"> the offical website of UT Athletics </a>. Hook 'Em!</p>
      
    </div>
  <br>   
  <p class="text-center"> This page was written and coded by <a href="https://www.freecodecamp.com/jordanhoang" target="_blank">Jordan Hoang </a></p>
   
  </body> 
  </div>
</div>
    

/*Downloaded from https://www.codeseek.co/jordanhoang/build-a-tribute-page-fcc-VmVGbG */
        body {
  background-image: url("https://news.utexas.edu/sites/news.utexas.edu/files/know/images/2014/tower_year_in_review/1_Winter_747x400_2.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  margin: 0;
  padding: 0;
}

.header {
  background-color: black;
  width: 100%;
  position: fixed;
  height: 100px;
  padding: 0;
}

h1 {
  font-size: 100px;
  font-family: "Lora", serif;
  color: rgb(191, 87, 0);
}

#QuickFact {
  background-color: rgb(191, 87, 0);
  border: 5px solid;
  border-color: rgb(191, 87, 0);
  border-radius: 10px;
  margin: auto;
  width: 50%;
  height: 170px;
  margin-top: 75px;
  opacity: .95;
}

.box-text {
  font-size: 15px;
}

#record {
  font-size: 30px;
  padding-left: 40px;
}

#trophy {
  font-size: 40px;
  padding-left: 1px;
}

#winners {
  padding-left: 65px;
}

.pictureBox {
  background-color: rgb(191, 87, 0);
  border: 5px solid;
  border-color: rgb(191, 87, 0);
  border-radius: 10px;
  width: 100%;
  height: 330px;
  margin-top: 75px;
  opacity: .95;
}

.picture {
  width: 100%;
  height: 95%;
  border-radius: 10px;
  opacity: 1.0;
}

#infobox {
  background-color: rgb(191, 87, 0);
  border: 5px solid;
  border-color: rgb(191, 87, 0);
  border-radius: 10px;
  margin: auto;
  width: 50%;
  height: 280px;
  margin-top: 75px;
  opacity: .95;
}
  
  a {
    color: blue;
  }
    

/*Downloaded from https://www.codeseek.co/jordanhoang/build-a-tribute-page-fcc-VmVGbG */
        
    

Comments