Portfolio

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

Thumbnail
This awesome code was written by keks411, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright keks411 ©
  • HTML
  • CSS
  • JavaScript
    <!--Preload images-->

<div id="preloader">
	<img src="https://imageshack.com/i/pbne4zYJj" width="1" height="1" />
	<img src="https://imageshack.com/i/hlkm46Qsj" width="1" height="1" />
	<img src="https://imageshack.com/i/hlXuuGYUj" width="1" height="1" />
	<img src="https://imageshack.com/i/hl2lDebzj" width="1" height="1" />
</div>





<body data-spy="scroll" data-target="#nav" data-offset="10">
  <div class="background-dark">
    <nav id="nav" class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Portfolio</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#jskills">Social</a></li>
          <li><a href="#projects">Projects</a></li>
        </ul>
      </div>
    </nav>

    
   

    <div class="jumbotron">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-2"></div>
          <div class="col-lg-8">
            <p id="me">All-in-one solution from Germany</p>
          </div>
          <div class="col-lg-2"></div>
        </div>
      </div>
    </div>


    <div id="jskills" class="jumbotron">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-5"></div>
          <div class="col-lg-2"><img class="img-circle img-responsive" src="http://imageshack.com/a/img911/4844/7GWMYS.jpg" alt="Headshot" width="200" height="218">
          </div>
          <div class="col-lg-5"></div>
        </div>

        <div class="row">
          <div class="col-lg-2"></div>
          <div class="col-lg-8">
            <p id="skills">Experience in Windows, Linux, Networking, Administration, Web-Development</p>
          </div>
          <div class="col-lg-2"></div>
        </div>

        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-4">
            <div align="center">

              <!-- Github Profile -->
              <a href="https://github.com/keks411">
                <button title="Github" class="btn btn-github"></button>
              </a>

              <!-- FB Profile -->
              <a href="https://www.facebook.com/steven.osterwald.9">
                <button title="Facebook" class="btn btn-facebook"></button>
              </a>

              <!-- FCC Profile -->
              <a href="https://www.freecodecamp.com/keks411">
                <button title="FreeCodeCamp" class="btn btn-fcc"></button>
              </a>

              <!-- LinkedIn Profile -->
              <a href="https://www.linkedin.com/in/steven-osterwald-96066110a?trk=nav_responsive_tab_profile_pic">
                <button title="LinkedIn" class="btn btn-linkedin"></button>
              </a>
            </div>
          </div>
          <div class="col-lg-4"></div>
        </div>
      </div>
    </div>


    <!-- Projects from here on -->
    <div class="jumbotron pbackground">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-4"></div>
          <div class="col-lg-4">
            <p></p>
            <p id="projects"><u>Projects</u></p>
          </div>
          <div class="col-lg-4"></div>
        </div>
        <div class="row">
          <div align="center" class="col-lg-3">
            <a href="https://codepen.io/keks411/full/obEPZr/"><img src="http://imageshack.com/a/img910/3659/AmHHTE.jpg" class="img-thumbnail images" title="Portfolio" alt="placeholder"></a>
          </div>

          <div align="center" class="col-lg-3">
            <a href="about:blank"><img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-3-1024x769.png" class="img-thumbnail images" alt="placeholder"></a>
          </div>

          <div align="center" class="col-lg-3">
            <a href="about:blank"><img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-3-1024x769.png" class="img-thumbnail images" alt="placeholder"></a>
          </div>

          <div align="center" class="col-lg-3">
            <a href="about:blank"><img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-3-1024x769.png" class="img-thumbnail images" alt="placeholder"></a>
          </div>
        </div>


      </div>
    </div>
</body>

/*Downloaded from https://www.codeseek.co/keks411/portfolio-obEPZr */
    @media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}



.background-dark {
  background-image: url("http://imageshack.com/a/img911/1944/bAbQ4c.jpg");
}

.jumbotron {
  background-color: transparent;
}

#me {
  text-align: center;
  color: silver;
  font-family: 'Open Sans', sans-serif;
  font-size: 46px;
  margin-top: 70px;
  margin-bottom: 500px;
}

#skills {
  text-align: center;
  color: silver;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  margin-top: 30px;
}

#jskills {
  margin-bottom: 100px;
}

#projects {
  text-align: center;
  color: silver;
  font-family: 'Open Sans', sans-serif;
  font-size: 46px;
  margin-top: 130px;
  margin-bottom: 60px;
}

.pbackground {
  background-image: url("https://imageshack.com/i/p7aGWUNjj");
  margin-bottom: -100px;
}

#contact {
  font-size: 12px;
  margin-top: 150px;
}
.images {
  width:300px;
  height:200px;
}



.btn-github {
  border-radius: 0;
  width: 50px;
  height: 50px;
  background-image: url("http://imageshack.com/a/img905/4219/7U11OA.jpg")
}

.btn-github:active,
.btn-github:hover {
  background-image: url("https://imageshack.com/i/pbne4zYJj")
}

.btn-facebook {
  border-radius: 0;
  width: 50px;
  height: 50px;
  background-image: url("https://imageshack.com/i/p5Z8ALQxj")
}

.btn-facebook:active,
.btn-facebook:hover {
  background-image: url("https://imageshack.com/i/hlkm46Qsj")
}

.btn-fcc {
  border-radius: 0;
  width: 50px;
  height: 50px;
  background-image: url("http://imageshack.com/a/img903/9835/P4iEif.jpg")
}

.btn-fcc:active,
.btn-fcc:hover {
  background-image: url("https://imageshack.com/i/hlXuuGYUj")
}

.btn-linkedin {
  border-radius: 0;
  width: 50px;
  height: 50px;
  background-image: url("https://imageshack.com/i/hlIXnHWxj")
}

.btn-linkedin:active,
.btn-linkedin:hover {
  background-image: url("https://imageshack.com/i/hl2lDebzj")
}


/*Downloaded from https://www.codeseek.co/keks411/portfolio-obEPZr */
    

Comments