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.

            
              <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#myPage">Peter DHaiti</a>
	  
      
    </div>
	
	
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
		<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">ABOUT ME
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
			<li><a href="#bio">BIO</a></li>
			<li><a href="#achievements">ACHIEVEMENTS</a></li>
		  </ul>
        </li>
		<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">LATEST
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
			<li><a href="#employers">LATEST EMPLOYERS</a></li>
			<li><a href="#works">LATEST PTOJECTS</a></li>
		  </ul>
        </li>
        <li><a href="#contact">CONTACT</a></li>
        <li><a href="#service">SERVICES</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="http://usawebsolution.com/product/free-domain-name-registration/">Free Domain Name</a></li>
            <li><a href="http://www.usawebsolution.com/hosting/wordpress.aspx?ci=53396&prog_id=309546">Special Wordpress Hosting</a></li>
            <li><a href="http://usawebsolution.com/product/search-engine-optimization-seo-online-tools/">Online SEO Software</a></li>
			<li><a href="https://www.secureserver.net/email/online-storage.aspx?ci=1796&prog_id=309546">Cloud Backup + Software</a></li>
			<li><a href="http://yeapnetwork.com/">Reseller Plan</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>



<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://dhaiti.pro/portfolio/img/office2.JPG" alt="Yeap Network Office in NYC"  class="img-responsive">
        <div class="carousel-caption">
          <h1>FEE Office - 2006</h1>
          <h2>Director IT and Webmaster at Foundation for Economic Education</h2>
        </div>
      </div>

      <div class="item">
        <img src="http://dhaiti.pro/portfolio/img/lt-photography-responsive-layout-free-wordpress-theme.png" alt="Programming Skills" class="img-responsive">
        <div class="carousel-caption">
          <h1>Expert in Responsive Web Design</h1>
          <h2>AJAX, HTML5, XHTML, CSS, CSS3, Bootstrap, JavaScript, JQuery, AngularJS, PHP/MySQL</h2>
        </div>
      </div>
    
      <div class="item">
        <img src="http://dhaiti.pro/portfolio/img/slide3.png" alt="Technical Skils" class="img-responsive">
        <div class="carousel-caption">
          <h1>Expert on SEO</h1>
          <h2>CloudFront, Elastic Compute Cloud (Amazon EC2), Relational Database Service (RDS), Amazon Route 53, VPS, Dedicated Server, Cloud...</h2>
        </div>
      </div>
	  <a href="#bio" class="page-scroll"><i class="fa fa-chevron-down fa-chevron-down faa-vertical animated" style="font-size:48px;color:red"></i> </a>
	 </div>
	 

    <!-- Left and right controls -->
     <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
  </a>  
  <div id="carouselButtons">
      <button id="playButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-play"></span>
       </button>
      <button id="pauseButton" type="button" class="btn btn-default btn-xs">
          <span class="glyphicon glyphicon-pause"></span>
      </button>
  </div>
</div>


<!-- Container (The Bio Section) -->
<did name="about"></div>
<section id="bio">
<div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>Bio</h3>
                    <hr class="divider">
                  
                </div>
            </div>
  
            <div class="row">
                <div class="col-lg-12">
                  <div class="col-sm-4">
<div class="pd-card">
  <img src="http://dhaiti.pro/portfolio/img/office1.jpg" class="img-responsive img-rounded  center-block" alt="At Yeap Network Office - NYC" style="width:100%; height: 220px">
  <div class="pd-card-text-container text-left">
    <address>
  <strong>Peter DHaiti</strong><br>
      <em>Senior Web Developer</em><br>
  3 World Financial Center, 24th floor<br>
  New York, NY 10281<br><br>
  <abbr title="Phone" class="glyphicon glyphicon-phone faa-burst animated"></abbr> (718) 399-0961
</address>
    
  </div>
