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 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.

Quick-add: + add another resource

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.

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">
  <head>
    <title>Photo Clicks - Photo Portfolio Gallery</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  </head>
  <body class="background-color-1">
    <div class="preloader">
      <div class="preloader-icon animated-characters color-1" animation-duration="1000">
        <span class="fa fa-circle-o animated-character-element"></span>
      </div>
      <div class="color-2 loading-text">
        L<span class="fa fa-circle-o"></span>ading Images... Please wait.
      </div>
    </div>
    <div class="container-full all-contents">
      <div class="item-window-schema">
        <div class="container-full item-window item-window-fixed">
          <div class="container-full background background-color-1 animated slideInDown opacity-95 item-window-fixed">

          </div>
          <div class="container-full item-window-contents color-2 item-window-fixed">
            <div class="container">
              <div class="row">
                <div class="col-sm-12">
                  <div class="row item-window-scroll">
                    <div class="col-sm-12">
                      <div class="row item-window-scroll-contents">
                        <div class="col-sm-8 image-column">
                          <div class="item-window-image animated flipInX text-center">

                          </div>
                        </div>
                        <div class="col-sm-4 image-text-column animated fadeInDown">
                          <div class="row">
                            <div class="col-sm-12 text-center">
                              <a href="#" class="close-button color-1"><span class="fa fa-times-circle"></span></a>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-sm-12 window-title medium color-1 text-center">

                            </div>
                          </div>
                          <div class="row">
                            <div class="col-sm-12 window-text light color-2 text-center">

                            </div>
                          </div>
                          <div class="row">
                            <div class="col-sm-12 window-description light color-2 text-center">

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-full">
        <div class="container top-header color-1">
          <div class="col-sm-12 text-center light">
            <span class="fa fa-picture-o"></span> Photo Clicks
          </div>
        </div>
      </div>
      <div class="container-full">
        <div class="container top-menu">
          <div class="row">
            <div class="col-sm-12 text-center">
              <a href="#gallery" class="top-menu-item color-1 first"><span class="fa fa-long-arrow-right"></span> Portfolio</a>
              <a href="#about-section" class="top-menu-item color-1"><span class="fa fa-long-arrow-right"></span> About</a>
              <a href="#hobbies-section" class="top-menu-item color-1 hobbies-link"><span class="fa fa-long-arrow-right"></span> Hobbies</a>
              <a href="#social-icons" class="top-menu-item color-1"><span class="fa fa-long-arrow-right"></span> Social</a>
              <a href="#contact-form" class="top-menu-item color-1"><span class="fa fa-long-arrow-right"></span> Contact Me</a>
            </div>
          </div>
        </div>
      </div>
      <div class="container-full">
        <div id="gallery" class="container gallery">
          <div class="row gallery-row gallery-animate gallery-animated gallery-animate-swing">
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image1.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Victoria Sharp
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Nunc ut ante imperdiet metus rhoncus gravida et eget enim.
                    <div class="date"><span class="fa fa-calendar"></span> 14 Jun, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Donec convallis tristique maximus. Vivamus sed enim tellus. Donec vehicula arcu nec tincidunt consectetur. Vestibulum lacinia, nibh elementum pretium dapibus, velit justo rhoncus dolor, vitae congue magna eros vel mi. Cras turpis felis, molestie nec massa vel, vehicula iaculis leo. Mauris suscipit ex nec sagittis fringilla. Sed eget tellus in enim sodales varius. Ut aliquam sapien sed ex pellentesque volutpat. Aliquam tortor velit, euismod at neque nec, scelerisque varius lectus. In at orci vel mi interdum sodales viverra finibus sem. Phasellus nec metus eget lectus fringilla suscipit et a purus. Nunc eu lorem et turpis semper ornare nec sed metus. Sed ut felis ornare, convallis nisi eget, volutpat ex. Sed placerat scelerisque arcu vel elementum.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image2.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Jennifer Hamilton
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    In malesuada nisi a est sollicitudin malesuada ac venenatis odio.
                    <div class="date"><span class="fa fa-calendar"></span> 12 Jul, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Nunc in tincidunt orci. Fusce scelerisque nec est ut lobortis. Mauris urna ipsum, volutpat et iaculis vitae, interdum a nulla. Etiam interdum sollicitudin sollicitudin. Sed ligula justo, mattis eu diam in, egestas fermentum nisi. Phasellus facilisis pellentesque mi, et lobortis mi commodo placerat. Maecenas ut justo nibh. Maecenas posuere lobortis lobortis. Duis rutrum erat ac euismod tempus. Nam eleifend porta laoreet.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image3.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Chloe Tucker
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Quisque at diam eget nisl interdum semper.
                    <div class="date"><span class="fa fa-calendar"></span> 3 Sep, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Vivamus mollis sapien eget metus pellentesque bibendum id quis augue. Cras mollis erat ut diam consectetur accumsan. In sed nibh non elit rutrum consequat. Sed rutrum libero non nunc porta, in scelerisque quam egestas. Nulla facilisi. Suspendisse tincidunt neque sit amet congue interdum. Nam congue leo id leo gravida, eget aliquet justo tincidunt. Fusce aliquet tincidunt erat at tempor. Etiam orci augue, mattis quis maximus sed, mattis eu libero. Donec feugiat mauris vel scelerisque egestas. Maecenas accumsan gravida neque, nec condimentum nibh convallis at. Nulla sollicitudin arcu risus, ut varius tellus finibus et. Fusce sed bibendum sapien. Nulla quis metus at sem molestie volutpat. In hac habitasse platea dictumst. Nam eu sem lectus.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row gallery-row gallery-animate gallery-animated gallery-animate-swing">
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image4.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Carolyn Watson
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Donec tincidunt arcu a ligula cursus, ac pretium nisi efficitur.
                    <div class="date"><span class="fa fa-calendar"></span> 2 Jan, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Vestibulum porttitor enim non nunc gravida condimentum. Ut vitae tellus nec tortor imperdiet ultricies sed quis sapien. Quisque sodales lorem quis arcu auctor, quis egestas risus laoreet. Etiam eget sem augue. In pretium metus non nisl sodales, in sodales odio suscipit. Mauris fermentum ut ipsum nec feugiat. Morbi orci risus, tincidunt vitae aliquet at, posuere non mi. Duis at risus sem. Quisque vitae rhoncus eros. Sed ullamcorper congue eros et rutrum. Nunc efficitur tempus sollicitudin. Aliquam placerat risus at ipsum porttitor, at dignissim magna dapibus.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image5.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Olivia	Nolan
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Aliquam in elit sed ipsum viverra eleifend sed nec lorem.
                    <div class="date"><span class="fa fa-calendar"></span> 7 Jan, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Phasellus ac quam at est mollis volutpat non a nisl. Nullam est justo, scelerisque a urna sit amet, lobortis imperdiet nulla. Donec scelerisque vel nibh in laoreet. Ut erat massa, commodo eget purus ac, gravida convallis purus. Vestibulum sed ultrices nisl. Proin sodales sed eros rutrum cursus. Duis non malesuada magna. Vestibulum eros mi, dictum sed bibendum sit amet, congue quis dolor. Phasellus vehicula, nulla eu scelerisque vestibulum, nisi massa rutrum est, non viverra erat sapien et metus. Morbi nibh nisl, tincidunt ac eleifend vel, varius in enim.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image6.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Vanessa	Cameron
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Duis pretium erat id eros vestibulum, nec suscipit urna posuere.
                    <div class="date"><span class="fa fa-calendar"></span> 14 Feb, 2016</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Praesent porta arcu non felis feugiat scelerisque. Aenean et risus sit amet diam scelerisque pulvinar eu sed velit. Cras nibh eros, aliquam quis molestie ut, viverra eu sapien. Mauris tempus eros vel dolor convallis ultrices. Donec tincidunt velit ut finibus fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta a turpis at scelerisque. Vestibulum dui nisi, ultricies in congue at, dictum et nisl. Duis viverra magna urna, in viverra neque sodales nec.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row gallery-row gallery-animate gallery-animated gallery-animate-swing">
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image7.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Emily	Peters
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Mauris eget lectus congue leo convallis luctus eu id tellus.
                    <div class="date"><span class="fa fa-calendar"></span> 8 Aug, 2014</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Vestibulum viverra mattis luctus. Morbi massa lorem, facilisis eget nunc vel, vulputate blandit odio. Vivamus vitae sem sed est mollis porttitor. Duis purus nibh, ultrices non mattis ac, feugiat eu ipsum. Nam sit amet risus eros. Suspendisse ultricies lacus sem, eget volutpat nisl efficitur vehicula. Etiam posuere nunc eu erat fermentum, ac tincidunt lectus sagittis. Sed suscipit lorem sollicitudin, feugiat turpis at, accumsan lorem. Curabitur auctor magna in mi sodales, in tristique quam sagittis.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image8.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Stephanie	Hudson
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Proin feugiat magna eget lacus facilisis volutpat.
                    <div class="date"><span class="fa fa-calendar"></span> 16 Nov, 2015</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Aliquam facilisis lectus eget justo tempor, non aliquet ipsum facilisis. Aliquam vitae ligula imperdiet, semper eros vitae, viverra augue. Etiam justo enim, fringilla eget blandit a, volutpat vitae sem. Donec non dignissim risus, id pharetra lorem. Nam at aliquam augue. Quisque tristique, diam ornare faucibus sollicitudin, risus purus rutrum turpis, eu sollicitudin turpis orci non tellus. Sed quis mollis turpis, vitae tempor mauris. Sed sed suscipit sem.
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4 text-center">
              <div class="item gallery-item">
                <div class="row">
                  <div class="col-sm-12">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_image9.jpg" class="gallery-image image-oval" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 text-center gallery-item-title color-1 medium">
                    Leah	Avery
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 gallery-item-text color-2 light">
                    Proin eget orci pharetra lectus molestie porttitor.
                    <div class="date"><span class="fa fa-calendar"></span> 17 Apr, 2015</div>
                  </div>
                </div>
                <div class="row gallery-item-description">
                  <div class="col-sm-12">
                    Nullam commodo, odio dictum lobortis blandit, metus dui aliquam sem, vel aliquam nulla nisl in ipsum. Duis viverra tempor magna, eu ultrices turpis condimentum non. Nulla accumsan lobortis erat. Fusce eleifend ex elementum, vulputate augue ac, varius eros. Mauris vitae imperdiet dui. In hac habitasse platea dictumst. Aliquam ut libero tristique massa blandit pellentesque sit amet in tellus. Nunc consequat, enim quis iaculis lobortis, orci velit faucibus nulla, vel consequat risus nunc eget massa. Nullam a magna libero. Etiam nisi dui, consequat gravida massa in, dictum lobortis felis. Integer urna lectus, vestibulum eu dictum sed, posuere nec est. Donec sed nisl mauris. Vestibulum in mi eget nulla facilisis aliquet nec vitae metus. Integer at eleifend ipsum. Morbi sit amet odio eros. In in blandit est, eu feugiat elit.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 text-center load-more-button">
              <a href="#" class="color-2 btn-load-more">
                Load More
                <br/>
                <span class="fa fa-circle dot dot1"></span>
                <span class="fa fa-circle dot dot2"></span>
                <span class="fa fa-circle dot dot3"></span>
              </a>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 text-right back-to-top">
              <a href="#" class="color-2">Back to Top <span class="fa fa-angle-up"></span></a>
            </div>
          </div>
        </div>
      </div>
      <div class="container-full background-color-2">
        <div id="about-section" class="container about-section">
          <div class="col-sm-4">
            <img class="about-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1420320/photo_clicks_photographer.jpg" />
          </div>
          <div class="col-sm-8">
            <div class="row">
              <div class="col-sm-12 color-3">
                <h1>John Doe</h1>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 color-2 about-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue lectus sapien, laoreet porta lectus hendrerit ut. Praesent elementum aliquet vehicula. Vivamus pretium viverra vehicula. Donec aliquam fermentum augue quis convallis. Morbi iaculis magna velit, at ullamcorper ligula vestibulum sit amet. Duis sit amet pellentesque felis. Sed mollis lacus vitae risus varius venenatis. Sed euismod ligula et arcu lacinia gravida. Sed dolor purus, viverra at velit et, consequat suscipit quam. Fusce sit amet blandit sapien. Fusce eget leo nibh. Pellentesque a aliquam libero. Maecenas a commodo velit, vel consectetur turpis. Vestibulum condimentum vehicula augue sed finibus.
                <br/><br/>
                Vestibulum sed fringilla sapien. Nullam quis est in leo interdum efficitur. Proin egestas blandit ipsum. Nam ornare id est sed ultrices. Sed convallis et lacus vel iaculis. Proin at sem et ante sollicitudin ultrices at vel dolor. In hac habitasse platea dictumst. Duis pretium, elit ultricies suscipit pulvinar, felis massa tristique massa, at congue augue odio in risus. Donec aliquam, nisi id volutpat egestas, lectus odio convallis ipsum, sit amet venenatis tellus leo et tellus. Nulla accumsan ornare nisi et aliquam. Mauris molestie nibh purus, id tristique libero efficitur ac. Etiam pretium, nibh sit amet cursus tempor, eros dui egestas dui, id pharetra ligula est vitae nunc. Cras vitae faucibus nunc.
                <br/><br/>
                Nunc tempus nunc ac quam maximus lacinia ut sed enim. Suspendisse dignissim nisi vitae dolor tincidunt, id tristique erat hendrerit. Sed lacinia tellus nec commodo maximus. Etiam ut ultrices velit, ut pretium risus. Quisque finibus aliquam sapien vel placerat. Nunc vel nunc sem. Maecenas non imperdiet eros. Nunc vestibulum vitae mi a egestas. Etiam venenatis non sem non euismod. Vivamus pretium aliquet dui. Aliquam porta mi eu sem rutrum, non consectetur elit congue. Maecenas imperdiet ornare magna sit amet ultricies.
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 text-right back-to-top">
                <a href="#" class="color-2">Back to Top <span class="fa fa-angle-up"></span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-full">
        <div class="container upper-footer color-2">
          <div class="row">
            <div id="hobbies-section" class="col-sm-8 hobbies-section color-2">
              <div class="row">
                <div class="col-sm-12 upper-footer-heading hobbies-heading color-1 text-center">
                  Hobbies
                </div>
              </div>
              <div class="row hobbies-content">
                <div class="col-sm-12">
                  <div class="row music">
                    <div class="col-sm-12">

                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12 text-center">
                      <div id="bowling_hype_container" style="margin:auto;position:relative;width:100px;height:100px;overflow:hidden;">
                        <script type="text/javascript" charset="utf-8" src="https://preview.animatedcreativity.com/images/photo_clicks/animation/bowling.hyperesources/bowling_hype_generated_script.js?95434"></script>
                      </div>
                      <div id="tv_hype_container" style="margin:auto;position:relative;width:100px;height:100px;overflow:hidden;">
                        <script type="text/javascript" charset="utf-8" src="https://preview.animatedcreativity.com/images/photo_clicks/animation/tv.hyperesources/tv_hype_generated_script.js?34000"></script>
                      </div>
                      <div id="boat_hype_container" style="margin:auto;position:relative;width:100px;height:100px;overflow:hidden;">
                        <script type="text/javascript" charset="utf-8" src="https://preview.animatedcreativity.com/images/photo_clicks/animation/boat.hyperesources/boat_hype_generated_script.js?61115"></script>
                      </div>
                      <div id="cup_hype_container" style="margin:auto;position:relative;width:100px;height:100px;overflow:hidden;">
                        <script type="text/javascript" charset="utf-8" src="https://preview.animatedcreativity.com/images/photo_clicks/animation/cup.hyperesources/cup_hype_generated_script.js?728"></script>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="contact-form" class="col-sm-4 contact-form">
              <div class="row">
                <div class="col-sm-12 text-center upper-footer-heading contact-form-heading color-1">
                  Contact Me
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <input type="text" class="form-control txt-name color-1" placeholder="Your Name" />
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <input type="text" class="form-control txt-email color-1" placeholder="Your Email" />
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <textarea type="text" class="form-control txt-message color-1" placeholder="Your Message"></textarea>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <button type="button" class="btn btn-default send-button color-1 background-color-1">Send</button>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div id="social-icons" class="col-sm-12 social-icons">
              <div class="row">
                <div class="col-sm-12 social-icons-content text-center">
                  <a href="#" class="social-icon color-2"><span class="fa fa-twitter"></span></a>
                  <a href="#" class="social-icon color-2"><span class="fa fa-facebook"></span></a>
                  <a href="#" class="social-icon color-2"><span class="fa fa-google-plus"></span></a>
                  <a href="#" class="social-icon color-2"><span class="fa fa-pinterest"></span></a>
                  <a href="#" class="social-icon color-2"><span class="fa fa-linkedin"></span></a>
                  <a href="#" class="social-icon color-2"><span class="fa fa-instagram"></span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-full background-color-3">
        <div class="container footer color-2">
          <div class="row">
            <div class="col-sm-8 text-center copyright-text">
              All Rights reserved. &copy; Copyright
            </div>
            <div class="col-sm-4 text-center back-to-top">
              <a href="#" class="color-2">Back to Top <span class="fa fa-angle-up"></span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Raleway:200,300,500,600,700');

