Sample Portfolio Page

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

Thumbnail
This awesome code was written by SRHerzog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SRHerzog ©
  • HTML
  • CSS
  • JavaScript
    <div id="header" class="row center-block">
  <span class="header-button col-xs-6">STEVE HERZOG</span>
  <span class="header-button text-center col-xs-2"><a class="header" href="#bio">Bio</a></span>
  <span class="header-button text-center col-xs-2"><a class="header" href="#portfolio">Portfolio</a></span>
  <span class="header-button text-center col-xs-2"><a class="header" href="#contact">Contact</a></span></div>
<div class="row">
  <span class="col-xs-8 text-center" id="title"><h1>I did it!</h1><p>I just finished my third Free Code Camp certification today, August 11. Someone hire me!</p></span>
  <span class="col-xs-4"><img src="https://scontent-ord1-1.xx.fbcdn.net/t31.0-8/11187326_10206661545804341_8907186863556855904_o.jpg" id="title-img"></span></div>
<div class="center-block" id="bio">
  <h1 class="text-center">BIO</h1>
  <p>I'm 32 years old and getting started on a new career.</p>
  <p>I was a computer geek and musician in my youth. I took four computer courses in high school, from A+ technician training to networking to C++ and Java. I decided to attend Augsburg College in Minneapolis, Minnesota because they had a strong music program
    for a small school but also offered a BS degree in Computer Science. Once I reached campus, I promptly forgot about studying computers and declared a music major. I graduated in 2006 with Bachelor of Arts degree in Music, and since then I've had a highly eclectic career as a performing artist while also working a variety of day jobs.</p>
  <p>Most recently, I returned to Augsburg to earn a K-12 teaching certificate, but in the middle of that process, I managed to get married and have my first child. My first year as a teacher was extremely stressful, and while I think I want to stay in the
    teaching profession, I am also interested in other options that will be better for my family life. I am now studying coding because it is a field where I have enough background to learn very quickly, and it will enable me to find work that pays well
    but lets me keep some flexibility in my schedule.</p>
</div>
<div class="center-block" id="portfolio">
  <h1 class="text-center">PORTFOLIO</h1>
  <h4 class="text-center" style="margin-bottom:30px">Here is some music that I've arranged or engraved. I'm not hosting my actual coding portfolio on Codepen, but you can find it <a href="http://www.steveherzog.net">here</a>.</h4>
  <div class="center-block row">
    <div class="col-xs-4"><img class="center-block" src="http://3.t.imgbox.com/qF1CFN6V.jpg" height=150 width=150></div>
    <div class="col-xs-4"><img class="center-block" src="http://4.t.imgbox.com/qZFIdaDY.jpg" height=150 width=150></div>
    <div class="col-xs-4"><img class="center-block" src="http://5.t.imgbox.com/wusA7WNh.jpg" height=150 width=150></div>
  </div>
</div>
<div class="center-block" id="contact">
  <h1 class="text-center">CONTACT ME</h1>
  <div class="row">
    <div class="col-xs-6">
      <form>
        <input class="form-item" id="contact-name" type="text" placeholder="Name" required><br>
        <input class="form-item" id="contact-email" type="email" placeholder="E-mail address" required><br>
        <textarea class="form-item" rows=4 placeholder="Message" required></textarea><br>
        <input class="form-item" type="submit" value="Submit">
      </form>
    </div>
    <div class="col-xs-6 text-center" style="padding-top:10px">
      <p>I respond to professional communication promptly.<br>You can also find me on social media.</p>
      <div class="wrapper center-block">
        <a class="icon facebook" href="https://www.facebook.com/steven.herzog.5"><span class="zocial-facebook" target="_blank"></span></a>
        <a class="icon linkedin" href="https://www.linkedin.com/in/steven-herzog-5989545"><span class="zocial-linkedin" target="_blank"></span></a>
        <a class="icon youtube" href="https://www.youtube.com/channel/UCSzEPK_mrSZ_k1CsTCcH7Nw" target="_blank"><span class="zocial-youtube"></span></a>
      </div>
    </div>

/*Downloaded from https://www.codeseek.co/SRHerzog/sample-portfolio-page-zBojba */
    @import url(http://weloveiconfonts.com/api/?family=zocial);
#header {
  background-color: #111;
  position: fixed;
  width: 80%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

a:link.header {
  color: #FFF
}

a:active.header {
  color: #000
}

a:visited.header {
  color: #FFF
}

#title {
  padding-left: 10%;
  padding-top: 10%;
  padding-bottom: 10%;
}

#title-img {
  border-color: white;
  border-radius: 50%;
  width: 100%;
  margin-top: 65px;
  margin-bottom: 15px;
}

.header-button {
  background-color: #622;
  border-right: 5px solid black;
  font-family: Monospace;
  padding-top: 10px;
  padding-bottom: 10px;
}

#bio {
  width: 85%;
  background-color: #FFF;
  padding-top: 35px;
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 20px;
  color: #000;
  margin-bottom: 10px;
}

#portfolio {
  width: 85%;
  background-color: #622;
  padding-top: 5%;
  padding-bottom: 5%;
  margin-bottom: 10px;
}

#contact {
  width: 85%;
  background-color: #FFF;
  padding-top: 35px;
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 20px;
  color: #000
}

body {
  background-color: #322;
  color: #FFF;
  font-size: 200%;
}

.form-item {
  margin-bottom: 10px;
}


/* zocial */

[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

.icon {
  display: inline-block;
  position: relative;
  color: #bdbdbd;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 1.47em;
  line-height: 2em;
  background-color: #fff;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0px 3px 0px #bdbdbd, 0px 3px 10px #bababa;
  -webkit-transition: background-color 250ms ease 0s;
  transition: background-color 250ms ease 0s;
}

.zocial-facebook {
  margin-left: -8px
}

.icon.facebook:hover {
  background-color: #4986c7;
}

.twitter:hover {
  background-color: #4cb6e8;
}

.linkedin:hover {
  background-color: #29a0cc;
}

.youtube:hover {
  background-color: #a32929;
}

.flickr:hover {
  background-color: #c257ad;
}

.email:hover {
  background-color: #d5b120;
}

a {
  text-decoration: none;
}

.icon:hover {
  color: #fff;
  box-shadow: 0px 3px 0px #686868, 0px 3px 10px #7e7e7e;
}

.icon:active {
  box-shadow: inset 0px 1px 4px #3d3d3d, 0px 0px 0px #bdbdbd;
  top: 3px;
}

.wrapper {
  color: #444;
}

textarea {
  height: auto;
}


/*Downloaded from https://www.codeseek.co/SRHerzog/sample-portfolio-page-zBojba */
    

Comments