My Tempfolio

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

Just a test portfolio page for freeCode Camp. The project was supposed to be an actual portfolio, but I'm a beginner, so I was sure this was gonna turn out way too lame to be my definitive portfolio. So I decided to call it "My Tempfolio" - temporary until I learn more and make it better.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>My Tempfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <nav class="fixed-top">
  <div class="dropdown" style="padding-top: 15px; padding-left: 30px;">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Jump to
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#about-me">About me</a></li>
    <li><a href="#my-work">My work</a></li>
    <li><a href="#social">Social</a></li>
  </ul>
</div>
</nav>

<div id="quote" class="container row content">
  <div class="row">
    <div class="col-sm-12">
      <span class="quote">"Failing is just another word for growing"</span>
    </div>
  </div>
</div>

<div id="about-me" class="container row content">
  <div class="col-sm-8">
    <h1>About me</h1>
    <p>Currently working as a Techincal Writer and living in Blumenau - SC - Brazil</p>
    <p>Graduated in Advertising, proficient in redaction and content management</p>
    <p>Lover and hobbyist of technology, gadgets, music, series and movies from which I know all the lines</p>
  </div>
  <div class="col-sm-4">
    <img src="https://res.cloudinary.com/jamesns/image/upload/v1490924527/Tempfolio/portrait-placeholder.png" style="width: 200px; height: 200px;" class="img-responsive" />
  </div>
</div>

<div id="my-work" class="container row content" style="background: grey">
  <div class="col-sm-4">
    <img src="https://res.cloudinary.com/jamesns/image/upload/v1490924560/Tempfolio/lightbulb.png" style="text-align: center" class="img-responsive" />
  </div>
  <div class="col-sm-8" style="text-align: center">
    <h1>My work</h1>
    <div style="float: left">
    <img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" /><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" /><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" />
    <img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" /><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" /><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924590/Tempfolio/coming-soon-placeholder.png" class="img-work" />      
    </div>
  </div>
</div>

<footer id="social">
  <div class="container-fluid row">
    <div class="col-sm-12">
      <a href="https://www.linkedin.com/in/jamessabel" target="_blank"><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924628/Tempfolio/linkedin-icon.png" title="LinkedIn" class="img-responsive" /></a>
      <a href="https://twitter.com/jamessabel" target="_blank"><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924662/Tempfolio/twitter-icon.png" title="Twitter" class="img-responsive" /></a>      
     <a href="https://www.facebook.com/jnsabel" target="_blank"><img src="https://res.cloudinary.com/jamesns/image/upload/v1490924684/Tempfolio/facebook-icon.png" title="Facebook" class="img-responsive" /></a>
    </div>
  </div>
</footer>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jamessabel/my-tempfolio-YNMOya */
/* Imports */
@import url('https://fonts.googleapis.com/css?family=Montserrat');

/* Main elements */
nav {
  background-color: #000;
  height: 80px;
}

#quote {
  background: url('https://res.cloudinary.com/jamesns/image/upload/v1490924728/Tempfolio/cool-simple-wallpaper.jpg');
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
}

.content {
  height: auto;
  margin: 0px 30px 0px 30px;
}

/* Typography */
.quote {
  font-family: Montserrat, Helvetica, sans-serif;
  font-size: 70px;
}

#about-me, #my-work {
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: Montserrat, Helvetica, sans-serif;
}
#about-me {
  background: url('https://res.cloudinary.com/jamesns/image/upload/v1490924789/Tempfolio/black-pattern-background.jpg');
}
#about-me h1 {
  color: #9b9b9b;
  text-align: right;
}
#about-me p {
  font-size: 20px;
  color: #fff;
  text-align: right;
}
#my-work h1 {
  color: #383838;
  text-align: center;
}
.img-work {
  height: 100px;
  width: auto;
  padding: 5px;
}

footer {
  padding-top: 20px;
  margin-bottom: 20px;  
  height: 80px;
  text-align: center;
}
footer img {
  height: 60px;
  width: auto;
}

Comments