body {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 300;
  overflow-x: hidden;
}
a {
  color: #333;
}
a:hover, a:focus {
  color: #ccc;
  text-decoration: none;
}
.light {
  font-weight: 300;
}
.extra-light {
  font-weight: 200;
}
.semi-bold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.medium {
  font-weight: 500;
}
.width-100 {
  width: 100%;
}
.background-color-1 {
  background-color: #333;
}
.background-color-2 {
  background-color: #ccc;
}
.background-color-3 {
  background-color: #222;
}
.color-1 {
  color: #ccc;
}
.color-2 {
  color: #666;
}
.color-3 {
  color: #333;
}
.noscroll {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.opacity-95 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
  -moz-opacity: 0.95;
  -khtml-opacity: 0.95;
  opacity: 0.95;
}
.all-contents {
  display: none;
}
.top-header {
  font-size: 60px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 0px;
}
.top-menu {
  margin-bottom: 80px;
}
.top-menu-item.first {
  margin-left: 0px;
  border: none;
}
.top-menu-item.last {
  margin-right: 0px;
}
.top-menu-item {
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 5px;
  display: inline-block;
  margin-top: 10px;
}
.top-menu-item span.fa {
  visibility: hidden;
  color: #333;
  display: none;

  -webkit-transition: color 2s ease-out;
  -moz-transition: color 2s ease-out;
  -ms-transition: color 2s ease-out;
  -o-transition: color 2s ease-out;
  transition: color 2s ease-out;
}
.top-menu-item:hover span.fa {
  visibility: visible;
  color: #666;
  -webkit-animation: rotateX 1s linear infinite;
  -moz-animation: rotateX 1s linear infinite;
  -ms-transition: rotateX 1s linear infinite;
  -o-animation: rotateX 1s linear infinite;
  animation: rotateX 1s linear infinite;
}
.top-menu-item .list-group {
  position: absolute;
  z-index: 98;
  display: none;
}
.top-menu-item .caret {
  color: #333;
  display: none;
}
.top-menu-item:hover .caret {
  color: #666;
}
.top-menu a, .top-menu .caret {
  -webkit-transition: color 0.3s ease-out, background-color 0.7s ease-out;
  -moz-transition: color 0.3s ease-out, background-color 0.7s ease-out;
  -ms-transition: color 0.3s ease-out, background-color 0.7s ease-out;
  -o-transition: color 0.3s ease-out, background-color 0.7s ease-out;
  transition: color 0.3s ease-out, background-color 0.7s ease-out;
}
.top-menu a:hover {
  color: #666;
}
.image-oval {
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 50%;
  border: 10px solid white;
  width: 100%;
  -webkit-transition: margin-left 0.7s ease-out, margin-top 0.7s ease-out, border-radius 0.7s ease-out, -webkit-filter 0.3s ease-in-out;
  -moz-transition: margin-left 0.7s ease-out, margin-top 0.7s ease-out, border-radius 0.7s ease-out, -moz-filter 0.3s ease-in-out;
  -ms-transition: margin-left 0.7s ease-out, margin-top 0.7s ease-out, border-radius 0.7s ease-out, -ms-filter 0.3s ease-in-out;
  -o-transition: margin-left 0.7s ease-out, margin-top 0.7s ease-out, border-radius 0.7s ease-out, -o-filter 0.3s ease-in-out;
  transition: margin-left 0.7s ease-out, margin-top 0.7s ease-out, border-radius 0.7s ease-out, filter 0.3s ease-in-out;
}
.image-oval:hover {
  border-radius: 0%;
}

