CSS Off Entry

Developer
Prashant Sani
Size
16,655 Kb
Views
10,120
  1. CSS Off Entry Previews
  2. CSS Off Entry HTML Codes
  3. CSS Off Entry CSS Codes
  4. CSS Off Entry JS Codes

How do I make an css off entry?

What is a css off entry? How do you make a css off entry? This script and codes were developed by Prashant Sani on 15 November 2022, Tuesday.

CSS Off Entry Previews
IQ Test

CSS Off Entry - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Off Entry</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>	<!--[if lt IE 9]>	<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>	<script src="https://prashantsani.com/projs/CSSOFF/js/selectivizr.js"></script>	<![endif]--> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--[if lt IE 8]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->	<div class="wrap">	<header>	<p class="volumeNo">Volume 3—September 2013</p>	<h1 class="logo">	<a href="">	<span>CSS</span>	<span>OFF</span>	</a>	</h1>	</header>	<div role="main" id="main" class="clearfix">	<div class="featuredArticles clearfix">	<article class="BuyBarbie">	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/barbie.png" alt="">	</figure>	<div class="BuyBarbieContent">	<h1>Box Model</h1>	<p>The Barbie doll was invented in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie's job was teenage fashion doll. The full name of the first doll was Barbie Millicent Roberts, from Willows, Wisconsin.</p>	</div>	</article>	<article class="featuredMain">	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/banner.jpg" alt="">	</figure>	<h6>feature</h6>	<h1>positioning relatives</h1>	<p>In 1958, English pictorial photographer Henry Peach Robinson created the world’s first photomontage by combining five different negatives to make one complete print of a young girl on her deathbed. “Fading Away”—Robinson’s first and most famous composite photo—depicts a young girl dying of consumption and was controversial when it was exhibited, with many believing it was not a suitable subject for photography.</p>	</article>	</div><!-- featuredArticles-->	<div class="bulletInfoContain clearfix">	<article class="bulletsListWrap">	<h1>list style: bullets. <span>a round-up of popular ammunition</span></h1>	<ul class="bulletsList clearfix">	<li>	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/bullet1.png" alt="">	<figcaption>	<span>.223</span>	<span>Remington</span>	<span>69gr BTHP</span>	</figcaption>	</figure>	</li>	<li>	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/bullet2.png" alt="">	<figcaption>	<span>.308</span>	<span>winchester</span>	<span>168gr BTHP</span>	</figcaption>	</figure>	</li>	<li>	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/bullet3.png" alt="">	<figcaption>	<span>7.62×39mm</span>	<span>Russian</span>	<span>154gr JSP</span>	</figcaption>	</figure>	</li>	<li>	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/bullet4.png" alt="">	<figcaption>	<span>7.62</span>	<span>Thumper</span>	<span>220gr RN</span>	</figcaption>	</figure>	</li>	<li>	<figure>	<img src="https://prashantsani.com/projs/CSSOFF/images/bullet5.png" alt="">	<figcaption>	<span>7.62</span>	<span>Thumper</span>	<span>240gr BTHP</span>	</figcaption>	</figure>	</li>	</ul>	</article><!-- bulletsListWrap -->	<aside class="bulletSidebar">	<div>	<h4>Staying afloat</h4>	<p>Lobsterman John Aldridge fell into the shark-infested water of Long Island while his crewmates were asleep. He was kept afloat for more than 12 hours by his rubber boots, which he used as flotation devices. The coast guard rescued him 43 miles south of Montauk where he fell off his vessel.</p>	</div>	<img src="https://prashantsani.com/projs/CSSOFF/images/shoe.png" alt="">	</aside><!-- bulletInfoSidebar -->	</div><!-- bulletInfoContain-->	<article class="mainArticle">	<h1>displaying (famous) blocks</h1>	<div class="bb-bookblock">	<div class="bb-item">	<button class="rollover"></button>	<img src="https://prashantsani.com/projs/CSSOFF/images/Beatles.jpg" alt="image01"/>	</div><!-- bb-item -->	<div class="bb-item">	<button class="rollover-flip"></button>	<iframe src="https://maps.google.co.uk/maps?q=Abbey+Road+Studios+NW89AY&amp;ie=UTF8&amp;hq=Abbey+Road+Studios&amp;hnear=NW8+9AY,+United+Kingdom&amp;t=m&amp;z=16&amp;iwloc=&amp;output=embed"></iframe>	</div><!-- bb-item -->	</div><!-- mainBanner -->	<p>Abbey Road is a thoroughfare located in the borough of Camden and the City of Westminster in London, running roughly northwest to southeast through St. John’s Wood, near Lord’s Cricket Ground. It is part of the B507. This road is best known for the Abbey Road Studios and the 1969 album, Abbey Road, by The Beatles.</p>	<cite><a href="https://goo.gl/h44dc9" target="_blank">Photo: goo.gl/h44dc9</a></cite>	</article><!-- mainArticle -->	<article class="shortNews clearfix">	<aside class="movieReviewSidebar clearfix" itemscope itemtype="http://schema.org/Movie">	<figure class="movieCover">	<img itemprop="image" src="https://prashantsani.com/projs/CSSOFF/images/transformars.png" alt="Transformars Revenge of the fallen">	<figcaption itemprop="name">	Transformers	<span>Revenge of the fallen</span>	</figcaption>	</figure>	<p class="movieDesc" itemprop="description">A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</p>	<p class="movieRatingWrap" itemscope itemtype="http://schema.org/aggregateRating">	<span class="movieRatingCol1">Rotten Tomato <span>Rating</span>	</span>	<span class="movieRatingPercent">20%</span>	<span class="movieRatingbarWrap">	<span></span>	</span>	<meta itemprop="ratingValue" content="20">	<meta itemprop="bestRating" content="100">	</p><!-- movieRatingWrap-->	<p class="moviePremire">	<strong>World premiere</strong>	<span>Den Haag theatre</span>	<span>The netherlands</span>	<span>June 23, 2011</span>	</p>	</aside><!-- reviewSidebar -->	<div class="shortNewsContent">	<h1>Border Bottom Line</h1>	<h2>Awful immigration laws from around the world.</h2>	<ul class="shortNewsList">	<li><strong>Italy</strong> penalizes illegal immigrants with a fine of €5,000-10,000 and allows immigration officials to detain them for up to 6 months.</li>	<li><strong>Switzerland</strong> immediately deports all convicted criminals from other countries and potentially even their family members.</li>	<li><strong>Australia</strong> detains all non-citizens without a valid visa.</li>	<li><strong>Japan</strong> is allowed to pay ,000 to each unemployed Latin Americn immigrant of Japanese descent and ,000 to each of that unemployed worker’s family members to return to their country of origin.</li>	<li>The <strong>United Arab Emirates</strong> prohibits foreigners from engaging in any sort of labor union-like activity, resulting in harsh living conditions, 80-hour work weeks, back-breaking manual labor, and below-minimum-wage pay.</li>	</ul>	</div>	</article><!-- shortNews -->	<div class="testimonialContain">	<blockquote>On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province's <strong>Banqiao Dam</strong> while being battered by the worst storm ever recorded in the region. They were in a race with the rapidly rising Ru River to save the dam and the millions of people that lay sleeping downstream. It was a race they were about to lose.</blockquote>	<blockquote>Just after 1:00 am, the sky cleared and stars emerged from behind the storm clouds. There was an eerie calm as someone yelled, "The water level is going down! The flood is retreating!"</blockquote>	<blockquote>There was little chance to enjoy that calm. One survivor recalled that a few seconds later it "sounded like the sky was collapsing and the earth was cracking." The equivalent of 280,000 Olympic-sized swimming pools burst through the crumbling dam, taking with it entire towns and as many as 171,000 lives. </blockquote>	</div><!-- testimonialContain -->	</div><!-- role:main -->	<footer class="clearfix">	<address class="footerSideNote">	<strong>Route Gregory</strong>, Building 31<br>	01630 Prévessin-Moëns, France<br>	+41 22 767 61 11	</address>	<p class="copyrightNotice">2013 CSSOff, <span>Volume 3</span></p>	</footer>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Off Entry - Script Codes CSS Codes

