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.

            
              .main-content
	.notebook
		.notebook__inner
			.title 
				h1 Week 18
				h3 April 29 - May 6
			.days
				.days__item
					.days__day Monday
					.days__list
						p Prepare gift
						p Travel Day!
						p Check ads
						p Ad copy change
				.days__item
					.days__day Tuesday
					.days__list
						p SEO LP
						p New ad creatives
						.highlighted 
							.text 
								span 7pm: Waitress
				.days__item
					.days__day Wednesday
					.days__list
						p SEO LP
						p Weekly Meet
						.highlighted 
							.text 
								span 2pm: Anastasia
				.days__item
					.days__day Thursday
					.days__list
						p SEO LP
						.highlighted 
							.text 
								span 2pm: Come From Away
							.text 
								span 7pm: The Band's Visit
						
				.days__item
					.days__day Friday
					.days__list
						p Notion docs
						p Ad report
						.highlighted 
							.text 
								span 2pm: Dear Evan Hansen
							.text 
								span 7pm: Frozen
				.days__item
					.days__day Weekend
					.days__list
						p Meet w/ Rina
						.highlighted 
							.text 
								span 2pm: Chicago
							.text 
								span 7pm: Mean Girls
			.notes
				span notes
				.notes__list 
					| - Follow-up customer meet email
					br
					| - Flight BOS-JFK: 2pm on 29 Apr
				
			.expenses
				h4 Weekly Expenses
				.expenses__box
					span.expenses__title 🏠
					span.expenses__amount $ 400
				.expenses__box
					span.expenses__title 📝
					span.expenses__amount $ 120
				.expenses__box
					span.expenses__title 🍟
					span.expenses__amount $ 175
				.expenses__box
					span.expenses__title 🚆
					span.expenses__amount $ 42
				.expenses__box
					span.expenses__title 📽️
					span.expenses__amount $ 520
				.expenses__box
					span.expenses__title 💸
					span.expenses__amount $ 200
				.savings
					span.expenses__title Savings:
					span.expenses__amount $ 145
				
			.picture
				.picture__border
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/TSNY.jpg")
					figcaption 
						| Times Square,
						br
						| NYC &hearts; 
			.goals
				span weekly
				span goals
				.goals__inner
					.goals__list 
						.goals__item
							.goals__item__checkbox 
								span &#10004;
							.goals__item__desc One Codepen	
						.goals__item
							.goals__item__checkbox
							.goals__item__desc One Blog Post
						.goals__item
							.goals__item__checkbox
							.goals__item__desc One Illustration
						
			.music
				.music__title Artist of the Week
				.music__artist George Ezra
				svg(viewBox="0 0 444.18 444.18")
					path(d="M400.348,294.485c-8.014-20.093-24.798-33.091-46.049-35.662c-34.474-4.172-72.55,19.051-104.452,63.713   C178.301,422.701,110.164,429.493,90.976,429.168c-16.64-0.268-27.452-5.433-30.785-10.433   c-8.769-13.154,9.513-36.94,20.978-48.972c8.255,6.058,18.181,9.334,28.613,9.334c12.955,0,25.134-5.045,34.294-14.206   l106.461-106.46c2.786,0.3,5.602,0.467,8.444,0.467c20.7,0,40.162-8.062,54.801-22.7c14.638-14.638,22.699-34.1,22.699-54.801   c0-20.701-8.062-40.163-22.699-54.801c-30.219-30.217-79.385-30.215-109.602,0c-14.638,14.638-22.699,34.1-22.699,54.801   c0,2.842,0.167,5.658,0.467,8.444L75.488,296.304c-9.161,9.16-14.206,21.339-14.206,34.294c0,10.412,3.265,20.319,9.3,28.564   c-4.132,4.317-10.097,11.035-15.416,18.867c-16.741,24.653-13.295,40.269-7.456,49.027c6.927,10.392,23.011,16.788,43.023,17.11   c0.541,0.009,1.089,0.013,1.651,0.013c17.095,0,43.821-4.224,76.704-23.5c33.207-19.465,64.485-49.552,92.964-89.424   c28.193-39.471,62.012-60.985,90.444-57.541c15.637,1.891,27.999,11.487,33.918,26.327c10.44,26.179-0.117,62.094-28.242,96.072   c-8.815,10.649-16.981,21.185-24.273,31.314c-2.42,3.362-1.656,8.049,1.705,10.469s8.049,1.657,10.469-1.705   c7.096-9.856,15.054-20.123,23.654-30.513C401.406,367.408,412.853,325.841,400.348,294.485z M86.095,354.286   c-6.327-6.327-9.812-14.74-9.812-23.688c0-6.392,1.787-12.505,5.108-17.785l46.177,46.177c-5.28,3.322-11.394,5.108-17.785,5.108   C100.835,364.098,92.422,360.613,86.095,354.286z M214.788,225.593c-11.805-11.805-18.306-27.5-18.306-44.194   c0-3.396,0.283-6.747,0.811-10.036l71.725,71.725c-3.289,0.528-6.64,0.811-10.036,0.811   C242.288,243.899,226.593,237.397,214.788,225.593z M214.788,137.204c12.185-12.184,28.189-18.276,44.194-18.276   s32.01,6.092,44.193,18.276c11.806,11.805,18.307,27.5,18.307,44.194s-6.501,32.39-18.307,44.194   c-5.276,5.276-11.333,9.484-17.905,12.534l-83.017-83.017C205.304,148.537,209.512,142.48,214.788,137.204z M204.182,236.199   c8.337,8.337,18.243,14.533,29.047,18.329l-94.455,94.455l-47.376-47.376l94.455-94.456   C189.649,217.956,195.844,227.862,204.182,236.199z")
					path(d="M71.404,156.771c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065s3.815-16.75,0.729-24.864   L74.201,40.279l60.756-23.103l17.82,46.862c-5.879-1.236-12.163-0.87-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93   c4.929,12.961,17.306,20.95,30.414,20.95c3.832,0,7.727-0.683,11.515-2.124c8.114-3.085,14.542-9.146,18.097-17.065   s3.815-16.75,0.729-24.864l-30.211-79.45c-0.707-1.859-2.124-3.362-3.938-4.176s-3.879-0.875-5.738-0.168L61.859,28.924   c-3.872,1.472-5.817,5.804-4.345,9.676L78,92.472c-5.879-1.236-12.163-0.869-18.183,1.419c-16.75,6.37-25.195,25.179-18.826,41.93   C45.919,148.782,58.296,156.771,71.404,156.771z M162.109,103.004c-1.915,4.264-5.375,7.528-9.745,9.189   c-9.021,3.428-19.147-1.118-22.578-10.137c-3.429-9.02,1.118-19.148,10.137-22.578c2.041-0.776,4.137-1.144,6.201-1.144   c7.058,0,13.723,4.302,16.377,11.281C164.163,93.985,164.024,98.739,162.109,103.004z M65.148,107.912   c2.041-0.776,4.137-1.144,6.201-1.144c7.058,0,13.723,4.302,16.377,11.281c1.661,4.37,1.522,9.124-0.393,13.389   c-1.915,4.264-5.375,7.528-9.745,9.189c-9.021,3.429-19.147-1.118-22.578-10.137C51.582,121.47,56.129,111.342,65.148,107.912z")
			.tracker
				each val in ['M','T','W','T','F','S','S']
					.tracker__day= val
				.tracker__title 🏃‍♀️ Gym
				- for (var i=0; i<7; i++)
					.tracker__bubble
				.tracker__title 📖 Read
				- for (var i=0; i<7; i++)
					.tracker__bubble
				.tracker__title 🍺 No Alcohol
				- for (var i=0; i<7; i++)
					.tracker__bubble
				
			

