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

              
                <header>
	<a class="logo" href="#">Soul Tea</a>
	<nav class="navigation">
		<button class="menu" aria-expanded="false" aria-haspopup="true">Menu</button>
		<div class="menu__dropdown">
			<a href="#" class="menu__link">About</a>
			<a href="#" class="menu__link">Shop</a>
			<a href="#" class="menu__link">Contact</a>
		</div>
	</nav>
</header>
<main>
	<section>
		<div class="intro">
			<h1>Welcome to Soul Tea.</h1>
		</div>
			<p class="intro__description">50 years ago our family made a commitment to the community and quality. We source all of our tea leaves from local family owned farms, and roast all of them in house so you can have the best possible tea drinking experience. When you choose to buy with Soul Tea, you calm your soul and feed your community.
		</p>
	</section>
	<section>
		<p class="feature-products">Featured Products</p>
		<div class="l--columns">
			<div class="card">
				<h3 class="card__title"><a href="#">Black Tea</a></h3>
				<img class="card__image card__image--black" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1409522/tea-tin-1.jpg" alt="rose tea" />
				<button class="card__button button--bag">Add to Bag</button>
			</div>
			<div class="card">
				<h3 class="card__title"><a href="#">Ginger Tea</a></h3>
				<img class="card__image card__image--ginger" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1409522/fancy-tea-press.jpg" alt="ginger tea" />
				<button class="card__button button--bag">Add to Bag</button>
			</div>
			<div class="card">
				<h3 class="card__title"><a href="#">Chai Tea</a></h3>
				<img class="card__image card__image--chai" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1409522/top-down-tea-photo.jpg" alt="chai tea" />
				<button class="card__button button--bag">Add to Bag</button>
			</div>
		</div>
	</section>
	<section>
		<div class="product">
		<h2 class="title--left">Deal of the Day</h2>
		<img class="product__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1409522/floral-tea-1.jpg" alt="hibiscus green tea" />
		<form class="product__details">
			<h3 class="product__title">Hibiscus Green Tea</h3>
			<p class="product__sale-price">$8.75</p>
			<p class="product__reg-price">$35</p>
			<div class="radio-group" role="radiogroup">
				<div class="radio">
					<input class="radio__input" id="six-ounces" type="radio" name="size" checked="checked" aria-label="six ounces" />
					<label class="radio__label" for="six-ounces">
						<span class="radio__text">6 oz</span>
					</label>
				</div>
				<div class="radio">
					<input class="radio__input" id="twelve-ounces" type="radio" name="size" checked="checked" aria-label="six ounces" />
					<label class="radio__label" for="twelve-ounces">
						<span class="radio__text">12 oz</span>
					</label>
				</div>
			</div>
			<ul class="product__description">
				<li>flowers in your tea, yum. you are now a flower child</li>
				<li>caffeine to keep you awake during boring meetings</li>
				<li>all tea is good so dont worry about the flavor too much</li>
				<li>locally sourced, organic</li>
			</ul>
			<label for="quantity-selection" class="quantity-label">Quantity</label>
			<select id="quantity-selection">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
			<button class="button--bag">Add to Bag</button>
			</form>
		</div>
	</section>
	<section>
		<h2>How to Make the Perfect Cup of Tea</h2>
		<ol class="directions">
			<li class="directions__step" role="heading">Boil some water to the perfect temperature</li>
			<li class="directions__step" role="heading">Add the water and some tea leaves to a mug</li>
			<li class="directions__step" role="heading">Let it steep for the perfect amount of time</li>
		</ol>
	</section>
	<section>
		<div class="cta">
			<div class="l--half">
				<h2 class="cta__title">Buy Our Teas</h2>
				<p>They are the best so it really shouldn't be that hard to convince you.</p>
			</div>
			<div class="l--half">
				<button class="cta__button">Shop Now</button>
			</div>
		</div>
		</section>
	<footer>
		<h1>Footer</h1>
		<div>
			<h2>Menu</h2>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Shop</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div>
			<h2>Social</h2>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
				<li><a href="#">Instagram</a></li>
				<li><a href="#">Youtube</a></li>
			</ul>
		</div>
		<div>
			<h2>Legal</h2>
			<ul>
				<li><a href="#">Privacy Policy</a></li>
				<li><a href="#">Terms & Conditions</a></li>
			</ul>
		</div>
	</footer>
			<p>Photos from <a href="https://unsplash.com">Unsplash</a></p>
<main>
              
            
!

CSS

              
                // Variables
$c-grey: #444;
$c-white: #fff;
$c-focus: #317dff;

$primary-font: 'Oswald', sans-serif;
$secondary-font:  'Roboto', sans-serif;

$l-max-width: 72rem;