.gallery .back-to-top {
  margin-bottom: 80px;
}

.gallery .gallery-image {
  cursor: pointer;
}

.gallery .gallery-item-title {
  font-size: 20x;
  padding-top: 20px;
  padding-bottom: 20px;
  text-transform: uppercase;
}
.gallery .gallery-item-text {
  font-size: 16px;
  padding-bottom: 80px;
}
.gallery-item {
  padding-left: 50px;
  padding-right: 50px;
}
.date {
  margin-top: 10px;
}
.date .fa.fa-calendar {
  padding-right: 10px;
}
.gallery-item .gallery-item-description {
  display: none;
}
.load-more-button .dot {
  display: inline-block;
  visibility: hidden;
}
.load-more-button .dot1 {
  margin-left: 5px;
}
.load-more-button:hover .dot {
  visibility: visible;
  font-size: 12px;
}
.load-more-button .btn-load-more {
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -ms-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
  transition: color 1s ease-out;
}
.load-more-button:hover .btn-load-more {
  color: #ccc;
}
.load-more-button:hover .dot1, .load-more-button:hover .dot3 {
  -webkit-animation: scale1 1s linear infinite;
  -moz-animation: scale1 1s linear infinite;
  -o-animation: scale1 1s linear infinite;
  -ms-animation: scale1 1s linear infinite;
  animation: scale1 1s linear infinite;
}
.load-more-button:hover .dot2 {
  -webkit-animation: scale2 1s linear infinite;
  -moz-animation: scale2 1s linear infinite;
  -o-animation: scale2 1s linear infinite;
  -ms-animation: scale2 1s linear infinite;
  animation: scale2 1s linear infinite;
}
.about-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.about-section div.back-to-top a:hover, .about-section div.back-to-top a:focus {
  color: #333;
}
.about-section .about-image {
  -webkit-filter:sepia(0) brightness(1) contrast(1);
  -moz-filter:sepia(0) brightness(1) contrast(1);
  -ms-filter:sepia(0) brightness(1) contrast(1);
  -o-filter:sepia(0) brightness(1) contrast(1);
  filter:sepia(0) brightness(1) contrast(1);

  -webkit-transition: -webkit-filter 0.7s ease-out;
  -moz-transition: -moz-filter 0.7s ease-out;
  -ms-transition: -ms-filter 0.7s ease-out;
  -o-transition: -o-filter 0.7s ease-out;
  transition: filter 0.3s ease-in-out;
  width: 100%;
}
.about-section .about-image:hover {
  -webkit-filter:sepia(0.5) brightness(1.1) contrast(1.3);
  -moz-filter:sepia(0.5) brightness(1.1) contrast(1.3);
  -ms-filter:sepia(0.5) brightness(1.1) contrast(1.3);
  -o-filter:sepia(0.5) brightness(1.1) contrast(1.3);
  filter:sepia(0.5) brightness(1.1) contrast(1.3);
}
.about-section .about-text {
  font-size: 18px;
}
.upper-footer {
  padding-top: 40px;
  padding-bottom: 80px;
}
.upper-footer .upper-footer-heading {
  font-size: 30px;
  margin-top: 40px;
}
.hobbies-section .about-image {
  width: 100%;
}
.animated-characters {
  display: inline-block;
  font-size: 30px;
  position: absolute;
}
.hobbies-section .hobbies-content {
  margin-top: 20px;
}
.animated-character-fly {
  position: relative;
  -webkit-animation: rotateY 1s linear infinite;
  -moz-animation: rotateY 1s linear infinite;
  -o-animation: rotateY 1s linear infinite;
  -ms-animation: rotateY 1s linear infinite;
  animation: rotateY 1s linear infinite;
}
.animated-character-element {
  cursor: pointer
}
.hobbies-section audio {
  display: none;
}
.social-icons .social-icon {
  font-size: 30px;
  display:inline-block;
  margin-right: 20px;

  -webkit-transition: color 0.7s ease-out;
  -moz-transition: color 0.7s ease-out;
  -ms-transition: color 0.7s ease-out;
  -o-transition: color 0.7s ease-out;
  transition: color 0.7s ease-out;
}
.social-icons-content {
  margin-top: 20px;
}
.contact-form input {
  height: 40px;
}
.contact-form input.txt-name {
  margin-top: 20px;
}
.contact-form input.txt-email, .contact-form textarea.txt-message {
  margin-top: 5px;
}
.contact-form textarea.txt-message {
  min-height: 200px;
  resize: none;
}
.contact-form input, .contact-form textarea.txt-message {
  background-color: #444;
  outline: none;
  border: 1px solid #333 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;

  font-size: 16px;

  -webkit-transition: border 0.7s ease-out;
  -moz-transition: border 0.7s ease-out;
  -ms-transition: border 0.7s ease-out;
  -o-transition: border 0.7s ease-out;
  transition: border 0.7s ease-out;
}
.contact-form input:focus, .contact-form textarea.txt-message:focus {
  border: 1px solid #ccc !important;
}
.contact-form .send-button {
  margin-top: 5px;
  width: 100%;

  font-size: 16px;
  text-transform: uppercase;

  -webkit-transition: background-color 0.7s ease-out, color 0.7s ease-out;
  -moz-transition: background-color 0.7s ease-out, color 0.7s ease-out;
  -ms-transition: background-color 0.7s ease-out, color 0.7s ease-out;
  -o-transition: background-color 0.7s ease-out, color 0.7s ease-out;
  transition: background-color 0.7s ease-out, color 0.7s ease-out;
}
.contact-form .send-button, .contact-form .send-button:hover, .contact-form .send-button:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
.footer {
  padding-top: 40px;
  padding-bottom: 80px;
}
.footer .copyright-text {
  margin-top: 40px;
}
.back-to-top {
  margin-top: 40px;
}
.back-to-top a {
  -webkit-transition: color 0.7s ease-out;
  -moz-transition: color 0.7s ease-out;
  -ms-transition: color 0.7s ease-out;
  -o-transition: color 0.7s ease-out;
  transition: color 0.7s ease-out;
}
.back-to-top span {
  position: relative;
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  -ms-animation: none;
  animation: none;
}
.back-to-top:hover span {
  -webkit-animation: rotateY 1s linear infinite;
  -moz-animation: rotateY 1s linear infinite;
  -o-animation: rotateY 1s linear infinite;
  -ms-animation: rotateY 1s linear infinite;
  animation: rotateY 1s linear infinite;
}
@keyframes rotateY {
  from { transform: rotateY(0deg) }
  to { transform: rotateY(360deg) }
  from { transform: rotateY(360deg) }
  to { transform: rotateY(0deg) }
}
@-webkit-keyframes rotateY {
  from { -webkit-transform: rotateY(0deg) }
  to { -webkit-transform: rotateY(360deg) }
  from { -webkit-transform: rotateY(360deg) }
  to { -webkit-transform: rotateY(0deg) }
}
@-moz-keyframes rotateY {
  from { -moz-transform: rotateY(0deg) }
  to { -moz-transform: rotateY(360deg) }
  from { -moz-transform: rotateY(360deg) }
  to { -moz-transform: rotateY(0deg) }
}
@-ms-keyframes rotateY {
  from { -ms-transform: rotateY(0deg) }
  to { -ms-transform: rotateY(360deg) }
  from { -ms-transform: rotateY(360deg) }
  to { -ms-transform: rotateY(0deg) }
}
@-o-keyframes rotateY {
  from { -o-transform: rotateY(0deg) }
  to { -o-transform: rotateY(360deg) }
  from { -o-transform: rotateY(360deg) }
  to { -o-transform: rotateY(0deg) }
}

