Portfolio Page

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <!--<script src="holder.js"></script>-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" class="holderjs">
<style>
  .red-text{
    color: red;
    }
    
    .white-text{
    color: white;
    }
    .purple-text{
      color: purple;
    }
    
    a {
     color: white;
    }
    
   body {
   background-color: black;
     
    } 
    h1{
    font-size: 90px;
    font-family: Lobster;
      text-color: white;
    }
</style>
<nav class="navbar navbar-light bg-primary" id="top">
  <a class="navbar-brand white-text" href="#">Fields of Visions</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#sample-projects"> Sample Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#highlights"> Highlights</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about"> About</a>
    </li>
  </ul>
</nav>
<div class="container fluid">

  <h1 class="text-center">Fields of Visions</h1>
  <h2 class="text-center white-text">Inovative Web and Mobile UX</h2>
  <h4 class=text-center>Follow me on</h4>
  <div class="row">
    <div class="col-xs-3 "><a href="https://twitter.com/fieldsofvisions>"
      <button class="btn btn-block btn-info">
        <i class="fa fa-twitter">twitter</i>
      </button></a>
    </div>
    <div class="col-xs-3 ">
      <a href="https://facebook.com/fieldsofvisions">
        <button class="btn btn-block btn-primary">
        <i class="fa fa-facebook"> facebook</i>
      </button></a>
    </div>
    <div class="col-xs-3 "><a href="https://www.instagram.com/fieldsofvisions"
      <button class="btn btn-block white-text" style="background-color: brown">
        <i class="fa fa-instagram">Instgram</i>
      </button></a>
    </div>
    <div class="col-xs-3 ">
      <button class="btn btn-block white-text" style="background-color: purple">
        <i class="fa fa-github"> GitHub</i>
      </button>
    </div>
  </div>
  <h4 class="text-center" id="sample-projects">Sample Projects</h4>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <a href="#" class="thumbnail">
          <img src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_1200.jpg?1448476701">
        </a>
        <a href="#" class="thumbnail">
          <img src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_1200.jpg?1448476701">
        </a>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <a href="#" class="thumbnail">
          <img src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_1200.jpg?1448476701">
        </a>
        <a href="#" class="thumbnail">
          <img src="https://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_1200.jpg?1448476701">
        </a>
      </div>
    </div>
    
    <div><h4 class="white-text" id="highlights">Highlights</h4></div>
    
      <ul>
        <li>Inovative</li>
        <li>Cutting Edge</li>
        <li>Mobile Ready</li>
        <li>android UX</li>
        <li>Solutions</li>
      </ul>
    
    <div>
      <img src="http://static4.depositphotos.com/1000393/326/i/450/depositphotos_3266793-Green-keyboard.jpg" class="img-responsive center-block">
    </div>
    <div>
      <h4 class="white-text" id="about">About</h4>
      <p>Well a little about me. I am hard working, inovative and not afraid to takea risk, but most of all I am willing to learn. I am 51 yrs old. I was born on the east coast. and raised on the west coast.But I have lived all over the united states and
        abroad. for the last 20 or so years I lived in Colorado Springs but i came back to the California to settle down with the love of my life.<br><br> I'm just starting out learning web development but my real interest is android. That's what I really
        want to learn. But I will learn anything that will help me become a better developer. Alot of my friends think that I'm too old to learn something new or try to start a new career, but <b class="white-text">at 51 years young I'm just getting started Baby!"</b>        I've always been a firm beleiver that if you keep your mind sharp and try to learn something new everyday you always have something to wake up for.I still want to look at the world though a childs eyes and the only way to do that is to keep learning
        new things that keep the world fresh and new.</p>
    </div>
    <div>
      <p><a href="#top">top</a></p>
    </div>
  </div>

/*Downloaded from https://www.codeseek.co/FieldsofVisions/portfolio-page-qNavbR */
    


/*Downloaded from https://www.codeseek.co/FieldsofVisions/portfolio-page-qNavbR */
    

Comments