A Pen by Roshni Chatterjee

Tutorials of (A pen by roshni chatterjee) by Roshni chatterjee

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Roshni Chatterjee</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
	<head>

		
		<link rel="stylesheet" href="https://www.castus.co.uk/templates/main/css/print.css" type="text/css" media="print" />
		<!--[if lte IE 8]><link href="https://www.castus.co.uk/templates/main/css/ie8.css" rel="stylesheet" type="text/css" media="projection, screen" /><![endif]-->
		<!--[if lte IE 7]><link href="https://www.castus.co.uk/templates/main/css/ie7.css" rel="stylesheet" type="text/css" media="projection, screen" /><![endif]-->
		<!--[if lte IE 6]><link href="https://www.castus.co.uk/templates/main/css/ie6.css" rel="stylesheet" type="text/css" media="projection, screen" /><![endif]-->

				<noscript>
			<style type="text/css">
				#wrap {visibility:visible !important}
				.modAboutScroller h2 {display:none}
				.modAboutScroller h2:first-child {display:block}
								h3.q a {cursor:default !important}
				h3.q a:hover {background-color:#fff !important}
				.ans {
					display:block !important;
					visibility:visible !important
				}
			</style>
		</noscript>

		
<div id="catDesc"><h2 style="text-align: center;">
<h3 id="heading">Meet our Team</h3></div><div id="teamDetail" style="display:none;">
	<div id="tb1">
	<div id="teamDetailInner">
	<div id="tb2">
	<div class="teamMember active"></div><div class="teamMember aman-pd" style="display:none;">
		
		<a href="#" class="fixedPin aman-pd open"></a>
		<h3>Aman Priyadarshi</h3>
		<p class="subTitle">Intern</p>
		<p class="desc">Gary founded Castus in 2005 and has been instrumental at every stage of the company’s growth. Now fulfilling the role of Technical Director, where he has the responsibility of making sure all development output is to Castus' high standards. Always throwing in great ideas to really help clients get to the bottom of their online marketing or development issues.</p><div class="contactDetails">
			<p>Contact <a href="/contact-us?fao=aman-pd">Gary directly</a></p>
			
			<p>Find Gary on <a href="https://uk.linkedin.com/pub/aman-pd/2/69a/182" target="_blank">linkedIn</a></p></div>
		</div>
	</div>
	</div>
	</div>
	</div>
	<div id="teamPhoto" >
	<img src="https://m.ak.fbcdn.net/sphotos-d.ak/hphotos-ak-ash3/1520748_559736370781252_168529_n.jpg" width=1500px height="513px" usemap="#team" />
	


	<map name="team" id="team" class="collapsed"><area shape="circle" coords="459,199,30" href="/our-team?nj=aman-pd" class="aman-pd" alt="Aman Priyadarshi">
	<div class="clear"></div>
	</div>
				


					
	</body>
</html>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html {
	overflow-y:scroll
}

body {
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
	font-size:13px;
	margin: 0px;
	text-align: center;
}

input {
	font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
}

#container {
	width: 100%;
	text-align: center;
}

section,
.modServices {
	width:960px;
	margin: 0px auto;
	text-align: left;
}

#id129 section {
	width:984px;
}

img {
	border: none;
}

a {
	color: #000;
	text-decoration:none;
	-webkit-transition:color 0.2s;
	-moz-transition:color 0.2s;
	-o-transition:color 0.2s;
	transition:color 0.2s;
}

a:hover {
	text-decoration:underline;
}

.dnone {
	display: none;
}

