123

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!-- Custom CSS -->
    <link href="css/dasdezine.css" rel="stylesheet">
  
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" class="index">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-color navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </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-left">
                    <li class="page-scroll">
                        <a href="#page-top">Home</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#myLikes">What I Do</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->
    <header>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-text">
                        <span class="name">Geek Vader</span>
                        <span class="skills">May the Knowledge be with you</span>
                        <hr class="star-light">
                    </div>
                    <img class="img-responsive img-bigScreen" src="https://res.cloudinary.com/dasdezine/image/upload/v1458052055/glass_cdjbpa.png" alt="glasses image" title="geek loves glasses">
                </div>
            </div>
            <div class="seeMore-btn text-center btn-style">
                <div class="btn-styleLine double-line page-scroll">
                    <a href="#portfolio" class="btn btn-lg btn-outline">
                        <i class="fa fa-fw fa-arrow-circle-down"></i>See More
                    </a>
                </div>
            </div>    
        </div>
    </header>

    <!-- My Likes Grid Section -->
    <section id="myLikes">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>What I Do</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 portfolio-item">
                    <a href="#" class="portfolio-link text-center" data-toggle="modal">
                        <span class="fa fa-fw fa-headphones" aria-hidden="true" title="This symbolizes I Love to listen good music
                        "></span>
                    </a>
                    <article class="portfolio-item-One">
                        <header>
                            <h3>Listen music</h3>
                        </header>
                        <p>
                            All kind of melodious music because it suits into my ears. Four dollar toast messenger bag green juice, organic cliche tofu synth small batch locavore austin. Squid mlkshk authe ntic pinterest, pour-over gastropub Music seitan sartorial humblebrag. 
                        </p>
                    </article>                    
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="#" class="portfolio-link text-center" data-toggle="modal">
                        <span class="fa fa-fw fa-laptop" aria-hidden="true" title="This symbolizes I Like to design and develop websites
                        "></span>
                    </a>
                    <article class="portfolio-item-Two">
                        <header>
                            <h3>design and develop</h3>
                        </header>
                        <p>
                            I am a front-End designer. I do design and coding of web application. Swag brooklyn banh mi stumptown loca vore yr migas tousled chicharrones sriracha cray leggings. Street art tousled kale chips poutine schlitz. Polaroid roof party austin. 
                        </p>
                    </article>                    
                </div>
                <div class="col-sm-4 portfolio-item">
                    <a href="#" class="portfolio-link text-center" data-toggle="modal">
                        <span class="fa fa-fw fa-camera-retro" aria-hidden="true" title="This symbolizes I Love to capture moments
                        "></span>
                    </a>
                    <article class="portfolio-item-Three">
                        <header>
                            <h3>photography</h3>
                        </header>
                        <p>
                            I Love to capture beautiful moments. life deep v austin schlitz drinking vinegar, messen ger bag slow-carb. Migas tumblr kombucha you probably hav en't heard of them +1 chicharrones. Tilde wayfarers craft beer stumptown, humblebrag ugh whatever.
                        </p>
                    </article>                    
                </div>
            </div>
        </div>
    </section>
    <div>
        <hr class="loc-hr">
    </div>

    <!-- Portfolio Grid Section -->
    <section id="portfolio">
        <div class="container">        
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Portfolio</h2>
                    <hr class="star-primary">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 portfolio-item">
                <a href="#" class="portfolio-link">                   
                    <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052402/portfolio_book_y7ypqt.png" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-sm-3 portfolio-item">
                <a href="#" class="portfolio-link">                    
                    <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052400/portfolio_label_e5kv1h.png" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-sm-3 portfolio-item">
                <a href="#" class="portfolio-link">                    
                    <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052404/portfolio_card_xenfuv.png" class="img-responsive" alt="">
                </a>
            </div>
            <div class="col-sm-3 portfolio-item">
                <a href="#" class="portfolio-link">                    
                    <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052405/portfolio_mocup_hoxha8.png" class="img-responsive" alt="">
                </a>
            </div>            
        </div>
        <div class="loadMore-btn text-center btn-style">
            <div class="btn-styleLine double-line">
                <a href="#" class="btn btn-lg btn-outline">
                    <i class="fa fa-fw fa-plus"></i>Load More
                </a>
            </div>
        </div>        
    </section>
    <div>
        <hr class="loc-hr">
    </div>

    <!-- About Section -->
    <section id="about">
        <div class="container">            
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>About me</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 center-block about-item">                                       
                    <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052399/psd_kvl8es.png" class="img-responsive" alt="">                   
                    <article class="about-item-One">
                        <header>
                            <h3>75%</h3>
                            <h3>Photoshop</h3>
                        </header>
                        <p>
                            Four dollar toast messenger bag green juice, organic cliche tofu synth small batch locavore austin. Squid mlkshk authe ntic pinterest, pour-over gastropub XOXO seitan sartorial humblebrag. 
                        </p>
                    </article>   
                </div>
                <div class="col-sm-4 about-item ">
                                        
                        <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052396/illustrator_a9kxav.png" class="img-responsive" alt="">
                    
                    <article class="about-item-Two">
                        <header>
                            <h3>65%</h3>
                            <h3>Illustrator</h3>
                        </header>
                        <p>
                            Four dollar toast messenger bag green juice, organic cliche tofu synth small batch locavore austin. Squid mlkshk authe ntic pinterest, pour-over gastropub XOXO seitan sartorial humblebrag. 
                        </p>
                    </article>
                </div>
                <div class="col-sm-4 about-item ">
                                        
                        <img src="https://res.cloudinary.com/dasdezine/image/upload/v1458052396/knit_b0ngnp.png" class="img-responsive" alt="">
                    
                    <article class="about-item-Three">
                        <header>
                            <h3>25%</h3>
                            <h3>Knitting</h3>
                        </header>
                        <p>
                            Four dollar toast messenger bag green juice, organic cliche tofu synth small batch locavore austin. Squid mlkshk authe ntic pinterest, pour-over gastropub XOXO seitan sartorial humblebrag. 
                        </p>
                    </article>
                </div>               
            </div>
            <div class="text-center btn-style double-line">
                <div class="btn-styleLine">
                    <a href="#" class="btn btn-lg btn-outline">
                        <i class="fa fa-fw fa-download"></i> Download Resume
                    </a>
                </div>
            </div>
        </div>       
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Contact Me</h2>
                    <hr class="star-primary">
                </div>
            </div>
            <div class="row form-padding">
                <div class="col-lg-8 col-lg-offset-2">
                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Name</label>
                                <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Email Address</label>
                                <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <label>Message</label>
                                <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <br>
                        <div class="contact-btn text-center btn-style">
                            <div class="btn-styleLine double-line page-scroll">
                                <a href="#portfolio" class="btn btn-lg btn-outline">
                                    <i class="fa fa-fw fa-paper-plane"></i>Send
                                </a>
                            </div>
                        </div>    
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="text-center">
        <div class="footer-above">
            <div class="container">
                <div class="row">
                    <div class="footer-col col-md-4">
                        <h3>Location</h3>
                        <p>63B East Kamalapur<br>Kolata 700028, WB India</p>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>Around the Web</h3>
                        <ul class="list-inline">
                            <li>
                                <a href="https://www.behance.net/dasdezine" target="_blank" class="btn-social btn-outline" alt="Behance" title="Behance">
                                    <i class="fa fa-fw fa-behance" aria-hidden="true"></i>
                                    <span class="sr-only">Facebook</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://codepen.io/collection/ABajba/" target="_blank" class="btn-social btn-outline" alt="Codepen" title="Codepen">
                                    <i class="fa fa-fw fa-codepen" aria-hidden="true"></i>
                                    <span class="sr-only">codepen</span>
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/dasdezine" target="_blank" class="btn-social btn-outline" 
                                alt="Twitter" title="Twitter">
                                    <i class="fa fa-fw fa-twitter" aria-hidden="true"></i>
                                    <span class="sr-only">twitter</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-col col-md-4">
                        <h3>Contact Info</h3>
                        <ul class="list-inline">
                            <li>
                                <a href="tel:0091 90 51 314800" class="btn-social btn-outline" alt="My Phone number" 
                                title="+91 9051314800">
                                    <i class="fa fa-fw fa-phone" aria-hidden="true"></i>
                                    <span class="sr-only">My Phone number</span>
                                </a>
                            </li>
                            <li>
                                <a href="mailto:ipabhi@gmail.com" class="btn-social btn-outline" alt="My E-mail ID" 
                                title="My E-mail ID">
                                    <i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
                                    <span class="sr-only">My E-mail</span>
                                </a>
                            </li>
                        </ul>
                        <p>If you want to hire me please use phone contact or my E-mail.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-below">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        Artworks created by <a href="https://www.behance.net/annadadej" target="_blank">Anna Dadej</a>
                        <br>
                        Copyright &copy; dasdezine 2016
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
    <div class="scroll-top page-scroll visible-xs visible-sm">
        <a class="btn btn-primary" href="#page-top">
            <i class="fa fa-chevron-up"></i>
        </a>
    </div>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="js/freelancer.js"></script>

