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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                .main__wrapper
	main
		h1 The Daily Prophet
		aside
			div
				.issue1 Issue #1
				.date Tuesday, 01 June, 2021
				.cost 5 Kunts
		h2.title--large.main-title More than 500 million copies of the Harry Potter books sold
		.main-text.multi-column
				p Twenty years ago, readers around the world first discovered the magical story of Harry Potter, created by J.K. Rowling. We can now reveal that, since that moment, half a billion Harry Potter books have now been sold. On average, this means one in fifteen people in the world owns a Harry Potter book. The 500 million sales are across the seven books in the series and the three companion volumes, in print and eBook versions. 
				p First published by Bloomsbury in 1997, the books have now been translated into over 80 different languages across the world, with more to come. From Albanian to Azerbaijani to Hebrew to Hawaiian, the stories are becoming accessible to more people all the time.


		a(href="https://www.wizardingworld.com/news/500-million-harry-potter-books-have-now-been-sold-worldwide" target="_blank").terrarium
			figure
				img(src="https://ebookfriendly.com/wp-content/uploads/2015/12/New-covers-for-Harry-Potter-ebooks-animated.gif")
				figcaption Harry Potter Book set by J.K Rowling

		a(href="https://thedailyprophet.net/matters-of-magic/wizard-magician-breaks-statute-of-secrecy-on-christmas-eve/" target="_blank").item-with-image.plan.span--2.long--2
			img(src="https://i.gifer.com/MGXa.gif")
			h4 WIZARD MAGICIAN BREAKS STATUTE OF SECRECY ON CHRISTMAS EVE
			div.multi-column
				p Christmas Eve is a big day for the western world – for both Wizard, Witch and Muggle alike.
				p This Christmas Eve a performer of the magical arts, also known as a “magician” to muggles, by the name of Ryland Silverthorne has caught the attention of The Department of Magical Accidents and Catastrophes for revealing how….. (Click To read the whole article)
		
		a(href="https://codepen.io/oliviale/full/MZZYyO" target="_blank").hogwarts
			.hogwarts__title 50% Off Hogwarts Express tickets
			.hogwarts__image 
				span Limited time offer
				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/showcase-hogwarts.svg")
		
		a(href="https://thedailyprophet.net/recipes/how-to-make-harry-potters-chocolate-frogs/" target="_blank").item-with-image.pasta.with-border
				h4 How To Make Chocolate Frogs
				p Everybody loves chocolate frogs. It's impossible to not love them, so The Daily Prophet offers its reader with its recipe. So hold you frorgs tight as you read this
		
				
		a(href="https://en.wikipedia.org/wiki/Quidditch" target="_blank").item-with-image.magazine.with-border
				h4 Quidditch world cup nearing!
				p Quidditch fans around the world are exited as the world cup is nearing. So we, decided to fill those who don't know about Qudditch in with information.
		
		
		a(href="https://codepen.io/collection/XJyNPm" target="_blank").item-with-image.style
				h4 Heir Of Slytherin To Start At Hogwarts This Year
				p In a recent discovery a modern-day Heir of Slytherin has been identified.
				p The once magical Seidel family, who has been in hiding from the wizarding world for the last three generations have identified their daughter, Colleen, as a pure blooded witch from the lineage of Salazar Slytherin.
		
		a(href="https://thedailyprophet.net/tom-riddle/tom-riddle-and-the-prophecy-of-two/" target="_blank").item-with-image.toggles
				img(src="https://64.media.tumblr.com/0aa025f3805c27bd9b7dbe462676986c/56e66e3d18eb9dbc-f6/s540x810/230067ee544cfc908e766411c96862c0db18dac8.gifv")
				h4 Lord Voldemorts REAL childhood reveled!
				p Rita Sketer relves a part of her new book ever wicth and wizard are talking about!
				p A young boy lay awake in his bed with his deep hazel eyes piercing the dark, watching the clock that read 11:58 PM very intently. With his fingers interlocked and crossed over...
		
		
		a(href="#" target="_blank").menu
			figure
				img(src="https://64.media.tumblr.com/0583757602c382d85b5233a053729bca/tumblr_opmoxsH9A01uqa1iwo2_540.gifv")
				figcaption Madam Malkin's Robes for all occastions is now having a 50% sale!
		
		
		a(href="https://thedailyprophet.net/bad-news/magical-creatures-or-new-hexs-muggles-calling-it-covid19/" tagrget="_blank").social
			img.social__image(src="https://i.pinimg.com/originals/c6/28/87/c62887db7cea40ab5753171c86e456ef.gif")
			.social__subtitle World News
			.social__content In a series of unprecedented events, one right after another, the Department of Mysteries and The Department of Magical Creatures have undergone a joint collaboration to understand what the muggle world has identified as COVID19.
		
		.item-with-image.cssgrid-collection
			a(href="https://thedailyprophet.net/everything-muggles/muggle-attempts-to-rob-gringotts/" target="_blank").cssgrid-collection__image
				img(src="https://i.pinimg.com/originals/76/5e/2f/765e2fcc791f21f86dbd9617c25ab563.gif")
			.cssgrid-collection__content
				h4 
					a(href="https://thedailyprophet.net/everything-muggles/muggle-attempts-to-rob-gringotts/" target="_blank") Muggle Attemts To Rob Gringotts  
				div.multi-column-3
					p It’s not uncommon in the muggle world to hear about bank robberies – but it is unusual that you would hear about Muggles trying to rob Wizarding Banks.
					p For the first time in history, a muggle-man was reported to have marched into Gringotts Bank in Diagon Alley at approximately 11am waving around a black wand that was described to project pieces of elemental lead, also known to Muggles as a gun.
					p While no one was hurt during the transgression, the question looms – how exactly did a Muggle get into Diagon Alley and furthermore, what would a Muggle need with Wizarding Currency?
					p When we caught up with one of the Goblins who was at the bank during the time of the incident, he let us know “The man who came into Gringotts did not speak, not even once. He walked in, went straight to the first clerk that was available and passed them a howler. The howler began screaming in a dark ominous voice that if Gringotts did not hand over all Golden Galleons in the bank’s possession, we would all be subject to death. You just cant trust those muggle folk, none of them.”
			
			
		
		
		.sidebar
			h3.title--big Hot News!
			
			a(href="#" target="_blank").codepen-item.pie
				img.pie__image(src="https://i.pinimg.com/originals/55/0a/c9/550ac9839fc15a1b99b4ef3bed3bb5e4.gif")
				.pie__subtitle Hogwarts House Cup Winner:
				.pie__content
					h4 Gryffindor!
					p As usual Griffindor scraped a win at the inter-house championship at Hogwarts, leving Slytherin in second place once more.
			
			a(href="https://thedailyprophet.net/magical-news/godric-gryffindors-wand-resurfaces-at-hogwarts/" target="_blank").sidebar-item.captcha
				h5 Godric Gryffindors Wand Resurfaces At Hogwarts
				p Earlier today Kaitlyn Byers, a 4th year from Ravenclaw, discovered what is now thought to be Godric Gryffindors Wand. While the magical item is currently being housed by The Ministry of Magic and undergoing tests to confirm its origin, how the wand made it into the hands of a student is quite astonishing.

			a(href="https://thedailyprophet.net/magical-news/muggle-at-the-ministry-delightful-chaos/" target="_blank").sidebar-item.slack-ui.with-border
				h5 Muggle at the Ministry…Delightful Chaos?
				p Delightful chaos: that’s how Minister Hermione Granger describes the responsibilities of the Ministry’s department of Magical Accidents and Catastrophes.

			
				
			a(href="https://codepen.io/oliviale/full/dwBqwV" target="_blank").workout
				.workout__image
					img(src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/3b23e537-1bf4-4de8-b248-2b0691e3b916/d5yg6mv-fab2c857-6533-4d4e-abb0-5e5cebee01b5.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzNiMjNlNTM3LTFiZjQtNGRlOC1iMjQ4LTJiMDY5MWUzYjkxNlwvZDV5ZzZtdi1mYWIyYzg1Ny02NTMzLTRkNGUtYWJiMC01ZTVjZWJlZTAxYjUuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.v9f_E_AH56hL_DIqsdiJso4MgwvfG_tLjyhR_v0_Jrw" alt="Workout")
				.workout__blurb Hogwarts to sort students online! 
				.workout__title A Prototype has been released!
			

              
            
!

CSS

              
                :root {
	--font: "EB Garamond", serif;
	--font-title: "Playfair Display", serif;
	--font-sans-serif: "Manrope", sans-serif;
	--black: #1c1f33;
	--black--acc: #222;
	--gray: #eee;
	--gray-1: #ededed;
}

* {
	box-sizing: border-box;
}

@mixin double-border {
	border: 2px solid transparent;
	outline: 3px solid var(--black);
	box-shadow: inset 0 0 0 1px var(--black);
}

body {
	font-size: 1.1rem;
	background: var(--preview-bg);
	font-family: var(--font);
	color: var(--black);
	background: url(https://img.freepik.com/free-photo/cardboard-sheet-paper-abstract-texture-background_7182-2105.jpg?size=626&ext=jpg)
		repeat;
	padding: 4rem 2rem;
	line-height: 1.3;
	text-align: justify;
	column-break-inside: avoid;
}

a {
	text-decoration: none;
	display: block;
	color: var(--black);
	&:hover,
	&:focus,
	&:active,
	&:visited {
		color: var(--black--acc);
	}
}

.main__wrapper {
	max-width: 1135px;
	margin: auto;
}

h1 {
	font: 50px/1 "Playfair Display SC";
	text-align: center;
	@media (min-width: 700px) {
		font: 70px/1 "Playfair Display SC";
	}
}

h3 {
	font: italic 20px var(--font-title);
	margin-bottom: 1rem;
}

h4 {
	font: 20px/1.2 var(--font-title);
}

h5 {
	font: 700 20px/1 var(--font);
	transition: 0.3s ease;
}

p {
	line-height: 1.3;
	a {
		display: inline;
	}
}

em {
	font-style: italic;
}

.title--large {
	font-family: var(--font-title);
	font-size: 32px;
	font-style: italic;
	text-align: left;
	margin-bottom: 0.8rem;
	@media (min-width: 700px) {
		font-size: 42px;
		margin: 0;
	}
}

main {
	@media (min-width: 700px) {
		display: grid;
		grid-template-columns: repeat(4, 1fr) 23%;
		grid-template-rows: repeat(5, auto);
		grid-gap: 1.2rem;
	}

	h1,
	aside {
		grid-column: 1 / -1;
	}
	.main-title {
		@media (min-width: 700px) {
			grid-column: 1 / -1;
		}
		@media (min-width: 1024px) {
			grid-column: 1 / -2;
		}
	}
	.terrarium {
		@media (min-width: 700px) {
			grid-column: 1 / -1;
		}
		@media (min-width: 1024px) {
			grid-column: 3 / span 2;
		}
	}
	.main-text {
		@media (min-width: 700px) {
			grid-column: span 5;
		}
		@media (min-width: 1024px) {
			grid-column: span 2;
		}
	}
	.sidebar {
		@media (min-width: 700px) {
			grid-column: 1 / -1;
		}
		@media (min-width: 1024px) {
			grid-row: 3 / 9;
			grid-column: 5 / 6;
		}
	}
	.social {
		grid-column: 1 / -2;
		grid-row: 8 / 9;
	}
	.article-bar-1 {
		grid-row: span 4;
	}
	.hogwarts {
		@media (min-width: 700px) {
			grid-row: span 3;
		}
		@media (min-width: 1024px) {
			grid-column: 3;
			grid-row: span 2;
		}
	}
	.menu {
		@media (min-width: 700px) {
			grid-column: 1 / -1;
			grid-row: 13;
		}
		@media (min-width: 1024px) {
			grid-row: 7 / 8;
			grid-column: 2 / 4;
		}
	}
	.toggles {
		@media (min-width: 700px) and (max-width: 1024px) {
			grid-column: 3 / 6;
			grid-row: 10 / 13;
		}
	}
	.plan {
		@media (min-width: 700px) and (max-width: 1024px) {
			grid-column: span 4;
		}
	}
	.style,
	.magazine,
	.pasta {
		@media (min-width: 700px) and (max-width: 1024px) {
			grid-column: 1 / 3;
		}
	}
	.cssgrid-collection {
		grid-column: 1 / -1;
		grid-row: 9;
	}
}

.span--2 {
	grid-column: span 2;
}

.long--2 {
	grid-row: span 2;
}

.long--4 {
	grid-row: span 4;
}

.with-border {
	border-top: 1px solid;
	padding-top: 0.6rem;
}

img {
	width: 100%;
	filter: grayscale(95%);
	margin-bottom: 0.5rem;
	border: 1px solid var(--black);
	transition: 0.3s ease;
}

figcaption {
	font-style: italic;
	font-size: 90%;
}

aside {
	text-align: center;
	padding: 3px 0;
	border: solid var(--black);
	border-width: 2px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 1.5rem 0;
	@media (min-width: 700px) {
		margin: 0;
	}
	> div {
		display: flex;
		align-items: center;
		border: solid var(--black);
		border-width: 1px 0;
		> div {
			flex: 1;
			padding: 8px;
		}
	}
}

@media (min-width: 700px) {
	.multi-column {
		column-count: 2;
		column-gap: 1.3rem;
		margin-top: 0.75rem;
		&-3 {
			column-count: 3;
		}
	}
}
.sidebar {
	margin-top: 3rem;
	@media (min-width: 700px) and (max-width: 1024px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0;
		h3 {
			width: 100%;
			text-align: center;
		}
		> a {
			flex: 0 1 48%;
			margin: 1.5rem 0;
			padding: 0;
		}
		.slack-ui {
			border-top: 0;
		}
		.pie {
			order: 3;
		}
	}
	@media (min-width: 1024px) {
		display: block;
		border-left: 1px solid;
		padding-left: 1.2rem;
		margin: 0;
	}
}

.main-text.multi-column {
	margin: 0;
	p {
		margin-bottom: 0.8rem;
	}
}

.hogwarts {
	text-align: center;
	height: 100%;
	@include double-border;
	width: calc(100% - 4px);
	margin: 1.5rem auto;
	overflow: hidden;
	@media (min-width: 700px) {
		margin: 0;
	}
	&__title {
		font: 800 24px/1 var(--font-sans-serif);
		text-transform: uppercase;
		background: var(--black);
		color: var(--gray);
		padding: 0.8rem 0.8rem 0.9rem;
		transition: 0.2s ease;
		@media (min-width: 700px) and (max-width: 1024px) {
			font: 800 21px/1.2 var(--font-sans-serif);
			padding: 1.5rem 0.5rem;
		}
	}
	&__image {
		height: 100%;
		position: relative;

		img {
			transform: rotate(60deg);
			height: 150%;
			position: absolute;
			border: 0;
			width: 250%;
			left: -70%;
			bottom: -35%;
			@media (min-width: 700px) and (max-width: 1024px) {
				bottom: -20%;
			}
		}
		span {
			font-style: italic;
			max-width: 110px;
			position: absolute;
			top: 7%;
			left: 18%;
			font-size: 22px;
			line-height: 0.9;
			transform: rotate(-5deg);
		}
	}
}

.terrarium {
	margin: 1.5rem 0;
	@media (min-width: 700px) {
		margin: 0 0 1.5rem;
	}
	figure {
		height: 100%;
	}
	img {
		height: 96%;
		object-fit: cover;
		object-position: right;
	}
}

.pie {
	line-height: 0;
	color: var(--gray);
	text-align: left;
	&__image {
		margin: 0;
		border: 0;
		max-height: 15rem;
		object-fit: cover;
	}
	&__subtitle {
		background: #999;
		text-transform: uppercase;
		line-height: 1;
		padding: 0.4rem 1rem;
		font: 14px var(--font-sans-serif);
		color: var(--gray);
	}
	&__content {
		background: #666;
		padding: 1rem 1rem 1.2rem;
		color: var(--gray);
		p {
			margin-top: 0.5rem;
		}
	}
}

.sidebar-item {
	margin: 2rem 0;
	padding: 2rem 0 0;
	h5 {
		text-align: center;
		width: 100%;
padding: .5rem;
		margin: auto;
	}
	p {
		margin-top: 1rem;
	}
	&:hover {
		h5 {
			transition: 0.3s ease;
			background: var(--black);
			color: #fff;
		}
	}
}

.item-with-image {
	margin-top: 1.5rem;
	h4 {
		font-size: 24px;
		text-align: left;
		margin-bottom: 0.5rem;
		transition: 0.2s ease;
	}
	@media (min-width: 700px) {
		margin: 0;
	}
	&:not(.cssgrid-collection):hover {
		h4 {
			color: white !important;
			background: var(--black);
		}
	}
	p {
	}
	img {
	}
}

.magazine {
	border: 1px solid;
	border-width: 1px 0;
	padding-bottom: 1rem;
}

.menu {
	margin: 1.5rem 0;
	@media (min-width: 1024px) {
		margin: 0;
	}
	figure {
		height: 100%;
	}
	img {
		height: 90%;
		object-fit: cover;
		object-position: left;
	}
}

.cssgrid-collection {
	display: flex;
	align-content: stretch;
	border-top: 1px solid;
	padding-top: 1rem;
	h4 {
		margin: 0 0 0.8rem;
	}
	&__image {
		flex: 0 0 32%;
		margin-right: 1.5rem;
	}
	img {
		height: 100%;
		object-fit: cover;
		object-position: left;
	}
	p a {
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
}

.captcha {
	@media (min-width: 1024px) {
		margin-top: 0;
	}
}

.workout {
	@include double-border;
	width: calc(100% - 4px);
	margin: 3rem auto 0.2rem;
	&__image {
		padding: 2px;
		img {
			height: 16rem;
			object-fit: cover;
			object-position: left;
			border: none;
			@media (min-width: 1024px) {
				height: 25rem;
			}
		}
	}
	&__blurb {
		font: 22px/1.1 var(--font-sans-serif);
		text-align: center;
		padding: 0.5rem;
		color: var(--black);
		margin: -1rem 0.5rem 0.3rem;
	}
	&__title {
		font: 18px/1.1 var(--font-sans-serif);
		text-transform: uppercase;
		text-align: center;
		padding: 1rem;
		background: var(--black);
		color: var(--gray);
		transition: 0.2s ease;
	}
}

.social {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: max-content auto;
	color: var(--gray);
	text-align: left;
	&__image {
		margin: 0;
		border: 0;
		grid-row: span 2;
		height: 100%;
		object-fit: cover;
	}
	&__subtitle {
		background: #999;
		text-transform: uppercase;
		line-height: 1;
		padding: 0.4rem 1rem;
		color: var(--gray);
		font: 14px var(--font-sans-serif);
	}
	&__content {
		background: #666;
		padding: 1rem;
		color: var(--gray);
		grid-column: 2;
	}
}

.plan {
	padding-bottom: 1rem;
	@media (min-width: 700px) and (max-width: 1024px) {
		grid-column: span 3;
		margin: 0 0 1.5rem;
	}
	@media (min-width: 1024px) {
		border-bottom: 1px solid;
	}
}

.pie,
.social,
.menu,
.terrarium,
.plan,
.toggles,
.workout,
.cssgrid-collection__image {
	&:hover img {
		filter: grayscale(0);
	}
}

.workout {
	&:hover .workout__title {
		background: transparent;
		color: var(--black);
	}
}

.hogwarts {
	&:hover .hogwarts__title {
		background: transparent;
		color: var(--black);
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console