/**
* ClearFix
*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

.awardBanner {
	display:block;
	position:absolute;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	z-index:50000;
}

.awardBanner.cssda {
	width:164px;
	height:69px;
top:0;
left:30px;
	background:url(/templates/main/images/css-design-award-nominee-dark.png);
}

.awardBanner.awwwards {
	width:70px;
	height:105px;
	background:url(/templates/main/images/awwwards_nominee_black_left.png);
top:40px;
left:0;
}

@media all and (min-width: 1px) and (max-width: 960px) {
	#container, header, footer,
	section, #catDesc, #catDesc h3,
	#id121 .maincontent h3, #id131 .maincontent h3 {
		width:100% !important
	}
	#footerInner > div {
		width:25%;
	}
}

@media all and (max-width: 421px) {
	#id1 .maincontent img {
		zoom:0.75;
	}
}

@media all (min-width: 360px) and (max-width: 360px) {
	body {
		min-width:360px;
	}
}

@media all and (max-width: 360px) {
	body {
		min-width:320px;
	}

	header {
		height:92px;
	}
	header .modmenu {
		display:none;
		position:absolute;
		top:0;left:0;
		width:100%;
		margin-bottom:26px;
	}

	#container .modmenu ul {
		width:100%;
		position:relative;
		z-index:300
	}

	#container .modmenu li {
		display:block;
		background:#fff;
		border-bottom:1px solid #eee;
		line-height:25px;
		width:50%;
		float:left;
	}

	#container .modmenu a {
		height:30px;
		line-height:30px;
		display:block;
	}

	#container .modmenu ul li.marker {
		display:none;
	}
	
	#container .modMobileMenu {
		display:block
	}
	
	.closeOverlay {
		position:absolute;
		top:0;left:0;
		width:100%;
		height:100%;
		z-index:250;
	}

	#footerInner > div {
		width:50% !important;
		float:left !important;
		display:inline;
	}

	#footerInner .fm1 {
		clear:left;
	}

	#footerInner .modFooterMenu {
		margin-top:125px;
	}

	#footerInner {
		height:290px;
	}

	#footerInner .modFtext,
	#footerInner .connect {
		position:absolute;
		top:0px;
		left:0;
			height:110px;
	}
	#footerInner .connect {
		right:0;
		left:auto;
		margin-top:0;
	}

	#footerInner .modFtext .copy {
		bottom:0;
	}
	
	/* HOMEPAGE 
	-------------------------*/
	
	.cycle-slideshow {
		height:180px !important;
	}
	.slide {
		height:180px !important;
		background-position:middle center !important;
		-webkit-background-size: cover;
		-moz-background-size: cover !important;
		-o-background-size: cover;
		background-size: cover !important;
	}
	#slideControls {
		display:none
	}
	#id1 .modHomeBanner {
		margin:20px 0 0;
	}
		.slideInner, .slideInner .homeC2A,
	.slide.hideout .slideInner p.homeC2A {
		display:none;
	}
		.slide.about-us {
		background-size:100% !important;
background-position:center -10px !important;
	}
	.slide.about-us .slideInner {
		display:block !important;
		text-align:center !important;
		padding:65px 0 0 !important;
		max-width:100%;#
	}
	.slide.about-us h2 {
		color:#555;
	}
	.slideInner * {
		font-size:13px !important;
		padding:0 !important;
		line-height:normal !important;
		display:inline;
		border:0;
	}

	.slide.br-chamber .slideInner {
		display:block;
		width:300px;
		padding:10px;
	}

	.slide.br-chamber .slideInner * {
		background:#fff;
		font-size:10px !important;
		max-width:60%;
	}

	.slide.mailzappa {
		background-position: 0 0 !important;
	}
	.slide.meet-our-team {
		background-size:550px !important;
		background-position:center 18px !important;
	}
	.slide.hideout {
		background-position:center -10px !important;
	}
	.slide.hideout .slideInner {
		display:block;
		padding-top:76px;
	}
	.slide.hideout .slideInner p {
		font-size:10px !important;
		line-height:11px !important;
		display:block;
		max-width:120px !important;
	}

	#id1 .slide .mobLink {
		height:25px;
		background:#000;
		opacity:0.9;
		display:block !important;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		z-index:300;
		padding:0 !important;
		font-size:12px !important;
		line-height:25px;
		text-align:center;
	}
	.mobLink a {
		color:#fff;
		font-weight:600;
	}

}
@media all and (min-width: 1px) and (max-width: 960px) {
	#container, header, footer,
	section, #catDesc, #catDesc h3,
	#id121 .maincontent h3, #id131 .maincontent h3 {
		width:100% !important
	}

}

