cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="en">
<html>

<head>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="Images/logo.png" width="80px">
  <link href='https://fonts.googleapis.com/css?family=Bitter|Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
  <link rel="images" href="/Users/syedraza/Desktop/SibRaza.com/CSS/Images">
  <link rel="javascript" href="/Users/syedraza/Desktop/SibRaza.com/js/app.js">
  <link rel="php" href="/Users/syedraza/Desktop/SibRaza.com/form.php">
  <link rel="video" href="/Users/syedraza/Desktop/SibRaza.com/Videos/video.mp4">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <title> Sib Raza- Web Developer </title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>

  <script src="js/app.js"></script>
</head>

<body>
  <div class="header">
    <div class="container-fluid">
      <div class="row">
        <div class="background-wrap">
          <video id="video-bg-elem" width="20" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="https://res.cloudinary.com/dvrqqa6ja/video/upload/v1463177492/video_w84mx4.mp4" type="video/mp4">
        Vide Not Supported
      </video>
        </div>
      </div>
      <a href="index.html"><img class="logo" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/Drawing_jxvegx.png" width="80px" height="auto" /></a>
      <nav>
        <div class="nav">
          <ul class="nav nav-pills">
            <li><a class="navbar" href="index.html">Home</a></li>
            <li><a class="navbar" href="#tagline">About Me</a></li>
            <li><a class="navbar" id="contacts" href="#sidebar">Contact Me</a></li>
          </ul>
        </div>
      </nav>
      <div class="row">
        <div class="headings">
          <span>
    <h1 class="intro"> Sib Raza </h1>
  </span>
          <span>
    <h2 class="kicker"> Designer // Developer // Programmer </h2>
  </span>
        </div>
      </div>
    </div>
  </div>
  <div id="sidebar">
    <a href="index.html"><img class="logos" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/Drawing_jxvegx.png" width="80px" height="auto" /></a>
    <ul class="sides">
      <li class="side"><a class="things" href="index.html"> Home</a></li>
      <li class="side"><a class="things" href="#tagline"> About Me</a></li>
      <li class="side"><a class="things" href=#connect> Contact Me</a></li>
    </ul>
    <hr>
    <h3 class="call"> Interested? Send me an email about your project and let's work together.</h3>
    <div class="connect" id="connect">
      <form class="contact" name="form" method="post" action="form.php">
        <label for="name"> Name* </label><br>
        <input class="text" placeholder="First and Last Name" name="name" type="text" required/>
        <br></br>

        <form class="email" name="form" method="post">
          <label for="name"> Email* </label><br>
          <input class="text" placeholder="Enter Email Address Here " name="email" type="text" required/>
          <br></br>

          <form class="message" name="form" method="post">
            <label for="name">Tell Me About Your Project*</label><br>
            <textarea class="text" placeholder="Description of what your project is about" name="message" required></textarea>
            <br></br>

            <input class="submit" name="submit" type="submit" value="Submit" />
          </form>
    </div>
  </div>
  <section>
    <div class="container-fluid">
      <div class="slideanim" id="tagline">
        <div class="primary">
          <div class="row">
            <h3 class="me-section"> About Me </h3>
          </div>
          <div class="row">
            <div class="col-md-4">
              <img class="pencil" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177411/codes_vrpog0.png" />
            </div>
            <div class="col-md-4">
              <img class="me" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/m2_obfutd.jpg" />
            </div>
            <div class="col-md-4">
              <img class="web" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/pencil_cnn9mp.png" />
            </div>
          </div>
        </div>
        <hr>
        <div class="secondary slideanim">
          <div class="row">
            <p><em>I design, build, and create elegant websites for your business needs.</em> I am currently a Master's Degree Seeking Student in Software Engineering. I have diverse experience in front end web development. </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class ="charting">
  <h3 class="skills slideanim"> What I'm good at: </h3>
  <div class="container-fluid">
    <div class="row">
      <div class="charts slideanim">
        <canvas id="myChart" width="400" height="400">
</canvas>
      </div>
    </div>
  </div>
  </section>
  <h2>My Projects</h2>
  <div class="projecto">
    <h3 class="text-center act"> Weather App<a href="#" data-toggle="modal" data-target=".pop-up-1"> </h3>
<img src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1465839499/weather_tcjsxa.png" width="250" height="300" class="img-responsive img-rounded center-block" alt="">
</a>

<hr>

<!-- Thumbnail link for lion image -->
    <h3 class="text-center act"> Quote Generator App <a href="#" data-toggle="modal" data-target=".pop-up-2"> </h3>