@keyframes rotateX {
  from { transform: rotateX(0deg) }
  to { transform: rotateX(360deg) }
  from { transform: rotateX(360deg) }
  to { transform: rotateX(0deg) }
}
@-webkit-keyframes rotateX {
  from { -webkit-transform: rotateX(0deg) }
  to { -webkit-transform: rotateX(360deg) }
  from { -webkit-transform: rotateX(360deg) }
  to { -webkit-transform: rotateX(0deg) }
}
@-moz-keyframes rotateX {
  from { -moz-transform: rotateX(0deg) }
  to { -moz-transform: rotateX(360deg) }
  from { -moz-transform: rotateX(360deg) }
  to { -moz-transform: rotateX(0deg) }
}
@-ms-keyframes rotateX {
  from { -ms-transform: rotateX(0deg) }
  to { -ms-transform: rotateX(360deg) }
  from { -ms-transform: rotateX(360deg) }
  to { -ms-transform: rotateX(0deg) }
}
@-o-keyframes rotateX {
  from { -o-transform: rotateX(0deg) }
  to { -o-transform: rotateX(360deg) }
  from { -o-transform: rotateX(360deg) }
  to { -o-transform: rotateX(0deg) }
}

@keyframes scale1 {
  0% { transform: scale(1) }
  50% { transform: scale(1.5) }
  100% { transform: scale(1) }
}
@-webkit-keyframes scale1 {
  0% { -webkit-transform: scale(1) }
  50% { -webkit-transform: scale(1.5) }
  100% { -webkit-transform: scale(1) }
}
@-moz-keyframes scale1 {
  0% { -moz-transform: scale(1) }
  50% { -moz-transform: scale(1.5) }
  100% { -moz-transform: scale(1) }
}
@-ms-keyframes scale1 {
  0% { -ms-transform: scale(1) }
  50% { -ms-transform: scale(1.5) }
  100% { -ms-transform: scale(1) }
}
@-o-keyframes scale1 {
  0% { -o-transform: scale(1) }
  50% { -o-transform: scale(1.5) }
  100% { -o-transform: scale(1) }
}