</div>
</div>
                  <div class="col-sm-8  text-justify">
                     <p>Peter DHaiti is a Senior Web Developer from New York who has years of experience in the field with expertise in HTML5, CSS3, Bootstrap, jQuery, AngularJs, Polymer, PHP5, MySQL, SEO and more.</p>
  <p>He received his degree in computer programming with honors in 2004 from Katharine Gibbs School in NYC, after getting his A+ Advance Certificate for Computer Repair & Troubleshooting from South Shore School, Brooklyn, NY in 2002.</p>
    <p>Over the years he has worked with various institutions from medical facilities like Brookdale University Hospital and Medical Center to specialized companies such as Tata Consultancy Services (TCS) where he was working as lead developer.</p>
                    </div>
                  
                </div>
            </div>
  
  
           
 

  <p class="text-justify">He started first as a administrative assistant in 2002 he has juggled through the field up to the point where after building enough managing experience he became a leading Web Developer and CTO in the field.</p>
   <a href="#achievements" class="page-scroll"><i class="fa fa-chevron-down fa-chevron-down" style="font-size:48px;color:red"></i> </a>
  </section>
  
  <!-- Team Treehouse Achievements -->
 <section id="achievements">
  <div class="team-treehouse text-center">
    <h3>Team Treehouse Achievements</h3>
    <p><strong class='total'>0</strong> points have been earned</p>

    <div class="pieChart group">
      <div class="pie"></div>
      <div class="legend"></div>
    </div>
  </a>
</div> <!--End Team Treehouse Achievements -->
  <!--Button to my Treehouse Profile -->
  
 
  <div class="row">
                <div class="col-lg-12 text-center">
                   <a target="_blank" href="https://teamtreehouse.com/petersondhaiti"> <button type="button" class="btn btn-primary btn-lg">My Treehouse Profile</button></a>
                </div>
  </div>

  <a href="#employers" class="page-scroll"><i class="fa fa-chevron-down fa-chevron-down" style="font-size:48px;color:red"></i> </a>
  </section>
   
  
  
  <!-- section latest employers -->
  <section id="employers" class="bg-gray">
    <article class="container">
  <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>Latest Employers</h3>
                    <hr class="divider">
                </div>
  </div>
  
  <div class="row">
   <div class="col-sm-4">
<h2>Yeap Network, NYC</h2>
<div class="pd-card"> 
  <img src="http://dhaiti.pro/portfolio/img/ynlogo.jpg" class="img-circle" alt="Yeap Network, NYC" style="width:100%; height:300px">
  <div class="pd-card-text-container">
     <p>Chief Technology Office (CTO)<br>
    2015 - Present</p>
  </div>
</div>
</div>

<div class="col-sm-4">
<h2>TCS/JPMC</h2>
<div class="pd-card">
  <img src="http://dhaiti.pro/portfolio/img/tcslogo.jpg" class="img-circle" alt="TCS" style="width:100%; height:300px">
  <div class="pd-card-text-container">
     <p>Senior Software Engineer Lead
    <br>2014 - 2015</p>
  </div>
</div>
</div>

<div class="col-sm-4">
<h2>Bernstein Medical - NYC</h2>
<div class="pd-card">
  <img src="http://dhaiti.pro/portfolio/img/bmlogo.jpg" class="img-circle" alt="Bernstein Medical" style="width:100%; height:300px">
  <div class="pd-card-text-container">  
    <p>Director IT and Webmaster<br>
    2013 - 2014</p>
  </div>
</div>
</div>
  </div>
</div>
  <br>
  <div class="row text-center">
  <article class="col-lg-12">
    <a class="page-scroll" href="#contact"> <button type="button" class="btn btn-default">Resquest a Full Resume</button></a>
  </article>
  </div>
    </article>
	 <a href="#works" class="page-scroll"><i class="fa fa-chevron-down fa-chevron-down" style="font-size:48px;color:red"></i> </a>
  
</section>

