<body class="F">

		<header role="banner">
			<a href="/" class="logo">
				<img src="https://labs.jensimmons.com/2019/media/01-007/microphone.gif" alt="">
			</a>
		  <h1 class="site-name">
		  	<a href="/" rel="home">Talking Graphic Design</a>
		  </h1>
		  <nav role="navigation" class="main-menu">      
				<ul class="menu">
					<li><a href="/">Home</a></li>
					<li><a href="/episodes">The Episodes</a></li>
					<li><a href="/guests">Guests</a></li>
					<li><a href="/subscribe">Subscribe</a></li>
					<li><a href="/about">About</a></li>
				</ul> 
			</nav>
		</header>
		
		<main>
			<article>
				
			</article>
		</main>

  </body>
/*  Version A — No CSS
---------------------------------------- */
/* no CSS file is loaded */

/*  Version B — Basic styles (so our eyes don't bleed)
------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; }

html {
	font-family: Avenir, Helvetica, sans-serif;
	background: #0d52bb; /* dark blue */
	background: #b3d1ff; /* lighter blue */
	background: #f9daff; /* pink */
	background: #ffe9d9; 
}
a {
	text-decoration: none;
	color: black;
}
ul {
	padding-left: 0;
}
li {
	list-style: none;
}
header {
	padding: 2rem;
}
.logo img {
	width: 50px;
}
header {
	background: white;
}
article {
	background: #ddd; /* grey */
	min-width: 200px;
	max-width: 900px;
	margin: 2rem auto;
	height: 500px;
	display: none;
}

/*  Version C — a la 2007
---------------------------------------- */
.C header {
	border-bottom: 6px solid grey;
}
.C .logo {
	float: left;
	margin-right: 2em;
}
.C h1 {
	width: 80%;
	float: left;
}
.C nav {
	float: right;
}

/*  Version D — Let's use CSS Grid
---------------------------------------- */
.D header {
	display: grid;
	gap: 2rem;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-columns: 8fr 75fr 18fr; /* this? */
	grid-template-columns: 8% 75% 18%; /* this? */
	grid-template-columns: max-content 3fr 1fr; /* which one is best? */
	grid-template-columns: max-content auto max-content; /* maybe this one */
}
.D h1, 
.D ul {
	margin: 0;
}
.D nav {
	text-align: right;
}

/*  Version E — Layout navigation as a bar
------------------------------------------- */
.E header {
	display: grid;
	gap: 2rem;
	align-items: center;
	grid-template-columns: max-content auto auto;
}
.E nav {
	justify-self: end;
}
.E ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
}
@supports not (gap: 1rem;) {
	.E li {
		margin: 0 0.5rem;
	}
	.E li:nth-of-type(1) {
		margin-left: 0;
	}
}

/*  Version F — Navigation under the site name
----------------------------------------------- */
.F h1, /* remove margins from item content */
.F ul {
	margin: 0;
}
.F ul { /* layout navbar in one line */ 
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}
@supports not (gap: 1rem;) {
	.F li {
		margin: 0 0.5rem;
	}
	.F li:nth-of-type(1) {
		margin-left: 0;
	}
}
.F header {
	display: grid;
	grid-template-columns: min-content auto;
	grid-template-rows: auto auto;
	gap: 1rem 2rem;
}
.F .logo {
	grid-row: span 2;
}
.F nav {
	align-self: end;
}





/*  Version G — Let's do something more interesting
---------------------------------------------------- */
.G header {
	display: grid;
	gap: 2rem;
	align-items: center;
	grid-template-columns: max-content auto auto; 
}
.G h1, 
.G ul {
	margin: 0;
}
.G nav {
	text-align: right;
	writing-mode: vertical-rl;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.