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.

            
              <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div id="nav-bar" class="navbar-header">
		<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a target="_blank" href="http://www.medunes.net" class="navbar-brand"> MedUnes</a>
	</div>
	<!-- Collection of nav links and other content for toggling -->
	<div id="navbarCollapse" class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li><a href="#heading">Home</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
		<ul class="nav navbar-nav navbar-right">
			<li><a target="_blank" href="https://www.facebook.com/medunes.tn"><i class="fa fa-facebook"></i></a></li>
			<li><a target="_blank" href="https://twitter.com/MedYOUNES_83"><i class="fa fa-twitter"></i></a></li>
			<li><a target="_blank" href="https://github.com/MedYOUNES"><i class="fa fa-github"></i></a></li>
			<li><a target="_blank" href="https://plus.google.com/u/0/115878215693783014950"><i class="fa fa-google-plus"></i></a></li>
			<li><a target="_blank" href="https://www.youtube.com/channel/UCxDIGhUbyFbT2g_zwEVEvSw"><i class="fa fa-youtube"></i></a></li>
			<li><a target="_blank" href="mailto:mohamed.younes@yandex.com"><i class="fa fa-envelope"></i></a></li>
     			<li> <a target="_blank" href="https://www.linkedin.com/in/mohamed-younes-068b18110"><i class="fa fa-linkedin"></i></a>			</li>

    </ul>
	</div>
</nav>
<div class="container-fluid">
<div class="row">
	<div id="heading" class="page-header">
		<div id="title-sub-title">
			<h1 class="heading-title">#medunes</h1>
			<h4 class="heading-sub-title">We manage your challenge..</h4>
			
		</div>
		
		<div class="text-center">
			<a href="#about">
<span class="round-anchor fa-stack fa-3x">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-angle-double-down fa-stack-1x"></i>
</span>
			</a>

	</div>
</div>
	<div id="about" class="page-header">
	<div id="title-sub-title">
		<h1 class="heading-title">#whoami?</h1>
		<h4 class="heading-sub-title">System Progammer and Web developer</h4>
		<div class="row">
			<div class="col-xs-8 col-xs-offset-2 content">
      
        <img class="img-responsive img-center img-profile img-rounded" src="http://www.medunes.net/my_photo_2.png"></img>
				<ul>
					<li>Hi, my name is Mohamed YOUNES, and I abreviate it <strong>MedUnes</strong>.</li>
					<li>I am 33 years old, from Sousse, Tunisia.</li>
          <li>I graduated from <a href="https://www.facebook.com/Lycee.Pilote.de.Sousse.LPS/" target="_blank">Pioneers School of Sousse</a></li>
					<li>I have a <strong>bachelor</strong> degree in Computer Science, from <a href="http://www.fsm.rnu.tn/" target="_blank">Faculty of Sciences of Monastir</a></li>
					<li>I am a computer science <strong>teacher</strong> and administrative software developer at the Ministry of Education of Tunisia .</li>
					<li>I have been into computer programming since the age of 15. </li>
					<li>I am quiete good at <em>low-level/middle-level programming languages</em> such as:
					<ul><li>x86 Assembly</li> <li>C</li><li>C++</li> <li>BASIC</li> <li>Pascal</li></ul></li>
					<li>I am well at ease with the <strong>Linux</strong> operating system, <em>Bash</em> scripting and the linux command-line tools in general.</li>
					<li>I worked for a while on  <strong>reverse-engineering</strong> under Windows <em>(OllyDbg, IDA Pro, SofICE) </em> and Linux<em>(gdb,ddd)</em>.</li>
					
					<li>I master <em>Visual Basic, C#</em> and <em>ADO.NET</em> development.  </li>
					
					<li>I started <strong>Web development</strong> about a year and a half ago as it became a non escapable field in nowadays development paths. So I have been since then learning and practising around the following subjects:
						<ul>
							<li><strong>Back-end</strong>:PHP/MYSQL
							</li>
							<li><strong>Front-end</strong>:HTML, CSS, Javascript, JQuery, Bootstrap, JQWidgets.
							</li>
							<li><strong>CMS</strong>:Wordpress
							</li>
							<li><strong>PHP Frameworks</strong>:CodeIgniter, Symfony2.
							</li>
							
						</ul>
					</li>
					<li>I also have <strong>basic knowledge</strong> of <em>Java, Python & Django</em> </li>
					
					<li>I have quite good knowledge about<strong> Data Structure and Algorithms (DSA) </strong> and their implementations specially in C/C++. I also has strong Mathematical skills, specially in Algebra, as a necessary tool in <em>Theorical Computer Sciences</em> </li>
          
          <li>I am well experienced at <strong>Relational Database</strong> Modeling and implementation using both <em>MSSQL</em> and <em>MYSQL</em>.  </li>
					
					<li>I speak four languages:
						<ul>
							<li><strong>Arabic</strong>:Native</li>
							<li><strong>French</strong>:Bilingual</li>
							<li><strong>English</strong>:Bilingual</li>
							<li><strong>German</strong>:Basic</li>
						</ul>
					</li>
					<li>I enjoy sportive activities:
						<ul>
							<li>I played <strong>football(soccer)</strong> in <a href="http://www.eshs.tn/acceuil.php" target="_blank">ESHS</a>.</li>
							<li>I also have a degree in <strong>Aïkido</strong> from the <a href="https://web.facebook.com/Aikido-Zanshin-Dojo-Mahdia-198711670225680" target="_blank">ZanShin Dojo</a>.</li> <li>I have been pratising <strong>Yoga,Tai-Chi</strong> since thirteen years.</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>	
