My Portfolio

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

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

Technologies

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

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

  <header>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</header>
<section id ="s1">
<div class = "pageone text-center">
  <ul class = "nav nav-pills">
    <li>
      <a href="#s1">Gautam Ramuvel</a>
    </li>
    <li class = "pull-right">
      <a href="#s2">About Me</a>
    </li>
    <li class = "pull-right">
      <a href="#s3">Portfolio</a>
    </li>
  </ul>
  <div class ="block text-center">
    <h1>Hey dude!</h1>
    <h2>Live a life less ordinary!</h2>
  </div>  
  <div class= "btnList text-center">
    <a class ="btn btn-default" href="https://www.facebook.com/gautamramuvel" target ="_blank">Facebook</a>
    <a class ="btn btn-default" href="https://twitter.com/GAUTAMRAMUVEL" target ="_blank">Twitter</a>
    <a class ="btn btn-default" href="https://github.com/gautamramuvel" target ="_blank">Github</a>
  </div>
</div>
<section id ="s2">
<div class = "pagetwo">
  <div class ="row">
    <div class ="col-md-6 text-center">
      <h1>Gautam Ramuvel</h1>
      <p>I am self taught Web Designer and Developer. I am currently doing my intern as a content developer in one of the startups in my city.<br />My passion is to use technology based solutions to help and solve real world challenges.</p>
   </div>
    <div class ="col-md-6 text-center">
      <img style ="border:1px solid" src ="https://i.imgsafe.org/793c743110.jpg" class ="me"/>
  </div>
</div>
  </div>
<section id ="s3">
<div class ="pagethree"> 
  <div class ="block text-center">
    <h1>Nothing to show on Portfolio!</h1>
    <h2>Yet to work on projects..</h2>
  </div>
</div>
<div class ="foot text-center">
  <p>Gautam Ramuvel. All Rights Reserved.</p>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/gautamramuvel/my-portfolio-qNwEKo */
.nav-pills
{
  font-size: 2em;
  background-color:black;
  margin-bottom:10%;
  postion: fixed;
  overflow: hidden;
}

body
{
  background-color:white;
  font-family: Lobster;
  color:white;
}
.pageone
{
  background:url("https://images.template.net/wp-content/uploads/2015/11/25190652/Best-Sky-Plain-Background-Ever-Download.jpg");
  background-size: cover;
  height: 600px;
}
h1
{
  padding:0;
  margin-top:0px;
  font-size:75px;
}

.btn-default
{
  margin-top: 2%;
  background-color:black;
  border-color:black;
  color:#337ab7;
  font-size: 30px;
}

.block
{
  background-color:black;
  opacity:0.9;
  padding: 15px;
  width:50%;
  margin-right:auto;
  margin-left:auto;
  margin-top:auto;
  margin-bottom:auto;
  border-radius:25px;
}

.pagetwo
{
  background:url("https://shekinahhouse.co.za/wp-content/uploads/2015/01/colors-15646704.jpg");
  background-size:cover;
  height:700px;
  padding-top:5%;
}

p
{
  font-size:2.2em;
}

.me
{
  height: 600px;
  margin-right: auto;
  margin-left: auto;
}

.pagethree
{
  background:url("http://wallpapercave.com/wp/Zkc7mGk.jpg");
  background-size:cover;
  height:400px;
  padding-top:5%;
}

.foot
{
  font-size: 0.9em;
  background:url("http://wallup.net/wallup.php?src=wp-content/uploads/2016/05/25/324203-floral-pattern.jpg&w=800&h=600&isim=wallup-286215.jpg");
  height:60px;
}

Comments