cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              doctype html
html(lang="en")
	head
		title Magazine Flow
		meta(charset='utf-8')
		meta(name="viewport", content="width=device-width, initial-scale=1")
		link(type="text/css", rel="stylesheet", href="index.css")
		link(href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css')
		link(href='https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700' rel='stylesheet' type='text/css')
		link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css")
	body

		div.body-wrapper

			header
				i.fa.fa-th-large 
				h1 //V / Mag
				i.fa.fa-search

			div.landing-page-wrap
				div.card
					span.date.ease-out4 2016 Jan
					div.cover.cover1.ease-out4
						span.issue.ease-out4 Issue 2
						div.image.image1.ease-out4
							img.logo.ease-out4(src="https://notbigmuzzy.github.io/codepen/logo.png")
							div.dot.dot1.ease-out4
							div.dot.dot2.ease-out4
							div.dot.dot3.ease-out4
							div.dot.dot4.ease-out4
						span.number.ease-out4
							span 1
							|/4
						span.city.ease-out4 New York City

						div.cover.cover2.ease-out4
							div.image
							span.city.ease-out4 San Francisco

						div.cover.cover3.ease-out4
							div.image
							span.city.ease-out4 Tuscany

						div.cover.cover4.ease-out4
							div.image
							span.city.ease-out4 London

			div.magazine-wrap.ease-out4
				a.back.ease-out4(href="#") BACK
				div.mag-overlay
					div.magazine-body
						div.magazine-date 
							span 2016 Jan * Issue 2
						div.mag-header
							h1 //V / Mag
								span Issue 2
							i.fa.fa-search
							div(style="clear: both")
						div.magazine-left
							div.magazine-overview
								h1 New York City
								span The City that 
									br 
									| never sleeps
								h4 
									i Authors
								ul.magazine-authors 
									li 
										a
											img(src="https://notbigmuzzy.github.io/codepen/user.jpg")
											span Seth Gibbon
									li 
										a
											img(src="https://notbigmuzzy.github.io/codepen/user.jpg")
											span Jenn Clarkson
									li 
										a
											img(src="https://notbigmuzzy.github.io/codepen/user.jpg")
											span Math Kevin
							div.magazine-details
							div.magazine-triangle.ease-out4
						ul.magazine-right
							li.article
								a.ease-out4(href="#")
									img.ease-out4(src="https://notbigmuzzy.github.io/codepen/user.jpg")
									h2.ease-out4 New York's Vibrant Street Art
									p.ease-out4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
							li.article
								a.ease-out4(href="#")
									img.ease-out4(src="https://notbigmuzzy.github.io/codepen/user.jpg")
									h2.ease-out4 New York's Vibrant Street Art
									p.ease-out4 Magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
							li.article
								a.ease-out4(href="#")
									img.ease-out4(src="https://notbigmuzzy.github.io/codepen/user.jpg")
									h2.ease-out4 New York's Vibrant Street Art
									p.ease-out4 Magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
						div(style="clear: both")

			div.magazine-read
				div.read-body
					div.read-head
						img.read-user-pic(src="https://notbigmuzzy.github.io/codepen/user.jpg")
						span.read-user-name Seth Gibbon
					h2.read-title New York's Vibrant Street Art
					span.read-share 
						i.fa.fa-heart
						b 27 likes 
						| // 6 min read
					p.teaser-text Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non oident, sunt in culpa qui officia deserunt mollit anim id est laborum.

					div.read-pic
						img(src="https://notbigmuzzy.github.io/codepen/streetart.jpg")

					p Ex eros debet nostrud eos, ex reque bonorum voluptaria mei, eum ut tollit imperdiet referrentur. Ex ius nisl probatus voluptatibus. Menandri definiebas ius cu. Quo ad solum ullum, est no agam convenire dissentiet. Graece viderer iracundia ut sed, cu omnes mediocrem elaboraret pri. Ad viderer ocurreret intellegam ius, at vix voluptatum dissentias. Veniam similique signiferumque ex pri, eu alia iisque eum.

					p Sumo menandri senserit ea eam. Eam labitur inermis in, vim ex nobis malorum fabulas, his te iudico tacimates. Indoctum persecuti vis ex, quas regione eripuit sed ex. Usu ne indoctum definiebas necessitatibus. Sed summo iriure euripidis et, dicam quidam vel in. Habeo pericula mea at.

					p.quote Vis choro tincidunt inciderint at. Doming fuisset constituam nec ne, usu exerci vivendum ea, probo legere abhorreant vix ei. Viris regione dolorum pe.

					p Ne eam ludus laudem, scripta deserunt et usu. Soleat insolens no pro. No unum vulputate pro, dicant antiopam volutpat quo ea, vis choro tincidunt inciderint at. Consequat suscipiantur vituperatoribus id ius, sit in mutat harum dicam.

					p Id probatus qualisque pro. Et laudem molestie intellegebat eos, sonet placerat petentium ius cu, id quo dissentias referrentur. Mel te tation nemore consequuntur. Nam et lobortis maiestatis constituam, his eleifend reprehendunt at, id nam animal commodo. Doming fuisset constituam nec ne, usu exerci vivendum ea, probo legere abhorreant vix ei. Viris regione dolorum per no.
				div.bottom-bar.ease-out4
					ul.social-icons
						li
							a(href="#")
								i.ease-out4.fa.fa-facebook
						li
							a(href="#")
								i.ease-out4.fa.fa-twitter
						li
							a(href="#")
								i.ease-out4.fa.fa-linkedin
						li
							a(href="#")
								i.ease-out4.fa.fa-rss

	//- SKRIPTORIJUM
	script(type='text/javascript', src='https://code.jquery.com/jquery-2.1.4.min.js')
	script(type='text/javascript', src='index.js')
            
          
!
            
              *
	padding: 0
	margin: 0
	box-sizing: border-box

body, html
	width: 100%
	height: 100%
	font-family: 'Open Sans'

.body-wrapper
	max-width: 1200px
	height: 100%
	margin: 0 auto
	position: relative
	padding: 0 60px

.body-wrapper-magazine
	padding: 0
	max-width: 100%

// ANIMATIONS
.ease-out1
	-moz-transition: .1s ease-out all
	-webkit-transition: .1s ease-out all
	-o-transition: .1s ease-out all
	-ms-transition: .1s ease-out all
	transition: .1s ease-out all

.ease-out2
	-moz-transition: .2s ease-out all
	-webkit-transition: .2s ease-out all
	-o-transition: .2s ease-out all
	-ms-transition: .2s ease-out all
	transition: .2s ease-out all

.ease-out4
	-moz-transition: .3s ease-out all
	-webkit-transition: .3s ease-out all
	-o-transition: .3s ease-out all
	-ms-transition: .3s ease-out all
	transition: .3s ease-out all

.ease-out6
	-moz-transition: .6s ease-out all
	-webkit-transition: .6s ease-out all
	-o-transition: .6s ease-out all
	-ms-transition: .6s ease-out all
	transition: .6s ease-out all

.ease-out8
	-moz-transition: .8s ease-out all
	-webkit-transition: .8s ease-out all
	-o-transition: .8s ease-out all
	-ms-transition: .8s ease-out all
	transition: .8s ease-out all

.ease-out10
	-moz-transition: 1s ease-out all
	-webkit-transition: 1s ease-out all
	-o-transition: 1s ease-out all
	-ms-transition: 1s ease-out all
	transition: 1s ease-out all


//HEADER STUFF
header
	text-align: center
	padding: 40px 0

header h1
	display: inline-block
	font-size: 30px
	margin: 0

header i
	float: right
	font-size: 40px !important
	&:first-child
		float: left


//LANDING PAGE
.landing-page-wrap
	position: relative
	width: 100%
	top: 40%
	transform: translateY(-50%)

.card
	width: 100%
	position: relative

.date,
.issue
	position: absolute
	left: -30px
	top: 50%
	display: inline-block
	transform: rotate(-90deg)
	font-size: 20px
	font-weight: 700
	font-family: 'Source Serif Pro', serif

.issue
	font-size: 120px
	left: -240px
	top: 30%
	color: #e6e6e6

.logo
	position: absolute
	top: 0
	right: 0
	margin: 20px 60px
	height: 80px
	width: auto
	opacity: 0

.dot
	position: absolute
	width: 7px
	height: 7px
	background: #fff
	margin: 20px
	border-radius: 50%

.dot1
	top: 0
	left: 0

.dot2
	top: 0
	right: 0

.dot3
	bottom: 0
	left: 0

.dot4
	bottom: 0
	right: 0
.card .cover
	position: relative

.card .cover .image1
	position: relative
	height: 400px
	background: url(https://notbigmuzzy.github.io/codepen/newyork.jpg) center bottom no-repeat
	background-size: cover

.card .cover2 .image
	position: relative
	height: 360px
	background: url(https://notbigmuzzy.github.io/codepen/sanfranciso.jpg) right bottom no-repeat
	background-size: cover
	box-shadow: none

.card .cover3 .image
	position: relative
	height: 320px
	background: url(https://notbigmuzzy.github.io/codepen/tuscany.jpg) right bottom no-repeat
	background-size: cover
	box-shadow: none

.card .cover4 .image
	position: relative
	height: 280px
	background: url(https://notbigmuzzy.github.io/codepen/london.jpg) right bottom no-repeat
	background-size: cover
	box-shadow: none

.card .cover1
	width: 70%
	left: 30%

.card .cover1 .image
	z-index: 9

.card .cover1 .number
	float: right
	margin-right: 60px
	font-size: 20px
	font-weight: 700
	font-family: 'Source Serif Pro', serif
	color: #999
	display: inline-block
	padding: 20px 0

.card .cover1 .number span
	font-size: 40px

.city
	font-size: 20px
	font-weight: 700
	font-family: 'Source Serif Pro', serif
	color: #e6e6e6
	position: absolute
	bottom: 0
	right: 0
	display: inline-block
	transform: rotate(-90deg)
	bottom: -87px
	right: -55px

.cover2 .city
	opacity: 0

.cover3 .city
	opacity: 0
	bottom: -57px
	right: -30px

.cover4 .city
	opacity: 0
	bottom: -57px
	right: -30px

.card .cover2,
.card .cover3,
.card .cover4
	position: absolute
	width: 50%
	top: 20px
	left: 50%
	z-index: 8

.card .cover3
	top: 40px
	z-index: 7

.card .cover4
	top: 60px
	z-index: 6

.body-wrapper .fullscreen-wrap
	position: fixed
	width: 100%
	height: 100%

.magazine-wrap
	display: none
	background: url('https://notbigmuzzy.github.io/codepen//newyork.jpg')
	background-size: cover
	background-position: center center
	background-repeat: no-repeat
	height: 100%
	opacity: 0
	transform: scale(0.9)

.magazine-wrap-show
	opacity: 1
	transform: scale(1)

.magazine-wrap-reading
	margin-right: 50%

.magazine-wrap-reading .magazine-left
	width: 100%

.magazine-wrap-reading .mag-header i
	display: none

.mag-overlay
	width: 100%
	height: 100%
	overflow: auto
	background: rgba(0,0,0,.5)

.mag-overlay-no-overflow
	overflow: hidden

.magazine-body
	max-width: 1200px
	padding: 0 60px
	margin: 0 auto
	position: relative

.magazine-date
	position: fixed
	color: #fff
	top: 100px
	left: 0px
	height: calc(100vh - 100px)
	width: 40px
	border-right: 2px solid #fff

.magazine-date span
	margin-top: 47vh
	margin-left: -80px
	width: 200px
	display: inline-block
	transform: rotate(-90deg)
	font-size: 20px
	font-weight: 700
	font-family: 'Source Serif Pro', serif

.mag-header
	width: 100%
	color: #fff
	padding: 60px 0

.mag-header h1
	float: left

.mag-header span
	display: none
	line-height: 0px
	font-size: 30px
	font-weight: 400
	font-family: 'Source Serif Pro', serif
	margin: 0 20px
	opacity: 0.9

.mag-header i
	font-size: 40px !important
	float: right

.magazine-left
	float: left
	width: 50%
	max-width: 540px
	color: #fff
	font-family: 'Source Serif Pro', serif

.magazine-overview h1
	font-size: 100px
	margin-bottom: 20px

.magazine-overview > span
	font-size: 30px

.magazine-overview > span:after
	content: ""
	display: block
	background: red
	height: 4px
	width: 50px
	margin-top: 40px
	margin-bottom: 40px

.magazine-overview h4
	font-weight: 400
	font-family: 'Source Serif Pro', serif
	margin-bottom: 20px
	opacity: .75

.magazine-authors
	list-style: none

.magazine-authors li
	margin-bottom: 20px

.magazine-authors li:first-child
	display: block !important

.magazine-authors li a
	display: block

.magazine-authors img
	width: 40px
	height: auto
	border-radius: 50%
	float: left
	margin-right: 10px

.magazine-authors span
	line-height: 40px

.magazine-right
	float: right
	width: 50%
	color: #fff
	font-family: 'Source Serif Pro', serif
	text-align: center
	list-style: none

.article:after
	content: ""
	display: block
	background: red
	height: 4px
	width: 50px
	margin: 0 auto
	margin-top: 40px
	margin-bottom: 40px

.article:last-child:after
	display: none

.article
	overflow: hidden

.article img
	width: 40px
	height: auto
	border-radius: 50%
	margin-bottom: 20px

.article h2
	width: 250px
	margin: 0 auto
	margin-bottom: 20px
	font-size: 26px
	line-height: 30px

.article p
	width: 350px
	margin: 0 auto
	font-size: 14px
	line-height: 20px

.article a
	display: block
	text-decoration: none
	color: #fff
	width: 400px
	margin: 0 auto
	border: 1px solid transparent
	padding-top: 5px

.magazine-triangle
	display: none
	position: fixed
	top: 0
	right: -200px
	width: 0
	height: 0
	border-style: solid
	text-align: center
	border-width: 0 0 100vh 200px
	border-color: transparent transparent #fff transparent

.magazine-triangle-active
	right: 0

.back
	display: none
	color: #999
	border: 1px solid #999
	padding: 20px
	position: absolute
	right: 2%
	bottom: 20px
	font-family: "Open Sans"
	font-weight: 700
	text-decoration: none
	z-index: 999
	border-radius: 50%
	height: 87px
	line-height: 40px

.back:hover
	box-shadow: inset 0px 0px 30px rgba(0,0,0,.5)

.magazine-read
	display: none
	width: 50%
	height: 100%
	overflow: auto
	position: absolute
	top: 0
	right: 0
	color: #000
	padding: 0 60px
	text-align: center
	display: none

.magazine-read .mag-header
	color: #000

.read-body
	padding: 80px 0

.read-body img	
	max-width: 100%

.read-user-pic
	width: 40px
	height: auto
	border-radius: 50%
	margin-bottom: 10px

.read-user-name
	display: block
	margin-bottom: 40px

.read-head-fix
	background: #fff
	position: fixed
	top: 0
	left: 50%
	width: 50%
	text-align: left
	padding: 10px 60px
	height: 60px

.read-head-fix .read-user-pic
	float: left
	margin-right: 20px

.read-head-fix .read-user-name
	line-height: 40px

.read-head-fix~.read-title
	margin-top: 100px

.read-title
	font-size: 50px
	margin-bottom: 40px
	font-family: 'Source Serif Pro', serif

.read-share
	display: block
	margin-bottom: 40px
		
.read-share i
	margin-right: 5px
	color: red

.read-pic
	margin-bottom: 20px

.read-body p
	text-align: left
	font-size: 16px
	line-height: 20px
	font-family: 'Source Serif Pro', serif
	margin-bottom: 20px

.read-body p.teaser-text
	font-size: 16px
	line-height: 28px
	margin-bottom: 40px

.read-body p.quote
	padding-left: 20px
	border-left: 3px solid #999
	font-style: italic
	font-size: 18px
	line-height: 22px
	color: #999

.bottom-bar
	position: fixed
	bottom: -60px
	right: 0
	width: 50%
	height: 60px
	background: #fff

.bottom-bar-pull
	bottom: 0px

.bottom-pagination
	line-height: 60px
	font-size: 40px
	font-family: 'Source Serif Pro', serif

.bottom-pagination span
	font-size: 30px

.bottom-pagination:before
	content: "<"
	display: inline-block
	color: #e6e6e6
	margin-right: 20px

.bottom-pagination:after
	content: ">"
	display: inline-block
	color: #e6e6e6
	margin-left: 20px

.social-icons
	list-style: none
	width: 100%
	text-align: center

.social-icons li
	display: inline-block
	margin: 10px 40px

.social-icons li a i
	font-size: 40px
	color: #e6e6e6


//HOVER STUFF
.magazine-right li a:hover
	border: 1px solid #fff
	transform: scale(0.96)
	box-shadow: inset 0px 0px 30px rgba(0,0,0,.5)

.magazine-right li a:hover img
	box-shadow: 0px 5px 10px rgba(0,0,0,.5)

.magazine-right li a:hover h2
	text-shadow: 0px 5px 10px rgba(0,0,0,.5)

.magazine-right li a:hover p
	text-shadow: 0px 5px 10px rgba(0,0,0,.5)

.social-icons:hover i
	color: #ccc

.social-icons i:hover
	color: #000

.landing-page-wrap:hover .cover1
	left: 10%

.landing-page-wrap:hover .date
	left: -80px

.landing-page-wrap:hover .issue
	left: -200px

.landing-page-wrap:hover .logo
	opacity: 1

.landing-page-wrap:hover .dot
	opacity: 0

.landing-page-wrap:hover .number
	color: #e6e6e6

.landing-page-wrap:hover .image1
	cursor: pointer
	box-shadow: 0px 50px 50px rgba(0,0,0,.3)

.landing-page-wrap:hover .cover2
	left: 62%
	box-shadow: 0px 20px 20px rgba(0,0,0,.2)

.landing-page-wrap .cover2:hover
	left: 65%

.landing-page-wrap:hover .cover3
	left: 73%
	box-shadow: 0px 20px 20px rgba(0,0,0,.15)

.landing-page-wrap .cover3:hover
	left: 76%

.landing-page-wrap:hover .cover4
	left: 83%
	box-shadow: 0px 20px 20px rgba(0,0,0,.1)

.landing-page-wrap .cover4:hover
	left: 86%

.landing-page-wrap:hover .city
	opacity: 1

.landing-page-wrap .image1:hover~.city
	color: #999

.landing-page-wrap .cover2:hover .city
	color: #999

.landing-page-wrap .cover3:hover .city
	color: #999

.landing-page-wrap .cover4:hover .city
	color: #999
            
          
!
            
              $(document).ready(function(){

	$(".image1").click(function() {
		$(".body-wrapper").addClass("body-wrapper-magazine");
		$(".landing-page-wrap").hide();
		$("header").hide();
		$(".magazine-wrap").show();
		window.setTimeout(function() {
		$(".magazine-wrap").addClass("magazine-wrap-show");
		}, 10);
	});

	//MAGAZINE READ TOGGLE
	$(".article a").click(function() {
		$(".magazine-wrap").addClass("magazine-wrap-reading");
		$(".magazine-right").hide(0);
		$(".mag-header span").fadeIn(300);
		$(".magazine-read").delay(300).fadeIn(400);
		$(".back").delay(300).fadeIn(400);
		$(".magazine-triangle").show();
		$(".magazine-triangle").addClass("magazine-triangle-active");
		$(".magazine-authors li").hide();
		$(".mag-overlay").addClass('mag-overlay-no-overflow');
	});

	$(".back").click(function() {
		$(".magazine-wrap").removeClass("magazine-wrap-reading");
		$(".magazine-triangle").removeClass("magazine-triangle-active");
		$(".mag-header span").fadeOut(300);
		$(".magazine-read").hide();
		$(".magazine-right").fadeIn(300);
		$(".back").hide();
		$(".magazine-triangle").hide();
		$(".magazine-authors li").show();
		$(".mag-overlay").removeClass('mag-overlay-no-overflow');
	});

	// BOTTOM BAR ON SCROLL LOGIC
	$(".magazine-read").scroll(function() {
	    var posTop = $('.magazine-read').scrollTop();
	    if (posTop > 300) {
	    	$(".bottom-bar").addClass('bottom-bar-pull');
	    } else {
	    	$(".bottom-bar").removeClass('bottom-bar-pull');
	    }

	    if (posTop > 60) {
	    	$(".read-head").addClass("read-head-fix");
	    } else {
	    	$(".read-head").removeClass("read-head-fix");
	    }

	});
});	
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console