@media all and (max-width: 421px) {
	#id1 .maincontent img {
		zoom:0.75;
	}
}



/* OUR TEAM
----------------------------------------*/

#id127 #catDesc h3 {
	margin-bottom:27px;
	margin-top:8px;
}

#teamDetail {
	background:#f8f8f8;
	position:absolute;
	width:100%;
	left:0;
	top:368px;
	z-index:10;
	height:286px;
	overflow:hidden;
	background:url(/templates/main/images/team/blur.jpg) top center;
	text-align:center;
}

#teamDetailInner {
	width:960px;
	margin:0 auto;
	height:286px;
	background:url(/templates/main/images/team/blur.jpg) top center;

}

#tb1 {
	width:100%;
	height:286px;
	background:url(/templates/main/images/team/border1.png) bottom repeat-x;
}

#tb2 {
	width:960px;
	height:286px;
	margin:0 auto;
	background:url(/templates/main/images/team/border2.png) repeat-x;
	background-position: 0 276px;
}

#teamPhoto {
	background:url(/templates/main/images/team/faded.jpg) bottom center no-repeat;
	width:100%;
	height:513px;
	float:left;
	position:relative;
  margin-top:100px; margin-bottom: 200px; border: 4px solid black;
}

#teamPhoto img,
#teamPhoto #teamPins {
	position:absolute;
	bottom:0;
	left:0;
}

#teamPhoto .teamOverlay {
	display:none;
}

#teamPhoto #teamPins {
	width:1px;
	height:413px;
	overflow:visible;
}

#teamDetail .fixedPin,
#teamPins .teamPin {
	display:block;
	width:49px;
	height:34px;
	z-index:999;
	position:absolute;
	outline:0;
	background-image:url(/templates/main/images/team/pins.png);
}

#teamDetail .fixedPin {
	position:relative;
	margin:0 auto;
	top:0;
	left:inherit;
	right:-10px;
}

#teamPins .roshni-chatt {top:135px;left:40px;}



#teamPins .roshni-chatt.hover {background-position:0 -60px;}


#teamPins .roshni-chatt.open, .fixedPin.roshni-chatt {background-position:0 -146px;}


#teamPins .roshni-chatt.open.hover, .fixedPin.roshni-chatt:hover {background-position:0 -206px;}


#teamDetail h3 {
	font-weight:bold;
	text-transform:uppercase;
	font-size:18px;
	margin:12px 0 -4px;
}

#teamDetail p {
	color:#000;
}

#teamDetail p.subTitle {
	text-transform:uppercase;
}

#teamDetail p.desc {
	width:550px;
	line-height:18px;
	margin:10px auto 16px;
}

#teamDetail .contactDetails p,
#teamDetail .contactDetails li {
	font-size:15px;
	margin:12px 0 0;
	font-weight:600
}
#teamDetail .contactDetails a {
	color:#0097d6;
	/* display:inline-block;
	height:18px;
	border-bottom:1px solid transparent */
}
#teamDetail ul {
	margin:12px 0 0;
	padding:0;
}

#teamDetail .contactDetails li {
	display:inline;
	padding:0;
}
#teamDetail .contactDetails li span {
	color:#858585;
	font-weight:normal;
}
#teamDetail .contactDetails ul li:last-child span {
	display:none
}

/* LOCATION
----------------------------------------*/

#map_canvas {
	position:absolute;
	top:41px;
	left:0;
}
.mapShadow {
	position:absolute;
	top:41px;
	width:100%;
	height:2px;
	background:url(/templates/main/images/mapShadow.png);
	z-index:15;
}
.mapShadow.ms2 {
	top:663px;
	width:100%;
	height:2px;
	background-position:bottom;
}

#directionsPanel {
	position:absolute;
	padding:0 10px;
	background:#fff;
	top:42px;
	z-index:12;
}