<!-- Container (Works Section) -->
<section id="works" class="bg-1">
  <div class="container">
 
    <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>Latest Works</h3>
                    <hr class="divider">
                </div>
            </div>
   
    
    <div class="row text-center">
      <div class="col-sm-4">
        <div class="thumbnail">
         <a target="_blank" href="http://www.yeapnetwork.com/"> <img src="http://dhaiti.pro/portfolio/img/yeapnetwork.png" alt="Yeap Network" style="width:400px; height:400px"></a>
          <h4>Yeap Network</h4>
          <p><strong>Yeap Network - Made with:</strong></p>
          <p>HTML5, CSS3, jquery, bootstrap, angularJs, PHP/MySQL</p>
          <button class="btn hide-btn" data-toggle="modal" data-target="#myModal">Request More Details</button>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail">
          <a target="_blank" href="http://moisejeancharles2016.com/"> <img src="http://dhaiti.pro/portfolio/img/mjc.png" alt="Moise Jean Charles" style="width:400px; height:400px"></a>
          <h4>M. J. Charles</h4>
          <p><strong>Made with Wordpress</strong></p>
          <p>JavaScript,   jQuery,   HTML,   CSS,   PHP5,   MySQL   Database</p>
          <button class="btn hide-btn" data-toggle="modal" data-target="#myModal">Request More WP Samples</button>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="thumbnail">
          <a target="_blank" href="http://longevityllc.com/"> <img src="http://dhaiti.pro/portfolio/img/longevity.png" alt="Longevity LLC" style="width:400px; height:400px"></a>
          <h4>Longevity LLC</h4>
          <p><strong>Made with Magento</strong></p>
          <p>Ajax,  jQuery,  JavaScript,  PHP,  MySQL Database,  HTML,  CSS</p>
          <button class="btn hide-btn" data-toggle="modal" data-target="#myModal">Request More Details</button>
        </div>
      </div>
  </div>
  
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
              <input type="number" class="form-control" id="psw" placeholder="How many?">
            </div>
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
              <button type="submit" class="btn btn-block">Pay
                <span class="glyphicon glyphicon-ok"></span>
              </button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
            <span class="glyphicon glyphicon-remove"></span> Cancel
          </button>
          <p>Need <a href="#">help?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<a href="#contact" class="page-scroll"><i class="fa fa-chevron-down fa-chevron-down" style="font-size:48px;color:red"></i> </a>
</section>

<!-- Container (Contact Section) -->
<section id="contact">
<div class="container">

           <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>Contact</h3>
                    <hr class="divider">
                </div>
            </div>
  
  <p class="text-center"><em>I like to hear from my clients!</em></p>

  <div class="row">
    <div class="col-md-4">
      <p>Client? Drop a note.</p>
      <p><span class="glyphicon glyphicon-map-marker"></span>New York City, US</p>
      <p><span class="glyphicon glyphicon-phone faa-burst animated"></span>P: (718) 399-0961</p>
    </div>
    <div class="col-md-8">
      <div class="row">
        
		<script type="text/javascript">
		var __machform_url = 'http://formproductions.com/embed.php?id=10414';
		var __machform_height = 666;
		</script>
		<div id="mf_placeholder"></div>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://formproductions.com/js/jquery.ba-postmessage.min.js"></script>
		<script type="text/javascript" src="http://formproductions.com/js/machform_loader.js"></script>
		
    </div>
  </div>
   </section>
  
  <section id="service" class="bg-gray">
  <article class="container">
               <div class="row">
                <div class="col-lg-12 text-center">
                    <h3>Special Consultancy Services</h3>
                    <hr class="divider">
                </div>
            </div>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Responsive Web Design</a></li>
    <li><a data-toggle="tab" href="#menu1">Ecommerce</a></li>
    <li><a data-toggle="tab" href="#menu2">Wordpress Themes and Plugins</a></li>
	<li><a data-toggle="tab" href="#menu3">Search Engine Optimization (SEO)</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h2>The Future is Now</h2>
      <p>I use the latest technologies like html5, css3, sass, Bootstrap, jQuery, angularJS, ajax, Json and JavaScript to get my clients up to date</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h2>Get your Products Online</h2>
      <p>Platform that I use for the Ecommerce: Magento and OsCommerce, PHP/MySQL, also I use PDshop, a .Net platform</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h2>Best and most popular platform in the world</h2>
      <p>I have no limit of what I can do with Wordpress, just come up with the idea, I will do the rest.</p>
    </div>
	<div id="menu3" class="tab-pane fade">
      <h2>It's very important to have website on the top of the search engines</h2>
	  <h3>Our SEO Process</h3>
      <ol>
	        <li>Review the website</li>
			<li>Select keywords</li>
			<li>Prepare your code and meta tags to be SEO frendly</li>
			<li>Baseline Rankings</li>
			<li>Optimize All Rankings</li>
			<li>Submit to Search Engines</li>
			<li>Wait for Indexing</li>
			<li>Compare Rankings</li>
			<li>Identify High & Low rankings</li>
			<li>Optimize on Low Rankings</li>
			<li>Submit to Search Engines</li>
			<li>Wait for Indexing</li>
			<li>Compare Rankings</li>
			<li>Optimize on Low Rankings</li>
	  </ol>
    </div>
  </div>
