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.

            
              
        
        <!-- Navigation Sidebar -->
        <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
        <nav id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i>                   </a>
                <li>
                    <a href="#top" onclick="$('#menu-close').click();">Home</a>
                </li>
                <li>
                    <a href="#about" onclick="$('#menu-close').click();">About</a>
                </li>
                <li>
                    <a href="#skills" onclick="$('#menu-close').click();">Skills</a>
                </li>
                <li>
                    <a href="#portfolio" onclick="$('#menu-close').click();">Portfolio</a>
                </li>
                <li>
                    <a href="#contact" onclick="$('#menu-close').click();">Contact</a>
                </li>
            </ul>
        </nav>
        
        <!-- Header -->
        <header id="top" class="header">
            <div class="intro-message">
                <h1>Howdy!</h1>
                <h2>I'm Gaurav Shah</h2>
                <h3>Graduate Student | Texas A&M University | College Station</h3>
            </div>
        </header>
        
        
        <section id="about">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <img src="https://res.cloudinary.com/gauravshah/image/upload/c_limit,h_506,w_555/v1482631726/My_Small_Image_oiq05d.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-6 text-center">
                        <h1 class="text-uppercase"><span class="first-word">About Me</span></h1>
                        <hr class="star-primary">
                        <p>I have one year of experience in web development. I was crazy enough to co-found an e-commerce grocery startup in India. My goal is to become a Full-Stack Web Developer and learn the latest technologies; putting in all the hard work that is required. I am currently seeking internship  for Summer 2017.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <article id="skills" class="container-fluid">
            <h1 class="text-center text-uppercase"><span class="first-word">My Skills</span></h1>
            <div id="piechart"></div>           
        </article>
        
        <!-- Portfolio -->
        <figure id="portfolio" class="no-padding">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-center text-uppercase"><span class="first-word">My Portfolio</span></h1>
                  
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-xs-18">
                        <a href="https://codepen.io/gauravshah/pen/gLZyaj" target="_blank" class="portfolio-box">
                            <img class="img-responsive" src="https://res.cloudinary.com/gauravshah/image/upload/v1482606479/Ayn_Rand_Tribute_Page_wx08bo.jpg" alt="Project-1">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-category text-faded">
                                        FreeCodeCamp<hr class="horizontal-line">
                                    </div>
                                    <div class="project-name">
                                        Ayn Rand Tribute Page
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-6 col-xs-18">
                        <a href="#" class="portfolio-box">
                            <img class="img-responsive" src="https://res.cloudinary.com/gauravshah/image/upload/v1482606479/Ayn_Rand_Tribute_Page_wx08bo.jpg" alt="Project-2">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-category text-faded">
                                        FreeCodeCamp<hr class="horizontal-line">
                                    </div>
                                    <div class="project-name">
                                        My Portfolio
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </figure>
        
        <!-- Footer -->
        <footer id="contact" class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <span class="copyright">
                    </span>
                </div>
                <div class="col-md-4">
                    <ul class="list-inline social-buttons">
                        <li><a href="https://www.linkedin.com/in/gauravshahtamu" target="_blank"><i class="fa fa-linkedin"></i></a>
                        </li>
                        <li><a href="https://github.com/gauravshah786" target="_blank"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </footer>
  
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Federo|Redressed);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Dynalight);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);

html, body {
    width: 100%;
    height: 100%;
}
body {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

hr.star-primary {
    padding: 0;
    border: none;
    border-top: solid 5px;
    text-align: center;
    max-width: 250px;
    margin: 25px auto 30px;
}
hr.star-primary:after {
    content: "\f001";
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    top: -0.8em;
    font-size: 2em;
    padding: 0 0.25em;
}
hr.star-primary {
    border-color: #17211f;
}
hr.star-primary:after {
    background-color: #e3ebec;
    color: #2C3E50;
}
#about h1, #skills h1, #portfolio h1 {
    color: #152840;
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-size: 36px;
}
.first-word {
    color: #ea6060;
    font-weight: 700;
}