#searchBox {
	position:relative;
	z-index:15;
	background:#fff;
	width:630px;
	margin:40px auto 0;
	text-align:left;
	box-shadow:0 0 1px rgba(0,0,0,0.5);
}

#directionsSearch {
	padding:17px;
	width:596px;
}

#directionsSearch label {
	font-size:24px;
	font-weight:300;
	color:#797979;
	float:left;
	margin-right:18px;
}
#directionsSearch #dSearch {
	background:#e4e4e4;
	border:0;
	border-radius:2px;
	font-size:16px;
	font-weight:300;
	height:34px;
	width:197px;
	padding:0 10px;
}
#directionsSearch #dSub,
.submitContainer input,
#comments-form-send a,
.modLeft .button {
	background:#0ebfd9;
	border:0;
	color:#fff;
	float:right;
	height:30px;
	padding:0 9px;
	margin:3px 4px 0 0;
	font-weight:600;
	font-size:15px;
	width:123px;
	cursor:pointer;
}
#directionsSearch #dSub:hover,
.submitContainer input:hover,
#comments-form-send a:hover,
.modLeft .button:hover {
	background:#14c4dc;
	text-decoration:none
}

#searchBox p {
	margin:10px 0;
	float:left;
	color:#000;
	font-size:13px;
	width:100%;
}

#searchBox #printMap {
	padding:0 17px;
	background:#f1f1f1;
	height:40px;
}
#searchBox #printMap span {
	font-weight:bold;
}
#searchBox #printMap a {
	float:right;
	margin-left:15px;
	color:#0097d6;
	/* display:inline-block;
	height:16px;
	border-bottom:1px solid transparent; */
}

#searchBox #mapError {
	padding:0 17px;
	background:#f1f1f1;
	line-height:20px;
	height:40px;
}

#searchBox #mapError span {
	float:right;
	color:#ccc;
	font-size:30px;
	line-height:18px;
}

#map_canvas address {
	font-style:normal;
}

#map_canvas address .phone {
	color:#0096d5;
	font-size:21px;
	margin:2px 0 6px;
}

#map_canvas address .email a {
	color:#031f41;
	font-size:16px;
}

#map_canvas address .address {
	line-height:18px;
	margin:8px 0 0;
}

#heading { text-align: center; font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size:80px; color:#151515;}
/* Downloaded from https://www.codeseek.co/ */


// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158; 
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});