</div>
</article>
</section>
<div id="googleMap"></div>
</section>
<!-- Add Google Maps -->


  <!-- Footer -->
<footer class="text-center">
  <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a><br><br>
  <p>Peter DHaiti's Portfolio By <a href="http://usawebsolution.com" data-toggle="tooltip" title="Peter DHaiti's Portfolio">Peter DHaiti</a></p>
</footer>

<div class="fixed-up-down-btn page-scroll" id="navigation_up_down_4555"><script type="text/javascript" src="http://services.webestools.com/navigation_up_down/6-4555-right.js"></script></div>

</body>


            
          
!
            
              /* Style for Treehouse Graph */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

// properties
$color-background: #f9f9f9;
$color-primary: #222222;
$size-circle: 12.5em;
$size-thickness: 2.5em;
$size-inner: $size-circle - $size-thickness * 2;

// resets
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: $color-primary;
}

// clearfix
.group:after {content:"";display:table;clear:both;}

// general
body {
  font-family: "Open Sans", Arial;
  background: $color-background;

  a {
    text-decoration: none;
  }
  
  .team-treehouse {

    h1, h2 {
      text-align: center;
    }
    h2 {
      font-weight: normal;
    }
  }
}


// pie chart
.pieChart {
  width: $size-circle + 13em;
  margin: 0 auto;
  padding-top: 1em;
}

// pie
.pie {
  height: $size-circle;
  width: $size-circle;
  position: relative;
  float:left;

  &::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: $size-inner;
    height: $size-inner;
    background: $color-background;
    border-radius: 50%;
    top: $size-thickness;
    left: $size-thickness;
  }
}

.slice {
  position: absolute;
  width: $size-circle;
  height: $size-circle;
  clip: rect(0px, $size-circle, $size-circle, $size-circle/2);
  animation: bake-pie 1s;

  span {
    display: block;
    position: absolute;
    top: 0;
    left: 0; 
    background-color: black;
    width: $size-circle;
    height: $size-circle;
    border-radius: 50%;
    clip: rect(0px, $size-circle, $size-circle, $size-circle/2);
  }
}

// legend
.legend {
  width: 13em;
  padding-left: 1em;
  float:left;
  
  ul {
    list-style-type: none;
    list-style-position: inside;
    font-size: 0.8em;
  }
  li {
    height: 1.25em;
    margin-bottom: 0.7em;
    padding-left: 0.5em;
    border-left: 1.25em solid black;
  }
  em {
    font-style: normal;
  }
  span {
    float: right;
    font-weight: bold;
  }
}


/* Custom CSS */

