Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <title>GG_4 Years Aniversary</title>
<html lang="en">
    <head>
      <title>GG_4 Years Aniversary</title>
<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Photo Booth Strips with Lightbox</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Photo Booth Strips with Lightbox 2 Integration" />
        <meta name="keywords" content="photo booth, strips, photo strip, css3, rotation, scroll, thumbs, swipe, touch, jquery, mobile, lightbox" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		
		
		<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar 
            <div class="codrops-top">
                <a href="https://tympanus.net/Tutorials/ModernBlockQuoteStyles/">
                    <strong>&laquo; Previous Demo: </strong>Modern Block Quote Styles
                </a>
                <span class="right">
					<a href="http://www.flickr.com/people/smanography/">Images by Sherman Geronimo-Tan</a>
                    <a href="https://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div>/ Codrops top bar -->
			
			<header>
			
				<h1>Gau - Ga Memories</h1>
				<h2>We will stick together till the end of the life  </h2>
				
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
					<!--span class="no-csstransitions">CSS transitions are not supported in your browser</span-->
					<span class="no-generatedcontent">CSS generated content is not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section id="main" class="main">
				
				<div class="pb-wrapper pb-wrapper-1">
					<div class="pb-scroll">
						<ul class="pb-strip">
							<li><img src="https://i.imgsafe.org/dd53e819ed.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd53e2440e.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd53f6d5fe.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd53fae40f.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54013aac.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd540c3e4e.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54036707.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd5411c603.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd541a2486.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54357a1a.jpg" /></li>
						</ul>
					</div>
					<h3 class="pb-title"> You only live once, but if you love right person, once is enough.</h3>
				</div>
				
				<div class="pb-wrapper pb-wrapper-2">
					<div class="pb-scroll">
						<ul class="pb-strip">
							<li><img src="https://i.imgsafe.org/dd54368ff6.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54408490.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54721d47.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd546bd8b0.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd546c72f0.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd547d8559.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd549a1732.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd549825cb.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd548e228c.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54c90500.jpg" /></li>
						</ul>
					</div>	
					<h3 class="pb-title">I believe you're my Mr. Right!</h3>
				</div>
				
				<div class="pb-wrapper pb-wrapper-3">
					<div class="pb-scroll">
						<ul class="pb-strip">
							<li><img src="https://i.imgsafe.org/dd54a72969.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd549c060b.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54993c13.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54dbfeca.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54d55c7e.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54f4e2cf.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd54f8da9c.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55112d56.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55046624.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd551c227b.jpg" /></li>
						</ul>
					</div>

					<h3 class="pb-title"> The year of Adventure</h3>
				</div>
				
				<div class="pb-wrapper pb-wrapper-4">
					<div class="pb-scroll">
						<ul class="pb-strip">
							<li><img src="https://i.imgsafe.org/dd54fedab6.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd5524ca7c.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55292ea3.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55254438.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd5559be68.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd556236a0.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd555b2fd5.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55569059.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd555500a1.jpg" /></li>
							<li><img src="https://i.imgsafe.org/dd55697ddf.jpg" /></li>
						</ul>
					</div>
					<h3 class="pb-title">Happiness is a direction, not a destination.</h3>
				</div>
				
			</section>
        </div>
	
    </body>
</html>
              
            
!

CSS

              
                
.pb-wrapper {
	position: fixed;
	background: #fff url(https://i.imgsafe.org/dd94143446.jpg) repeat center bottom;
	width: 170px;
	margin-top: 10px;
	padding: 20px 10px 100px;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	box-shadow:
		inset 1px 0 0 3px rgba(255,255,255,0.6),
		0 1px 4px rgba(0,0,0,0.3), 
		inset 0 0 20px rgba(0,0,0,0.05),
		inset 0 -25px 40px rgba(0,0,0,0.08);
}

