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

              
                nav.nav
	.nav__elements
		.nav__logo 
			span s
			span y
			span w
			span r
			span .
		
		ul.nav__groups
			li.nav__group
				a.nav__group__link Furniture
				ul.nav__group__dropdown
					.multi-column
						ul.product-list.multi(data-type="table")
							li.product-list__title.title To Work On
							li.product-list__link
								a Writing desks
							li.product-list__link
								a Hipster desks
							li.product-list__link
								a Corner desks
							li.product-list__link
								a Floating desks
							li.product-list__link
								a Executive desks
							li.product-list__link
								a Gaming desks
							li.product-list__link
								a Console tables
							li.product-list__link
								a Standing desks
							li.product-list__link
								a Laptop stands
							li.product-list__link
								a Accent tables
						ul.product-list.multi(data-type="chair")
							li.product-list__title.title To Sit On
							li.product-list__link
								a Ergonomic chairs
							li.product-list__link
								a Swivel chairs
							li.product-list__link
								a Armchairs
							li.product-list__link
								a Kneeling chairs
							li.product-list__link
								a Chaise lounges
							li.product-list__link
								a Fabric sofas
							li.product-list__link
								a Sofa beds
							li.product-list__link
								a Bouncing balls
							li.product-list__link
								a Beanbags
						ul.product-list.multi(data-type="support")
							li.product-list__title.title Physical (& Emotional) Support
							li.product-list__link
								a Footstools
							li.product-list__link
								a Ottomans
							li.product-list__link
								a Coffee tables
							li.product-list__link
								a Shelving Units
							li.product-list__link
								a Bookcases
							li.product-list__link
								a Pool tables
							li.product-list__link
								a Mini bars
						ul.article-list
							li.article-list__title.title For Your Inspiration
							li.article-list__link
								a Are You Really A Millenial If You't Shop At Ikea?
							li.article-list__link
								a The Latest Trend: Purchasing Tables from Hipster Cafes
							li.article-list__link
								a 15 Uncomfortable but Instagram-Worthy Chairs For Your Home Office
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-table.jpg" data-match="table")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-chair.jpg" data-match="chair")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-support.jpg" data-match="support")
			li.nav__group
				a.nav__group__link Deco
				ul.nav__group__dropdown
					.multi-column
						ul.product-list(data-type="floor")
							li.product-list__title.title Floor Covers
							li.product-list__link
								a Area rugs
							li.product-list__link
								a Door mats
							li.product-list__link
								a Hallway runners
							li.product-list__link
								a Fake grass
						ul.product-list(data-type="wall")
							li.product-list__title.title Wall Covers
							li.product-list__link
								a Wall art
							li.product-list__link
								a #basic quotes
							li.product-list__link
								a Nature wallpapers
							li.product-list__link
								a Memo boards
							li.product-list__link
								a Chalk boards
						ul.product-list(data-type="window")
							li.product-list__title.title Window Capes
							li.product-list__link
								a Curtains
							li.product-list__link
								a Tapestries
							li.product-list__link
								a Hanging flowers
							li.product-list__link
								a Herb gardens
						ul.product-list(data-type="cool")
							li.product-list__title.title It Just Looks Cool
							li.product-list__link
								a Teepees
							li.product-list__link
								a Faerie lights
							li.product-list__link
								a Easels
							li.product-list__link
								a Vintage bicycles
						ul.article-list
							li.article-list__title.title For Your Inspiration
							li.article-list__link
								a Do the Eat, Pray, Love: Fake Grass For Your Office
							li.article-list__link
								a Do You Really Work Better When You're Stepping On A White, Fluffy Rug?
							li.article-list__link
								a Yoga Mats: An Exercise Tool and An Office Rug? Win!
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-floor.jpg" data-match="floor")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-wall.jpg" data-match="wall")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-window.jpg" data-match="window")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-cool.jpg" data-match="cool")
							
			li.nav__group
				a.nav__group__link Work Friends
				ul.nav__group__dropdown
					.multi-column
						ul.product-list(data-type="plant")
							li.product-list__title.title Plants
							li.product-list__link
								a Succulents
							li.product-list__link
								a Large plants
							li.product-list__link
								a Lucky charm plants
							li.product-list__link
								a Solar-powered plants
							li.product-list__link
								a Crochet succulents
							
						ul.product-list(data-type="buddy")
							li.product-list__title.title Buddies
							li.product-list__link
								a Giant plush toys
							li.product-list__link
								a Celebrity cutouts
							li.product-list__link
								a Mirrors
						ul.product-list(data-type="items")
							li.product-list__title.title For The Table
							li.product-list__link
								a Origami
							li.product-list__link
								a Figurines
							li.product-list__link
								a Candles
							li.product-list__link
								a Pixar lamps
						ul.product-list(data-type="pets")
							li.product-list__title.title For The Pets
							li.product-list__link
								a Pet beds
							li.product-list__link
								a Pet houses
							li.product-list__link
								a Cat trees & condos
							li.product-list__link
								a Bunny hutches
						ul.article-list
							li.article-list__title.title For Your Inspiration
							li.article-list__link
								a Why Pets Make The Best Colleagues Ever! (They Don't Talk, That's Why)
							li.article-list__link
								a Your Succulent Plants Die Too Easily? Try Crochet Plants Instead
							li.article-list__link
								a [Quiz] Which Eeveevolution Is Your Work Soulmate?
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-plant.jpg" data-match="plant")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-buddy.jpg" data-match="buddy")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-items.jpg" data-match="items")
						img.product-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/nav-pets.jpg" data-match="pets")
		.nav__cart CART
              
            
