css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
                <!-- ==========================
    Favicons
  =========================== -->
<link rel="shortcut icon" href="https://res.cloudinary.com/miljan/image/upload/v1476709661/web/favicon_gvlrns.ico">
  <!-- ==========================
    Fonts
  =========================== -->
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<script src="https://use.fontawesome.com/794fa4c80f.js"></script>

  <!-- ==========================
    HEADER - START
  =========================== -->
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <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="#navbar-main" 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 brand-logo" href="#home"><img class="img-responsive" src="https://res.cloudinary.com/miljan/image/upload/v1476709661/web/logo_xauazz.png" alt="logo"></a>
      </div>

      <!-- Collect the nav links and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> HOME<span class="sr-only">(current)</span></a></li>
          <li><a href="#about-me"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> ABOUT ME</a></li>
          <li><a href="#portfolio"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> PORTFOLIO</a></li>
          <li><a href="#contact"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> CONTACT</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
  </nav>
  <!-- ==========================
    HEADER - END
  =========================== -->

  <!-- ==========================
    HOME - START
  =========================== -->
  <div class="jumbotron" id="home">
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2">
          <img src="https://s.gravatar.com/avatar/979dfb194ca137002a2053e48feb7fb2?s=400" class="img-responsive img-circle img-border animated pulse" alt="Miljan Djordjevic Photo">
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <h1 class="text-center animated fadeInLeftBig">Miljan Djordjevic</h1>
          <p class="text-center animated fadeInRightBig">Full-Stack JavaScript Developer</p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <div id="social" class="text-center animated zoomInDown">
            <a href="https://rs.linkedin.com/in/miljandjordjevic" target="_blank"><i class="fa fa-linkedin fa-3x social-item linkedin" title="Linkedin" aria-hidden="true"></i></a>

            <a href="https://github.com/miljan-fsd" target="_blank"><i class="fa fa-github fa-3x social-item github" title="GitHub" aria-hidden="true"></i></a>

            <a href="https://www.freecodecamp.com/miljan-fsd" target="_blank"><i class="fa fa-fire fa-3x social-item freecodecamp" title="FreeCodeCamp" aria-hidden="true"></i></a>

            <a href="https://www.facebook.com/miljandjordjevic87" target="_blank"><i class="fa fa-facebook-square fa-3x social-item facebook" title="Facebook" aria-hidden="true"></i></a>

            <a href="https://plus.google.com/+MiljanDjordjevic87" target="_blank"><i class="fa fa-google-plus-official fa-3x social-item google-plus" title="Google+" aria-hidden="true"></i></a>

            <a href="https://twitter.com/miljan_vd" target="_blank"><i class="fa fa-twitter fa-3x social-item twitter" title="Twitter" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ==========================
    HOME - END
  =========================== -->

  <!-- ==========================
    ABOUT ME - START
  =========================== -->
  <section id="about-me">
    <div class="container">
      <h2 class="text-center">About Me</h2>
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="well well-lg">
            <h3>Who am I?</h3>
            <p>Hello everyone, my name is <strong>Miljan Djordjevic</strong> and I am a <strong><em>Full-Stack JavaScript Developer</em></strong> from Belgrade, Serbia. I am self-taught developer, passionate and very fast learner. I have learned how to program through various resources, currently I am learning on <a href="https://www.freecodecamp.com">Freecodecamp</a> and <a href="https://www.udacity.com/">Udacity</a>.</p>
            <p>I am eager to learn and grow - Everyday.</p>
            <p>My ambition is to make <em>awesome websites</em>, not just good enough.</p>
          <h4>Additional Skills</h4>
          <ul>
            <li>Organizational skills</li>
            <li>Project management</li>
            <li>Analytical skills</li>
            <li>Attention to details </li>
            <li>Problem solving skills</li>
          </ul>
          <h4>Interests and Hobbies</h4>
          <ul>
            <li>New technologies</li>
            <li>Reading non-fiction books</li>
            <li>Playing Chess</li>
            <li>Watching movies</li>
            <li>Socialize with my friends</li>
          </ul></div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="well well-lg">
            <h3>My Skills</h3>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4>Software</h4>
              </div>
              <div class="panel-body">
                <p class="text-center skills">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644121/web/sublime_text_zeyepv.png" title="Sublime Text" alt="Sublime Text">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/atom_y5fqhk.png" title="Atom" alt="Atom">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/photoshop_yejux1.png" title="Photoshop" alt="Photoshop">
                </p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4>Languages</h4>
              </div>
              <div class="panel-body">
                <p class="text-center skills">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/html5_cgumbd.png" title="HTML5" alt="HTML5">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/css3_ffupaa.png" title="CSS3" alt="CSS3">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644123/web/sass_tlfgc4.png" title="SASS" alt="SASS">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/javascript_wpznec.png" title="JavaScript" alt="JavaScript">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/jquery_inleai.png" title="JQuery" alt="JQuery">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/bootstrap_vct3h9.png" title="Bootstrap" alt="Bootstrap">
                </p>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading">
                <h4>Workflow</h4>
              </div>
              <div class="panel-body">
                <p class="text-center skills">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/gulp_acxjwt.png" title="Gulp" alt="Gulp">
                  <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/git_mqpoox.png" title="Git" alt="Git">
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="btn-skills text-center">
        <button id="get-skills-level" class="btn btn-toggle"><i class="fa fa-toggle-down"></i> Check my skills level</button>
      </p>
    </div>
  </section>
  <!-- ==========================
    ABOUT ME - END
  =========================== -->

  <!-- ==========================
    SKILLS LEVEL - START
  =========================== -->
  <section class="skills-level" id="skills-level-section">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
          <div class="well">
            <table class="table table-condensed">
              <thead>
                <tr>
                  <th>Level</th>
                  <th>Language</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Beginner</td>
                  <td>
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644123/web/sass_tlfgc4.png" title="SASS" alt="SASS">
                  </td>
                </tr>
                <tr>
                  <td>Familiar</td>
                  <td>
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/javascript_wpznec.png" title="JavaScript" alt="JavaScript">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/jquery_inleai.png" title="JQuery" alt="JQuery">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/photoshop_yejux1.png" title="Photoshop" alt="Photoshop">
                  </td>
                </tr>
                <tr>
                  <td>Proficient</td>
                  <td>
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/html5_cgumbd.png" title="HTML5" alt="HTML5">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/css3_ffupaa.png" title="CSS3" alt="CSS3">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/bootstrap_vct3h9.png" title="Bootstrap" alt="Bootstrap">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/atom_y5fqhk.png" title="Atom" alt="Atom">
                  </td>
                </tr>
                <tr>
                  <td>Excellent</td>
                  <td>
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/gulp_acxjwt.png" title="Gulp" alt="Gulp">
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644119/web/git_mqpoox.png" title="Git" alt="Git">
                  </td>
                </tr>
                <tr>
                  <td>Expert</td>
                  <td>
                    <img src="https://res.cloudinary.com/miljan/image/upload/v1476644121/web/sublime_text_zeyepv.png" title="Sublime Text" alt="Sublime Text">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ==========================
    SKILLS LEVEL - END
  =========================== -->

  <!-- ==========================
    PORTFOLIO - START
  =========================== -->
  <section id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2 class="text-center">Portfolio</h2>
          <p class="text-center">What I have done so far.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="thumbnail">
            <a class="thumbnail" href="https://codepen.io/miljan-fsd/pen/xEzKvO" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644975/web/tribute_page_nikola_tesla_cdhsyt.jpg" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://codepen.io/miljan-fsd/pen/xEzKvO" target="_blank">Tribute Page</a></h3>
              <p>Small Tribute Page to Nikola Tesla</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/placeholder_1_ltaktc.png" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/placeholder_1_ltaktc.png" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644120/web/placeholder_1_ltaktc.png" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644121/web/placeholder_2_k4hecy.jpg" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644121/web/placeholder_2_k4hecy.jpg" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644121/web/placeholder_2_k4hecy.jpg" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644127/web/placeholder_3_bzrhxw.png" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644127/web/placeholder_3_bzrhxw.png" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644127/web/placeholder_3_bzrhxw.png" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_4_ayoirb.jpg" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_4_ayoirb.jpg" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_4_ayoirb.jpg" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_5_faulxy.jpg" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_5_faulxy.jpg" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644124/web/placeholder_5_faulxy.jpg" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644126/web/placeholder_6_tl5fk3.jpg" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644126/web/placeholder_6_tl5fk3.jpg" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644126/web/placeholder_6_tl5fk3.jpg" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <a class="thumbnail" href="https://res.cloudinary.com/miljan/image/upload/v1476644123/web/placeholder_7_sz8pyo.png" target="_blank"><img src="https://res.cloudinary.com/miljan/image/upload/v1476644123/web/placeholder_7_sz8pyo.png" alt="website" class="img-responsive"></a>
            <div class="caption">
              <h3><a href="https://res.cloudinary.com/miljan/image/upload/v1476644123/web/placeholder_7_sz8pyo.png" target="_blank">Project Title</a></h3>
              <p>Project description</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ==========================
    PORTFOLIO - END
  =========================== -->

  <!-- ==========================
    CONTACT - START
  =========================== -->
  <section id="contact">
    <div class="container">
      <div class="row">
       <h2 class="text-center">Contact</h2>
        <p class="text-center">Let's connect. Send me a message.</p>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <form>
            <div class="form-group">
              <label for="full_name">Your Name</label>
              <input type="text" class="form-control" id="full_name" name="full_name" placeholder="Your Name" required>
            </div>

            <div class="form-group">
              <label for="email">Email Address</label>
              <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
            </div>

            <div class="form-group">
              <label for="subject">Subject</label>
              <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
            </div>

            <div class="form-group">
              <label for="message">Your Message</label>
              <textarea class="form-control" rows="10" id="message" name="message" placeholder="Your Message" required></textarea>
            </div>
            <p><em>*Form does not work. Currently serves only as an illustration.</em></p>
             <button type="submit" class="btn btn-primary btn-send"><span class="glyphicon glyphicon-send"> SEND</span>
            </button>
          </form>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12">
          <div id="map"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- ==========================
    CONTACT - END
  =========================== -->

  <!-- ==========================
    FOOTER - START
  =========================== -->
  <section id="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <p>
            <a href="#home">Home</a>
            <a href="#about-me">About me</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
          </p>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <p class="text-right">&copy; Miljan Djordjevic 2016</p>
        </div>
      </div>
    </div>
  </section>
  <!-- ==========================
    FOOTER - END
  =========================== -->

  <!-- ==========================
    JS
  =========================== -->