@keyframes scale2 {
  0% { transform: scale(1.5) }
  50% { transform: scale(1) }
  100% { transform: scale(1.5) }
}
@-webkit-keyframes scale1 {
  0% { -webkit-transform: scale(1.5) }
  50% { -webkit-transform: scale(1) }
  100% { -webkit-transform: scale(1.5) }
}
@-moz-keyframes scale1 {
  0% { -moz-transform: scale(1.5) }
  50% { -moz-transform: scale(1) }
  100% { -moz-transform: scale(1.5) }
}
@-ms-keyframes scale1 {
  0% { -ms-transform: scale(1.5) }
  50% { -ms-transform: scale(1) }
  100% { -ms-transform: scale(1.5) }
}
@-o-keyframes scale1 {
  0% { -o-transform: scale(1.5) }
  50% { -o-transform: scale(1) }
  100% { -o-transform: scale(1.5) }
}

.item-window-schema {
  display: none;
}
.item-window .item-window-fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
.item-window .item-window-contents div {
  height: inherit;
}
.item-window div..item-window-image {
  width: 100%;
  height: auto;
}
.item-window .item-window-image img {
  width: 100%;
}
.item-window .image-column {
  padding: 0px;
}
.item-window .window-title {
  margin-top: 20px;
  font-size: 40px;
}
.item-window div.item-window-scroll-contents {
  height: auto;
}
.item-window .item-window-scroll {
  overflow-y: hidden;
  overflow-x: hidden;
}
.item-window .window-text {
  margin-top: 20px;
}
.item-window .window-description {
  margin-top: 40px;
  margin-bottom: 40px;
}
.item-window .close-button {
  margin-top: 20px;
  font-size: 100px;

  -webkit-transition: color 0.7s ease-out;
  -moz-transition: color 0.7s ease-out;
  -ms-transition: color 0.7s ease-out;
  -o-transition: color 0.7s ease-out;
  transition: color 0.7s ease-out;
}
.item-window .close-button:hover, .item-window .close-button:focus {
  color: #666;
}
#bowling_hype_container, #tv_hype_container, #boat_hype_container, #cup_hype_container {
  display: inline-block;
  margin: 0px !important;
}
.preloader .animated-characters {
  font-size: 22px;
}
.preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.preloader .loading-text {
  margin-left: -22px;
  margin-top: -7px;
  font-size: 30px;
}
.preloader .loading-text span {
  visibility: hidden;
}
.ie6 .container, .ie7 .container, .ie8 .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}
.ie6 .hobbies-section, .ie7 .hobbies-section, .ie8 .hobbies-section {
  display: none;
}
.ie6 .demo-link, .ie7 .demo-link, .ie8 .demo-link {
  display: none;
}
.ie6 .hobbies-link, .ie7 .hobbies-link, .ie8 .hobbies-link {
  display: none;
}
.ie6 .all-contents, .ie7 .all-contents, .ie8 .all-contents {
  display: block;
}
.ie8 .preloader {
  display: none;
}

            
          