/*	Unmatched Style CSS OFF	main.css	HTML,CSS,Design Level JS Code developed by :	Author:Prashant Sani,Colour Codes:	Purple #cdc9dd
*/
/* =============================================================================	Index	1) Global Styles,Resets,Global Links,Abstraction	2) Header ,Main Navigation	3) Content	4) Footer	5) Forms	6) Library Styles	7) Non-Symentic Class	8) Print Styles	========================================================================== */
/* ============================================================================= Resets, Global Styles ========================================================================== */
@import url(//fonts.googleapis.com/css?family=Lato:100,400,700|Lora:400italic,700italic|Oswald|Merriweather:400,300,700);
/* HTML 5 Resets */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
/* Reset */
* {margin:0; padding:0;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td,figure {	border:0;	outline:0;	vertical-align:baseline;	background:transparent;
}
html, body{	font-size: 16px;	position: relative;	font-family: 'Oswald';
}
body{	background-color: #cdc9dd;	overflow-x: hidden;
}
.no-script body{	background-color: white
}
.wrap{	width: 960px;	max-width: 90%;	margin: 0 auto;	position: relative;	z-index: 1000
}
.whiteBG{	width: 1280px;	left:50%;	margin-left: -640px;	height: 100%;	position: fixed;	background-color: white;	top: 0;	z-index: 1;
}
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.floatLeft{	float:left;
}
.floatRight{	float:right;
}
a img,img{border:none;}
/* Selection */
::-moz-selection { background: #d8d5e5; color: #fff; text-shadow: none; }
::selection { background: #d8d5e5; color: #fff; text-shadow: none; }
/*Links */
a, button { text-decoration:none;	-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;	transition: all 0.3s ease-out; }
a:visited,a:link { color:#333 }
a:hover,a:active { color:#cdc9dd }
.currentLink{	cursor:default;
}
/* TYpography */
abbr[title] { border-bottom: 1px dotted; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1,h2,h3,h4,h5,h6,strong{	font-weight: normal;
}
/* Lists */
ul, ol { margin: 0; padding: 0; list-style: none; list-style-image: none; }
dd { margin: 0; }
/* ============================================================================= Header, Main Navigation ========================================================================== */
header{	position: relative;	width: 100%;
}
.logo{	margin: 0 0 0 -39px;	padding-top: 50px;	width: 54.375%;	position: relative;	z-index: 50;
}
header:before{	position: absolute;	width: 50.7%;	padding: 18em 3em;	left: -17%;	height: 86%;	content: '';	z-index: 1;	display: inline-block;	background: #cdc9dd; /* Old browsers */	background: -moz-linear-gradient(top, #cdc9dd 0%, #cdc9dd 70%, #d9d5e5 70%, #cfcbde 100%); /* FF3.6+ */	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdc9dd), color-stop(70%,#cdc9dd), color-stop(70%,#d9d5e5), color-stop(100%,#cfcbde)); /* Chrome,Safari4+ */	background: -webkit-linear-gradient(top, #cdc9dd 0%,#cdc9dd 70%,#d9d5e5 70%,#cfcbde 100%); /* Chrome10+,Safari5.1+ */	background: -o-linear-gradient(top, #cdc9dd 0%,#cdc9dd 70%,#d9d5e5 70%,#cfcbde 100%); /* Opera 11.10+ */	background: -ms-linear-gradient(top, #cdc9dd 0%,#cdc9dd 70%,#d9d5e5 70%,#cfcbde 100%); /* IE10+ */	background: linear-gradient(to bottom, #cdc9dd 0%,#cdc9dd 70%,#d9d5e5 70%,#cfcbde 100%); /* W3C */	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc9dd', endColorstr='#cfcbde',GradientType=0 ); /* IE6-9 */
}
.logo a{	letter-spacing: 11px;	font-family: Lato;	line-height: 0.81;	color: white;	display: block;	width: 100%;	font-weight: 100;
}
.logo a span{	display: block;	width: 100%;
}
.logo a span:nth-child(2){	letter-spacing: -14px;	margin-left: 2px;
}
.volumeNo{	font-family: 'Lora';	font-weight: 400;	font-style: italic;	font-size: 75%;	color: #b0aeb8;	text-transform: uppercase;	position: absolute;	top: 92px;	right: -1px;	z-index: 1000;	letter-spacing: 0.21em;
}
nav ul{	list-style:none;
}
nav ul a{	display:inline-block;
}
/* ============================================================================= Content ========================================================================== */
.featuredArticles{	position: relative;
}
.BuyBarbie{	width: 345px;	text-align: center;	color: #6e6c77;	float: left;	margin: -50px 0 0 29px;	position: relative;	z-index: 100;
}
.BuyBarbie figure{	display: block;	margin: -9px 0 9px -159px;	position: relative;
}
.BuyBarbie figure:before,
.BuyBarbie figure:after{	content: "";	position: absolute;	height: 2%;	width: 35%;	z-index: -1;	box-shadow: 0 1px 15px 0 #000;
}
.BuyBarbie figure:before{	left: 17%;	bottom: 9%;
}
.BuyBarbie figure:after{	right: 17%;	bottom: 1.5%;
}
.BuyBarbie h1{	font-family: 'Lora';	font-weight: 700;	font-style: italic;	font-size: 225%;	color: #5f5d66;	margin-bottom: 8px;
}
.BuyBarbie p{	font-family: 'Lato';	font-size: 119%;	line-height: 1.47;	letter-spacing: -1px;
}
.featuredMain{	float: right;	width: 527px;	margin: -524px -20px 0 0;	z-index: 1;
}
.featuredMain figure{	position: relative;	z-index: 1;	top: 190px;	left: -142px;	-webkit-transform: rotate(-3.7deg) scale(0.9); -moz-transform: rotate(-3.7deg) scale(0.9);	-ms-transform: rotate(-3.7deg) scale(0.9); -o-transform: rotate(-3.7deg) scale(0.9);	transform: rotate(-3.7deg) scale(0.9);
}
.featuredBannerShadow{	position: relative;	top: -12px;	left: -100px;	z-index: -1;	opacity: 0.8;	-webkit-transform: rotate(3.7deg); -moz-transform: rotate(3.7deg);	-ms-transform: rotate(3.7deg); -o-transform: rotate(3.7deg);	transform: rotate(3.7deg);
}
.featuredMain h6,
.featuredMain h1,
.featuredMain p{	position: relative;	z-index: 5;	text-transform: uppercase;
}
.featuredMain h6{	font-family: 'Merriweather';	font-size: 84%;	color: #cbb8a0;	letter-spacing: 3px;	padding-left: 2px;	margin-bottom: 8px;	margin-top: -46px;
}
.featuredMain h1{	color: #fdcd84;	font-size: 469%;	line-height: 1.03;	margin-bottom: 14px;	display: inline-block;	position: relative;	z-index: 10;
}
.featuredMain h1:before{	content: "";	width: 78%;	height: 147%;	position: absolute;	right: 40%;	top: -25%;	z-index: -1;	background: url(https://prashantsani.com/projs/CSSOFF/images/banner-head-shadow.png) no-repeat;
}
.featuredMain p{	font-family: 'Merriweather';	font-size: 157%;	text-transform: none;	line-height: 1.33;
}
.bulletInfoContain{	margin: 28px 0 0 12px;	position: relative;
}
.bulletSidebar{	width: 128px;	float: left;	text-align: right;	margin-right: 15px;
}
.bulletSidebar h4{	color: #24795a;	font-size: 132%;	margin-bottom: 4px;
}
.bulletSidebar p{	font-family: 'Lato';	font-size: 88%;	color: #464646;
}
.bulletSidebar img{	position: relative;	top: 19px;	left: -6px;	z-index: 5;
}
.bulletsListWrap{	width: 84.4%;	position: absolute;	top: 0;	right: 0;	margin-top: 0.1em;
}
.bulletsListWrap h1{	text-align: center;	text-transform: uppercase;	color: #a97d35;	font-size: 95%;	padding: 13px 0 10px 0;	letter-spacing: 1px;	border-top: 1px solid #e5e5e5;	border-bottom: 1px solid #e5e5e5;	margin-bottom: 1.4em;
}
.bulletsListWrap h1 span{	color: #e0c167;	font-size: 80%;	font-family: 'Lato';
}
.bulletsList li{	display: inline-block;	float: left;	text-align: center;	width: 20%;	border-right: 1px solid #e5e5e5;	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.bulletsList li img{	width: 100%;	display: block;	position: relative;	z-index: 10;
}
.bulletsList figcaption span{	display: block;	color: #e0e0e0;	position: relative;	line-height: 1em;	text-align: center;	z-index: 1;
}
.bulletsList figcaption span:nth-child(1){	margin: -0.65em 0 0.08em 0;
}
.bulletsList figcaption span:nth-child(2){	text-transform: uppercase;
}
.bulletsList li:nth-child(1) span{	padding-left: 13px;
}
.bulletsList li:nth-child(1) span:nth-child(2){	margin-bottom: 0.2em;
}
.bulletsList li:nth-child(2) span:nth-child(1){	margin-bottom: 0.05em;
}
.bulletsList li:nth-child(2) span:nth-child(2),
.bulletsList li:nth-child(2) span:nth-child(3){	padding-left: 2px;
}
.bulletsList li:nth-child(2) span:nth-child(3){	margin-top: 0.15em;
}
.bulletsList li:nth-child(3) span:nth-child(1){	margin: -0.58em 0 0.25em 0;	padding-left: 5px;
}
.bulletsList li:nth-child(3) span:nth-child(2){	padding-left: 4px;	margin-bottom: 0.1em;
}
.bulletsList li:nth-child(4) span:nth-child(1),
.bulletsList li:nth-child(5) span:nth-child(1){	margin: -0.775em 0 0.02em 0;
}
.bulletsList li:nth-child(4) span:nth-child(2){	margin: 0 0 0.1em 0;
}
.bulletsList li:nth-child(5) span:nth-child(2){	margin: 0 0 0.25em 0;
}
.bulletsList li:last-child{	border: none;
}
.mainArticle{	position: relative;	overflow: hidden;	top: -5px;	background-color: #524741;	color: white;	padding-bottom: 29px;
}
.mainArticle h1{	font-size: 307%;	text-align: center;	text-transform: uppercase;	padding: 29px 0 19px 0;	box-shadow: 0 1px 0px 5px rgba(0, 0, 0, 0.2);	position: relative;
}
.mainBanner{	margin-bottom: 21px;	position: relative;
}
.rollover-flip,
.rollover{	position: absolute;	bottom: 0;	right: 0;	width: 130px;	height: 130px;	overflow: hidden;	border: none;	outline: none;	background: url(https://prashantsani.com/projs/CSSOFF/images/img-Tilt.png) 130px 130px no-repeat;	-webkit-backface-visibility:hidden;	-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;	transition: all 0.3s ease-out;
}
.rollover-flip:before,
.rollover:before{	content: "";	position: absolute;	bottom: 0;	right: 0;	width: 130px;	height: 130px;	opacity: 0;	background: url(https://prashantsani.com/projs/CSSOFF/images/map-tilt.png) right bottom no-repeat;	-webkit-backface-visibility:hidden;	-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out;	transition: all 0.1s ease-out;
}
.rollover-flip{	left: 0;	right: auto;	-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);	-ms-transform: rotate(90deg);	transform: rotate(90deg);
}
.rollover-flip:before{	background: url(https://prashantsani.com/projs/CSSOFF/images/imgback-Tilt.png) right bottom no-repeat;
}
.bb-item:hover .rollover-flip,
.bb-item:hover .rollover,
.touch .bb-item .rollover-flip,
.touch .bb-item .rollover{	background-position: left top;
}
.bb-item:hover .rollover-flip:before,
.bb-item:hover .rollover:before,
.touch .bb-item .rollover-flip:before,
.touch .bb-item .rollover:before{	opacity: 1;	-webkit-transition: all 0.3s 0.15s ease-out; -moz-transition: all 0.3s 0.15s ease-out; -o-transition: all 0.3s 0.15s ease-out;	transition: all 0.3s 0.15s ease-out;
}
.bb-bookblock img{	display: block;	width: 100%;
}
.bb-item iframe{	width: 100%;	height: 100%;	border: none;	outline: none;	-webkit-transition: all 0.3s 0.15s ease-out; -moz-transition: all 0.3s 0.15s ease-out; -o-transition: all 0.3s 0.15s ease-out;	transition: all 0.3s 0.15s ease-out;
}
.mainArticle p,
.mainArticle cite{	font-family: 'Merriweather';	font-weight: 300;	font-style: normal;	padding: 0 26px;
}
.mainArticle p{	font-size: 163%;	letter-spacing: -1px;	line-height: 1.346em;	margin-bottom: 1.346em;
}
.mainArticle cite{	font-size: 113%;	letter-spacing: -0.02em;	-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;	transition: all 0.3s ease-out;
}
.mainArticle cite a{	color: white;	opacity: 0.5;
}
.mainArticle cite a:hover, .mainArticle cite a:active{	opacity: 1;
}
.shortNews{	background: url(https://prashantsani.com/projs/CSSOFF/images/heads.jpg) 4px top no-repeat;	margin-top: -5px;	color: black;	position: relative;
}
.shortNewsContent{	padding-right: 240px;
}
.shortNews h1{	padding-top: 157px;	font-size: 513%;	text-transform: uppercase;	letter-spacing: 0.003em;	border-bottom: 0.28em solid black;	margin-bottom: 12px;
}
.shortNews h2{	font-size: 244%;	border-bottom: 3px solid black;	padding-bottom: 11px;	margin-bottom: 12px;
}
.shortNewsList li{	font-family: 'Merriweather';	font-size: 138%;	letter-spacing: -0.02em;	display: inline;	line-height: 1.32;
}
.shortNewsList li:before{	content: "\2022";	margin: 0 5px;	font-size: 158%;	line-height: 0;	vertical-align: middle;
}
.shortNewsList li:first-child:before{	display: none;
}
.shortNewsList li strong{	font-family: 'Merriweather';	font-weight: 700;
}
.movieReviewSidebar{	float: right;	width: 226px;	height: 715px;	background-color: #3983bb;	margin-top: 15px;	text-transform: uppercase;	border-left: 1px solid #e5e5e5;	color: white;	position: relative;
}
.moviePremire:after{	content: "";	width: 26px;	height: 26px;	background-color: white;	border-radius: 13px;	position: absolute;	bottom: -13px;	left: 50%;	margin-left: -13px;
}
.movieCover,
.movieDesc{	margin: 0 12px;
}
.movieCover{	position: relative;	margin-top: -67px;	z-index: 10;	display: block;
}
.movieCover img{	width: 93%;	display: block;	margin-left: 10px;
}
.movieCover figcaption{	font-size: 31px;	margin-top: 21px;	line-height: 1;	padding-left: 1px;
}
.movieCover figcaption span{	font-size: 68%;	border-bottom: 7px solid #619cc9;	padding: 0 0 12px 1px;
}
.movieDesc{	font-family: 'Lora';	font-weight: 400;	font-style: italic;	text-transform: none;	margin-top: 38px;	padding: 0 3px;	line-height: 1.5;	position: relative;	font-size: 16px
}
.movieRatingWrap:after,
.movieRatingWrap:before{	content: "";	width: 100%;	height: 5px;	background-color: #3476a8;	border-top: 2px dashed #234f70;	position: absolute;	left: 0;	top: 0;
}
.movieRatingWrap:after{	top: 100%
}
.movieRatingWrap{	margin-top: 20px;	position: relative;	padding: 22px 12px;
}
.movieRatingCol1{	font-size: 88%;	line-height: 1;
}
.movieRatingCol1 span{	font-size: 229%;	display: block;
}
.movieRatingPercent{	position: absolute;	top: 22px;	right: 12px;	line-height: 60px;	font-size: 338%;	letter-spacing: -2px;
}
.movieRatingbarWrap{	width: 100%;	display: block;	position: relative;	background-color: #619cc9;	height: 8px;	margin-top: 15px;
}
.movieRatingbarWrap span{	background-color: white;	position: absolute;	top: 0;	left: 0;	width: 20%;	height: 100%;
}
.movieRatingWrap:after{	border-bottom: 2px dashed #234f70;	border-top: none;
}
.moviePremire{	text-align: center;	margin-top: 28px;	padding: 0 12px;
}
.moviePremire span,
.moviePremire strong{	display: block;	line-height: 1.15;	color: white;
}
.moviePremire strong{	font-size: 88%;	letter-spacing: 0.02em;	position: relative;	color: #88aed1;	margin-bottom: 3px;
}
.moviePremire strong:before,
.moviePremire strong:after{	content: "";	background-color: #619cc9;	position: absolute;	top: 0;	height: 13px;	width: 40px;
}
.moviePremire strong:before{	left: 0;
}
.moviePremire strong:after{	right: 0;
}
.moviePremire span:nth-child(2){	font-size: 25px;	letter-spacing: 0.02em;
}
.moviePremire span:nth-child(3){	font-size: 27px;	letter-spacing: 0.017em;	color: #88aed1;
}
.moviePremire span:nth-child(4){	font-size: 39px;
}
.testimonialContain{	position: relative;	width: 110%;	background: url(https://prashantsani.com/projs/CSSOFF/images/overflow.png) left top no-repeat;	z-index: 10;	margin: -25px 0 0 -21px;	height: 550px;
}
.testimonialContain blockquote{	position: absolute;	color: #5e6c74;	font-family: 'Lora';	font-weight: 400;	font-style: italic;	line-height: 1.6;	width: 728px;	max-width: 95%
}
.testimonialContain blockquote strong{	font-family: 'Lora';	font-weight: 700;	font-style: italic;
}
.testimonialContain blockquote:nth-child(1){	top: 167px;	right: 15px;	text-align: right;	-webkit-transform: rotate(2deg); -moz-transform: rotate(2deg);	-ms-transform: rotate(2deg); -o-transform: rotate(2deg);	transform: rotate(2deg);
}
.testimonialContain blockquote:nth-child(2){	top: 268px;	left: -12px;	-webkit-transform: rotate(-0.6deg); -moz-transform: rotate(-0.6deg);	-ms-transform: rotate(-0.6deg); -o-transform: rotate(-0.6deg);	transform: rotate(-0.6deg);
}
.testimonialContain blockquote:nth-child(3){	top: 348px;	left: 104px;	-webkit-transform: rotate(1deg); -moz-transform: rotate(1deg);	-ms-transform: rotate(1deg); -o-transform: rotate(1deg);	transform: rotate(1deg);
}
/* ============================================================================= Footer ========================================================================== */
footer{	border-top: 1px solid #e5e5e5;	padding: 15px 0 65px 0;	clear: both;
}
.copyrightNotice{	color: #8d8d8d;	font-family: 'Lato';	font-size: 107%;
}
.copyrightNotice span{	color: #bfbfbf;
}
.footerSideNote{	float: right;	text-align: right;	font-family: 'Merriweather';	font-weight: 300;	font-style: normal;	color: #989898;	font-size: 83%;
}
.footerSideNote strong{	font-family: 'Merriweather';	font-weight: 700;
}
/* ============================================================================= Forms ========================================================================== */
/* Form Resets */
form{margin:0}fieldset{border:0;margin:0;padding:0}button,input{line-height:normal}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*width:13px;*height:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}
/* ============================================================================= Library Styles ========================================================================== */
.bb-bookblock {	width: 100%;	height: 635px;	margin: 0 auto;	position: relative;	z-index: 100;	margin-bottom: 21px;	-webkit-perspective: 1300px; -moz-perspective: 1300px;	perspective: 1300px;	-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;	backface-visibility: hidden;
}
.bb-page {	position: absolute;	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;	transform-style: preserve-3d;	-webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform;	transition-property: transform;
}
.bb-vertical .bb-page {	width: 50%;	height: 100%;	left: 50%;	-webkit-transform-origin: left center; -moz-transform-origin: left center;	transform-origin: left center;
}
.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {	position: absolute;	height: 100%;	width: 100%;	top: 0;	left: 0;	background: #fff;
}
.bb-vertical .bb-content {	width: 200%;
}
.bb-page > div {	width: 100%;	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;	transform-style: preserve-3d;
}
.bb-page > div:not(:only-child) {	-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;	backface-visibility: hidden;
}
.bb-vertical .bb-back {	-webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg);	transform: rotateY(-180deg);
}
.bb-outer {	width: 100%;	overflow: hidden;	z-index: 999;
}
.bb-overlay,
.bb-flipoverlay {	background-color: rgba(0, 0, 0, 0.7);	position: absolute;	top: 0px;	left: 0px;	width: 100%;	height: 100%;	opacity: 0;
}
.bb-flipoverlay {	background-color: rgba(0, 0, 0, 0.2);
}
.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {	-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);	transform: rotateY(180deg);
}
.bb-vertical .bb-front .bb-content {	left: -100%;
}
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {	-webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg);	transform: rotateY(-180deg);
}
.bb-vertical .bb-flip-prev {	-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg);	transform: rotateY(0deg);
}
.bb-vertical .bb-flip-next-end {	-webkit-transform: rotateY(-15deg); -moz-transform: rotateY(-15deg);	transform: rotateY(-15deg);
}
.bb-vertical .bb-flip-prev-end {	-webkit-transform: rotateY(-165deg); -moz-transform: rotateY(-165deg);	transform: rotateY(-165deg);
}
.bb-item {	width: 100%;	height: 100%;	position: absolute;	top: 0;	left: 0;	display: none;	background: #fff;	-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;	backface-visibility: hidden;
}
.bb-item img{	width: 100%;	display: block;
}
/* No JS */
.no-js .bb-bookblock,
.no-js ul.bb-custom-grid li {	width: auto;	height: auto;
}
.no-js .bb-item {	display: block;	position: relative;
}
/* =============================================================================	Media Queries ========================================================================== */
@media only screen and (max-width: 1000px) {	body{	background: white;	}	.whiteBG{	display: none;	}	header{	width: 100%	}	header:before{	display: none;	}	.volumeNo{	left: 16px;	top: 23px;	right: auto;	}	.logo{	margin: 0;	}	.logo a{	position: relative;	z-index: 1000	}	.logo:after{	display: block;	left: 0;	top: 0;	position: absolute;	width: 90%;	height: 100%;	content: '';	background-color: #cdc9dd;	z-index: 10	}	.BuyBarbie,	.featuredMain{	float: none;	width: 100%;	margin: 20px 0 0 0;	}	.BuyBarbie figure{	margin: 0;	float: left;	width: 45%	}	.BuyBarbie figure:before,	.BuyBarbie figure:after{	width: 45%;	}	.BuyBarbie figure:before{	left: 5%;	bottom: 10%;	}	.BuyBarbie figure:after{	right: 7%;	bottom: 2.5%;	}	.BuyBarbie figure img{	width: 100%	}	.BuyBarbieContent{	float: right;	width: 50%	}	.featuredMain figure{	margin-top: 0;	left: -10%;	top: 20px;	width: 108%;	margin-bottom: 6em;	-webkit-transform: rotate(-1.7deg) scale(1); -moz-transform: rotate(-1.7deg) scale(1);	-ms-transform: rotate(-1.7deg) scale(1); -o-transform: rotate(-1.7deg) scale(1);	transform: rotate(-1.7deg) scale(1);	}	.featuredMain figure img{	margin-top: 0;	left: 0;	top: 20px;	width: 110%	}	.featuredBannerShadow{	display: none;	}	.featuredMain h1:before{	display: none;	}	.bulletSidebar{	width: 100%;	margin: 0;	float: none;	overflow: hidden;	margin-top: 2em	}	.bulletSidebar div{	float: left;	width: 80%;	}	.bulletSidebar img{	float: right;	top: auto;	left: auto;	max-width: 18%;	}	.bulletsListWrap{	position: static;	width: auto;	}	.shortNews{	background: url(../images/heads.jpg) center top no-repeat;	}	.movieReviewSidebar{	margin-top: 240px;	}	.testimonialContain{	padding: 20% 0 2% 0;	width: 100%;	height: auto;	-webkit-background-size: contain; -moz-background-size: contain;	-ms-background-size: contain;	background-size: contain;	}	.testimonialContain blockquote:nth-child(n){	position: static;	width: 100%;	margin: 1em 0;	-webkit-transform: rotate(0); -moz-transform: rotate(0);	-ms-transform: rotate(0); -o-transform: rotate(0);	transform: rotate(0);	}
}
@media only screen and (max-width: 768px) {	body{	font-size: 14px;	}	.bulletsList li{	width: 32%;	float: none;	}	.bulletsList li:nth-child(4){	margin-top: 3em	}	.shortNews{ -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto;	}	.testimonialContain{	padding-top: 25%;	margin-left: 0;	-webkit-background-size: 120% auto; -moz-background-size: 120% auto; -o-background-size: 120% auto;	background-size: 120% auto;	}
}
@media only screen and (max-width: 625px) {	.movieReviewSidebar,	.shortNewsContent{	float: none;	padding: 0;	}	.movieReviewSidebar{	width: 100%;	height: auto;	margin-top: 75px;	padding: 5em 0 2em 0;	}	.movieCover{	width: 50%;	position: absolute;	right: 0;	top: 0;	}	.movieCover figcaption{	position: absolute;	left: -89%;	top: 74px;	}	.movieCover img{	width: 80%;	float: right;	}	.movieCover figcaption span{	display: block;	}	.movieDesc,	.movieRatingWrap,	.moviePremire{	width: 45%	}	.movieRatingWrap{	float: left;	padding: 4.5% 2.4%;	}	.moviePremire{	float: right;	margin-top: 20px;	padding: 0 2.4%	}
}
@media only screen and (max-width: 560px) {	.BuyBarbie figure,	.BuyBarbieContent{	float: none;	}	.BuyBarbie figure{	width: 75%;	margin: 0 auto	}	.BuyBarbieContent{	width: 100%	}	.bulletSidebar{	margin-bottom: 15px;	}	.moviePremire{	font-size: 13px;	}	.moviePremire span:nth-child(2){	font-size: 23px;	}	.moviePremire span:nth-child(3){	font-size: 24px;	}	.moviePremire span:nth-child(4){	font-size: 36px;	}
}
@media only screen and (max-width: 480px) {	.movieReviewSidebar{	padding: 0;	}	.movieCover{	position: static;	width: 95%;	padding: 0 2.5%;	margin: 0 auto;	}	.movieCover img{	float: none;	max-width: 200px;	margin: 0 auto;	margin-top: -50px;	}	.movieCover figcaption{	padding: 0;	margin: 0;	position: static;	text-align: center;	margin-top: 20px	}	.movieDesc{	margin-top: 1em;	padding-top: 20px	}	.movieDesc, .movieRatingWrap, .moviePremire{	width: 95%;	float: none;	margin: 0 auto;	} .movieRatingWrap, .moviePremire{	max-width: 200px;	margin: 20px auto	}
}
/* =============================================================================	Non-Symentic Class ========================================================================== */
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Contain Floats */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* =============================================================================	Print Styles ========================================================================== */
@media print {	* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */	a, a:visited { text-decoration: underline; }	a[href]:after { content: " (" attr(href) ")"; }	abbr[title]:after { content: " (" attr(title) ")"; }	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }	thead { display: table-header-group; } /* h5bp.com/t */	tr, img { page-break-inside: avoid; }	img { max-width: 100% !important; }	@page { margin: 0.5cm; }	p, h2, h3 { orphans: 3; widows: 3; }	h2, h3 { page-break-after: avoid; }
}

CSS Off Entry - Script Codes JS Codes

/* Author: Prashant Sani	URL: www.prashantsani.com
*/
/*!
* FitText.js 1.1
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
(function(a){a.fn.fitText=function(d,b){var e=d||1,c=a.extend({minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY},b);return this.each(function(){var f=a(this);var g=function(){f.css("font-size",Math.max(Math.min(f.width()/(e*10),parseFloat(c.maxFontSize)),parseFloat(c.minFontSize)))};g();a(window).on("resize.fittext orientationchange.fittext",g)})}})(jQuery);
$(document).ready(function() {	$(".logo").fitText(0.185);	// ******	//	bulletsList	//*******/	//Heading	$(".bulletsList li:nth-child(1) span:nth-child(1)").fitText(0.19);	$(".bulletsList li:nth-child(2) span:nth-child(1)").fitText(0.195);	$(".bulletsList li:nth-child(3) span:nth-child(1)").fitText(0.52);	$(".bulletsList li:nth-child(4) span:nth-child(1)").fitText(0.185);	$(".bulletsList li:nth-child(5) span:nth-child(1)").fitText(0.185);	//Sub Head	$(".bulletsList li:nth-child(1) span:nth-child(2)").fitText(0.55);	$(".bulletsList li:nth-child(2) span:nth-child(2)").fitText(0.59);	$(".bulletsList li:nth-child(3) span:nth-child(2)").fitText(0.4);	$(".bulletsList li:nth-child(4) span:nth-child(2)").fitText(0.44);	$(".bulletsList li:nth-child(5) span:nth-child(2)").fitText(0.44);	//Sub Sub Head	$(".bulletsList li:nth-child(1) span:nth-child(3)").fitText(0.47);	$(".bulletsList li:nth-child(2) span:nth-child(3)").fitText(0.51);	$(".bulletsList li:nth-child(3) span:nth-child(3)").fitText(0.43);	$(".bulletsList li:nth-child(4) span:nth-child(3)").fitText(0.42);	$(".bulletsList li:nth-child(5) span:nth-child(3)").fitText(0.51);	//moviePremire	//$(".moviePremire span:nth-child(2)").fitText(0.75);	//$(".moviePremire span:nth-child(3)").fitText(0.72);	//$(".moviePremire span:nth-child(4)").fitText(0.52);	//Main Content	$('.featuredMain h1').fitText(0.7,{ minFontSize:'25px',maxFontSize: '75px'});	$('.mainArticle h1').fitText(1.5,{ minFontSize:'25px',maxFontSize: '50px'});	$('.shortNewsContent h1').fitText(0.5,{ minFontSize:'25px',maxFontSize: '82px'});	$('.shortNewsContent h2').fitText(1,{ minFontSize:'16px',maxFontSize: '39px'});	//Append Style Elements	$('body').prepend('<div class="whiteBG"></div>');	$('.featuredMain figure').append('<img src="https://prashantsani.com/projs/CSSOFF/images/banner-shadow.png" alt="" class="featuredBannerShadow">');
});
/*jqueryPP.custom.js for jquery.bookblock*/
;(function(){var b=jQuery.event,a=function(o,j,n,e){var p,l,k,m,g,i,c,d,f;for(p=0;p<j.length;p++){l=j[p];m=l.indexOf(".")<0;if(!m){c=l.split(".");l=c.shift();d=new RegExp("(^|\\.)"+c.slice(0).sort().join("\\.(?:.*\\.)?")+"(\\.|$)")}k=(o[l]||[]).slice(0);for(g=0;g<k.length;g++){i=k[g];f=(m||d.test(i.namespace));if(f){if(e){if(i.selector===e){n(l,i.origHandler||i.handler)}}else{if(e===null){n(l,i.origHandler||i.handler,i.selector)}else{if(!i.selector){n(l,i.origHandler||i.handler)}}}}}}};b.find=function(i,h,c){var g=($._data(i)||{}).events,d=[],f,e,j;if(!g){return d}a(g,h,function(l,k){d.push(k)},c);return d};b.findBySelector=function(f,e){var d=$._data(f).events,c={},g=function(i,l,k){var h=c[i]||(c[i]={}),j=h[l]||(h[l]=[]);j.push(k)};if(!d){return c}a(d,e,function(j,i,h){g(h||"",j,i)},null);return c};b.supportTouch="ontouchend" in document;$.fn.respondsTo=function(c){if(!this.length){return false}else{return b.find(this[0],$.isArray(c)?c:[c]).length>0}};$.fn.triggerHandled=function(c,d){c=(typeof c=="string"?$.Event(c):c);this.trigger(c,d);return c.handled};b.setupHelper=function(f,d,e){if(!e){e=d;d=null}var g=function(i){var j,h=i.selector||"";if(h){j=b.find(this,f,h);if(!j.length){$(this).delegate(h,d,e)}}else{if(!b.find(this,f,h).length){b.add(this,d,e,{selector:h,delegate:this})}}},c=function(i){var j,h=i.selector||"";if(h){j=b.find(this,f,h);if(!j.length){$(this).undelegate(h,d,e)}}else{if(!b.find(this,f,h).length){b.remove(this,d,e,{selector:h,delegate:this})}}};$.each(f,function(){b.special[this]={add:g,remove:c,setup:function(){},teardown:function(){}}})}})(jQuery);(function(c){var h=/Phantom/.test(navigator.userAgent),e=!h&&"ontouchend" in document,f="touchmove scroll",i=e?"touchstart":"mousedown",g=e?"touchend":"mouseup",a=e?"touchmove":"mousemove",d=function(j){var k=j.originalEvent.touches?j.originalEvent.touches[0]:j;return{time:(new Date).getTime(),coords:[k.pageX,k.pageY],origin:c(j.target)}};var b=c.event.swipe={delay:500,max:75,min:30};c.event.setupHelper(["swipe","swipeleft","swiperight","swipeup","swipedown"],i,function(m){var p=d(m),k,l=m.delegateTarget||m.currentTarget,j=m.handleObj.selector,o=this;function n(q){if(!p){return}k=d(q);if(Math.abs(p.coords[0]-k.coords[0])>10){q.preventDefault()}}c(document.documentElement).bind(a,n).one(g,function(t){c(this).unbind(a,n);if(p&&k){var r=Math.abs(p.coords[0]-k.coords[0]),q=Math.abs(p.coords[1]-k.coords[1]),u=Math.sqrt(r*r+q*q);if(k.time-p.time<b.delay&&u>=b.min){var s=["swipe"];if(r>=b.min&&q<b.min){s.push(p.coords[0]>k.coords[0]?"swipeleft":"swiperight")}else{if(q>=b.min&&r<b.min){s.push(p.coords[1]<k.coords[1]?"swipedown":"swipeup")}}c.each(c.event.find(l,s,j),function(){this.call(o,m,{start:p,end:k})})}}p=k=undefined})})})(jQuery);
/** * jquery.bookblock.min.js v2.0.1 * http://www.codrops.com * * Licensed under the MIT license. * https://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */
;(function(f,g,d){var c=f(g),e=g.Modernizr;e.addTest("csstransformspreserve3d",function(){var l=e.prefixed("transformStyle");var k="preserve-3d";var j;if(!l){return false}l=l.replace(/([A-Z])/g,function(n,m){return"-"+m.toLowerCase()}).replace(/^ms-/,"-ms-");e.testStyles("#modernizr{"+l+":"+k+";}",function(m,n){j=g.getComputedStyle?getComputedStyle(m,null).getPropertyValue(l):""});return(j===k)});var a=f.event,b,i;b=a.special.debouncedresize={setup:function(){f(this).on("resize",b.handler)},teardown:function(){f(this).off("resize",b.handler)},handler:function(n,j){var m=this,l=arguments,k=function(){n.type="debouncedresize";a.dispatch.apply(m,l)};if(i){clearTimeout(i)}j?k():i=setTimeout(k,b.threshold)},threshold:150};f.BookBlock=function(j,k){this.$el=f(k);this._init(j)};f.BookBlock.defaults={orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(j,l,k){return false},onBeforeFlip:function(j){return false}};f.BookBlock.prototype={_init:function(j){this.options=f.extend(true,{},f.BookBlock.defaults,j);this.$el.addClass("bb-"+this.options.orientation);this.$items=this.$el.children(".bb-item").hide();this.itemsCount=this.$items.length;this.current=0;this.previous=-1;this.$current=this.$items.eq(this.current).show();this.elWidth=this.$el.width();var k={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=k[e.prefixed("transition")]+".bookblock";this.support=e.csstransitions&&e.csstransforms3d&&e.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var j=this;if(this.options.nextEl!==""){f(this.options.nextEl).on("click.bookblock touchstart.bookblock",function(){j._action("next");return false})}if(this.options.prevEl!==""){f(this.options.prevEl).on("click.bookblock touchstart.bookblock",function(){j._action("prev");return false})}c.on("debouncedresize",function(){j.elWidth=j.$el.width()})},_action:function(j,k){this._stopSlideshow();this._navigate(j,k)},_navigate:function(j,k){if(this.isAnimating){return false}this.options.onBeforeFlip(this.current);this.isAnimating=true;this.$current=this.$items.eq(this.current);if(k!==d){this.current=k}else{if(j==="next"&&this.options.direction==="ltr"||j==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===this.itemsCount-1){this.end=true}else{this.previous=this.current;this.current=this.current<this.itemsCount-1?this.current+1:0}}else{if(j==="prev"&&this.options.direction==="ltr"||j==="next"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===0){this.end=true}else{this.previous=this.current;this.current=this.current>0?this.current-1:this.itemsCount-1}}}}this.$nextItem=!this.options.circular&&this.end?this.$current:this.$items.eq(this.current);if(!this.support){this._layoutNoSupport(j)}else{this._layout(j)}},_layoutNoSupport:function(k){this.$items.hide();this.$nextItem.show();this.end=false;this.isAnimating=false;var j=k==="next"&&this.current===this.itemsCount-1||k==="prev"&&this.current===0;this.options.onEndFlip(this.previous,this.current,j)},_layout:function(l){var v=this,u=this._addSide("left",l),o=this._addSide("middle",l),j=this._addSide("right",l),r=u.find("div.bb-overlay"),t=o.find("div.bb-flipoverlay:first"),w=o.find("div.bb-flipoverlay:last"),s=j.find("div.bb-overlay"),k=this.end?400:this.options.speed;this.$items.hide();this.$el.prepend(u,o,j);o.css({transitionDuration:k+"ms",transitionTimingFunction:this.options.easing}).on(this.transEndEventName,function(y){if(f(y.target).hasClass("bb-page")){v.$el.children(".bb-page").remove();v.$nextItem.show();v.end=false;v.isAnimating=false;var x=l==="next"&&v.current===v.itemsCount-1||l==="prev"&&v.current===0;v.options.onEndFlip(v.previous,v.current,x)}});if(l==="prev"){o.addClass("bb-flip-initial")}if(this.options.shadows&&!this.end){var n=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}:{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides},q=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear"}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip},m=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip}:{transition:"opacity "+this.options.speed/2+"ms linear"},p=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"};t.css(q);w.css(m);r.css(n);s.css(p)}setTimeout(function(){o.addClass(v.end?"bb-flip-"+l+"-end":"bb-flip-"+l);if(v.options.shadows&&!v.end){t.css({opacity:l==="next"?v.options.shadowFlip:0});w.css({opacity:l==="next"?0:v.options.shadowFlip});r.css({opacity:l==="next"?v.options.shadowSides:0});s.css({opacity:l==="next"?0:v.options.shadowSides})}},25)},_addSide:function(l,k){var j;switch(l){case"left":j=f('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",102);break;case"middle":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$current.html():this.$nextItem.html())+'</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:'+this.elWidth+'px"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-flipoverlay"></div></div></div></div>').css("z-index",103);break;case"right":j=f('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content"><div class="bb-inner">'+(k==="next"?this.$nextItem.html():this.$current.html())+'</div></div><div class="bb-overlay"></div></div></div></div>').css("z-index",101);break}return j},_startSlideshow:function(){var j=this;this.slideshow=setTimeout(function(){j._navigate("next");if(j.options.autoplay){j._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(k){k-=1;if(k===this.current||k>=this.itemsCount||k<0){return false}var j;if(this.options.direction==="ltr"){j=k>this.current?"next":"prev"}else{j=k>this.current?"prev":"next"}this._action(j,k)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},isActive:function(){return this.isAnimating},update:function(){var j=this.$items.eq(this.current);this.$items=this.$el.children(".bb-item");this.itemsCount=this.$items.length;this.current=j.index()},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.$el.removeClass("bb-"+this.options.orientation);this.$items.show();if(this.options.nextEl!==""){f(this.options.nextEl).off(".bookblock")}if(this.options.prevEl!==""){f(this.options.prevEl).off(".bookblock")}c.off("debouncedresize")}};var h=function(j){if(g.console){g.console.error(j)}};f.fn.bookblock=function(k){if(typeof k==="string"){var j=Array.prototype.slice.call(arguments,1);this.each(function(){var l=f.data(this,"bookblock");if(!l){h("cannot call methods on bookblock prior to initialization; attempted to call method '"+k+"'");return}if(!f.isFunction(l[k])||k.charAt(0)==="_"){h("no such method '"+k+"' for bookblock instance");return}l[k].apply(l,j)})}else{this.each(function(){var l=f.data(this,"bookblock");if(l){l._init()}else{l=f.data(this,"bookblock",new f.BookBlock(k,this))}})}return this}})(jQuery,window);
//Activating bookblock
var Page = (function() {	var config = {	$bookBlock : $( '.bb-bookblock' ),	$navNext : $( '.rollover' ),	$navPrev : $( '.rollover-flip' )	},	init = function() {	config.$bookBlock.bookblock( {	speed : 800,	shadowSides : 0.8,	shadowFlip : 0.7	});	initEvents();	},	initEvents = function() {	config.$navNext.on( 'click touchstart', function() {	config.$bookBlock.bookblock( 'next' );	return false;	});	config.$navPrev.on( 'click touchstart', function() {	config.$bookBlock.bookblock( 'prev' );	return false;	});	var $slides = config.$bookBlock.children();	// add swipe events	$slides.on( {	'swipeleft' : function( event ) {	config.$bookBlock.bookblock( 'next' );	return false;	},	'swiperight' : function( event ) {	config.$bookBlock.bookblock( 'prev' );	return false;	}	});	// add keyboard events	$( document ).keydown( function(e) {	var keyCode = e.keyCode || e.which,	arrow = {	left : 37,	up : 38,	right : 39,	down : 40	};	switch (keyCode) {	case arrow.left:	config.$bookBlock.bookblock( 'prev' );	break;	case arrow.right:	config.$bookBlock.bookblock( 'next' );	break;	}	});	};	return { init : init };
})();
Page.init();
function handleTabletMobRes(){	var $wrapWidth=$('.wrap').innerWidth();	if($wrapWidth<960){	//Page Flip	$('.bb-bookblock').height(($wrapWidth*635)/960);	//Movie Review Box	if (Modernizr.mq('all and (max-width: 625px)')) {	if(!($('.movieReviewSidebar').hasClass('movieReviewSidebarMobile'))){	$('.movieReviewSidebar').insertAfter($('.shortNewsContent')).addClass('movieReviewSidebarMobile');	}	}	else if(($('.movieReviewSidebar').hasClass('movieReviewSidebarMobile')) ){	$('.movieReviewSidebar').insertBefore($('.shortNewsContent')).removeClass('movieReviewSidebarMobile')	}	}	else{	//Page Flip	if($('.bb-bookblock').height!= 635){	$('.bb-bookblock').height(635);	}	}
}
//JS for Mobile/Tab Layout
handleTabletMobRes();
$(window).resize(function () { handleTabletMobRes();
});
CSS Off Entry - Script Codes
CSS Off Entry - Script Codes
Home Page Home
Developer Prashant Sani
Username Prashantsani
Uploaded November 15, 2022
Rating 3
Size 16,655 Kb
Views 10,120
Do you need developer help for CSS Off Entry?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Prashant Sani (Prashantsani) Script Codes
Name
Digital Christmas Tree
Vintage Television Set Noise Effect in CSS3
Christ the Redeemer
CSS3 Animating Analogue Tower
A Pen by Prashant Sani
Flower Petal Animation
CSS3 Jack in a Box
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!