/*! jQuery Color [email protected] https://github.com/jquery/jquery-color | jquery.org/license */
(function(a,b){function m(a,b,c){var d=h[b.type]||{};return a==null?c||!b.def?null:b.def:(a=d.floor?~~a:parseFloat(a),isNaN(a)?b.def:d.mod?(a+d.mod)%d.mod:0>a?0:d.max<a?d.max:a)}function n(b){var c=f(),d=c._rgba=[];return b=b.toLowerCase(),l(e,function(a,e){var f,h=e.re.exec(b),i=h&&e.parse(h),j=e.space||"rgba";if(i)return f=c[j](i),c[g[j].cache]=f[g[j].cache],d=c._rgba=f._rgba,!1}),d.length?(d.join()==="0,0,0,0"&&a.extend(d,k.transparent),c):k[b]}function o(a,b,c){return c=(c+1)%1,c*6<1?a+(b-a)*c*6:c*2<1?b:c*3<2?a+(b-a)*(2/3-c)*6:a}var c="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",d=/^([\-+])=\s*(\d+\.?\d*)/,e=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(a){return[a[1]*2.55,a[2]*2.55,a[3]*2.55,a[4]]}},{re:/#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}},{re:/#([a-f0-9])([a-f0-9])([a-f0-9])/,parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(a){return[a[1],a[2]/100,a[3]/100,a[4]]}}],f=a.Color=function(b,c,d,e){return new a.Color.fn.parse(b,c,d,e)},g={rgba:{props:{red:{idx:0,type:"byte"},green:{idx:1,type:"byte"},blue:{idx:2,type:"byte"}}},hsla:{props:{hue:{idx:0,type:"degrees"},saturation:{idx:1,type:"percent"},lightness:{idx:2,type:"percent"}}}},h={"byte":{floor:!0,max:255},percent:{max:1},degrees:{mod:360,floor:!0}},i=f.support={},j=a("<p>")[0],k,l=a.each;j.style.cssText="background-color:rgba(1,1,1,.5)",i.rgba=j.style.backgroundColor.indexOf("rgba")>-1,l(g,function(a,b){b.cache="_"+a,b.props.alpha={idx:3,type:"percent",def:1}}),f.fn=a.extend(f.prototype,{parse:function(c,d,e,h){if(c===b)return this._rgba=[null,null,null,null],this;if(c.jquery||c.nodeType)c=a(c).css(d),d=b;var i=this,j=a.type(c),o=this._rgba=[];d!==b&&(c=[c,d,e,h],j="array");if(j==="string")return this.parse(n(c)||k._default);if(j==="array")return l(g.rgba.props,function(a,b){o[b.idx]=m(c[b.idx],b)}),this;if(j==="object")return c instanceof f?l(g,function(a,b){c[b.cache]&&(i[b.cache]=c[b.cache].slice())}):l(g,function(b,d){var e=d.cache;l(d.props,function(a,b){if(!i[e]&&d.to){if(a==="alpha"||c[a]==null)return;i[e]=d.to(i._rgba)}i[e][b.idx]=m(c[a],b,!0)}),i[e]&&a.inArray(null,i[e].slice(0,3))<0&&(i[e][3]=1,d.from&&(i._rgba=d.from(i[e])))}),this},is:function(a){var b=f(a),c=!0,d=this;return l(g,function(a,e){var f,g=b[e.cache];return g&&(f=d[e.cache]||e.to&&e.to(d._rgba)||[],l(e.props,function(a,b){if(g[b.idx]!=null)return c=g[b.idx]===f[b.idx],c})),c}),c},_space:function(){var a=[],b=this;return l(g,function(c,d){b[d.cache]&&a.push(c)}),a.pop()},transition:function(a,b){var c=f(a),d=c._space(),e=g[d],i=this.alpha()===0?f("transparent"):this,j=i[e.cache]||e.to(i._rgba),k=j.slice();return c=c[e.cache],l(e.props,function(a,d){var e=d.idx,f=j[e],g=c[e],i=h[d.type]||{};if(g===null)return;f===null?k[e]=g:(i.mod&&(g-f>i.mod/2?f+=i.mod:f-g>i.mod/2&&(f-=i.mod)),k[e]=m((g-f)*b+f,d))}),this[d](k)},blend:function(b){if(this._rgba[3]===1)return this;var c=this._rgba.slice(),d=c.pop(),e=f(b)._rgba;return f(a.map(c,function(a,b){return(1-d)*e[b]+d*a}))},toRgbaString:function(){var b="rgba(",c=a.map(this._rgba,function(a,b){return a==null?b>2?1:0:a});return c[3]===1&&(c.pop(),b="rgb("),b+c.join()+")"},toHslaString:function(){var b="hsla(",c=a.map(this.hsla(),function(a,b){return a==null&&(a=b>2?1:0),b&&b<3&&(a=Math.round(a*100)+"%"),a});return c[3]===1&&(c.pop(),b="hsl("),b+c.join()+")"},toHexString:function(b){var c=this._rgba.slice(),d=c.pop();return b&&c.push(~~(d*255)),"#"+a.map(c,function(a){return a=(a||0).toString(16),a.length===1?"0"+a:a}).join("")},toString:function(){return this._rgba[3]===0?"transparent":this.toRgbaString()}}),f.fn.parse.prototype=f.fn,g.hsla.to=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/255,c=a[1]/255,d=a[2]/255,e=a[3],f=Math.max(b,c,d),g=Math.min(b,c,d),h=f-g,i=f+g,j=i*.5,k,l;return g===f?k=0:b===f?k=60*(c-d)/h+360:c===f?k=60*(d-b)/h+120:k=60*(b-c)/h+240,h===0?l=0:j<=.5?l=h/i:l=h/(2-i),[Math.round(k)%360,l,j,e==null?1:e]},g.hsla.from=function(a){if(a[0]==null||a[1]==null||a[2]==null)return[null,null,null,a[3]];var b=a[0]/360,c=a[1],d=a[2],e=a[3],f=d<=.5?d*(1+c):d+c-d*c,g=2*d-f;return[Math.round(o(g,f,b+1/3)*255),Math.round(o(g,f,b)*255),Math.round(o(g,f,b-1/3)*255),e]},l(g,function(c,e){var g=e.props,h=e.cache,i=e.to,j=e.from;f.fn[c]=function(c){i&&!this[h]&&(this[h]=i(this._rgba));if(c===b)return this[h].slice();var d,e=a.type(c),k=e==="array"||e==="object"?c:arguments,n=this[h].slice();return l(g,function(a,b){var c=k[e==="object"?a:b.idx];c==null&&(c=n[b.idx]),n[b.idx]=m(c,b)}),j?(d=f(j(n)),d[h]=n,d):f(n)},l(g,function(b,e){if(f.fn[b])return;f.fn[b]=function(f){var g=a.type(f),h=b==="alpha"?this._hsla?"hsla":"rgba":c,i=this[h](),j=i[e.idx],k;return g==="undefined"?j:(g==="function"&&(f=f.call(this,j),g=a.type(f)),f==null&&e.empty?this:(g==="string"&&(k=d.exec(f),k&&(f=j+parseFloat(k[2])*(k[1]==="+"?1:-1))),i[e.idx]=f,this[h](i)))}})}),f.hook=function(b){var c=b.split(" ");l(c,function(b,c){a.cssHooks[c]={set:function(b,d){var e,g,h="";if(a.type(d)!=="string"||(e=n(d))){d=f(e||d);if(!i.rgba&&d._rgba[3]!==1){g=c==="backgroundColor"?b.parentNode:b;while((h===""||h==="transparent")&&g&&g.style)try{h=a.css(g,"backgroundColor"),g=g.parentNode}catch(j){}d=d.blend(h&&h!=="transparent"?h:"_default")}d=d.toRgbaString()}try{b.style[c]=d}catch(j){}}},a.fx.step[c]=function(b){b.colorInit||(b.start=f(b.elem,c),b.end=f(b.end),b.colorInit=!0),a.cssHooks[c].set(b.elem,b.start.transition(b.end,b.pos))}})},f.hook(c),a.cssHooks.borderColor={expand:function(a){var b={};return l(["Top","Right","Bottom","Left"],function(c,d){b["border"+d+"Color"]=a}),b}},k=a.Color.names={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}})(jQuery);
(function($){$.belowthefold=function(element,settings){var fold=$(window).height()+$(window).scrollTop();return fold<=$(element).offset().top-settings.threshold;};$.abovethetop=function(element,settings){var top=$(window).scrollTop();return top>=$(element).offset().top+$(element).height()-settings.threshold;};$.rightofscreen=function(element,settings){var fold=$(window).width()+$(window).scrollLeft();return fold<=$(element).offset().left-settings.threshold;};$.leftofscreen=function(element,settings){var left=$(window).scrollLeft();return left>=$(element).offset().left+$(element).width()-settings.threshold;};$.inviewport=function(element,settings){return!$.rightofscreen(element,settings)&&!$.leftofscreen(element,settings)&&!$.belowthefold(element,settings)&&!$.abovethetop(element,settings);};$.extend($.expr[':'],{"below-the-fold":function(a,i,m){return $.belowthefold(a,{threshold:0});},"above-the-top":function(a,i,m){return $.abovethetop(a,{threshold:0});},"left-of-screen":function(a,i,m){return $.leftofscreen(a,{threshold:0});},"right-of-screen":function(a,i,m){return $.rightofscreen(a,{threshold:0});},"in-viewport":function(a,i,m){return $.inviewport(a,{threshold:0});}});})(jQuery);

This awesome code ( A Pen by Roshni Chatterjee ) is write by Roshni Chatterjee, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Roshni Chatterjee