!
            
              var common = {};
common.getParentByClass = function(control,class_name) {
  var count = 0;
  while (count <= 100) {
    if ($(control).hasClass(class_name) == true) {
      return control;
    }
    control = $(control).parent();
    count += 1;
  }
  return 0;
};
common.getTime = function() {
  if (!Date.now) {
    Date.now = function() { return new Date().getTime(); }
  }
  return Math.floor(Date.now() / 1000);
};
common.isIE = function(version, comparison) {
  var $div = $('<div style="display:none;"/>').appendTo($('body'));
  $div.html('<!--[if '+(comparison||'')+' IE '+(version||'')+']><a>&nbsp;</a><![endif]-->');
  var ieTest = $div.find('a').length;
  $div.remove();
  return ieTest;
};

(function($) {
  $.fn.startTopMenu = function() {
    var topMenu = {};
    topMenu.element = this;

    $(topMenu.element).each(function() {
      var topMenuItem = this;
      if ($(topMenuItem).find('.list-group').length == 1) {
        $(topMenuItem).find('a').not('.list-group-item').hover(function() {
          $(topMenuItem).find('.list-group').slideDown();

          if (Modernizr.touch) {
            $('.all-contents').unbind('click').click(function(e) {
              $(topMenu.element).find('.list-group').slideUp();
            });
          }
        }, function() {

        });
        $(topMenuItem).hover(function() {

        }, function() {
          $(topMenuItem).find('.list-group').slideUp();
        });
      }
    });

    return topMenu;
  }
})(jQuery);

(function($) {
  $.fn.startItemWindows = function() {
    var itemWindows = {};
    itemWindows.element = this;

    $(itemWindows.element).find('.gallery-item').each(function() {
      var galleryItem = this;
      var itemWindow = $(galleryItem).itemWindow();
      var galleryImage = $(galleryItem).find(' .gallery-image');

      $(galleryImage).attr('_clicked', '0');
      $(galleryImage).click(function() {
        if ($(galleryImage).attr('_clicked') == '1') return false;

        if (!common.isIE(9, 'lte')) {
          var startTime = 0;
          if (Modernizr.touch) startTime = 500;
          $(galleryImage).attr('_clicked', '1');
          setTimeout(function() {
            itemWindow.openWindow();
            $(galleryImage).attr('_clicked', '0');
          }, startTime);
        } else {
          itemWindow.openWindow();
        }
        return false;
      });
    });

    return itemWindows;
  };

  $.fn.itemWindow = function(galleryItem) {
    var itemWindow = {};
    itemWindow.element = this;

    itemWindow.openWindow = function() {
      var galleryItemWindow = $($('.item-window-schema').html()).appendTo('body');
      var itemImage = $(itemWindow.element).find('.gallery-image').clone().appendTo($(galleryItemWindow).find('.item-window-image'));
      $(itemImage).removeClass('gallery-image image-oval');
      $(galleryItemWindow).find('.window-title').html($(itemWindow.element).find('.gallery-item-title').html());
      $(galleryItemWindow).find('.window-text').html($(itemWindow.element).find('.gallery-item-text').html());
      $(galleryItemWindow).find('.window-description').html($(itemWindow.element).find('.gallery-item-description').html());
      $('body, .all-contents').addClass('noscroll');

      if (!common.isIE(9, 'lte')) {
        setTimeout(function() {
          $(galleryItemWindow).find('.item-window-scroll').css('overflow-y', 'auto');
        }, 1000);
      } else {
        $(galleryItemWindow).find('.item-window-scroll').css('overflow-y', 'auto');
      }

      $(galleryItemWindow).find('.close-button').click(function(e) {
        $(this).attr('disabled', true);
        if (!common.isIE(9, 'lte')) {
          $(galleryItemWindow).find('.item-window-scroll').css('overflow-y', 'hidden');
          var startTime = 0;
          if (Modernizr.touch) startTime = 500;
          setTimeout(function() {
            $(galleryItemWindow).find('.item-window-image').addClass('animated hinge');
            $(galleryItemWindow).find('.image-text-column').addClass('animated rotateOutUpRight');
            setTimeout(function() {
              $(galleryItemWindow).addClass('animated fadeOut');
              $('body, .all-contents').removeClass('noscroll');
            }, 2000);
            setTimeout(function() {
              $('body, .all-contents').removeClass('noscroll');
              $(galleryItemWindow).remove();
            }, 3000);
          }, startTime);
        } else {
          $(galleryItemWindow).hide();
          $('body, .all-contents').removeClass('noscroll');
        }

        return false;
      });
    }

    return itemWindow;
  }
})(jQuery);