</body>

</html>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700|Lato:400,700);

/****created and maintained  @dasdezine****/

body {
    overflow-x: hidden;
    color: #212121;
}

p {
    font-size: 20px;
}

p.small {
    font-size: 16px;
}

a,
a:hover,
a:focus,
a:active,
a.active {
    outline: 0;
    color: #fad663;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

hr.star-light,
hr.star-primary {
    margin: 20px auto 30px;
    padding: 0;
    max-width: 250px;
    border: 0;
    border-top: solid 5px;
    text-align: center;
}

hr.star-light:after,
hr.star-primary:after {
    content: "\f197";
    display: inline-block;
    position: relative;
    top: -.8em;
    padding: 0 .25em;
    font-family: FontAwesome;
    font-size: 2em;
}

hr.star-light {
    border-color: #212121;
}

hr.star-light:after {
    color: #212121;
    background-color: #FDD200;
}

hr.star-primary {
    border-color: #212121;
}

hr.star-primary:after {
    color: #212121;
    background-color: #fff;
}

.img-centered {
    margin: 0 auto;
}

header {
    text-align: center;
    color: #212121;
    background: #fdd200;
}

header .container {
    padding-top: 100px;
    padding-bottom: 50px;
}

header img {
    display: block;
    margin: 0 auto 20px;
}

header .intro-text .name {
    padding-top: 20px;
    display: block;
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 2em;
    font-weight: 700;
}

header .intro-text .skills {
    font-size: 1.25em;
    font-weight: 300;
}

@media(min-width:768px) {
    header .container {
        padding-top: 200px;
        padding-bottom: 100px;
    }

    header .intro-text .name {
        font-size: 4.75em;
    }

    header .intro-text .skills {
        font-size: 1.75em;
    }
}

@media(min-width:1024px) {
    header {
        background:#F7CC01 url("https://res.cloudinary.com/dasdezine/image/upload/v1458051926/hero_tab_xawhqo.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center 50px;
    }
    header .container {
        padding-top: 100px;
        padding-bottom: 200px;
    }

    header img.img-bigScreen {
        display: none;
    }

    hr.star-light:after {
    background-color: #F7CC01;
}
}

@media(min-width:1366px) {
    header {
        background-position: center 10px; 
    }
}


@media(min-width:768px) {
    .navbar-fixed-top {
        padding: 25px 0;
        -webkit-transition: padding .3s;
        -moz-transition: padding .3s;
        transition: padding .3s;
    }

    .navbar-fixed-top .navbar-brand {
        font-size: 2em;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .navbar-fixed-top.navbar-shrink {
        padding: 10px 0;
    }

    .navbar-fixed-top.navbar-shrink .navbar-brand {
        font-size: 1.5em;
    }
}

.navbar {
    text-transform: uppercase;
    font-family: 'Ubuntu',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.navbar-color {
    background-color: #212121;
}

.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar-default .navbar-toggle {
    border-color:#fdd200;
}

.navbar-default .navbar-toggle:hover {
    background-color:#fdd200;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color:#fff;
}

.navbar-default .navbar-nav>li>a {
    color:#fff;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #fdd200;
}

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus
{
    color: #212121;
    background-color: #fdd200;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

section {
    padding: 50px 0;
}

section h2 {
    margin: 0;
    font-size: 3em;
}

section.success {
    color: #fff;
    background: #fad663;
}

@media(max-width:767px) {
    section {
        padding: 25px 0;
    }

    section.first {
        padding-top: 75px;
    }
}

@media(min-width:767px) {
    #portfolio .col-sm-3 {
        padding-right:0;
        padding-left: 0;
    }
}

}

#myLikes .portfolio-item,
#about .about-item {
    text-align: center;
}
#myLikes .portfolio-item p,#about .about-item p {
    
    text-align: center;
    line-height: 1.5;
    padding-bottom: 50px;
}
#myLikes .portfolio-item-Three p, #about .about-item-Three p {
    padding-bottom: 5px;
}

