Rebuilding Treehouse Tracks Page

In this example below you will see how to do a Rebuilding Treehouse Tracks Page with some HTML / CSS and Javascript

I spend so much time on Treehouse, I thought I'd practice my front end skills by recreating a page on their site. WIP, so much more to come.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Rebuilding Treehouse Tracks Page</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ECF0F1;
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #3e4448;
}

.container {
  position: relative;
  margin: 20px 10%;
  padding: 15px;
  overflow: hidden;
  width: 80%;
  height: auto;
  background: #1ABC9C;
  border-bottom: solid 1px #15987e;
  border-radius: 7px;
}

.info-panel {
  position: relative;
  z-index: 100;
  margin: 15px;
  padding: 25px;
  width: 75%;
  background-color: #FEFEFE;
  border-bottom: solid 1px #BEC3C7;
  border-radius: 5px;
}
.info-panel h1 {
  margin: 10px 0;
  font-size: 1.6em;
}
.info-panel h3 {
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #BEC3C7;
  font-size: 16px;
}
.info-panel p {
  font-size: 0.95em;
  font-weight: 400;
  color: #a3aaaf;
}
.info-panel span {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 2em;
  color: #BEC3C7;
}

.path-progress {
  width: 100%;
  height: 15px;
  border-radius: 8px;
}
.path-progress td {
  width: 20%;
  background-color: #e7e9ea;
}
.path-progress td:first-child {
  border-radius: 8px 0 0 8px;
}
.path-progress td:last-child {
  border-radius: 0 8px 8px 0;
}

.path-progress tr td .progress-complete {
  display: table-cell;
  background-color: #FF6666;
  width: 100px;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="container">
  <div class="info-panel">
    <span class="entypo-map"></span>
    <h3>Path</h3>
    <h1>Become A Web Designer</h1>
    <p>In this path, we'll learn all of the necessary skills to become a successful web designer. We’ll start off first by learning how to read and write the essential languages of the web: HTML & CSS. Then, we’ll explore basic design principles like color theory and typography, which will help you to structure and design websites. Once we’ve covered the basics, we’ll advance on to make responsive websites using the latest tools and techniques. And lastly, we’ll learn some basic marketing methods and essential business strategies. Because having even a general understanding of these skills will make you a better designer and set you apart from the crowd.</p>
  </div>
</div>
<div class="cf"></div>

<div class="container">

  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/TimRuby/rebuilding-treehouse-tracks-page-eDbJx */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ECF0F1;
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #3e4448;
}

.container {
  position: relative;
  margin: 20px 10%;
  padding: 15px;
  overflow: hidden;
  width: 80%;
  height: auto;
  background: #1ABC9C;
  border-bottom: solid 1px #15987e;
  border-radius: 7px;
}

.info-panel {
  position: relative;
  z-index: 100;
  margin: 15px;
  padding: 25px;
  width: 75%;
  background-color: #FEFEFE;
  border-bottom: solid 1px #BEC3C7;
  border-radius: 5px;
}
.info-panel h1 {
  margin: 10px 0;
  font-size: 1.6em;
}
.info-panel h3 {
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #BEC3C7;
  font-size: 16px;
}
.info-panel p {
  font-size: 0.95em;
  font-weight: 400;
  color: #a3aaaf;
}
.info-panel span {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 2em;
  color: #BEC3C7;
}

.path-progress {
  width: 100%;
  height: 15px;
  border-radius: 8px;
}
.path-progress td {
  width: 20%;
  background-color: #e7e9ea;
}
.path-progress td:first-child {
  border-radius: 8px 0 0 8px;
}
.path-progress td:last-child {
  border-radius: 0 8px 8px 0;
}

.path-progress tr td .progress-complete {
  display: table-cell;
  background-color: #FF6666;
  width: 100px;
}

Comments