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 tagg1436, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tagg1436 ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Portfolio Page</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>

  <!--This is just a practice portoflio page for the company I work for Sunrise Housing. I have complete and 100% rights to use their text and images because I along with others helped build these things. However the coding is completely mine and self developed. You can see the current website they have at sunrisehousing.com to make sure I didnt copy from any of their current code. -->
<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=Open+Sans+Condensed:300,700" rel="stylesheet">
<nav>
<ul>
    <li><a href="#Home" taget="_blank">Home</a></li>
     <li><a href="#Floor Plan 1" taget="_blank">Floor Plans</a></li>
  </ul>
</nav>
<a name="Home"></a> 
<img id="banner" src="http://sunrisehousing.com/zachftp/images/7232-415-kitchen.jpg">
<body>
 
  <div class="row" id="social">
 <div class="col-md-2">
    <p>
  <button type="button"><a href="https://www.instagram.com/sunrisehousing/?hl=en" target="_blank">Instagram</a></button>
  </p>
  </div>
<div class="col-md-2">
  <p>
  <button type="button"><a href="https://www.facebook.com/SunriseHousing/" target="_blank">Faceboook</a></button>
  </p>
  </div>
  </div>
  <br>
 <br>
  
  <h1 class="text-danger">Floor Plan Design Portfolio</h1>
  
  <br>
  
  <p>My name is Tanner Ewoldt and I currently work at Sunrise Housing, a custom home builder. I am the floor plan designer for these guys and also the graphic and web designer.</p> 
  
  <p>Actually if you check out our website I am actually featured on the website as one of the team members. I did not code their current website. A previous coder by the name of Jordan actually did. Long story short, he was hired to develope the original site and now im taking over from here. Thus why I'm currently enrolled in freecodecamp.com. <a name="Floor Plan 1"></a></p>
 
  <br>
  <br>

  
  <br>
  <div class="row">
    <div class="col-md-6">
       <h2>Floor Plan #1</h2>
  <a href="#"> <img src="http://sunrisehousing.com/zachftp/images/IMG_1111-b.jpg"></a>
  <p>1,500 square foot modular home that is completely customizable on the inside. Made by Adventure Homes factory.</p>
  </div>
 
 
 <br>
 <br>
   <div class="col-md-6"> 
<h2>Floor Plan #2</h2>
  
  <a href="#"> <img src="http://sunrisehousing.com/zachftp/images/display6-s2.jpg"></a>
  <p>1,900 square foot manufactured home that is completely customizable on the inside. Made by Schult Homes factory.</p>
  </div>
  </div>
  
<div class="row">
    <div class="col-md-6">
       <h2>Floor Plan #3</h2>
  <a href="#"> <img src="http://sunrisehousing.com/zachftp/images/dm5big1.jpg"></a>
  <p>1,600 square foot modular home that is completely customizable on the inside. Also made by Adventure Homes factory.</p>
  </div>
 
 
 <br>
 <br>
   <div class="col-md-6"> 
<h2>Floor Plan #4</h2>
  
  <a href="#"> <img src="http://sunrisehousing.com/zachftp/images/IMG_8735-b.jpg"></a>
  <p>1,700 square foot modular home that is completely customizable on the inside. Made by our high end Rochester Homes builder.</p>
  </div>
  </div>
 
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tagg1436/portfolio-page-LLEzGo */
nav {
  z-index: 9999;
}

p {
margin-left: 10%;  
margin-right: 10%;
font-family: helvetica;
}

body {

  align: center;

}

h1 {
  font-family: Open Sans Condensed;
  font-weight: 700;
  margin-left: 10%;
}

h2 {
  margin-left: 10%;
  font-family: Open Sans Condensed;
  font-weight: 300;
  color: red;
}

li {
  display: inline;
  margin-left: 10%;
}

ul {
    position: fixed;
    top: 0;
    width: 100%;
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    z-index: 9999;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

.box {
  margin: 10%;
  max-width: auto;
  background-color: white;
}

img {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;  
}

img a:hover {
  background-color: #555;
}

#banner {
  width: 110%;
  margin-left: -5%;
  margin-right: -10%;
  max-height: 850px;
}

#social {
  margin-left: 10%;
}

Comments