#myLikes .portfolio-item header, #about .about-item header {
    background: none;
}

.about-item .img-responsive {
    margin: 0 auto;
}

#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link,
#myLikes .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

#myLikes .portfolio-link .fa {
    font-size: 10em;
    padding: 10px 15px;
    color:#212121;
    border-radius:6px;
    border-radius:5px 20px 5px;;
    background-color:#F7CC01;
}

.seeMore-btn .fa, #portfolio .fa, .contact-btn .fa {
    padding-right: 5px;
}

#portfolio * {
    z-index: 2;
}

hr.loc-hr {
    border-top: 2px dashed #212121;
    max-width: 85%;
}

@media(min-width:767px) {
    #portfolio .portfolio-item {
        margin: 0 0 30px;
    }
}

.btn-lg {
    padding: 5px 20px;
    line-height: 1.5;
}

div.seeMore-btn {
    margin-top: 25px;
}

div.seeMore-btn .btn-outline {
    background: #fdd200;
}

div.contact-btn .btn-outline {
    background: #d2eae3;
}

div.seeMore-btn .btn-outline, div.contact-btn .btn-outline {
    transition: all .3s ease-in-out;
}

div.seeMore-btn .btn-outline:hover, div.contact-btn .btn-outline:hover {
    background: #fff;
} 