<img src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1465839498/quotes_kchdkh.png" width="250" height="300" class="img-responsive img-rounded center-block" alt="">
</a>

  <div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-1">Weather App</h4>
        </div>
        <div class="modal-body">
         <p data-height="400" data-theme-id="0" data-slug-hash="KMzwWR" data-default-tab="result" data-user="sibraza" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/sibraza/pen/KMzwWR/">Weather App</a> by Sib Raza (<a href="https://codepen.io/sibraza">@sibraza</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
 
 <!--  Modal content for the lion image example -->
  <div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="myLargeModalLabel-2">Quote Generator App</h4>
        </div>
        <div class="modal-body">
        <p data-height="400" data-theme-id="0" data-slug-hash="KMPzxx" data-default-tab="result" data-user="sibraza" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/sibraza/pen/KMPzxx/">Quote Genereator</a> by Sib Raza (<a href="https://codepen.io/sibraza">@sibraza</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal mixer image -->
  </div>  
  
  
  
  <div class="section">
    <div class="container-fluid">
      <h2 class="services"> My Services </h2>
      <div class="row service-row slideanim">
        <div class="col-lg-4 col-md-4">
          <img class="mid1 img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177411/Code_idub6v.png" />
          <h3> Web Development </h3>
          <p>Your website completely tailored to your needs. It's very important that your website delivers clear and perfect content. I keep this ideal mindset in mind when creating your website. </p>
        </div>
        <div class="col-lg-4 col-md-4">
          <img class="mid1b img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/mobile_ike7mt.png" />
          <h3> Responsive Design </h3>
          <p> Most of the internet traffic comes from a smaller mobile screen. It is important that your website is reponsive enough to fit these smaller screens. Capture a larger audience by being flexible enough for it to display on all screens. </p>
        </div>
        <div class="col-lg-4 col-md-4">
          <img class="mid1c img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177411/Analytics_mvvtv6.png" />
          <h3> Analytics </h3>
          <p> Learn about where your visitors are coming from and deliver an effective business plan. Learn what search terms they are using to find you. </p>
        </div>
      </div>
      <div class="row slideanim">
        <div class="col-lg-4 col-md-4">
          <img class="mid1 img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177411/domain_y8qp9x.png" />
          <h3> Domain Hosting </h3>
          <p>Focus on what matters to you the most: Delivering your product. Let me worry about hosting your website and finding a server that will meet you needs. </p>
        </div>
        <div class="col-lg-4 col-md-4">
          <img class="mid1b img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/Customer_hmdfns.png" />
          <h3> Customer Service </h3>
          <p> Receive unmatched customer service. When you have a question or concern, I am availble around the clock. I only build websites that fit your needs. Be assured that you will be taken care of by a real person.</p>
        </div>
        <div class="col-lg-4 col-md-4">
          <img class="mid1c img-responsive" src="https://res.cloudinary.com/dvrqqa6ja/image/upload/v1463177412/Search_zpvfje.png" />
          <h3> SEO </h3>
          <p> When I create websites, I keep in mind on using the best SEO practices to allow your website to rank higher. As my network expands, I will continue to create more traffic for your website. </p>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <footer class="slideanim">
    <div class="row">
    <h2> Still Interested? <a href="#sidebar" id="reach"> Reach Out. </a> </h2>
    </div>
    <div class="row">
      <div class="icons">
    <ul class="social">
        <li><a href="https://www.linkedin.com/in/syed-raza-374a1a89" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
        <li><a href="https://github.com/sibraza15" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
        <li><a href="https://codepen.io/sibraza/" class="button social"><i class="fa fa-fw fa-codepen"></i></a></li>
      </ul>
      </div>
    </div>
    <div class="row">
    <h3 class="thanks"> Special thanks to icons8 for making some <a href="https://icons8.com/">awesome icons</a></h3>
    </div>
  </footer>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#contacts').click(function(e){
        e.preventDefault();
        $('#sidebar').toggleClass('visible');
      });
    });
  </script>
  <script>
    $(document).ready(function(){
      $('#reach').click(function(e){
        e.preventDefault();
        $('#sidebar').toggleClass('visible');
      });
    });
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>
            
          
!
            
              html {
  overflow-x: hidden;
 }
hr{
  width: 90%;
}
.secondary{
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
   width: 80%; 
  margin-left: 80px; 
}

footer{
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
  margin: 0px;
}
.headings{
  padding: 200px;
  color: #fff;
}
.section{
  margin-top: 100px;
  background-color: #f0f0f5;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.jumbotron{
  background-image: url(/Users/syedraza/Desktop/SibRaza.com/Images/background_porto.jpeg);
  color: white;
  background-size: cover;
}

