Brant Bagnalls Portfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Brant Bagnalls Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#home">
            <strong>Home</strong>
          </a>
        </li>
        <li>
          <a href="#about">
            <strong>About</strong>
          </a>
        </li>
        <li>
          <a href="#portfolio">
            <strong>Portfolio</strong>
          </a>
        </li>
        <li>
          <a href="#contact">
           <strong>Contact</strong>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row row1" id="home">
    <div class="">
      <table class="table-fluid table-rounded max-table">
        <tr>
          <td>
            <h1 class="text-center">
              Brant Bagnall
            </h1>
            <h4 class="text-center">
              Web Developer
            </h4>
          </td>
      <tr>
        <td>
          <h1 class="text-center">
          <a target="_blank" href="https://github.com/brantbagnall" class="fa fa-github-square social2 pic-con">
          </a>
          <a target="_blank" href="https://twitter.com/" class="fa fa-twitter-square social2 pic-con">
          </a>  
            <a target="_blank" href="https://www.linkedin.com/in/brant-bagnall-372b08143/" class="fa fa-linkedin-square social2 pic-con">
          </a>
          </h1>
        </td>
      </tr>
        </tr>
      </table>
    </div>
  </div>
<div class="row row2" id="about">
  <div class="padding-margin">
    <h1 class="text-center padding">
      -About-
    </h1>
    <table class="col-xs-6 col-sm-6">
      <tr>
        <td>
        </td>
      </tr>
    </table>
    <table class="table-responsive max-width col-xs-3 col-sm-3">
      <tr>
        <td>
          <p>
            I am a budding web developer eager to help make beautiful and well designed web pages. I am currently going to DevMountain studying Full-stack web development. After DevMountain I plan to get a job and continue to study computer science, first at a community college then at a university. <br /><br /> If you would like to get in touch with me please email me or contact me through one of the social media sites listed on this webpage.
          </p>
        </td>
      </tr>
    </table>
  </div>
</div>
<div class="row row3" id="portfolio">
  <div class="padding-margin">
    <h1 class="text-center padding">
      -Portfolio-
    </h1>
  </div>
</div>
  <div class="row row3 row4">
    <div class="col-sm-6 col-xs-6">
    <table class="table-responsive table-pic1">
      <tr>
        <td style="padding:0px;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Commons.png/244px-Commons.png" alt="a placeholder image of a webpage of wikimedia" class="img-responsive">
        </td>
      </tr>
    </table>
    </div>
    <div class="col-md-4 col-xs-4 col-lg-4">
    <table class="table-responsive table2-1">
      <tr>
        <td>
          <h1>
            Lorem Ipsum
          </h1>
          <p class="text">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper nulla non massa consequat, ut sollicitudin mi mollis. Donec finibus accumsan tincidunt. Sed gravida tincidunt purus. Nulla sed metus ut ipsum molestie sodales et vitae augue. Phasellus nec felis sit amet tortor posuere scelerisque vitae quis nisi. Morbi ornare velit neque, nec dapibus tellus luctus id. Sed metus est, ultrices non dictum a, accumsan sit amet velit. Vestibulum posuere risus nec ex convallis gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc in nunc nec nibh imperdiet dignissim.
<br /><br />
Duis quis pellentesque libero. Etiam auctor mi et dui sagittis, rutrum posuere magna lacinia. Morbi vel massa mi. Vivamus molestie malesuada hendrerit. Curabitur aliquet justo vitae eros molestie, at venenatis lectus semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac malesuada felis.
<br /><br />
Nulla tristique porttitor rhoncus. Proin sagittis quam id porttitor tempus. Maecenas sed diam molestie, eleifend orci at, tempor quam. Ut a interdum nunc. Sed ut massa vehicula, venenatis quam eget, viverra turpis. Vivamus dictum augue quis metus volutpat, eget laoreet risus convallis. Integer cursus mi urna, at blandit tortor fermentum ultricies. Fusce tincidunt posuere augue, quis viverra urna pretium eget. Vestibulum accumsan mi at elit sagittis pulvinar. 
          </p>
        </td>
      </tr>
    </table>
    </div>
  </div>
  <div class="row row3 row4">
    
    <div class="col-md-6 col-xs-6 col-lg-6">
    <table class="table-responsive table2-2">
      <tr>
        <td>
          <h1>
            Lorem Ipsum
          </h1>
          <p class="text">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper nulla non massa consequat, ut sollicitudin mi mollis. Donec finibus accumsan tincidunt. Sed gravida tincidunt purus. Nulla sed metus ut ipsum molestie sodales et vitae augue. Phasellus nec felis sit amet tortor posuere scelerisque vitae quis nisi. Morbi ornare velit neque, nec dapibus tellus luctus id. Sed metus est, ultrices non dictum a, accumsan sit amet velit. Vestibulum posuere risus nec ex convallis gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc in nunc nec nibh imperdiet dignissim.
