123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              h1 My Internet Periodic Table
h5 How I waste my time on the Internet
			
div.periodic-table
	.empty-spacer-1
	.empty-spacer-2
	.periodic-element.social-media(data-description="I'm only on here to reject invitations πŸ˜‚")
		.periodic-element-inner
			.title Li
			.description LinkedIn
	.periodic-element.social-media(data-description="Only so I don't miss out on my friends' milestones 🀷")
		.periodic-element-inner
			.title Fb
			.description Facebook
	.periodic-element.just-trying(data-description="Looking at amazing Dribbble πŸ€ shots and internally die from the amount of talent/skill out there")
		.periodic-element-inner
			.title Db
			.description Dribbble
	.periodic-element.intense-work(data-description="Coming up with sassy commit messages πŸ”₯")
		.periodic-element-inner
			.title Ct
			.description Commits
	
	.periodic-element.intense-work(data-description="Making custom emojis for Slack πŸ’ͺ🏻")
		.periodic-element-inner
			.title Sl
			.description Slack
	.periodic-element.fun-stuff(data-description="'Wikipedia Wormhole' is a thing. And it is dangerous πŸ›")
		.periodic-element-inner
			.title Wk
			.description Wikipedia
	.periodic-element.fun-stuff(data-description="Choosing the right playlist. (If my Spotify is working... it's always not working)")
		.periodic-element-inner
			.title Sp
			.description Spotify
	a.periodic-element.social-media(data-description="If you say something witty, it's going on my Twitter 🐦" href="https://twitter.com/meowlivia_" target="_blank")
		.periodic-element-inner
			.title Tw
			.description Twitter
	.periodic-element.social-media(data-description="Professional Dota 2 Watcher right here ✌️")
		
		.periodic-element-inner
			.title Tc
			.description Twitch
	.periodic-element.intense-work(data-description="Creating GitHub issues, a.k.a. tossing problems which I can solve to the frontend team")
		.periodic-element-inner
			.title Gt
			.description GitHub
	.periodic-element.intense-work(data-description="Trying to get yarn working after an update. The main reason I toss issues to the frontend team.")
		.periodic-element-inner
			.title Yn
			.description Yarn
	.periodic-element.just-trying(data-description="A skill I'm trying to learn 🎨... and failing to learn πŸ˜›")
		.periodic-element-inner
			.title Il
			.description Illustration
	a.periodic-element.just-trying(data-description="Resident Designer. Keeping the diminishing flame of web design in me alive πŸ•―οΈ" href="https://tellystats.com" target="_blank")
		.periodic-element-inner
			.title Te
			.description TellyStats
	
	.periodic-element.just-trying(data-description="I just need to stop adding items and actually start doing things. Am I the only one who is still using Wunderlist? πŸ˜‚")
		.periodic-element-inner
			.title Wu
			.description Wunderlist
	.periodic-element.fun-stuff(data-description="I have zero cooking skills, so I watch cooking videos and never try cooking for real 🍳")
		.periodic-element-inner
			.title Cv
			.description Cooking
	.periodic-element.fun-stuff(data-description="Or any animal gifs, basically. πŸˆπŸ•πŸ¦ŠπŸ¦”πŸ¦‰πŸπŸ¬πŸ¦„")
		.periodic-element-inner
			.title Dg
			.description Dog Gifs
	a.periodic-element.fun-stuff(data-description="Getting distracted by Toggl comics πŸ™ƒ" href="https://blog.toggl.com" target="_blank")
		.periodic-element-inner
			.title Tg
			.description Toggl Blog
	.periodic-element.just-trying(data-description="I google every damn thing. Including movie spoilers. While watching the movie. Yes.")
		.periodic-element-inner
			.title Gg
			.description Google
	a.periodic-element.just-trying(data-description="I like spreadsheets so I create them for the smallest reasons 🧐" href="https://docs.google.com/spreadsheets/d/1Dim2nKRjgpkjA4miqTzcLPT68L0B5LU2aWZWF5hHYAc/edit#gid=0" target="_blank")
		.periodic-element-inner
			.title Ex
			.description Excel
	.periodic-element.intense-work(data-description="I still StackOverflow the simplest shit 'just to be sure'. Where will we be without it ❀️")
		.periodic-element-inner
			.title So
			.description StackOv.
	.periodic-element.intense-work(data-description="It's very much not my job, but sometimes I stick my hand into the Coding Projects jar πŸͺ anyway")
		.periodic-element-inner
			.title Cd
			.description Coding
	
	.periodic-element.just-trying(data-description="I spend so much time on Codepen, I decided to go Pro because I felt bad πŸ’Έ")
		.periodic-element-inner
			.title Cp
			.description Codepen
	.periodic-element.just-trying(data-description="We all have that one thing that keeps us alive πŸ›«πŸ—ΊοΈ")
		.periodic-element-inner
			.title Tr
			.description Travel
	a.periodic-element.social-media(data-description="Fuck this app. It's a terrible love-hate relationship." href="https://www.instagram.com/meowliviaaa/" target="_blank")
		.periodic-element-inner
			.title In
			.description Instagram
	a.periodic-element.fun-stuff(data-description="Obsessing over musicals and stalking broadway stars is πŸ‘πŸ» not πŸ‘πŸ» a πŸ‘πŸ» crime!" href="https://codepen.io/collection/XPWkdW/" target="_blank")
		.periodic-element-inner
			.title Mu
			.description Musicals
	.periodic-element.fun-stuff(data-description="I learn memes, I make memes, I breathe memes.")
		.periodic-element-inner
			.title Me
			.description Memes
	.periodic-element.intense-work(data-description="Battling double columns in Notion")
		.periodic-element-inner
			.title No
			.description Notion
	.periodic-element.social-media(data-description="Oh my god. Someone please save me from this Reddit hell hole 😭")
		.periodic-element-inner
			.title Re
			.description Reddit
	
	.periodic-element.intense-work(data-description="Research & Documentation nobody asks for πŸ€“πŸ“")
		.periodic-element-inner
			.title Rd
			.description Research
	.periodic-element.intense-work(data-description="Stats. Data. Stats. Data. πŸ“Š Just lots of reporting.")
		.periodic-element-inner
			.title St
			.description Stats
	.periodic-element.intense-work(data-description="Ads. Ads. Ads. If you've seen a Toggl ad, it was me. (Sorry)")
		.periodic-element-inner
			.title Ad
			.description Ads
	
			