.background-wrap{
  position: absolute;
  z-index: -1;
  overflow: auto;
  width: 100%;
  top: 0;
  left: 0;
  height: 648px;
  margin: 0;
  padding: 0;
  background: #000;
  background-size: cover;
  margin-bottom: 0;
  padding-bottom: 0;
}
#video-bg-elem{
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
}
.contact_section{
  margin-left: 100px;
}
#sidebar{
  background: #151718;
  overflow: scroll;
  width: 250px;
  height: 100%;
  position: fixed;
  display: block;
  left: -250px;
  top: 0px;
  transition: left  0.3s  linear;
}
#sidebar.visible{
  left: 0px;
  transition: left 0.3s linear;
  z-index: 1;
}
.sides{
  margin: 0px;
  padding: 0px;
}
.sides{
  list-style: none;
}
.things{
  color: #ccc;
  border-bottom: 1px solid #111;
  display: block;
  width: 180px;
  padding: 10px;
  text-decoration: none;

}
.call{
  color:#fff;
  margin-left: 20px;
  margin-right: 20px;
}
.header{
  font-family: 'Yanone Kaffeesatz', sans-serif;
  margin-top: 0px;
  margin-bottom: 0 auto;
  width: 100%;
  padding-bottom: 0px;
}
.logo {
  float: left;
  margin-top: 10px;
}
.logos{
  margin-bottom: 20px;
}
.navbar{
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  width: 100%;
  position: fixed;
}
  nav {
    float: right;
    margin-top: 26px;
  }
.navbar:hover{
  text-decoration: underline;
}
.charts{
  width: 40%;
  margin: 0 auto;
  display: block;
}
span{
  width: 100%;
}
h1{
  z-index: 1;
  font-size: 80px;
  color: #fff;
  text-align: center;
  clear: both;
}
h2{
  z-index: 1;
  font-size: 36px;
  color: #fff;
  text-align: center;
  clear: both;
  padding-top: -5px;
}

.container-fluid{
  padding: 0px;
  padding-right: 0;
}

.port{
  color: #ffffff;
  margin-top:450px;
  margin-right: 1200px;
}
.portfolio{
  width: 300px;
  height: 250px;
}
.padding{
  padding-left: 46px;

}
.one{
  margin-top: 46px;
}
.two{
  margin-top: 46px;
}
.three{
  margin-top: 46px;
}
.four{
  margin-top: 46px;
}
.services{
  margin-bottom: 40px;
}
.service-row{
  margin-bottom: 20px;
}
/*mid*/
.middy{
  margin-top: 150px;
  font-size: 36px;
  color: #333333;
  font-weight: 400px;
}
.mid1{
  padding-left: 0;
  margin-left: 0;
}
.mid2a{
  margin-right: 0;
  padding-right: 0;
}
/*footer*/
footer{
  width: 100%;
  height: 100px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 25px;
}
.thanks{
  margin-top: 40px;
  font-size: 12px;
  text-align: center;
}
.footy{
  color: #fff;
}
h3{
  color: #fff;
}
div.col-lg-4 {
  padding-left: 100px;
}
.connect{
  margin-top: 40px;
  margin-left: 10px;
}
div.social{
  float: left;
  margin-top: 20px;
}
a.social{
  margin-right: 15px;
}
label {
  color: #fff;
}
input.text{
  height: 20px;
  width: 80%;
  border-radius: 3px;
  border: none;
}
textarea.text{
  height: 200px;
  width: 80%;
  border-radius: 3px;
  border: 0;
  color: #000000;
}
.social{
  text-align: center; 
  margin:0 auto; 
}
.social li{
  list-style: none;
  display:inline-block; 
}
input.submit{
  width: 60px;
  height: 20px;
  background-color: #fff;
  color: #183951;
  border: none;
  border-radius: 30px;
  margin-bottom: 20px;
}
input.submit:hover{
  text-decoration: underline;
}
.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
.charting{
  background-color:#f0f0f5;
}
 #tagline{
  margin-top: 100px;
}
input.text:hover{
  background-color: #000000;
  color: #fff;
}
textarea.text:hover{
  color: #fff;
  background-color: #000000;
}

#sidebar{
  font-family: helvetica;
}
.intro{
  font-size: 100px;
  margin-left: 0px;
}
.kicker{
  font-size: 30px;
}
.pencil{
  margin-left: 30px;
}
.me{
  height: 200px;
  width:150;
  border-radius: 70%;
}
.primary{
  text-align: center;
vertical-align: middle;
  display: block;
  margin: 0 auto;

}

.me-section{
  text-align: center;
  vertical-align: middle;
  margin-bottom: 20px;
  font-size: 18px;
  color: # #000000;
}
.skills{
text-align: center;
vertical-align: middle;
line-height: 90px;
}
.projecto{
  margin-top: 50px; 
}
            
          
!
            
              'use strict'

$(function () {
var data = {
  labels: ["HTML", "CSS", "JavaScript", "Java", "Wordpress", "Boostrap"],
    datasets: [
        {
            label: "My Skill Set",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [100, 90, 80, 82, 85, 88]
        }
    ]
};
var options = {
  scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};
var ctx = document.getElementById("myChart").getContext('2d');
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
  });
});
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

            
          
!
999px
Loading ..................

Console