aside.context
	.explanation
		| Continuation of this 
		a(href="https://codepen.io/oliviale/full/bLYQQE" target="_blank") Moleskine pen
		| .
		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
            
          
!
            
              $color-black: #111;
$color-red: #cc4b48;
$color-red2: #e4572e;
$color-vermilion: #f4442e;
$color-vermilion2: #d05b58;
$color-pink: #efb8ba;
$color-pink2: #e79598;
$color-pink3: #db6165;

@mixin text-shadow() {
	text-shadow: 2px 1px 0 #fbfae8, 5px 4px 0 coral;
}

* {
	box-sizing: border-box;
}

body {
	background: #222;
	font-family: "Gochi Hand", sans-serif;
	color: #333;
}

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

footer {
	text-align: center;
	margin: 4em 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;
		}
	}
}

.main-content {
	margin: 5em auto;
}

.notebook {
	max-width: 800px;
	min-width: 550px;
	min-height: 570px;
	margin: auto;
	border-radius: 16px;
	background: $color-red;
	padding: 2px 4px 2.5px;
	&__inner {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 16px;
		background: linear-gradient(90deg, #fbfae8 15px, transparent 1%) center,
			linear-gradient(#fbfae8 15px, transparent 1%) center, #ccc;
		background-size: 16px 16px;
		display: grid;
		padding: 30px 20px 25px;
		grid-template-areas:
			"title expenses picture"
			"days expenses picture"
			"days expenses picture"
			"days goals quote"
			"notes tracker tracker";
		grid-template-columns: 50% 30% 20%;
		grid-template-rows: 18% auto auto 30% 25%;
		&:after {
			content: "";
			width: 100px;
			height: 100%;
			top: 0;
			margin: auto;
			left: 0;
			right: 0;
			position: absolute;
			background: linear-gradient(
				to right,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}

.title {
	grid-area: title;
	text-align: center;
	h1 {
		font: 50px/1 "Lobster", cursive;
		@include text-shadow();
		margin: 0;
	}
	h3 {
		font: 13px/1.2 "Rock Salt", cursive;
		margin: 8px;
	}
}

.days {
	grid-area: days;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 15px;
	margin-right: 22px;
	&__item {
		border: 2px solid $color-black;
		position: relative;
		&:nth-child(1) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion2,0.4);
		}
		&:nth-child(2) {
			box-shadow: 3px 3px 0 0 rgba($color-vermilion,0.5);
		}
		&:nth-child(3) {
			box-shadow: 3px 3px 0 0 rgba($color-pink,0.6);
		}
		&:nth-child(4) {
			box-shadow: 3px 3px 0 0 rgba($color-red,0.7);
		}
		&:nth-child(5) {
			box-shadow: 3px 3px 0 0 rgba($color-pink2,0.7);
		}
		&:nth-child(6) {
			box-shadow: 3px 3px 0 0 rgba($color-red2,0.5);
		}
	}
	&__day {
		padding: 5px 5px 2px;
		font: 14px/1.5 "Special Elite", cursive;
		border-bottom: 2px solid $color-black;
	}
	&__list {
		padding: 8px;
		font-size: 14px;
		line-height: .9;
	}
	p {
		padding-left: 8px;
		position: relative;
		margin: 5px 0;
		&:after {
			content: '-';
			top: 0;
			position: absolute;
			left: 0;
		}
	}
	.highlighted {
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 8px;
		left: 0;
		text-align: center;
		.text {
			margin-top: 5px;
			position: relative;
			span {
				position: relative;
				z-index: 2;
			}
			&:after {
				content: '';
				background: rgba($color-pink,0.3);
				width: 95%;
				height: 100%;
				position: absolute;
				left: 2px;
				top: 0;
				z-index: 1;
				transform: rotate(-3deg);
			}
		}
	}
}

.notes {
	grid-area: notes;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	margin: 35px 20px 0 0;
	position: relative;
	span {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__list {
		margin-top: 24px;
		padding: 10px;
		line-height: 1.2;
	}
}

.expenses {
	grid-area: expenses;
	margin: 0 0 20px 20px;
	display: grid;
	grid-gap: 6px 10px;
	align-items: center;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(6, auto);
	h4 {
		text-align: center;
		margin: 0 0 10px;
		font: 16px/1 "Rock Salt", cursive;
		&:first-of-type {
			grid-column: 1 / span 4;
		}
	}
	&__box {
		border: 2px solid $color-black;
		grid-column: span 2;
		padding: 7px 7px 5px;
	}
	&__title {
		font: 4px;
	}
	&__amount {
		font: 19px 'Gochi Hand', cursive;
		display: inline-block;
		margin-left: 10px;
	}
	.savings {
		position: relative;
		grid-column: 1 / span 4;
		width: 99%;
		padding: 10px 10px 5px;
		background: rgba($color-pink, 0.4);
		box-shadow: 3px 3px 0 0 rgba($color-pink2, 0.7);
		font: 16px/1 "Rock Salt", cursive;
	}
}

.picture {
	grid-area: picture;
	margin-left: 20px;
	&__border {
		width: 100%;
		background: #f9f9f9;
		padding: 20px 10px 50px;
		height: 95%;
		transform: rotate(5deg);
		position: relative;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		&:after {
			content: "";
			width: 55%;
			height: 20px;
			top: -10px;
			z-index: 5;
			left: 25%;
			transform: rotate(-2deg);
			position: absolute;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			background: rgba(220, 220, 220, 0.4);
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		figcaption {
			margin: 10px 0;
			text-align: center;
			display: block;
			font: 14px/1 "Gochi Hand", cursive;
			color: $color-vermilion;
		}
	}
}

.goals {
	grid-area: goals;
	margin: 25px 0 0 20px;
	border: 2px solid $color-black;
	border-width: 0 2px 2px;
	position: relative;
	&__item {
		padding: 3px 12px;
		&__checkbox {
			border: 2px solid $color-black;
			width: 20px;
			height: 20px;
			display: inline-block;
			margin-right: 5px;
			position: relative;
			span {
				font-size: 26px;
				display: inline-block;
				position: absolute;
				top: -4px;
				color: $color-pink3;
			}
		}
		&__desc {
			display: inline-block;
			font: 18px "Gochi Hand", cursive;
			vertical-align: top;
		}
	}
	> span:nth-child(1) {
		position: absolute;
		text-transform: uppercase;
		font: 700 9px "Rock Salt", cursive;
		top: -30px;
		transform: rotate(-15deg);
	}
	> span:nth-child(2) {
		display: block;
		margin: -25px 22px;
		font: 32px "Lobster", cursive;
		@include text-shadow;
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 2px;
			top: 0;
			left: 0;
			background: #111;
			background: linear-gradient(
				to right,
				#111 15px,
				transparent 15px,
				transparent 95px,
				#111 95px
			);
		}
	}
	&__inner {
		margin-top: 40px;
	}
}

.music {
	grid-area: quote;
	margin: 25px 0 10px 20px;
	position: relative;
	&__title {
		font: 22px "Special Elite", cursive;
	}
	&__artist {
		color: $color-red2;
		margin: 15px 0;
		transform: rotate(-10deg);
		max-width: 50px;
		font: 24px/.8 'Gochi Hand', cursive;
	}
	svg {
		width: 65px;
		position: absolute;
		bottom: 0px;
		right: -10px;
	}
}

.tracker {
	grid-area: tracker;
	display: grid;
	margin: 20px 0 0 20px;
	grid-template-rows: repeat(4, 28px);
	grid-template-columns: max-content repeat(7, 1fr);
	align-items: center;
	font: 18px/1 "Gochi Hand", cursive;
	grid-auto-flow: row;
	text-align: center;
	&__title {
		grid-column: 1;
		text-align: left;
		padding-right: 15px;
	}
	&__day {
		text-align: center;
		&:nth-child(1) {
			grid-column-start: 2;
		}
	}
	&__bubble {
		border: 1.5px dashed;
		margin: auto;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		&:nth-child(10),&:nth-child(12),&:nth-child(13) {
			background: rgba($color-vermilion,0.5);
		}
		&:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(22), &:nth-child(23) {
			background: rgba($color-pink,0.5);
		}
		&:nth-child(27),&:nth-child(29),&:nth-child(30) {
			background: rgba(coral,0.5);
		}
	}
}

/* Responsive here
@media screen and (max-width: 768px) {
	.main-content {
		padding: 1em;
	}
	.notebook__inner {
		grid-template-columns: 40% 25% 35%;
		grid-template-rows: auto;
		grid-template-areas: 
			"title title title" 
			"days days days" 
			"notes notes notes" 
			"expenses expenses expenses"
			"goals quote picture"
			"tracker tracker picture";
		> div {
			margin: 30px 20px;
		}
		&:after {
			width: 100%;
			height: 100px;
			bottom: 0;
			background: linear-gradient(
				to bottom,
				transparent 10%,
				rgba(153, 153, 153, 0.05) 50%,
				rgba(153, 153, 153, 0.4) 51%,
				rgba(153, 153, 153, 0.15) 51.5%,
				transparent 90%
			);
		}
	}
}
*/
            
          
!
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