.btn-outline {
    margin-top: 15px;
    border: solid 2px #212121;
    border-radius: 20px;
    font-size: 20px;
    color: #212121;
    background:#fff;
    transition: all .3s ease-in-out;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
    color: #212121;
    background: #fdd200;
}

/*******btn double line style starts***********/

@media(min-width:767px) {

    div.btn-style {
        position: relative;
        z-index:1;
    }

    div.btn-style .btn-styleLine {
        padding:0 0;
        display: inline-block;
    }

    div.seeMore-btn .btn-styleLine {
        background: transparent;
    }

    div.contact-btn .btn-styleLine {
        background: transparent;
    }

    .double-line:before {
        content: "";
        border-top: 2px solid #212121;
        position: absolute;
        top:50%;
        left:25%;
        width: 50%;
        z-index: -1;
    }

    .double-line:after {
        content: "";
        border-bottom: 2px solid #212121;
        position: absolute;
        bottom:25%;
        left:30%;
        width: 40%;
        z-index: -1;
    }
}

@media(min-width:1024px) {
    #portfolio .double-line:before {
        left:32%;
        width:35%;
    }

    #portfolio .double-line:after {
        left:35%;
        width: 30%;
    }
}

@media(min-width:1024px) {
    div.seeMore-btn {
        position: relative;
        top:150px;
        left:10px;
    }
}

/*******btn double line style ends***********/

#contact {
    background: #d2eae3;
}
#contact hr.star-primary:after {
    background-color: #d2eae3;
}

#contact .form-padding {
    padding:0px 10px;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
}

.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease,opacity .3s ease;
    -moz-transition: top .3s ease,opacity .3s ease;
    -ms-transition: top .3s ease,opacity .3s ease;
    transition: top .3s ease,opacity .3s ease;
}

.floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee;
}

.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}

.floating-label-form-group-with-focus label {
    color: #697571;
}

form .floating-label-form-group {
    background: #fad663;
    border: 2px solid #212121;
    border-radius: 6px;
}

footer {
    color: #fff;
}

footer h3 {
    margin-bottom: 30px;
}

footer .footer-above {
    padding-top: 50px;
    background-color: #2c3e50;
}

footer .footer-col {
    margin-bottom: 50px;
}

footer .footer-below {
    padding: 25px 0;
    background-color: #233140;
}

.btn-social {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
}

.btn:focus,
.btn:active,
.btn.active {
    outline: 0;
}

.scroll-top {
    z-index: 1049;
    position: fixed;
    right: 2%;
    bottom: 2%;
    width: 50px;
    height: 50px;
}

.scroll-top .btn {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 28px;
}

.scroll-top .btn:focus {
    outline: 0;
}

            
          
!
            
              /*!
 * Start Bootstrap - Freelancer Bootstrap Theme (https://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('body').on('click', '.page-scroll a', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

// Floating label headings for the contact form
$(function() {
    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
        $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val());
    }).on("focus", ".floating-label-form-group", function() {
        $(this).addClass("floating-label-form-group-with-focus");
    }).on("blur", ".floating-label-form-group", function() {
        $(this).removeClass("floating-label-form-group-with-focus");
    });
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console