!

CSS

              
                
body {
  background: #f4f6f3;
  font-family: 'Ibarra Real Nova', sans-serif;
	line-height: 1.4;
}

* {
	box-sizing: border-box;
}

a {
	color: #767A7F;
}

@keyframes bounce {
	0% { transform: translateY(0px)}
	50% { transform: translateY(-6px)}
}

.nav {
	background: #fff;
	display: block;
	left: 0;
	position: fixed;
	top: 0;
	width: 95%;
	position: relative;
	margin: 2rem auto;
	font-size: 1.2rem;
	box-shadow: -2px 4px 12px rgb(237, 237, 237);
	background: #292F36;
	max-width: 1400px;
	a {
		cursor: pointer;
		padding: 1.5rem 2rem;
		display: inline-block;
	}
	&__logo {
		color: #B1B3B5;
		font-size: 1.8rem;
		align-self: center;
		padding: .5rem 1.2rem .8rem;
		cursor: pointer;
		white-space: nowrap;
		span {
			display: inline-block;
			transform: translateY(0);
		}
		&:hover {
			span {
				animation: .4s bounce ease-in-out;
				&:nth-child(2) {
					animation-delay: .1s;
				}
				&:nth-child(3) {
					animation-delay: .2s;
				}
				&:nth-child(4) {
					animation-delay: .3s;
				}
				&:nth-child(5) {
					animation-delay: .4s;
				}
			}
			&:before {
				transform: translateY(0);
				transition: .3s ease .5s;
			}
		} 
		&:before {
			content: "So You Work Remotely. Home office furniture and decoration items you can show off on Instagram.";
			position: absolute;
			top: 100%;
			left: 0;
			padding: 1.2rem;
			background: #fff;
			font-size: 1.1rem;
			width: calc(100% - 2.4rem);
			transform: translateY(-100%);
			z-index: -1;
			color: #292F36;
		}
	}
	&__elements {
		display: flex;
	}
	&__cart {
		display: inline-block;
		font: 700 1.1rem Oswald;
	letter-spacing: .02rem;
		text-transform: uppercase;
		color: #f9f9f9;
		padding: 1.2rem;
		align-self: center;
	}
	&__groups {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	&__group {
		z-index: 2;
		> a {
			display: block;
			font: 700 1.1rem Oswald;
	letter-spacing: .02rem;
			text-transform: uppercase;
			color: #fff;
		}
		&:first-child > a {
			padding-left: 6rem;
		}
		&:last-child > a {
			padding-right: 6rem;
		}
		&__dropdown {
			position: absolute;
			top: 100%;
			visibility: hidden;
			display: none;
			opacity: 0;
			min-width: 450px;
			left: 0;
			padding: 1.5rem 2.5rem 2.5rem;
			background: #fff;
			transition: opacity 1.3s ease-in-out .3s, visibility 1s ease-out;
			text-align: left;
			width: 100%;
		}
	}
}

.product-list {
	flex: 1;
	min-width: 15rem;
	padding-right: 1rem;
	a {
		padding: .5rem 0;
		transition: .2s ease;
		position: relative;
		z-index: 2;
		&:before {
			content: '';
			left: 0;
			top: 85%;
			width: 0;
			transition: width .3s ease;
			height: 3px;
			position: absolute;
			background: #292F36;
		}
		&:hover {
			color: #292F36;
			&:before {
				width: 30px;
			}
		}
	}
	&__link {
		padding-right: .5rem;
	}
	&__title {
		width: 100%;
	}
	&.multi {
		display: flex;
		flex-wrap: wrap;
		.product-list__link {
			flex: 1 1 50%;
		}
	}
}

.title {
	margin: 1.2rem 0 0.8rem;
	text-transform: uppercase;
	font: 700 1.1rem Oswald;
	letter-spacing: .02rem;
}

.multi-column {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.article-list {
	width: 100%;
	padding-right: 30%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 1.3rem;
	&__title {
		width: 100%;
	}
	&__link {
		flex: 1;
		min-width: 11rem;
		margin-right: 2rem;
		position: relative;
		transition: transform .3s ease;
		&:before {
			content: '';
			width: 3.5px;
			height: 0;
			background: #292F36;
			transition: height .3s ease;
			position: absolute;
			top: .8rem;
    	left: -.9rem;
		}
		&:hover {
			transform: translateX(10px);
			a {
				color: #292F36;
			}
			&:before {
				height: 30px;
			}
		}
	}
	a {
		padding:  .4rem 0;
	}
}
	
	//hovering
	
.nav__group {
	a:hover + .nav__group__dropdown,
	.nav__group__dropdown:hover,
	li:hover > .nav__group__dropdown {
		display: block;
		opacity: 1;
		visibility: visible;
	}
}

.product-image {
	position: absolute;
	max-width: 33%;
	height: 250px;
	object-fit: contain;
	object-position: bottom right;
	bottom: 0;
	right: 0;
	transition: 1.3s ease;
	opacity: 0;
	z-index: 1;
	&[data-match="table"], &[data-match="floor"], &[data-match="plant"] {
		opacity: 1;
	}
}

.product-list {
	&[data-type="chair"]:hover ~ .product-image[data-match="chair"] {
		opacity: 1;
	}
	&[data-type="support"]:hover ~ .product-image[data-match="support"] {
		opacity: 1;
	}
	&[data-type="chair"]:hover ~ .product-image[data-match="chair"] {
		opacity: 1;
	}
	&[data-type="wall"]:hover ~ .product-image[data-match="wall"] {
		opacity: 1;
	}
	&[data-type="window"]:hover ~ .product-image[data-match="window"] {
		opacity: 1;
	}
	&[data-type="cool"]:hover ~ .product-image[data-match="cool"] {
		opacity: 1;
	}
	&[data-type="buddy"]:hover ~ .product-image[data-match="buddy"] {
		opacity: 1;
	}
	&[data-type="items"]:hover ~ .product-image[data-match="items"] {
		opacity: 1;
	}
	&[data-type="pets"]:hover ~ .product-image[data-match="pets"] {
		opacity: 1;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console