.pb-wrapper:before {
	content: '';
    position: absolute;
	width: 2px;
	left: 0;
	top: 3px;
	bottom: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.pb-wrapper:after{
	position: absolute;
	content: '';
	background: rgba(192,227,232, 0.8) url(https://i.imgsafe.org/dd941c00ea.png) no-repeat center center;
	width: 80px;
	height: 80px;
	top: 50%;
	left: 50%;
	margin: -75px 0 0 -35px;
	border-radius: 50%;
	z-index: 1000;
}

.touch .pb-wrapper:after,
.pb-wrapper:hover:after {
	display: none;
}

h3.pb-title {
	padding: 5px;
	font-family: 'Pacifico', Cambria, Georgia, serif;
	color: #374571;
	font-size: 14px;
	font-weight: 300;
	margin: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pb-scroll {
	position: relative;
	height: 100%;
	width: 150px;
	padding-right: 30px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.touch .pb-scroll {
	padding-right: 0px;
}

ul.pb-strip {
	padding: 0;
	list-style: none;
	position: relative; 
	margin: 0 auto;
	width: inherit;
	opacity: 0.8;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.pb-wrapper:hover ul.pb-strip,
.touch .pb-wrapper ul.pb-strip{
	opacity: 1;
}

ul.pb-strip li {
	display: block;
	width: 150px;
	position: relative;
	margin-bottom: 7px;
}

ul.pb-strip li a {
	display: block;
}

ul.pb-strip li a:after {
	position: absolute;
	z-index: 999;
	height: 20px;
	width: 120px;
	left: 10px;
	padding: 5px;
	bottom: 10px;
	background: rgba(255,255,255,0.8);
	content: attr(title);
	font-size: 13px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.9);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

ul.pb-strip li img {
	display: block;
	box-shadow: 0 0 1px 1px #fff;
}

/* Positions */
.pb-wrapper-1 {
	height: 89%;
	left: 20%;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	/* -ms-transform: rotate(3deg);*/
	transform: rotate(3deg);
}

.pb-wrapper-2 {
	height: 85%;
	left: 40%;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	/* -ms-transform: rotate(-2deg);*/
	transform: rotate(-2deg);
}

.pb-wrapper-3 {
	height: 95%;
	left: 60%;
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	/* -ms-transform: rotate(1deg);*/
	transform: rotate(1deg);
}

.pb-wrapper-4 {
	height: 75%;
	left: 80%;
}


/* Lightbox custom styles */

#lightbox {
	font-family: inherit;
	padding: 0 85px;
}

.lb-outerContainer {
	overflow: visible !important;
	background: #fff url(https://i.imgsafe.org/dd94143446.jpg) fixed repeat top left;
	border-radius: 0px;
	max-width: 100%;
	height: auto !important;
}

.lb-container {
	padding: 0;
}

#lightbox img.lb-image {
	padding: 10px;
	max-width: 100%;
}

.lb-nav {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	padding: 0 80px;
	left: -80px;
}

.lb-dataContainer {
	position: relative;
	max-width: 100%;
}

.lb-data .lb-close {
	bottom: 10px;
	position: absolute;
	width: 73px;
	height: 73px;
	right: 5px;
}

.lb-prev, .lb-next {
	position: absolute;
	cursor: pointer;
	width: 60px;
	height: 60px;
	top: 50%;
	margin-top: -30px;
}

.lb-prev,
.lb-prev:hover{
	background: url(https://i.imgsafe.org/dd9417f752.png) no-repeat 50% 50%;
}

.lb-next,
.lb-next:hover{
	background: url(https://i.imgsafe.org/dd940d45ae.png) no-repeat 50% 50%;
}

.lb-data .lb-caption {
	font-family: 'Pacifico', Cambria, Georgia, serif;
	font-weight: 300;
	font-size: 30px;
	color: #fff;
	line-height: 32px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

.lb-data .lb-number {
	text-indent: 4px;
	color: #c0e3e8;
}

@media screen and (max-width: 650px) {
	div.pb-wrapper {
		position: relative;
		margin: 20px auto;
		height: 500px;
		left: auto;
	}
}

@media screen and (max-width: 350px) {
	#lightbox {
		padding: 0 20px;
	}
	.lb-nav {
		padding: 0;
		left: 0;
	}
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}


audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}



audio:not([controls]) {
    display: none;
    height: 0;
}



[hidden] {
    display: none;
}




html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}


html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}



body {
    margin: 0;
}




a:focus {
    outline: thin dotted;
}



a:hover,
a:active {
    outline: 0;
}




h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}



abbr[title] {
    border-bottom: 1px dotted;
}



b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}



dfn {
    font-style: italic;
}



mark {
    background: #ff0;
    color: #000;
}



p,
pre {
    margin: 1em 0;
}



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: 75%;
}



sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}




dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}



menu,
ol,
ul {
    padding: 0 0 0 40px;
}



nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}





img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}



svg:not(:root) {
    overflow: hidden;
}




figure {
    margin: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
}




form {
    margin: 0;
}



fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}



legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}


button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}



button,
input {
    line-height: normal; /* 1 */
}



button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}



button[disabled],
input[disabled] {
    cursor: default;
}



input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}



input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}


button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
@import url('normalize.css');

/* General Demo Style */
body{
	font-family: 'Courier New', 'Courier', monospace;
	background: #c88a3c url(https://i.imgsafe.org/ddcb78d678.jpg) no-repeat fixed center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
a{
	color: #555;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
}
.clr{
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}
.main{
	position: relative;
	width: 100%;
}
.container > header{
	margin: 10px;
	padding: 20px 10px 10px 10px;
	position: relative;
	display: block;
    text-align: left;
	width: 20%;
	float: left;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.container > header h1{
	font-size: 36px;
	line-height: 36px;
	margin: 0;
	position: relative;
	font-family: 'Pacifico', Cambria, Georgia, serif;
	font-weight: 300;
	color: #c0e3e8;
	padding-bottom: 20px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.container > header h1 span{
	font-weight: 700;
}
.container > header h2{
	font-size: 14px;
	font-weight: 300;
	margin: 0;
	width: 200px;
	line-height: 20px;
	color: #fff;
	display: inline;
	clear: both;
	letter-spacing: 2px;	
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.container > header h2 strong{
	text-decoration: underline;
}
/* Header Style */
.codrops-top{
	line-height: 24px;
	font-size: 11px;
	text-transform: uppercase;
	z-index: 9999;
	background: rgba(255,255,255,0.1);
	position: relative;
	font-family: Cambria, Georgia, serif;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}
.codrops-top a:hover{
	background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: left;
	display: block;
}
.support-note span{
	color: #ac375d;
	font-size: 16px;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions,
.no-generatedcontent .support-note span.no-generatedcontent{
	display: block;
}

body #codrops-ad-wrapper{
	bottom: 10px;
	top: auto;
	left: 10px;
}

@media screen and (max-width: 790px) {
	.container > header h1{
		font-size: 26px;
		line-height: 26px;
	}
}

@media screen and (max-width: 650px) {
	body{
		overflow: auto;
	}
	.container > header{
		text-align: center;
		width: auto;
		float: none;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console