<script>
function myMap() {
  var myLatLng = {lat: 44.7866, lng: 20.4489};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}
</script>
  <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
            
          
!
            
              body {
  background-color: #A6120E;
  color: #b2c0c6;
  margin: 0;
  font-family: 'Merriweather', serif;
}

p {
  font-size: 16px;
}

.brand-logo {
  padding: 0;
}

.navbar {
  background-color: #0F1622;
  border-top: 5px solid #D12016;
  border-bottom: 1px solid #A6120E;
  opacity: 0.8;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  background-color: #A6120E;
}

#about-me,
#portfolio,
#conntact {
  color: #0F1622;
  padding: 50px 0;
  margin-bottom: 5px;
}

#home {
  background-color: #fff;
  color: #015DA9;
  margin: 0 0 5px 0;
  padding: 100px 0 50px 0;
}

.img-border {
  border: 1px solid #A6120E;
}

#social a {
  display: inline-block;
}

.social-item {
  padding: 5px;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  -webkit-transition: background-color ease-in-out 0.4s, color ease-in-out 0.4s;
  -moz-transition: background-color ease-in-out 0.4s, color ease-in-out 0.4s;
  -ms-transition: background-color ease-in-out 0.4s, color ease-in-out 0.4s;
  -o-transition: background-color ease-in-out 0.4s, color ease-in-out 0.4s;
  transition: background-color ease-in-out 0.4s, color ease-in-out 0.4s;
}