(function($) {
  $.fn.startGallery = function() {
    var gallery = {};
    gallery.element = this;
    gallery.running = 0;

    $(gallery.element).find('.gallery-item').each(function() {
      var galleryItem = this;
      var galleryItemImage = $(galleryItem).find('img.gallery-image');
      var galleryItemAnimation = $(galleryItemImage).galleryItemAnimation();

      $(galleryItemImage).hover(function() {
        galleryItemAnimation.stopAnimation();
      }, function () {
        galleryItemAnimation.startAnimation();
      });
    });

    return gallery;
  };

  $.fn.galleryItemAnimation = function() {
    var animation = {};
    animation.element = this;
    animation.running = 0;

    animation.startAnimation = function() {
      animation.running = 1;
      animation.animate();
    }

    animation.animate = function() {
      if (animation.running == 0) {
        return false;
      }

      var type = Math.ceil(Math.random() * 2) - 1;

      var number = 10 + Math.ceil(Math.random() * 10);
      var direction = Math.ceil(Math.random() * 2) - 1;
      if (direction == 1) number = 0 - number;

      if (type == 0) {
        $(animation.element).css('margin-left', String(number) + 'px');
      } else {
        $(animation.element).css('margin-top', String(number) + 'px');
      }
    }

    animation.stopAnimation = function() {
      animation.running = 0;
    }

    return animation;
  }
})(jQuery);

(function($) {
  $.fn.scrollAnimate = function() {
    var scrollAnimate = {};
    scrollAnimate.element = this;
    scrollAnimate.getAnimationClasses = function(element, prefixClass, singleClass) {
      var elementClasses = $(element).attr('class').split(' ');
      var animationClasses = '';
      for (i=0; i<=elementClasses.length-1; i++) {
        elementClass = String(elementClasses[i]);
        if (elementClass.split('-').length == 3 && elementClass.split('-')[0].toLowerCase() == prefixClass && elementClass.split('-')[1].toLowerCase() == 'animate') {
          animateCssClass = elementClass.split('-')[2];

          if (singleClass) return animateCssClass;

          animationClasses  = animationClasses + ' ' + animateCssClass;
        }
      }
      return animationClasses;
    }

    scrollAnimate.onScroll = function() {
      if ($('.gallery').attr('_link_scrolling') == '1') return false;
      scrollAnimate.scrollTop = $(window).scrollTop(),
        scrollAnimate.windowHeight = $(window).height() * 1.1;

      $('.scroll-animate:not(.do-not-animate)').each(function () {
        var element = this;
        offsetTop = $(element).offset().top;
        var animationClasses = scrollAnimate.getAnimationClasses(element, 'scroll', 0);

        if (scrollAnimate.scrollTop + scrollAnimate.windowHeight > offsetTop) {
          $(element).addClass(animationClasses);
        }
        if (scrollAnimate.scrollTop + scrollAnimate.windowHeight < offsetTop) {
          $(element).removeClass(animationClasses);
        }
      });
    }

    $(window).on('scroll', scrollAnimate.onScroll);
    scrollAnimate.onScroll();

    return scrollAnimate;
  }
})(jQuery);

(function($) {
  $.fn.startGalleryScrollAnimations = function(scrollAnimate) {
    var animations = {};
    animations.element = this;

    $(animations.element).find('.gallery-row.gallery-animate').each(function() {
      var galleryRow = this;
      $(galleryRow).scrollAnimateGallery(scrollAnimate);
    });

    return animations;
  };

  $.fn.scrollAnimateGallery = function(scrollAnimate) {
    var scrollAnimateGallery = {};
    scrollAnimateGallery.element = this;
    scrollAnimateGallery.time = 0;

    scrollAnimateGallery.onScroll = function() {
      offsetTop = $(scrollAnimateGallery.element).offset().top;
      var animationClass = scrollAnimate.getAnimationClasses(scrollAnimateGallery.element, 'gallery', 1);

      if (animationClass) {
        if (scrollAnimate.scrollTop + scrollAnimate.windowHeight > offsetTop) {
          if (common.getTime() - scrollAnimateGallery.time <= 2) return false;

          var index = Math.floor(Math.random() * $(scrollAnimateGallery.element).find('.gallery-image').length);
          var galleryImage = $(scrollAnimateGallery.element).find('.gallery-image')[index];
          $(galleryImage).addClass('scroll-animate scroll-animate-animated scroll-animate-' + animationClass);
          scrollAnimate.onScroll();

          setTimeout(function() {
            $(scrollAnimateGallery.element).find('.gallery-image').removeClass('scroll-animate scroll-animate-animated scroll-animate-' + animationClass + ' animated ' + animationClass);
          }, 1000);

          scrollAnimateGallery.time = common.getTime();
        }
      }
    }

    $(window).on('scroll', scrollAnimateGallery.onScroll);
    scrollAnimateGallery.onScroll();

    return scrollAnimateGallery;
  }
})(jQuery);

