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

              
                <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"></meta>
	<title>Complex CSS Selectors Challenge</title>
	<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>

	<section class="content">

		<header>
			<nav>
				<ul>
					<li>
						<a href="#">Movies</a>
					</li>
					<li class="selected">
						<a href="#">TV-Shows</a>
					</li>
					<li>
						<a href="#">Music</a>
					</li>
					<li>
						<a href="#">Theatre</a>
					</li>
				</ul>
			</nav>
		</header>

		<ul class="shows">
			<li id="game-of-thrones">
				<h1>Game of Thrones</h1>
				<section class="seasons">
					<h2>Seasons</h2>
					<ul>
						<li>2011</li>
						<li>2012</li>
						<li>2013</li>
						<li>2014</li>
						<li>2015</li>
						<li>2016</li>
						<li>2017</li>
					</ul>
				</section>
				<section class="synopsis">
					<h2>Synopsis</h2>
					<p>In the mythical continent of Westeros, several powerful families fight for control of the Seven Kingdoms. As conflict erupts in the kingdoms of men, an ancient enemy rises once again to threaten them all. Meanwhile, the last heirs of a recently usurped dynasty plot to take back their homeland from across the Narrow Sea.</p>
				</section>
				<section class="cast">
					<h2>Cast</h2>
					<ul>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM1MTI5Mzc0MF5BMl5BanBnXkFtZTYwNzgzOTQz._V1_UY317_CR20,0,214,317_AL_.jpg">
								<div>Peter Dinklage</div>
								<div>Tyrion Lannister</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzIwMjIwNjg0M15BMl5BanBnXkFtZTgwOTI3MDEzMDE@._V1_UY317_CR14,0,214,317_AL_.jpg">
								<div>Lena Headey</div>
								<div>Cersei Lannister</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BNjg3OTg4MDczMl5BMl5BanBnXkFtZTgwODc0NzUwNjE@._V1_UX214_CR0,0,214,317_AL_.jpg">
								<div>Emilia Clarke</div>
								<div>Daenerys Targaryen</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTA2NTI0NjYxMTBeQTJeQWpwZ15BbWU3MDIxMjgyNzY@._V1_UX214_CR0,0,214,317_AL_.jpg">
								<div>Kit Harington</div>
								<div>Jon Snow</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTgyNzE5OTkzMV5BMl5BanBnXkFtZTgwNzM4ODAzMjE@._V1_UY317_CR1,0,214,317_AL_.jpg">
								<div>Sophie Turner</div>
								<div>Sansa Stark</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTkwNDQ3MjY1NV5BMl5BanBnXkFtZTcwMjQzMzEzOQ@@._V1_UY317_CR16,0,214,317_AL_.jpg">
								<div>Maisie Williams</div>
								<div>Arya Stark</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc0MzkzOTk0NF5BMl5BanBnXkFtZTcwNjU5NTgzMQ@@._V1_UX214_CR0,0,214,317_AL_.jpg">
								<div>Nikolaj Coster-Waldau</div>
								<div>Jaime Lannister</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTk2NzU2NjI2MF5BMl5BanBnXkFtZTcwMzI1OTQ3Mw@@._V1_UY317_CR131,0,214,317_AL_.jpg">
								<div>Iain Glen</div>
								<div>Jorah Mormont</div>
							</a>
						</li>
					</ul>
					<div>
						<a href="#" class="see-all">See All...</a>
					</div>
				</section>
			</li>
			<li id="unbreakable-kimmy-schmidt">
				<h1>Unbreakable Kimmy Schmidt</h1>
				<section class="seasons">
					<h2>Seasons</h2>
					<ul>
						<li>2015</li>
						<li>2016</li>
					</ul>
				</section>
				<section class="synopsis">
					<h2>Synopsis</h2>
					<p>After being rescued from an underground bunker in which she lived the past 15 years, Kimmy Schmidt decides to move to New York to have a normal life. She makes friends with her new roommate Titus, and works as a babysitter for Jacqueline Voorhees, the wife of a billionaire with many issues. Even though many obstacles are thrown her way, Kimmy makes the best of her new life while having to adapt to the new world around her.</p>
				</section>
				<section class="cast">
					<h2>Cast</h2>
					<ul>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjIzMDU3NzE4NV5BMl5BanBnXkFtZTcwODQyNTQzNA@@._V1_UY317_CR5,0,214,317_AL_.jpg">
								<div>Ellie Kemper</div>
								<div>Kimmy Schmidt</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxOTQwMzI3Nl5BMl5BanBnXkFtZTgwMjM4NTM1NTE@._V1_UY317_CR12,0,214,317_AL_.jpg">
								<div>Tituss Burgess</div>
								<div>Titus Andromedon</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTc3NDgzMzMwOV5BMl5BanBnXkFtZTYwNjg1NzY0._V1_UY317_CR1,0,214,317_AL_.jpg">
								<div>Carol Kane</div>
								<div>Lillian Kaushtupper</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjIyMTQ5NTI1Ml5BMl5BanBnXkFtZTgwNTU2MDY2NzE@._V1_UY317_CR50,0,214,317_AL_.jpg">
								<div>Jane Krakowski</div>
								<div>Jacqueline White</div>
							</a>
						</li>
					</ul>
					<div>
						<a href="#" class="see-all">See All...</a>
					</div>
				</section>
			</li>
		</ul>
	</section>

	<section class="challenges">
		<h1>Challenges:</h1>
		<p>Make the following design changes <strong>without modifying the html in any way.</strong> <strong>Only modify your own <code>styles.css</code> file.</strong>The challenges are progressively more complicated, but each can be accomplished with a single selector. Some challenges will require multiple properties/value pairs.</p>
		<ol>
			<li>Set the <code>margin-bottom</code> of the <code>header</code> to <code>3rem</code>.</li>
			<li>Set the <code>line-height</code> of all paragraphs to <code>1.6</code>.</li>
			<li>Make the "See All..." links <code>0.8em</code>, and <code>uppercase</code>.</li>
			<li>Make the movie titles <code>2.5rem</code>.</li>
			<li>Make the section-titles <code>1rem</code> and <code>uppercase</code>.</li>
			<li>Make all titles light weight.</li>
			<li>Make the cast images <code>width:100%;</code></li>
			<li>Make each castmember element <code>width:25%;</code></li>
			<li>Add a 1px border above each show — <strong>without unintentionally adding borders elsewhere</strong>.</li>
			<li>Make the navigation tab with the <code>.selected</code> class be bold and black.</li>
			<li>Make the castmember labels <code>0.8rem</code>.</li>
			<li>Make the actor/actress names bold.</li>
			<li>Make the character names italic.</li>
			<li>Add an asterisk (<code>*</code>) to the last year in the <em>Game of Thrones</em> seasons list.</li>
			<li>Add the text <code>"* In production"</code> on the next line after the <em>Game of Thrones</em> season list. Make it <code>0.7rem</code>, and color it to be <code>#999</code>.</li>
		</ol>
	</section> 

