Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">theDesigner</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about-me">About Me</a></li>
        <li><a href="#skill">Skills</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact-us">Contact Me</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<header>
  <div class="jumbotron vertical-center">
    <div class="container text-center jumbo-section">
      <h1>theDesigner Studios</h1>
      <h4>The Super Stars of Web Design & Development!</h4>
    </div>
    <div class="bounce"><a href="#about-me"><i class="fa fa-angle-down" aria-hidden="true"></i></a></div>
  </div>
</header>
<section id="about-me">
    <div class="container text-center">
      <div class="head-contain">
         <h1 class="sec-head">About Me</h1>
      </div>
      <div  class="row">
        <div class="about-me-inner">
          <div class="col-md-4">
            <div class="panel panel-default">
              <div class="panel-body">
                <i class="fa fa-user-circle icon-about" aria-hidden="true"></i>
              </div>
              <div class="panel-footer">I am Saurav from the beautiful city Jaipur in India. I want to become a freelance web designer and developer and someday would make a website that would change the world. </div>
            </div>
          
        </div>
        <div class="col-md-4">
          <div class="panel panel-default">
          <div class="panel-body">
            <i class="fa fa-graduation-cap icon-about" aria-hidden="true"></i>
          </div>
          <div class="panel-footer">I hold an engineering degree in electronics and communication and currently working in government of India.</div>
        </div>
          
        </div>
        <div class="col-md-4">
          <div class="panel panel-default about-panel">
          <div class="panel-body">
            <i class = "fa fa-refresh icon-about" aria-hidden="true"></i>
          </div>
          <div class="panel-footer">My hobbies are listening to music, coding, teaching and building new things.</div>
        </div>
          
        </div>
        </div>
    </div>
  </div>
</section>
<section id="skill">
  <div class="row">
    <div class="container">
      <div class="head-contain">
        <h1 class="sec-head text-center">My Skills</h1>
      </div>
      <div class="skill-section">
        <p>HTML</p>
        <div class="skill-item">
          <div class="skills html">70%</div>
        </div>

        <p>CSS</p>
        <div class="skill-item">
          <div class="skills css">40%</div>
        </div>

        <p>JavaScript</p>
        <div class="skill-item">
          <div class="skills js">0%</div>
        </div>
      </div>
        
    </div>
  </div>
</section>

<section id="portfolio">
    <div class="container text-center">
      <div class="head-contain">
         <h1 class="sec-head">Portfolio</h1>
      </div>
      <div  class="row">
        <div class="portfolio-inner">
          <div class="col-md-3">
            <div class="panel panel-default">
              <div class="panel-body portfolio-body">
              </div>
              <div class="panel-footer">Coming Soon</div>
            </div>
          
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
          <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
        </div>
    </div>
      <div  class="row">
        <div class="about-me-inner">
          <div class="col-md-3">
            <div class="panel panel-default">
              <div class="panel-body portfolio-body">
              </div>
              <div class="panel-footer">Coming Soon</div>
            </div>
          
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
          <div class="col-md-3">
          <div class="panel panel-default">
          <div class="panel-body portfolio-body">
          </div>
          <div class="panel-footer">Coming Soon</div>
        </div>
          
        </div>
        </div>
    </div>
  </div>
</section>
<section id="contact-us">
  <div class="row contact">
    <div class="container">
      <div class="head-contain">
        <h1 class="sec-head text-center">Contact Me</h1>
      </div>
      <div class="contact-section text-center">
        <a href="mailto:surgang81993@gmail.com"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        <a href="https://www.freecodecamp.org/saurav1993" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a>
        <a href="https://github.com/saurav1993" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
        <a href="https://www.facebook.com/saurav.ganguly2"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
        <a href="https://plus.google.com/116340658437101051353"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
          
      </div>
    </div>
  </div>
</section>
              
            
!

CSS

              
                a{
   text-decoration: none;
   color: #FFF;
}
.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
   margin-bottom: 0px;
   font-size:20px;
   font-family: 'Pacifico', cursive;
}
.navbar-brand {
  font-size:40px;
  font-family: 'Lobster', cursive;
}
.jumbotron{
    margin-top: -53px;
    height: 100vh;
    background-image:                   url("http://thepatternlibrary.com/img/b.jpg");
}
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
}
.jumbo-section > h1{
  font-family: 'Lobster', cursive;
  color:#FFF;
}
.jumbo-section > h4{
   font-family: 'Pacifico', cursive;
   color:#FFF;
}


.bounce {
    position:absolute;
    left:50%;
    bottom:0;
    margin-top:-25px;
    margin-left:-25px;
    color: #FFF;
    font-size: 100px;
  
    -webkit-animation:bounce 1s infinite;
    -moz-animation:bounce 1s infinite;
    -o-animation:bounce 1s infinite;
    animation:bounce 1s infinite;
    
  }
  
  @-webkit-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }
  
   @-moz-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }
  
   @-o-keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }
  
   @keyframes bounce {
    0%       { bottom:0px; }
    50%      { bottom:15px; }
    100%     {bottom:30;}
  }

.bounce > a{
  color:#FFF;
}



/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.skill-item {
    width: 100%; /* Full width */
    background-color: #ddd; /* Grey background */
}

.skills {
    text-align: right; /* Right-align text */
    padding-right: 20px; /* Add some right padding */
    line-height: 40px; /* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
    color: white; /* White text color */
}

.html {width: 70%; background-image:            url("http://thepatternlibrary.com/img/ao.gif");} /* Green */
.css {width: 40%; background-image:              url("http://thepatternlibrary.com/img/ao.gif");} /* Blue */
.js {width: 0%; background-image:                url("http://thepatternlibrary.com/img/ao.gif");} /* Red */

.sec-head{
  font-family: 'Pacifico', cursive;
  display: inline-block;
  padding: 0 15px;
  position: relative;
}
.sec-head:before,
.sec-head:after {
  background: #DDDDDD;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 50%;
  width: 100%
}
.sec-head:before {
  right: 100%;
}
.sec-head:after {
  left: 100%;
}
.head-contain {
  overflow: hidden;
  text-align: center;
}
.skill-section{
  margin:30px;
}
.contact-section{
  margin:30px;
}
.about-me-inner{
  margin: 20px 0 20px 0;
}
.portfolio-inner{
  margin: 20px 0 20px 0;
}
.icon-about {
  font-size: 80px;
}
#about-me{
  margin:50px 0 0 0;
}
#skill{
  margin:50px 0 0 0;
}
#portfolio{
  margin:50px 0 50px 0;
}
.portfolio-body{
  background-image : url("https://dummyimage.com/400%20X%20400/616666/fff");
    height: 200px;
  background-repeat:no-repeat;
  background-position:center;
}
.contact{
  background-image:                   url("http://thepatternlibrary.com/img/b.jpg");
  color:#FFF;
}
.contact-section{
  margin: 10px 0 10px 0;
  font-size : 30px;
  letter-spacing: 20px;
}

              
            
!

JS

              
                
              
            
!
999px

Console