</div>	
<div id="portfolio" class="page-header">
	<div id="title-sub-title">
		<h1 class="heading-title">#portfolio</h1>
		<h4 class="heading-sub-title">some of my works..</h4>
		</div>
		<div class="row">
			<div class="col-md-10 col-md-offset-1">
				<!-- Projects Row -->
				<div class="row">
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="http://www.mspro.tn">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/736907msp.png" alt="MSP &copy web site..">
						</a>
						<h3>
							<a target="_blank"  href="http://www.mspro.tn">MSP &copy web site.</a>
						</h3>
						<p>A website I developed using Wordpress for MSP &copy, a software development company.</p>
					</div>
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/FCC-portfolio">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/303983portfolio.png" alt="My Portfolio (freeCodeCamp)..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/FCC-portfolio">My Portfolio (freeCodeCamp) </a>
						</h3>
						<p>A Portfolio page created as challenge project during my freeCodeCamp learning.</p>
					</div>
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/JQWidgets-Tester">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/995383jqwidgetstester.png" alt="JQWidgets Tester..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/JQWidgets-Tester">JQWidgets Tester</a>
						</h3>
						<p>This is a Demo on how to use the <a target="_blank"  href="https://www.jqwidgets.com/"> JQWidgets </a><a target="_blank"  href="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/defaultfunctionality.htm">DataAdapter</a> widget.</p>
					</div>
				</div><!-- /.row -->
				<!-- Projects Row -->
				<div class="row">
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/java-world">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/893086javalab.png" alt="Javascript World!..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/java-world">Javascript World!</a>
						</h3>
						<p>Experimenting with CSS positioning , sticky header, sticky footer, right-navs, left-navs, menus, etc.</p>
					</div>
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/summarizer">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/751335summarizer.png" alt="Summarizer!..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/summarizer">Summarizer!</a>
						</h3>
						<p>A notepad-like web application to easily summarize your readings, Created with CodeIgniter.</p>
					</div>
					<div class="col-md-4 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/Node.BS">
							<img class="img-responsive"  src="http://img11.hostingpics.net/pics/227019nodebs.png" alt="Node.BS.">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/Node.BS">Node.BS</a>
						</h3>
						<p>An easy to implement BootStrap menu interface written in PHP.</p>
					</div>
				</div><!-- /.row -->
				<!-- Projects Row -->
				
				<div class="row">
					<div class="col-md-4 portfolio-item col-md-offset-1">
						<a target="_blank"  href="https://github.com/MedYOUNES/FCC-Tribute-Page">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/174745tribute.png" alt="FCC-Tribute-Page..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/FCC-Tribute-Page">Tribute Page about Sousse (freeCodeCamp)</a>
						</h3>
						<p>A Tribute page created as challenge project during my freeCodeCamp learning.</p>
					</div>
					<div class="col-md-4 col-md-offset-1 portfolio-item">
						<a target="_blank"  href="https://github.com/MedYOUNES/DragDropList">
							<img class="img-responsive" src="http://img11.hostingpics.net/pics/192446DragDrop.png" alt="DragDropList Organizer..">
						</a>
						<h3>
							<a target="_blank"  href="https://github.com/MedYOUNES/DragDropList">DragDropList Organizer</a>
						</h3>
						<p>						A simple C# application that transforms a comma seprated list to a vertical list, which you can sort, re-arrange by Drag/Drop,copy/paste, count the number of chars or words.</p>
					</div>
				</div><!-- /.row -->
			</div>
		</div>
	</div>	

	<div id="contact" class="page-header">
		<div id="title-sub-title">
			<h1 class="heading-title">#contact</h1>
			<h4 class="heading-sub-title">I'm all ears..</h4>
			<div class="row text-center">
				<button class="btn btn-portfolio" data-toggle="modal" data-target="#phoneModal"><i class="fa fa-phone"></i>  Give me a call</button>
				
				<button class="btn btn-portfolio" data-toggle="modal" data-target="#mailModal"><i class="fa fa-at"></i>  Mail-me</button>
				
				<button class="btn btn-portfolio" data-toggle="modal" data-target="#letterModal"><i class="fa fa-envelope-o"></i>  Send me a letter</button>
				
				<button class="btn btn-portfolio" data-toggle="modal" data-target="#skypeModal"><i class="fa fa-skype"></i>  Let's skype</button>
				
				<button class="btn btn-portfolio" data-toggle="modal" data-target="#freelanceModal"><i class="fa fa-cc-paypal"></i> Hire me, Freelance!</button>
 				<button class="btn btn-portfolio" data-toggle="modal" data-target="#socialModal"><i class="fa fa-users"></i> Social Networks</button>
			</div>
			
		</div>
	</div>
	<div id ="footer" class="page-header">
		<div class="row">
			<div class="text-center col-xs-10 col-xs-offset-1">
				Designed & Coded from scratch by 
				<a target ="_blank" href="http://www.medunes.net">MedUnes  </a>, No CMS, No templates, just 				<a target ="_blank" href="https://getbootstrap.com/">Bootstrap</a> & 				<a target ="_blank" href="https://jquery.com/">JQuery</a>.
			</div>
			<div class="col-xs-1">