body {
      font: 400 15px/1.8 Lato, sans-serif;
      color: #777;
  }
  h3, h4 {
      margin: 10px 0 30px 0;
      letter-spacing: 10px;
      font-size: 20px;
      color: #111;
  }
 
  .person {
      border: 10px solid transparent;
      margin-bottom: 25px;
      width: 255px;
      height: 255px;
      opacity: 0.7;
  }
  .person:hover {
      border-color: #FF0000;
  }
  .carousel-inner img {
      -webkit-filter: grayscale(90%);
      filter: grayscale(90%); /* make all photos black and white */
      width: 100%; /* Set width to 100% */
      margin: auto;
  }
  .carousel-caption h2 {
      color: #FFA500 !important;
    display: none;
  }

  .carousel-caption h1 {
      color: 	#FF4500 !important;
  }  

 
  .bg-1 {
      background: #2d2d30;
      color: #bdbdbd;
  }
  .bg-1 h3 {color: #fff;}
  .bg-1 p {font-style: italic;}
  .list-group-item:first-child {
      border-top-right-radius: 0;
      border-top-left-radius: 0;
  }
  .list-group-item:last-child {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
  }
  .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }
  .thumbnail p {
      margin-top: 15px;
      color: #555;
  }
  .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #990000;
      color: #000;
  }
  .modal-header, h4, .close {
      background-color: #333;
      color: #fff !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-header, .modal-body {
      padding: 40px 50px;
  }
  .nav-tabs li a {
      color: #777;
  }
  #googleMap {
      width: 100%;
      height: 400px;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
  }
  .navbar {
      font-family: Montserrat, sans-serif;
      margin-bottom: 0;
      background-color: #2d2d30;
      border: 0;
      font-size: 11px !important;
      letter-spacing: 4px;
      opacity: 0.9;
  }
  .navbar li a, .navbar .navbar-brand {
      color: #d5d5d5 !important;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #FF0000 !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li a {
      color: #000 !important;
  }
  .dropdown-menu li a:hover {
      background-color: red !important;
  }
  footer {
      background-color: #2d2d30;
      color: #f5f5f5;
      padding: 32px;
  }
  footer a {
      color: #f5f5f5;
  }
  footer a:hover {
      color: #777;
      text-decoration: none;
  }
  .form-control {
      border-radius: 0;
  }
  textarea {
      resize: none;
  }

/* Card  */
.pd-card {
  width: 300px;
  box-shadow: 0 18px 22px 0 rgba(0, 0, 0, 0.2), 0 20px 34px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

address {
  padding: 20px;
}

p {
  font-size: 20px;
}

section {
  padding: 50px 0;
}
.bg-red {
  background-color: red;
}

.bg-gray {
  background-color: #DCDCDC;
}

footer p {
  color: white;
}

.carousel p {
  color: red;
}

.carousel-caption {
  top: 15px;
}

#carouselButtons {
    margin-left: 10px;
    position: absolute;
    top: 60px;
    background-color: red;
}

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    height: 720px;   
}

.tab-pane {
  padding:25px;
}

.tab-pane ol {
  padding:25px;
}

.hide-btn {
  display: none;
}


 @media (max-width: 799px) {
    .carousel-caption, .pie {
      display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
  } 
    .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    height: auto;      
}
   .pd-card {
     margin: auto;
   }
   #employers h2 {
     text-align: center;
   }
  } 

// icon color
.icon-prev, .icon-next, .glyphicon {
  color: red;
}

// icon size
.icon-prev, .icon-next {
  font-size: 45px;
}
// around down button
.carousel-inner  .fa-chevron-down {
  position: absolute;
  top: 625px;
  right: 48%;
}

.fa-chevron-down {
  position: absolute;
  right: 48%;
}

/* icon color */
.icon-prev, .icon-next, .glyphicon {
  color: red;
}

/* icon size */
.icon-prev, .icon-next {
  font-size: 45px;
}
/* around down button */
.carousel-inner  .fa-chevron-down {
  position: absolute;
  top: 625px;
  right: 48%;
}

.fa-chevron-down {
  position: absolute;
  right: 48%;
}

.caret {
	color: #18A6D1;
}