(function($) {
  $.fn.startAnimatedCharacters = function() {
    var animatedCharacters = {};

    $(this).each(function() {
      var element = this;
      var animatedCharacters = $(element).animatedCharacters();
      animatedCharacters.startAnimation();
    });

    return animatedCharacters;
  };

  $.fn.animatedCharacters = function() {
    var animatedCharacters = {};
    animatedCharacters.element = this;
    animatedCharacters.running = 0;

    $(animatedCharacters.element).find('.animated-character-element').click(function() {
      if (animatedCharacters.running == 0) {
        animatedCharacters.startAnimation();
      } else {
        animatedCharacters.stopAnimation();
      }
    });

    animatedCharacters.startAnimation = function() {
      animatedCharacters.running = 1;
      animatedCharacters.animate();
    }

    animatedCharacters.stopAnimation = function() {
      animatedCharacters.running = 0;
    }

    animatedCharacters.animate = function() {
      if (animatedCharacters.running == 0) return false;
      if ($(animatedCharacters.element).find('span.animated-character-element').length != 1) return false;

      var animatedElement = $(animatedCharacters.element).find('span.animated-character-element');
      var animatedNote = $(animatedCharacters.element).find('span.animated-character-element').clone().appendTo($(animatedCharacters.element));
      var animationColorful = 1;
      if (String($(animatedCharacters.element).attr('animation-colorful')).toLowerCase() == 'false') animationColorful = 0;
      if (animationColorful == 1) {
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        $(animatedNote).css('color', randomColor);
      }
      $(animatedNote).removeClass('animated-character-element');

      $(animatedNote).css('position', 'absolute');
      $(animatedNote).css('top', '0px');
      $(animatedNote).css('left', ($(animatedElement).width() / 2) + 'px');

      $(animatedNote).addClass('animated-character-fly');
      $(animatedNote).css('font-size', String(Math.ceil(Math.random() * 10) + 15) + 'px');

      var left = Math.ceil(Math.random() * 100);
      if (Math.ceil(Math.random() * 2) - 1 == 0) left = 0 - left;

      $(animatedNote).fadeIn('fast', function() {
        $(animatedNote).animate({
          opacity: 0,
          top: 0 - Math.ceil(Math.random() * 50),
          left: left
        }, 500 + Math.ceil(Math.random() * 2000), 'linear', function() {
          $(animatedNote).remove();
        });
      });

      $(animatedElement).addClass('animated wobble');

      var duration = 2000;
      if ($.isNumeric($(animatedCharacters.element).attr('animation-duration'))) {
        duration = $(animatedCharacters.element).attr('animation-duration');
      }

      setTimeout(function() {
        $(animatedElement).removeClass('animated wobble');
        animatedCharacters.animate();
      }, duration);
    }

    return animatedCharacters;
  }
})(jQuery);

(function($) {
  $.fn.goToTop = function() {
    var scroll = {};
    scroll.element = this;

    $(scroll.element).unbind('click').click(function() {
      $('.gallery').attr('_link_scrolling', '1');
      var startTime = 0;
      if (Modernizr.touch) startTime = 500;
      setTimeout(function() {
        $('html,body').animate({
          'scrollTop': 0
        }, 1000, 'linear', function() {
          $('.gallery').attr('_link_scrolling', '0');
        });
      }, startTime);
      return false;
    });
  };

  $.fn.startScrollingClicks = function() {
    var clicks = {};
    clicks.element = this;

 $(clicks.element).find('a[href*=\\#]').not('.dropdown-link').click(function(e) {
      var scrollToElement = $('#' + $(this).attr('href').split('#').join(''));
      if (scrollToElement.length == 0) scrollToElement = $('[name="' + $(this).attr('href').split('#').join('') + '"]');
      if ($(this).attr('href').split(' ').join('') == '#') scrollToElement = $('body');

      if (scrollToElement.length >= 1) {
        $('.gallery').attr('_link_scrolling', '1');
        var startTime = 0;
        if (Modernizr.touch) startTime = 500;
        setTimeout(function() {
          $('html,body').animate({
            scrollTop: $($(scrollToElement)[0]).offset().top
          }, 1000, 'linear', function() {
            $('.gallery').attr('_link_scrolling', '0');
          });
        }, startTime);
        return false;
      }
    });

    return clicks;
  }
})(jQuery);

(function($) {
  $.fn.audioPlayer = function(clickElement) {
    var audioPlayer = {};
    audioPlayer.element = this;
    audioPlayer.playing = 0;
    audioPlayer.clickElement = clickElement;

    $(audioPlayer.element).find('.player-control').click(function() {
      if (audioPlayer.playing == 0) {
        audioPlayer.startMusic();
      } else {
        audioPlayer.stopMusic();
      }
    });

    audioPlayer.startMusic = function() {
      audioPlayer.playing = 1;
      $(audioPlayer.element).find('audio').trigger('play');
    }

    audioPlayer.stopMusic = function() {
      audioPlayer.playing = 0;
      $(audioPlayer.element).find('audio').trigger('pause');
    }

    return audioPlayer;
  }
})(jQuery);

(function($) {
  $.fn.startPreloader = function(preloaderElement, parentElement) {
    var preloader = {};
    preloader.element = this;
    preloader.parentElement = parentElement;
    preloader.alreadyLoaded = 0;

 $(preloader.element).imagesLoaded().always(function( instance ) {
      preloader.imagesLoaded();
    }).done(function( instance ) {
      preloader.imagesLoaded();
    }).fail(function() {
      preloader.imagesLoaded();
    }).progress(function(instance, image){
      var result = image.isLoaded ? 'loaded' : 'broken';
    });

    preloader.imagesLoaded = function() {
      if (preloader.alreadyLoaded == 1) return false;
      preloader.alreadyLoaded = 1;

      setTimeout(function() {
        $(preloaderElement).addClass('animated rollOut');
        setTimeout(function() {
          $(preloaderElement).remove();
          $(parentElement).fadeIn('slow', function() {

          });
        }, 900);
      }, 2000);
    }

    return preloader;
  }
})(jQuery);

$('.gallery').startGallery();
var scrollAnimate = $('body').scrollAnimate();
$('.gallery').startGalleryScrollAnimations(scrollAnimate);
$('.gallery').startItemWindows();
$('.top-menu-item').startTopMenu();
$('.animated-characters').startAnimatedCharacters();
$('.back-to-top a').goToTop();
$('.top-menu, .social-icons').startScrollingClicks();
$('.load-more-button').startScrollingClicks();
$('.all-contents .gallery').startPreloader($('.preloader'), $('.all-contents'));
var audioPlayer = $('.hobbies-section').audioPlayer($('.hobbies-section .animated-character-element'));
audioPlayer.startMusic();
            
          
!
999px
Loading ..................

Console