.google-plus {
  color: #dd4b39;
  background-color: #fff;
}

.google-plus:hover {
  color: #fff;
  background-color: #dd4b39;
}

.twitter{
  color: #00aced;
  background-color: #fff;
}

.twitter:hover {
  color: #fff;
  background-color: #00aced;
}

.linkedin {
  color: #007bb6;
  background-color: #fff;
}

.linkedin:hover {
  color: #fff;
  background-color: #007bb6;
}

.facebook{
  color: #3b5998;
  background-color: #fff;
}

.facebook:hover{
  color: #fff;
  background-color: #3b5998;
}

.freecodecamp{
  color: #006401;
  background-color: #fff;
}

.freecodecamp:hover {
  color: #fff;
  background-color: #006401;
}

.github{
  color: #171516;
  background-color: #fff;
}

.github:hover {
  color: #fff;
  background-color: #171516;
}

#about-me {
  background-color: #fff;
  margin-bottom: 5px;
}

.skills {
  background-color: #eee;
  padding: 5px;
}

.skills img {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
}

.skills-level {
  display: none;
}

.btn-skills {
  margin: 0 0 -50px 0;
  padding: 0;
}

.btn-toggle {
  background-color: #A6120E;
  color: #fff;
  border: 0;
  border-radius: 0;
}

.btn-toggle:hover {
  background-color: #A6120E;
  color: #000;
  border: 0;
  border-radius: 0;
}

.table {
  margin-bottom: 0;
}

#portfolio {
  background-color: #fff;
  color: #000;
}

#contact {
  background-color: #fff;
  color: #000;
  padding: 50px 0;
}

#full_name:focus,
#email:focus,
#subject:focus,
#message:focus {
  border-bottom: 1px solid #A6120E;
  border-left: 3px solid #A6120E;
  border-top: 0;
  border-right: 0;
}

.btn-send {
  background-color: #0F1622;
  padding: 10px 20px;
  -webkit-transition: background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
  -moz-transition: background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
  -ms-transition: background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
  -o-transition: background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
  transition: background-color ease-in-out 0.4s, box-shadow ease-in-out 0.4s;
}

.btn-send:hover {
  background-color: #A6120E;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

#map {
  width: 100%;
  height: 450px;
  padding: 25px 0 0 0;
}

#footer {
  background-color: #0F1622;
  color: #e0e0e0;
  padding: 20px 0;
}
            
          
!
            
              // Toggle class to #skills-level-section
$("#get-skills-level").click(function() {
  $("#skills-level-section").slideToggle(1200).toggleClass("skills-level");
  $(".fa-toggle-down").toggleClass("fa-toggle-up");
});

// Add scrollspy to <body>
$('body').scrollspy({
  target: ".navbar",
  offset: 50
});

// Add smooth scrolling on all links inside the navbar
$("#navbar-main a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });

  } // End if

});
            
          
!
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.
Loading ..................

Console