<a href="#heading">
<span class="round-anchor fa-stack fa-1x">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-angle-double-up fa-stack-1x"></i>
</span>
			</a>
			</div>
		</div>
	</div>
</div>
</div>
<div class="modal fade" id="phoneModal" tabindex="-1" role="dialog" aria-labelledby="phoneModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-phone"></i> Give me a call</h4>
			</div>
			<div class="modal-body">
				(+216)96 390 001
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="mailModal" tabindex="-1" role="dialog" aria-labelledby="mailModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-at"></i> Mail me</h4>
			</div>
			<div class="modal-body">
				mohamed.younes@yandex.com
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="letterModal" tabindex="-1" role="dialog" aria-labelledby="letterModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-envelope-o"></i> Send me a letter</h4>
			</div>
			<div class="modal-body">
				03 RUE SANHAJA KHEZAMA EST 4051 SOUSSE
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="skypeModal" tabindex="-1" role="dialog" aria-labelledby="skypeModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-skype"></i>Let's skype</h4>
			</div>
			<div class="modal-body">
				medunes83
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="socialModal" tabindex="-1" role="dialog" aria-labelledby="socialModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-users"></i> Find me on Social Networks</h4>
			</div>
			<div class="modal-body">
<a target="_blank" href="https://www.facebook.com/medunes.tn"><i class="fa fa-facebook"></i></a>
<a target="_blank" href="https://twitter.com/MedYOUNES_83"><i class="fa fa-twitter"></i></a>
<a target="_blank" href="https://github.com/MedYOUNES"><i class="fa fa-github"></i></a>
<a target="_blank" href="https://plus.google.com/u/0/115878215693783014950"><i class="fa fa-google-plus"></i></a>
<a target="_blank" href="https://www.youtube.com/channel/UCxDIGhUbyFbT2g_zwEVEvSw"><i class="fa fa-youtube"></i></a>
<a target="_blank" href="mailto:mohamed.younes@yandex.com"><i class="fa fa-envelope"></i></a>
<a target="_blank" href="https://www.linkedin.com/in/mohamed-younes-068b18110"><i class="fa fa-linkedin"></i></a>

			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="freelanceModal" tabindex="-1" role="dialog" aria-labelledby="freelanceModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title"><i class="fa fa-cc-paypal"></i> Hire me Freelance</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-6 text-center">
						<a target="_blank" href="https://www.upwork.com/freelancers/~01d799c0469b4d4a4a">
							<img src="http://www.notbeinggoverned.com/wp-content/uploads/2015/07/Upwork-logo.svg_.png" alt="UpWork Logo"></img>
						</a>
					</div>
					<div class="col-xs-6 text-center">
						<a target="_blank" href="http://www.guru.com/freelancers/mohamed-younes">
							<img src="http://www.phixdata.com/wp-content/uploads/2016/03/guru-freelancer-top-5-market-place-online-Pixel-Data-Interactive.png" alt="Guru Logo"></img>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
            
          