<br /><br />
Duis quis pellentesque libero. Etiam auctor mi et dui sagittis, rutrum posuere magna lacinia. Morbi vel massa mi. Vivamus molestie malesuada hendrerit. Curabitur aliquet justo vitae eros molestie, at venenatis lectus semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac malesuada felis.
<br /><br />
Nulla tristique porttitor rhoncus. Proin sagittis quam id porttitor tempus. Maecenas sed diam molestie, eleifend orci at, tempor quam. Ut a interdum nunc. Sed ut massa vehicula, venenatis quam eget, viverra turpis. Vivamus dictum augue quis metus volutpat, eget laoreet risus convallis. Integer cursus mi urna, at blandit tortor fermentum ultricies. Fusce tincidunt posuere augue, quis viverra urna pretium eget. Vestibulum accumsan mi at elit sagittis pulvinar. 
          </p>
        </td>
      </tr>
    </table>
    </div>
    <div class="col-sm-6 col-xs-6">
    <table class="table-responsive table-pic2">
      <tr>
        <td style="padding:0px;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Commons.png/244px-Commons.png" alt="a placeholder image of a webpage of wikimedia" class="img-responsive">
        </td>
      </tr>
    </table>
    </div>
  </div>
  <div class="row row3 row4">
    <div class="col-sm-6 col-xs-6">
    <table class="table-responsive table-pic1">
      <tr>
        <td style="padding:0px;">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Commons.png/244px-Commons.png" alt="a placeholder image of a webpage of wikimedia" class="img-responsive">
        </td>
      </tr>
    </table>
    </div>
    <div class="col-md-4 col-xs-4 col-lg-4">
    <table class="table-responsive table2-1">
      <tr>
        <td>
          <h1>
            Lorem Ipsum
          </h1>
          <p class="text">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper nulla non massa consequat, ut sollicitudin mi mollis. Donec finibus accumsan tincidunt. Sed gravida tincidunt purus. Nulla sed metus ut ipsum molestie sodales et vitae augue. Phasellus nec felis sit amet tortor posuere scelerisque vitae quis nisi. Morbi ornare velit neque, nec dapibus tellus luctus id. Sed metus est, ultrices non dictum a, accumsan sit amet velit. Vestibulum posuere risus nec ex convallis gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc in nunc nec nibh imperdiet dignissim.
<br /><br />
Duis quis pellentesque libero. Etiam auctor mi et dui sagittis, rutrum posuere magna lacinia. Morbi vel massa mi. Vivamus molestie malesuada hendrerit. Curabitur aliquet justo vitae eros molestie, at venenatis lectus semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac malesuada felis.
<br /><br />
Nulla tristique porttitor rhoncus. Proin sagittis quam id porttitor tempus. Maecenas sed diam molestie, eleifend orci at, tempor quam. Ut a interdum nunc. Sed ut massa vehicula, venenatis quam eget, viverra turpis. Vivamus dictum augue quis metus volutpat, eget laoreet risus convallis. Integer cursus mi urna, at blandit tortor fermentum ultricies. Fusce tincidunt posuere augue, quis viverra urna pretium eget. Vestibulum accumsan mi at elit sagittis pulvinar. 
          </p>
        </td>
      </tr>
    </table>
    </div>
  </div>
<div class="row row5 jumbotron" id="contact">
  <div class="col-md-6 col-xs-6 col-lg-6">
    <h2 class="text-center padding2">
      Contact me!
    </h2>
  </div>
  <div class="col-md-6 col-xs-6 col-lg-6">
    <p>
     <a target="_blank" href="https://github.com/brantbagnall" class="fa fa-github-square social2 pic-con">
          </a>
      -Github
    </p>
    <p>
      <a target="_blank" href="https://twitter.com/" class="fa  fa-twitter-square social2 pic-con">
          </a>
       -Twitter
    </p>
    <p>
     <a target="_blank" href="https://www.linkedin.com/in/brant-bagnall-372b08143/" class="fa fa-linkedin-square social2 pic-con">
          </a>
      -LinkedIn
    </p>
  </div>
</div>
<div class="row jumbotron row6">
  <footer>
    <ul id="footer-list" class="text-center">
      <li>
        <a href="#home" class="link">
          Home
        </a>
      </li>
      <li>
        <a href="#about" class="link">
          About
        </a>
      </li>
      <li>
        <a href="#portfolio" class="link">
          Portfolio
        </a>
      </li>
      <li>
        <a href="#contact" class="link">
          Contact
        </a>
      </li>
    </ul>
    <p class="text-center link">
      Copyright @ Brant Bagnall Web Design 2017
    </p>
  </footer>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Tangent160/brant-bagnalls-portfolio-brVemG */
body {
  background-color: white;
  color:black;
}
td{
  padding: 10px;
}
.table-rounded {
  background-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255, 0.85);
  margin: auto;
  border-radius: 10px;
}
.row1 {
  background-image: url(http://i63.tinypic.com/142elqa.png);
  padding: 150px 0px 150px 0px;
}
.row2 {
  background-color: silver;
  padding: 0px 0px 100px 0px;
}
.row3 {
  background-color: white;
}
.row4 {
  padding: 50px;
}
.row5 {
  background-color:lightgrey;
}
.row6 {
  background-color:grey;
  margin: -30px;
}
.padding2 {
  padding-top: 85px;
}
.social {
  max-width: 100px;
  max-height: 100px;
  padding: 5px;
}
.social2 {
  filter: contrast(0%) brightness(0%);
  margin: 10px;
}
.social2:hover {
  text-decoration: none;
}
.pic-con:hover {
  opacity: 0.5;
}
.padding {
  padding: 50px;
}
.move-right {
  position:relative;
  left: 260px;
}
.move-left {
  position:relative;
  right: 260px;
}
.max-table {
  max-width: 300px;
  min-width: 300px;
}
.table2 {
  margin:auto;
}
.table-pic1 {
  border: 3px solid blue;
  margin-left:auto;
}
.table-pic2 {
  border: 3px solid blue;
  margin-right:auto;
}
.table2-1 {
  margin-right:auto;
  max-width: 550px;
}
.table2-2 {
  margin-left:auto;
  max-width: 550px;
}
@media only screen and (max-width: 770px) {
	.text {
		font-size:0.8em;
	}
}
#footer-list li:nth-child(4) {
  border-right: none;
}
#footer-list li {
  display: inline;
  padding: 0px 20px;
  border-right: 1px solid white;
}
.link {
  color:black;
}

Comments