/* DISABLE the Horizontal Scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}


            
          
!
            
              var myCenter = new google.maps.LatLng(40.713652, -74.014807);

function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);





$(document).ready(function(){
  // Initialize Tooltip
  $('[data-toggle="tooltip"]').tooltip();
  
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").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 (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
})

// Corousel Pause and Play Button
$(function () {
    $('#myCarousel').carousel({
        interval:5000,
        pause: "false"
    });
    $('#playButton').click(function () {
        $('#myCarousel').carousel('cycle');
    });
    $('#pauseButton').click(function () {
        $('#myCarousel').carousel('pause');
      });
      $(window).scroll(function () {
        $('#myCarousel').carousel('pause');
    });
});

// Team Treehouse Achievements
$.ajax('https://teamtreehouse.com/petersondhaiti.json')
  .done(function(data) {
 // pull was a success
  var items = [];
  $.each( data, function( key, val ) {
    if (key.toLowerCase() === 'points') {
      $.each(val, function( key2, val2 ) {
        if (val2 !== 0) {
          if (key2.toLowerCase() !== 'total') {
            items.push([key2,val2]);
          } else {
            $('strong.total').text(val2);
          } 
        }
      });
    }
  });

  // sort
  var sorted = [];
  if (items.length === 0) {
    sorted = items;
  } else {
    sorted = [items.shift()];
  }

  while (items.length > 0) {
    for (i = 0; i < sorted.length; i++) {
      if (items[0][1] > sorted[i][1]) {
        sorted.splice(i,0,items.shift());
        break;
      }
      if (i === sorted.length-1) {
        sorted.push(items.shift());
        break;
      }   
    }
  }
  // make into html
  html = [];
  html.push("<ul>");
  for (s in sorted) {
    html.push("<li>");
    html.push("<em>" + sorted[s][0] + "</em>");
    html.push("<span>" + sorted[s][1]  + "</span>");
    html.push("</li>");
  }
  html.push("</ul>");  
  
  // make legend
  $('.legend').append(html.join(""));
  
  // make pie
  createPie(".legend", ".pie");
  })
  .fail(function() {
    $('.team-treehouse > a > h2').text("Could not connect. Username my be incorrect.");
  })


function sliceSize(dataNum, dataTotal) {
  return (dataNum / dataTotal) * 360;
}

function addSlice(sliceSize, pieElement, offset, sliceID, color) {
  $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
  var offset = offset - 1;
  var sizeRotation = -179 + sliceSize;
  $("."+sliceID).css({
    "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
  });
  $("."+sliceID+" span").css({
    "transform"       : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
    "background-color": color
  });
}

function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
  var sliceID = "s"+dataCount+"-"+sliceCount;
  var maxSize = 179;
  if(sliceSize<=maxSize) {
    addSlice(sliceSize, pieElement, offset, sliceID, color);
  } else {
    addSlice(maxSize, pieElement, offset, sliceID, color);
    iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
  }
}

function createPie(dataElement, pieElement) {
  var listNames = [];
  var listData = [];
  $(dataElement+" li").each(function() {
    listNames.push($(this).children('em').html());
    listData.push(Number($(this).children('span').html()));
  });
  
  var listTotal = 0;
  for(var i=0; i<listData.length; i++) {
    listTotal += listData[i];
  }

  var offset = 0;
  var colors = {};
  colors['Android'] = '#5cb860';
  colors['Business'] = '#f9845b';
  colors['CSS'] = '#3079ab';
  colors['Design'] = '#e59a13';
  colors['Development Tools'] = '#637a91';
  colors['HTML'] = '#39add1';
  colors['iOS'] = '#53bbb4';
  colors['Java'] = '#2c9676';
  colors['Javascript'] = '#c25975';
  colors['PHP'] = '#7d669e';
  colors['Python'] = '#f092b0';
  colors['Ruby'] = '#e15258';
  colors['WordPress'] = '#838cc7';
  colors['Digital Literacy'] = '#c38cd4';
  
  for(var i=0; i<listData.length; i++) {
    var size = sliceSize(listData[i], listTotal);
    var color = '#000000';
    for (var c in colors) {
      if (listNames[i].toLowerCase() === c.toLowerCase()) {
        color = colors[c];
      }
    }

    // make slices
    iterateSlices(size, pieElement, offset, i, 0, color);
    
    // set legend colors
    $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color);
    offset += size;
  }
}

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

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

$(document).ready (function(){
  $(".fixed-up-down-btn").hide()
  $(window).scroll(function () {
   $('.fixed-up-down-btn').show();
    });
})

            
          
!
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