.legend-table
	.legend-table__wrapper
		span.legend-table__marker.social-media
		span.legend-table__text Social Media
		span.legend-table__marker.intense-work
		span.legend-table__text Serious Work
		span.legend-table__marker.just-trying
		span.legend-table__text Personal Development
		span.legend-table__marker.fun-stuff
		span.legend-table__text Fun Stuff
		br
		div.legend-table__direction
			span &#8594; &ensp; Across the table: Importance
		div.legend-table__direction
			span &#8595; &ensp; Down the table: Time Spent

aside.context
	.explanation
		| I try to be productive a lot, and I fail a lot :)
		br
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
            
          
!
            
              body {
	background: #202e38;
	font-family: "Poppins", sans-serif;
}

h1 {
	margin: 2em auto 0;
	font: 700 3em "Poppins", sans-serif;
	color: #f1f5f6;
	text-align: center;
}

h5 {
	margin: 0 auto 2em;
	font: 400 1.3em "Poppins", sans-serif;
	color: #f1f5f6;
	text-align: center;
}

a {
	text-decoration: none;
}

aside.context {
	text-align: center;
	color: #fff;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #fff;
		padding: 3px 0;
		border-bottom: 1px dashed;
	}
	.explanation {
		max-width: 700px;
		margin: 4em auto 0;
	}
}

footer {
	text-align: center;
	margin: 2em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #fff;
		color: #fff;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

@mixin background-gradient($color1, $color2) {
	background: linear-gradient(to bottom right, $color1 0%, $color2 100%);
}

@mixin text-gradient($color1, $color2) {
	background: -webkit-linear-gradient($color1, $color2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.periodic-table {
	display: grid;
	grid-template-columns: repeat(9, 100px);
	grid-template-rows: repeat(4, 100px);
	grid-gap: 10px;
	margin: auto;
	max-width: 1200px;
	justify-content: center;
}

.periodic-element {
	padding: 4px;
	position: relative;
	z-index: 1;
	cursor: default;
	transition: all 0.3s ease;
	.periodic-element-inner {
		background: #202e38;
		padding: 10px 15px;
		width: calc(100% - 30px);
		height: calc(100% - 20px);
		transition: inherit;
	}
	.title {
		font: 700 34px/1.3 "Poppins", sans-serif;
		margin: 0.3em 0 0;
		transition: 0.8s ease 600ms;
	}
	.description {
		font: 500 12px "Poppins", sans-serif;
		margin-top: -0.2em;
	}
	&:after {
		z-index: 10;
		content: attr(data-description);
		background: #f9f8f7;
		color: #333;
		width: 180px;
		position: absolute;
		top: 80%;
		opacity: 0;
		transition: opacity 0.3s ease 0.3s,
			top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
		height: auto;
		font-size: 12px;
		line-height: 1.4;
		padding: 10px;
		margin: 0 0 0 -50px;
		border-radius: 6px;
		text-align: center;
	}
	&:hover {
		transform: scale(1.12);
		z-index: 10;
		.periodic-element-inner {
			background: transparent;
		}
		.title,
		.description {
			-webkit-text-fill-color: #222;
		}
		&:after {
			top: 105%;
			opacity: 1;
		}
	}
}

a.periodic-element {
	cursor: pointer;
}

.social-media {
	@include background-gradient(#f3f9a6,#cbc634);
	.title,
	.description {
		@include text-gradient(#f3f9a6,#cbc634);
	}
}

.fun-stuff {
	@include background-gradient(#ff616d,#ffc171);
	.title,
	.description {
		@include text-gradient(#ff616d,#ffc171);
	}
}

.just-trying {
	@include background-gradient(#37cfdc,#5a88e5);
	.title,
	.description {
		@include text-gradient(#37cfdc,#5a88e5);
	}
}

.intense-work {
	@include background-gradient(#58ac30,#a7df62);
	.title,
	.description {
		@include text-gradient(#58ac30,#a7df62);
	}
}

.legend-table {
	padding: 15px;
	text-align: center;
	font-size: 15px;
	margin: 2em auto 0;
	&__marker {
		width: 25px;
		height: 25px;
		margin: 5px 5px 10px;
		display: inline-block;
		vertical-align: middle;
		box-shadow: 0.5px 1px rgba(0, 0, 0, 0.15);
	}
	&__text {
		display: inline-block;
		vertical-align: middle;
		margin: 0 25px 5px 5px;
		@include text-gradient(#ccc,#eee);
	}
	&__direction {
		display: inline-block;
		margin: 10px 15px 10px 10px;
		@include text-gradient(#ccc,#eee);
	}
}

.empty-spacer {
		&-1 {
		grid-column: 3 / span 4;
		grid-row: 1;
	}
	&-2 {
		grid-column: 1;
		grid-row: 4;
	}
}

            
          
!
            
              //not responsive because how do you make a responsive periodic table 😳
            
          
!
999px
πŸ•‘ One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console