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

              
                <header>
	<p>The Star Trek Universe</p>
	<nav id="site-navigation">
		<ul>
			<li><a href="#main" aria-current="page">Cast</a></li>
			<li><a href="">Episodes</a></li>
			<li><a href="">Feature films</a></li>
		</ul>
	</nav>
</header>
<main id="main">
	<header>
		<h1>Cast</h1>
		<nav id="page-navigation">
			<h2 class="visually-hidden">on this page:</h2>
			<ul>
				<li><a href="#tos">The Original Series</a></li>
				<li><a href="#tng">The Next Generation</a></li>
				<li><a href="#ds9">Deep Space Nine</a></li>
				<li><a href="#voy">Voyager</a></li>
				<li><a href="#ent">Enterprise</a></li>
			</ul>
		</nav>
	</header>
	<section id="tos">
		<h2>The Original Series</h2>
		<ul>
			<li>
				<span class="actor">William Shatner</span> as
				<span class="character">James T. Kirk</span><span class="visually-hidden">,</span>
				<span class="jobTitle">commanding officer</span>
			</li>
			<li>
				<span class="actor">Leonard Nimoy</span> as
				<span class="character">Spock</span><span class="visually-hidden">,</span>
				<span class="jobTitle">science officer and first/executive officer</span>
			</li>
			<li>
				<span class="actor">DeForest Kelley</span> as
				<span class="character">Dr. Leonard “Bones” McCoy</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief medical officer</span>
			</li>
			<li>
				<span class="actor">James Doohan</span> as
				<span class="character">Montgomery “Scotty” Scott</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief engineer and second officer</span>
			</li>
			<li>
				<span class="actor">Nichelle Nichols</span> as
				<span class="character">Nyota Uhura</span><span class="visually-hidden">,</span>
				<span class="jobTitle">communications officer</span>
			</li>
			<li>
				<span class="actor">George Takei</span> as
				<span class="character">Hikaru Sulu</span><span class="visually-hidden">,</span>
				<span class="jobTitle">helmsman</span>
			</li>
			<li>
				<span class="actor">Walter Koenig</span> as
				<span class="character">Pavel Chekov</span><span class="visually-hidden">,</span>
				<span class="jobTitle">navigator</span>
			</li>
			<li>
				<span class="actor">Majel Barrett</span> as
				<span class="character">Christine Chapel</span><span class="visually-hidden">,</span>
				<span class="jobTitle">nurse</span>
			</li>
			<li>
				<span class="actor">Grace Lee Whitney</span> as
				<span class="character">Janice Rand</span><span class="visually-hidden">,</span>
				<span class="jobTitle">yeoman</span>
			</li>
		</ul>
	</section>
	
	<section id="tng">
		<h2>The Next Generation</h2>
		<ul>
			<li>
				<span class="actor">Patrick Stewart</span> as
				<span class="character">Jean-Luc Picard</span><span class="visually-hidden">,</span>
				<span class="jobTitle">commanding officer</span>
			</li>
			<li>
				<span class="actor">Jonathan Frakes</span> as
				<span class="character">William Riker</span><span class="visually-hidden">,</span>
				<span class="jobTitle">first officer</span>
			</li>
			<li>
				<span class="actor">LeVar Burton</span> as
				<span class="character">Geordi La Forge</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief engineer</span>
			</li>
			<li>
				<span class="actor">Michael Dorn</span> as
				<span class="character">Worf</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief of security and tactical officer</span>
			</li>
			<li>
				<span class="actor">Gates McFadden</span> as
				<span class="character">Dr. Beverly Crusher</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief medical officer</span>
			</li>
			<li>
				<span class="actor">Marina Sirtis</span> as
				<span class="character">Deanna Troi</span><span class="visually-hidden">,</span>
				<span class="jobTitle">counselor</span>
			</li>
			<li>
				<span class="actor">Brent Spiner</span> as
				<span class="character">Data</span><span class="visually-hidden">,</span>
				<span class="jobTitle">second officer and operations officer</span>
			</li>
			<li>
				<span class="actor">Wil Wheaton</span> as
				<span class="character">Wesley Crusher</span><span class="visually-hidden">,</span>
				<span class="jobTitle">acting ensign</span>
			</li>
		</ul>
	</section>
	
	<section id="ds9">
		<h2>Deep Space Nine</h2>
		<ul>
			<li>
				<span class="actor">Avery Brooks</span> as
				<span class="character">Benjamin Sisko</span><span class="visually-hidden">,</span>
				<span class="jobTitle">commanding officer</span>
			</li>
			<li>
				<span class="actor">René Auberjonois</span> as
				<span class="character">Odo</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief of security</span>
			</li>
			<li>
				<span class="actor">Nicole de Boer</span> as
				<span class="character">Ezri Dax</span><span class="visually-hidden">,</span>
				<span class="jobTitle">counselor</span>
			</li>
			<li>
				<span class="actor">Michael Dorn</span> as
				<span class="character">Worf</span><span class="visually-hidden">,</span>
				<span class="jobTitle">strategic operations officer</span>
			</li>
			<li>
				<span class="actor">Terry Farrell</span> as
				<span class="character">Jadzia Dax</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief science officer</span>
			</li>
			<li>
				<span class="actor">Cirroc Lofton</span> as
				<span class="character">Jake Sisko</span><span class="visually-hidden">,</span>
				<span class="jobTitle">son of Benjamin Sisko</span>
			</li>
			<li>
				<span class="actor">Colm Meaney</span> as
				<span class="character">Miles O’Brien</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief operations officer</span>
			</li>
			<li>
				<span class="actor">Armin Shimerman</span> as
				<span class="character">Quark</span><span class="visually-hidden">,</span>
				<span class="jobTitle">bar owner</span>
			</li>
			<li>
				<span class="actor">Alexander Siddig</span> as
				<span class="character">Julian Bashir</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief medical officer</span>
			</li>
			<li>
				<span class="actor">Nana Visitor</span> as
				<span class="character">Kira Nerys</span><span class="visually-hidden">,</span>
				<span class="jobTitle">first officer</span>
			</li>
		</ul>
	</section>
	
	<section id="voy">
		<h2>Voyager</h2>
		<ul>
			<li>
				<span class="actor">Kate Mulgrew</span> as
				<span class="character">Kathryn Janeway</span><span class="visually-hidden">,</span>
				<span class="jobTitle">commanding officer</span>
			</li>
			<li>
				<span class="actor">Robert Beltran</span> as
				<span class="character">Chakotay</span><span class="visually-hidden">,</span>
				<span class="jobTitle">first officer</span>
			</li>
			<li>
				<span class="actor">Roxann Dawson</span> as
				<span class="character">B’Elanna Torres</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief engineer</span>
			</li>
			<li>
				<span class="actor">Robert Duncan McNeill</span> as
				<span class="character">Tom Paris</span><span class="visually-hidden">,</span>
				<span class="jobTitle">conn officer</span>
			</li>
			<li>
				<span class="actor">Jennifer Lien</span> as
				<span class="character">Kes</span><span class="visually-hidden">,</span>
				<span class="jobTitle">nurse</span>
			</li>
			<li>
				<span class="actor">Ethan Phillips</span> as
				<span class="character">Neelix</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chef, morale officer</span>
			</li>
			<li>
				<span class="actor">Robert Picardo</span> as
				<span class="character">The Doctor</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief medical officer</span>
			</li>
			<li>
				<span class="actor">Tim Russ</span> as
				<span class="character">Tuvok</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief security/tactical officer</span>
			</li>
			<li>
				<span class="actor">Jeri Ryan</span> as
				<span class="character">Seven of Nine</span><span class="visually-hidden">,</span>
				<span class="jobTitle">stellar cartography</span>
			</li>
			<li>
				<span class="actor">Garrett Wang</span> as
				<span class="character">Harry Kim</span><span class="visually-hidden">,</span>
				<span class="jobTitle">operational officer</span>
			</li>
		</ul>
	</section>
	
	<section id="ent">
		<h2>Enterprise</h2>
		<ul>
			<li>
				<span class="actor">Scott Bakula</span> as
				<span class="character">Jonathan Archer</span><span class="visually-hidden">,</span>
				<span class="jobTitle">commanding officer</span>
			</li>
			<li>
				<span class="actor">Jolene Blalock</span> as
				<span class="character">T’Pol</span><span class="visually-hidden">,</span>
				<span class="jobTitle">first officer and science officer</span>
			</li>
			<li>
				<span class="actor">John Billingsley</span> as
				<span class="character">Phlox</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief medical officer</span>
			</li>
			<li>
				<span class="actor">Dominic Keating</span> as
				<span class="character">Malcolm Reed</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief security/tactical officer</span>
			</li>
			<li>
				<span class="actor">Anthony Montgomery</span> as
				<span class="character">Travis Mayweather</span><span class="visually-hidden">,</span>
				<span class="jobTitle">conn officer</span>
			</li>
			<li>
				<span class="actor">Linda Park</span> as
				<span class="character">Hoshi Sato</span><span class="visually-hidden">,</span>
				<span class="jobTitle">communications officer</span>
			</li>
			<li>
				<span class="actor">Connor Trinneer</span> as
				<span class="character">Charles “Trip” Tucker III</span><span class="visually-hidden">,</span>
				<span class="jobTitle">chief engineer</span>
			</li>
		</ul>
	</section>