/* Header */
.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url("https://lh3.googleusercontent.com/xaIbTQiIT1WAPD4xRMY_BXsXDh2foPCJgnGAjAcl1WOg_lKTY9F8nZpXTB8rLZpnLHIOeuDmxe0=s640-h400-e365") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.intro-message {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #fff;
}
.intro-message h1 {
    margin: 0;
    padding: 0;
    font-size: 5.5em;
    font-weight: 700;
    color: rgba(5, 5, 8, 0.67);
}
.intro-message h2 {
    font-family: Dynalight, cursive;
    font-size: 4em;
    color: rgba(5, 5, 8, 0.67);
}
.intro-message h3 {
    font-family: "Abril Fatface","Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.5em;
    color: rgba(5, 5, 8, 0.67);
}

/* Sidebar */
#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    transform: translateX(250px);
    overflow-y: auto;
    background: #3fb579;
    -webkit-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
}
.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}
.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
    margin-top: 30px;
    margin-bottom: 50px;
    letter-spacing: 2px;
}

.sidebar-nav > .sidebar-brand a {
    color: #fff;
    font-weight: 700;
}
.sidebar-nav > .sidebar-brand a:hover {
    background: none;
    color: #fff;
}
#menu-toggle {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
}
#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.toggle {
    margin: 5px 5px 0 0;
}
.btn-dark {
    border-radius: 0;
    color: #fff;
    background: rgba(0,0,0,0.4);
}
.social-btns {
    position: absolute;
    top: 70%;
    left: 15%;
    font-size: 24px;
    padding: 10px;
}
.social-btns a {
    color: #fff;
    padding: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* About */
#about {
    padding: 50px;
    background-color: #e3ebec;
}

#about p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
}

/* Skills */
#skills {
    background: url("https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/11/Essential-Skills-Top-10-shutterstock_285431867.png") no-repeat center fixed;
    background-size: cover;
    padding: 100px;
}
#skills h1 {
    color: #fff;;
}

/* Portfolio */
.text-faded {
    color: rgba(255,255,255,0.7);
}
.no-padding {
    padding: 100px;
    background-color: #e3ebec;
}
.portfolio-box {
    position: relative;
    display: block;
    max-width: 650px;
    margin: 0 auto;
}
.portfolio-box .portfolio-box-caption {
    color: white;
    opacity: 0;
    display: block;
    background: #152840;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    padding: 0 15px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px;
}
.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}
.portfolio-box:focus {
    outline: none;
}
.horizontal-line {
    max-width: 200px;
}

/* Footer */
footer {
    padding: 25px 0;
    text-align: center;
    background-color: #333;
    color: white;
}
footer span.copyright {
    line-height: 40px;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul.social-buttons {
    margin-bottom: 0;
}
ul.social-buttons li a {
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    font-size: 24px;
    line-height: 40px;
    color: white;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
    background-color: #41C4AB;
}


/* Media Queries for Portfolio */
@media (min-width: 768px) {
    .portfolio-box {
        margin-bottom: 30px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .star-primary {
        max-width: 300px;
    }
    .intro-message h2 {
    font-size: 2.5em;
    }
    .intro-message h3 {
        font-size: 1.5em;
    }
    #about h1, #skills h1, #portfolio h1 {
        font-size: 26px;
    }
    
    #portfolio h1 {
        position: relative;
        left: -25px;
        width: 200px;
    }
    .portfolio-box {
        left: -80px;
        margin-bottom: 30px;
        height: 175px;
        width: 300px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 12px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 12px;
    }
}
            
          
!
            
              google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        
        // A column for custom tooltip content
        dataTable.addColumn({type: 'string', role: 'tooltip'});
        dataTable.addRows([
          ['jQuery', 15,'15 months experience in jQuery'],
          ['JAVA', 15, '15 months experience in JAVA'],
          ['Spring MVC', 12, '12 months experience in Spring MVC'],
          ['JSON', 10, '10 months experience in JSON'],
          ['AJAX', 15, '15 months experience in AJAX']  
        ]);
        
      var options = {
          tooltip: { isHtml: true },
      }
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(dataTable,options);
      }

$(document).ready(function () {
    // Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
});

$(window).resize(function(){
  drawChart();
});

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

Console