Timao Deloucos Portfolio

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Timao Deloucos Portfolio</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <body>

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<!-- Navigation bar STILL NEED TO MAKE IT COLLAPSE WHEN SCROLLING ((AND TO MAKE IT SUITABLE FOR MOBILE PHONE SCREENS DONE))-->
<div class="header">
   <i class="fa fa-bars"></i>
<nav class="navbar navbar-fixed-top navbar-collapse">
  <ul class = "navbar-brand navbar-collapse">
    <li><a href="#home">Home</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>

<!-- About Me -->
 <a name="home"></a>
  <div class="container home-container img-responsive">
    <div class="row">
      <div class="col-sm-12">
        <div class="header-text Quicksand"><h1 class="aboutH1"><strong>Timao Deloucos</strong></h1>
      </div>
   </body>
  </div>
</div>
<!--Portfolio sections -->
<a name="portfolio"></a>
<div class="container-fluid content-about">
    <div class="row content">
      <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
      </div>
      <h4 class="abouth4">Welcome to my portfolio site. Check out some of the projects I have put together below.</h4>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="firstProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
              Box 1
            </div>
          </div>
        <div class="secondProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 2
            </div>
        </div>
        <div class="thirdProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 3
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="fourthProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 4
            </div>
        </div>
        <div class="fifthProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 5
            </div>
        </div>
        <div class="sixthProject col-sm-6 col-md-4">
            <div class="bs-grid-big">
                Box 6
            </div>
        </div>
    </div>
</div>
  </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/timaodeloucos/timao-deloucos-portfolio-GqPwKQ */
@media screen and (max-width: 500px) {
  nav {
    padding: 0;
  }
  nav li {
    display: block;
    padding: 0px;
  }
}

.body { 
padding = 0;
margin = 0;
}

.navbar-collapse {
  font-family: 'Quicksand', sans-serif;
  padding: 10px;
  margin: 0px auto;
}

nav li {
  display: inline-block;
  margin: 1px 15px;
  padding-top: 5px;
  text-align: center;
}

.home-container {
  font-family: 'Quicksand', sans-serif;
  padding-top: 40%;
  text-align: center;
  background: url('https://i2.walesonline.co.uk/lifestyle/fun-stuff/article8067281.ece/ALTERNATES/s1200/Lake-Padarn-3-Hefin-Owen.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  width:100%;
  color: #fff;
}

.aboutH1 {
  margin-top: 40px;
  margin-bottom: 15px;
  padding: 10px;
}

.abouth4 {
  padding: 40px;
}

.content-about {
  background: url('http://www.webexhibits.org/causesofcolor/images/content/istock000003101354smallZ.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100%; 
  width: 120%;
  margin-left: -10%;
}

.firstProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px;
}

.secondProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px; 
}

.thirdProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px;
}

.fourthProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px;
}

.fifthProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px;
}

.sixthProject {
  height: 250px;
  width: 250px;
  background-color: blue;
  margin: 5%;
  margin-left: 10%;
  padding: 5px;
}
        

Comments