!
            
              .container-fluid {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}
.navbar-brand
{
  font-family: 'Lustria', serif;
  font-weight:bold;
  color:#1D1F20;

}
.navbar-default .navbar-nav>li>a:hover
{
  color:#eee;
  background-color:#23527c  ;
}

/*!TO BE FIXED!*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{
  color:#eee;
  background-color:#23527c ;
}
.navbar
{
  margin-bottom:0px;
  opacity:0.9;
  background-color:#eee;
}
.container-fluid
{
  padding:0px;
}
.page-header
{
  margin-top:0px;
  margin-bottom:0px;
  padding:100px 0px 64px 0px;
  color:#1D1F20;
}
#heading .page-header{
    padding-bottom:100px;
}
#heading
{
  background:url("http://img15.hostingpics.net/pics/201289headerbackground.png");
  height:600px;
}
.heading-title ,.heading-sub-title
{
  font-family: 'Sorts Mill Goudy', serif;
  text-align:center;
}
.heading-title
{
  font-size:72px;
}
.heading-sub-title
{
  font-size:16px;
  color:#23527c;
  margin-bottom:64px;
}


.round-anchor
{
  color:#ccc;
}

.img-profile
{
  height:256px;
  width:256px;
  padding:3px;
  border:solid 1px #ddd;
  border-radius:50%;
}

.content
{
  font-family: 'Sorts Mill Goudy', serif;
  text-align:left;
  font-size:22px;
  color:#1D1F20;
  background-color:#EBEBEB;
  border-radius:5px;
  border:solid 1px #EBEBEB;
  padding-top:32px !important;
  
}
.img-responsive.img-center {
  margin: 0 auto;
}
.content ul{
 margin-top:32px;
}

#about
{
  background-color:#ddd;
}

.img-portfolio
{ 
  height:128px;
  width:148px;
  margin:24px; 
}
#contact
{
  background-color:#23527c;
  color:#eee;
}
#contact .heading-sub-title
{
  color:#ddd;
}

#contact button:focus 
{
  outline:0 !important;
}
#footer
{
  text-align:center;
  height:auto;
  background-color:#333;
  color:#ccc;
  font-family: 'Lustria', serif;
  padding:25px;
}
#footer a:link
{
  color:#eee;
  font-size:18px;
}
#footer> i
{
  text-align:right;
}

.btn-portfolio { 
  font-family: 'Sorts Mill Goudy', serif;
  font-weight:bold;
  padding:15px;
  color:#23527c;
  background-color: #aaa; 
  border-color: #aaa; 
  border-radius:25px;
  margin:15px;
} 
 
.btn-portfolio:hover, 
.btn-portfolio:focus, 
.btn-portfolio:active, 
.btn-portfolio.active, 
.open .dropdown-toggle.btn-portfolio { 
 
  border-radius:25px;
  color:#23527c;
  background:#ddd;
  border-color: #ddd;
} 
 
.btn-portfolio:active, 
.btn-portfolio.active, 
.open .dropdown-toggle.btn-portfolio { 
  background-image: none; 
  border-radius:25px;

} 
 
.btn-portfolio.disabled, 
.btn-portfolio[disabled], 
fieldset[disabled] .btn-portfolio, 
.btn-portfolio.disabled:hover, 
.btn-portfolio[disabled]:hover, 
fieldset[disabled] .btn-portfolio:hover, 
.btn-portfolio.disabled:focus, 
.btn-portfolio[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-portfolio.disabled:active, 
.btn-portfolio[disabled]:active, 
fieldset[disabled] .btn-portfolio:active, 
.btn-portfolio.disabled.active, 
.btn-portfolio[disabled].active, 
fieldset[disabled] .btn-portfolio.active { 
  background-color: #23527c; 
  border-color: #23527c; 
  border-radius:25px;
} 
 
.btn-portfolio .badge { 
  color: #23527c; 
  background-color: #fff;
  border-radius:25px;

}

.modal-body,.modal-content,.modal-header
{
  background-color:#eee;
  color: #23527c;
  font-family: 'Sorts Mill Goudy', serif;
  font-size:14px;
   border-radius:25px;
 }
.modal-header
{
  font-size:16px;
 }

.modal-body
{
  padding:20px;
  font-weight:bold;
  font-size:32px;
  text-align:center !important;
}
.modal-body img
{
  height:64px;
  width:128px;
  border:solid 2px #ddd;
  border-radius:20px;
  padding:10px;
  opacity:0.7;
}

.modal-body a
{
  margin:7px;
  padding:10px;
  border:1px solid #eee;
  border-radius:50%;
  
   
}
.portfolio-item
{
  font-family: 'Sorts Mill Goudy', serif; 
  margin-bottom: 25px;
  color:#1D1F20;

  
}
 .portfolio-item h3,.portfolio-item p
{
  padding:15px;
}
.portfolio-item img
{
  height:256px;
  border:1px solid #ddd;
  padding:10px;
  width:100%;
  
  
}
.modal-body img,.portfolio-item img
{
  -webkit-transition: all 0.7s ease;
   -moz-transition: all 0.7s ease;
   -o-transition: all 0.7s ease;
   transition: all 0.7s ease;
}
.portfolio-item img:hover,.modal-body img:hover
{
  
-webkit-box-shadow: -2px 10px 49px 5px rgba(0,0,0,0.35);
-moz-box-shadow: -2px 10px 49px 5px rgba(0,0,0,0.35);
box-shadow: -2px 10px 49px 5px rgba(0,0,0,0.35);
}
 
            
          
!
            
              $( document ).ready(function() { 
    $('a').click(function(e){
      e.preventDefault();
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 800);
});
  $('.content >ul>li:even').css('color','#2B407E');
  
	$('button').hover(function() {
        $(this).stop().animate({"color":"#23527c","background-color":"#ddd","border-color": "#ddd"}, 600);
        }, function () {
        $(this).stop().animate({"color":"#23527c","background-color":"#aaa","border-color": "#aaa"}, 600);
    });
 $('.round-anchor').hover(function() {
        $(this).stop().animate({"color":"#eee"}, 300);
        }, function () {
        $(this).stop().animate({"color":"#ccc"}, 300);
 
    });
    });
            
          
!
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