</main>


              
            
!

CSS

              
                *, ::before, ::after { box-sizing: border-box }

body
{
	background: hsla(0, 0%, 98%, 1);
	font-family: Roboto, Fira Sans, Calibri, sans-serif;
}

body > header
{
	margin-bottom: 4em;
}

body > header p,
h1
{
	margin: 0;
	font-weight: bold;
	font-size: 1.7em;
	line-height: 1.1;
}

main > header.js-enabled
{
	position: sticky;
	top: 0;
	background: linear-gradient(to top, hsla(0, 0%, 98%, 0.5), hsla(0, 0%, 98%, 1) 0.5em);
}

main > header
{
	padding: 0.5em 0;
}

#site-navigation ul,
#page-navigation ul
{
	list-style: none;
	padding: 0;
}

#site-navigation a,
#page-navigation a
{
	color: hsl(260, 60%, 40%);
	text-decoration: none;
}

#site-navigation ul
{
	display: flex;
	flex-flow: row wrap;
}

#site-navigation li:not(:last-child)
{
	margin-right: 1.5em;
}

#site-navigation a
{
	padding-bottom: 0.25em;
	border-bottom: medium solid transparent;
}

#site-navigation a[aria-current]
{
	border-bottom-color: currentColor;
}

#page-navigation li
{
	margin: 0.5em 0;
}

