Item: My Portfolio
Rating: 3.4
Author: gautamramuvel

0 Downloads
46 Views
Tweet
Download Now View Demo

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

More from gautamramuvel

My Portfolio

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

Technologies

Comments

More from gautamramuvel

Tribute Page

Abdul Kalam - Tribute Page

My Portfolio

You Might Also Like

Drawing circles

Everything is Free Until Sunday!

A Pen by Daksh Dobhal

Convert Image to Grayscale

A Pen by Kristy Sullivan

SVG spinner

A Pen by Alberto Cano

HTML5 draggable