$bp-sm: 27.5rem;
$bp-md: 50rem;

// Mixins
@mixin pseudo-focus {
	&:focus {
		outline: none;
	}
	
	&::after {
		content: '';
		position: absolute;
		top: -0.25rem;
		left: -0.25rem;
		width: 100%;
		height: 100%;
		border: 0.25rem solid transparent;
	}
	
	&:focus::after {
		border: 0.25rem solid $c-focus;
	}
}

@mixin link-hover {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

// General
// ----------------------------
body {
	font-family: $primary-font;
	color: $c-grey;
	margin: 0;
}

h1,
h2 {
	text-align: center;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-weight: 300;
	font-size: 2.5rem;
}

p, ul {
	font-family: $secondary-font;
}

main {
	max-width: $l-max-width;
	margin: auto;
	overflow: hidden;
}

header {
	display: flex;
	justify-content: space-between;
	max-width: $l-max-width;
	margin: auto;
	padding: 0.5rem 0;
	position: relative;
}

// ----------------------------
// Layout
// ----------------------------

.l--columns {
	display: flex;
	flex-direction: column;
  justify-content: center;
	margin-bottom: 8rem;

	@media (min-width: $bp-sm) {
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	@media (min-width: $bp-md) {
		flex-wrap: nowrap;
		flex-direction: row;
	}
}

// ----------------------------
// Nav
// ----------------------------

.logo {
	font-size: 2rem;
	color: black;
	@include link-hover;
	@include pseudo-focus;
}

.menu {
	background-color: $c-white;
	color: $c-grey;
	border: 2px solid;
	font-weight: bold;
	font-size: 1rem;
	padding: 0.5rem;
	position: relative;
	right: 0.5rem;
	@include pseudo-focus;
	
	&[aria-expanded="true"] + .menu__dropdown {
		height: auto;
		width: auto;
		overflow: visible;
		display: inline-block;
	}
	
	&[aria-expanded="false"] + .menu__dropdown {
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
	}
		
	&__dropdown {
		display: flex;
		flex-direction: column;
		
		@media (min-width: $bp-sm) {
			flex-direction: row;
		}
	
		position: absolute;
		z-index: 2;
		width: 100%;
		top: 3rem;
		right: 0.5rem;
		padding: 0.5rem 0;
		background-color: $c-grey;
	}

	&__link {
		position: relative;
		z-index: 10;
		color: $c-white;
		font-size: 2rem;
		padding: 0.5rem 3rem;
		line-height: 1.5;
		@include link-hover;
		@include pseudo-focus;
	}
}

// ----------------------------
// Hero
// ----------------------------

.intro {
	position: relative;
	padding: 5rem;
	color: $c-white;
	background-color: #85bcb0;
	
	&__description {
		text-align: center;
		margin: 3rem auto 4rem;
		max-width: 75%;
		line-height: 2;
	}
}

// ----------------------------
// Add to Bag Button
// ----------------------------

.button--bag {
	position: relative;
	font-size: 1rem;
	border: 2px solid $c-grey;
	padding: 0.5rem 1.5rem;
	background-color: $c-white;
	box-shadow: 0.375rem 0.375rem 0 0;
	transition: all 100ms linear;
	@include pseudo-focus;
	
	&:hover {
		box-shadow: 0 0 0 0;
		background-color: $c-grey;
		color: $c-white;
	}
}

// ----------------------------
// Product Card
// ----------------------------


.feature-products {
	font-weight: 300;
	font-size: 2.5rem;
	text-align: center;
	font-family: $primary-font;
}

.card {
	display: flex;
	flex-direction: column;
	margin: 0 1rem 2rem;
	padding: 2rem 1rem;
	width: 85%;
	box-shadow: 0 0.375rem 0.625rem 0 rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
	
	@media (min-width: $bp-sm) {
		width: 45%;
		margin: 0 1rem;
	}
	
	@media (min-width: $bp-md) {
		width: 30%;
	}
	
	&__image {
		order: 0;
		border-radius: 50%;
		max-width: 15.625rem;
		align-self: center;
	}
	
	&__title {
		order: 1;
		font-size: 1.5rem;
		text-align: center;
		
		a {
			color: $c-grey;
			position: relative;
			@include link-hover;
			@include pseudo-focus;
		}
	}
	
	&__button {
		order: 2;
		align-self: center;
	}
}


// ----------------------------
// Deal of the Day
// ----------------------------

.title--left {
	position: absolute;
	top: -3.5rem;
	left: 1rem;
	font-size: 1.75rem;
}

.product {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 8rem auto 4rem;
	
	@media (min-width: $bp-sm) {
		flex-direction: row;
	}
	
	&__image {
		background-color: #6fa59b;
		border-radius: 1rem;
		max-width: 100%;
		box-shadow: 0 0.375rem 0.625rem 0 rgba(0, 0, 0, 0.125);
		
		@media (min-width: $bp-sm) {
			width: 60%;
		}
	}
	
	&__details {
		padding: 3rem;
		padding-right: 0.5rem;
		padding-bottom: 5rem;
	}
	
	&__title {
		font-size: 2rem;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	&__sale-price {
		font-size: 1.75rem;
		display: inline-block;
		text-decoration: stroke;
		margin-right: 0.5rem;
		margin-bottom: 0;
	}
	
	&__reg-price {
		font-size: 1.25rem;
		display: inline-block;
		margin-bottom: 0;
		color: #727272;
		text-decoration: line-through;
	}
	
	&__description {
		padding-left: 1.25rem;
		padding-bottom: 1.25rem;
		padding-right: 2rem;
		
		li {
			line-height: 1.5;
		}
	}
}


.radio-group {
	display: flex;
	margin: 1rem 0;
}

.radio {
	margin-right: 1.5rem;
	position: relative;
}

.radio__input {
	opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.radio__label {
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: 400;
	color: $c-grey;
	position: relative;
	
	&::before {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0.25rem;
		height: 1rem;
		width: 1rem;
		margin-right: 0.875rem;
		border-radius: 50%;
		border: 0.125rem solid $c-grey;
		transition: all 200ms cubic-bezier(0.71, 0.55, 0.62, 1.37);
	}
	
		&::after {
		content: '';
		position: absolute;
		top: -0.25rem;
		left: -0.25rem;
		width: 100%;
		height: 100%;
		border: 0.25rem solid transparent;
	}
	
	.radio__input:focus + &::after {
		border: 0.25rem solid #317dff;
	}
	
	.radio__input:focus + &::before,
	.radio__input:checked + &::before{
		background-color: $c-grey;
		border-color: $c-grey;
		box-shadow: inset 0 0 0 0.125rem #fff;
	}

	.radio__input:hover + &::before {
		border-color: $c-grey;
		background-color: $c-grey;
		transform: scale(1.25);
	}
}

.radio__text {
	margin-left: 1.75rem;
}

.quantity-label {
	display: block;
}

select {
	font-size: 1rem;
	height: 2.25rem;
	width: 2.5rem;
	border: none;
	background-color: $c-grey;
	color: $c-white;
	border-radius: 0;
	margin-right: 0.5rem;
	
	&:focus {
		outline: none;
	}
}

// ----------------------------
// Numbered Steps
// ----------------------------

.directions {
	margin-bottom: 4rem;

 &__step {
	max-width: 26rem;
	margin: 0 auto 4rem;
	padding: 1rem;
	font-size: 1.5rem;
	position: relative;
	
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: -10%;
			width: 110%;
			height: 100%;
			border: 1px solid #bbb;
			box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
		}
	}
}

// ----------------------------
// CTA
// ----------------------------

.l--half {	
	 align-self: center;
	
	@media (min-width: $bp-sm) {
			max-width: 50%;
	}
}

.cta {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #f2f2f2;
	padding: 4rem;

		@media (min-width: $bp-sm) {
			flex-direction: row;
		}
	
	&__title {
		text-align: left;
	}
	
	p {
		font-size: 1.25rem;
	}
	
	&__button {
		border: 0.125rem solid $c-grey;
		background: #f2f2f2;
		font-family: $secondary-font;
		padding: 0.5rem 1rem;
		font-size: 1.25rem;
		transition: all 100ms linear;
		position: relative;
		@include pseudo-focus;
		
		&:hover {
			background-color: $c-grey;
			color: $c-white;
		}
	}
}

// ----------------------------
// Footer
// ----------------------------

footer {
	padding: 2rem;
	background-color: $c-grey;
	color: #eee;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	@media (min-width: $bp-sm) {
		flex-direction: row;
	}
	
	h1 {
		position: absolute;
		height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
	}
	
	h2 {
		text-align: left;
		font-size: 1.5rem;
	}
	
	ul {
		padding-left: 0.75rem;
	}
	
	li {
		margin-bottom: 0.75rem;
	}
	
	a {
		color: #f2f2f2;
		position: relative;
		@include link-hover;
		@include pseudo-focus;
	}
}
              
            
!

JS

              
                const menu = document.querySelector('.menu');

menu.addEventListener('click', toggleMenu);

function toggleMenu() {
	const expandedValue = menu.getAttribute('aria-expanded');
	const setValue = expandedValue === 'true' ? 'false' : 'true';
	menu.setAttribute('aria-expanded', setValue);
}
              
            
!
999px

Console