@media (min-width: 42em)
{
	#page-navigation
	{
		float: left;
		width: 12em;
	}

	section
	{
		margin-left: 16em;
	}
}

section
{
	margin-bottom: 4em;
}

h2
{
	margin: 0 0.5rem;
	font-size: 1.3em;
}

section ul
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
	gap: 1em;
	list-style: none;
	padding: 0;
}

section li
{
	border: thin solid hsl(0, 0%, 90%);
	padding: 0.5em 0.5em 1em 0.5em;
	background: white;
}

.character
{
	display: block;
	margin: 1em 0 0.25em;
	font-size: 1.3em;
	line-height: 1.1;
}

.visually-hidden
{
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
  white-space: nowrap;
}


              
            
!

JS

              
                const mainHeaderElement = document.querySelector('main > header');

if (mainHeaderElement && 'scrollBy' in window)
{
	mainHeaderElement.classList.add('js-enabled');

	document.querySelector('#page-navigation').addEventListener('click', event => {
		if (event.target.tagName === 'A')
		{
			event.preventDefault();
			location.hash = event.target.getAttribute('href');
			scrollBelowStickyHeader();
		}
	});
	
	if (location.hash)
	{
		scrollBelowStickyHeader();
	}
	
	function scrollBelowStickyHeader()												
	{
		const currentSectionElement = document.querySelector(location.hash);
		const offset = window.scrollY - currentSectionElement.offsetTop + mainHeaderElement.offsetHeight;
		if (offset > 0)
		{
			window.scrollBy({ top: -offset });
		}
	}
}

              
            
!
999px

Console