</body>
</html>

              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700|Raleway:300,400,700';

html {
	font-family: 'Open Sans', sans-serif;
}

body>section {
	position: fixed;
	top: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 3rem;
	overflow-y: auto;
}

body>section.challenges {
	left:0;
	width: 30%;
}
body>section.content {
	left:30%;
	width: 70%;
}

h1 {
	margin-top: 0;
}

ul {
	margin:0;
	padding-left:0;
}

li {
	display: block;
}

.cast>ul {
	font-size: 0;
	margin: -10px;
	padding: 0;
}

.cast li {
	font-size: 1rem;
	vertical-align: top;
	padding: 10px;
	box-sizing: border-box;
	display: inline-block;
}

.cast li>a {
	display: block;
	/*border: 1px solid #ddd;
	padding: 10px;*/
	color: black;
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Raleway", sans-serif;
}

.seasons li {
	display: inline-block;
}

section.challenges {
	font-size: 12px;
	background-color: #eee;
}

section.challenges h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 2em;
}

section.challenges ol {
	padding-left: 1rem;
}

section.challenges li {
	display: list-item;
	margin: 1em 0;
}

.see-all {
	text-decoration: none;
}



header nav ul {
	font-size: 0;
}

header nav li {
	font-size: 1rem;
	display: inline-block;
	vertical-align: top;
}

header nav a {
	display: block;
	text-decoration: none;
}

header nav li + li  {
	padding-left:1rem;
	margin-left:1rem;
}

p {
	margin: 0.5rem 0;
}

code {
	color: green;
}

h2 {
	margin: 2rem 0 0.5rem 0;
}

#unbreakable-kimmy-schmidt {
	margin-top: 4rem;
	padding-top: 2rem;
}

.shows>li {
	padding-top:2rem;
}

/*------------*/

.content header {
	margin-bottom: 3rem;
}

.content p {
	line-height: 1.6;
}

.see-all {
	font-size: 0.8rem;
	text-transform: uppercase;
}

.content h1 {
	font-size: 2.5rem;
	font-weight: lighter;
	border-top: solid 1px;
} 

.content h2 {
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: lighter;
}

img {
	width: 100%;
}

.cast ul li {
	width: 25%;
}

.selected {
	font-weight: bold;
	color: black;
}

.cast ul li {
	font-size: 0.8rem;
}

.cast ul li a div:nth-child(2) {
    font-weight: bold;
}

.cast ul li a div:nth-child(3) {
    font-style: italic;
}

#game-of-thrones .seasons ul:after {
	content: "*";
}

#game-of-thrones .seasons:after {
	content: "* In production";
	font-size: 0.7rem;
	color: #999;
}

.challenges ol li:nth-child(1) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(2) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(3) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(4) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(5) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(6) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(7) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(8) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(9) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(10) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(11) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(12) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(13) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(14) {
	text-decoration: line-through;
}
.challenges ol li:nth-child(15) {
	text-decoration: line-through;
}




/* header nav ul li {
	list-style: none;
	display: inline-block;
	text-align: center;
	padding: 5px;
}

header nav a[href^="http"] {
	font-weight: bold;
	color: green;
}
header nav a {
	text-decoration: none;
}

header nav a:active {

}

header nav a:visited {

}

header nav a:hover {
	color: red;
}

#game-of-thrones .seasons:after {
	content: "Special text that goes after";
	font-size: 0.9rem;
	color: lightgrey;
} */
              
            
!

JS

              
                
              
            
!
999px

Console