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

              
                <html>
<head>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Federo|Calligraffitti|Raleway" type="text/css">
	<link rel="stylesheet" href="butler.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<title>Octavia E. Butler Tribute Page</title>
</head>
<body class="body-bg">
	<div class="container-fluid">
		<div class="well well-page">
			<div class="row">
				<div class="col-md-12">
					<h3 class="heading bg-primary">writers to know</h3>
				    <h1 class="main-title text-primary">Octavia E. Butler</h1>
				    <h2 class="sub-title text-primary">| science fiction |</h2>
				    <div class="row">
						<img class="img-responsive center-block img-border" src="http://aerogrammestudio.com/wp-content/uploads/2013/11/Octavia-Butler.jpg" alt="Octavia E. Butler"></img>
						<p class="small photo-credit">Photo: Joshua Trujillo/Seattle Post-Intelligencer</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="well well-facts"> 
					<h1 class="body-header text-info">Top 3 Facts</h1>
					<ol>
					<li>In 1995, Octavia Butler was the first science fiction writer to be awarded a "Genius Grant" from the MacArthur Foundation. She also received two Hugo Awards from the World Science Fiction Society and two Nebula Awards from the Science Fiction Writers of America.</li>
					<li>Translated into 10 languages, her books have sold more than a million copies worldwide.</li>
					<li>At 6 feet tall by age 15, Butler grew up paralytically shy, and often lost herself in books despite having dyslexia. She began writing stories as a child and soon turned to science fiction, attracted by a genre whose limitless possibilities let her imagine absolutely anything.</li>
					</ol>
				</div>
			</div>
			<div class="row">
				<h1 class="body-header text-info body-header-well">Books to Get Started</h1>
				<div class="row">
					<div class="col-md-4">
						<div class="well">
							<p><span class="book-title">Kindred</span></p> 
							<p class="book-summary">Having just celebrated her 26th birthday in 1976 California, Dana, an African-American woman, is suddenly and inexplicably wrenched through time into antebellum Maryland. During numerous time-defying episodes with the same young white man, she realizes the challenge she's been given: to protect this young slaveholder until he can father her own great-grandmother. This combination of slave memoir, fantasy, and historical fiction is a novel of rich literary complexity.</p>
							<a href="https://www.goodreads.com/book/show/60931.Kindred" alt="Kindred on Goodreads" target="_blank"><img class="img-responsive center-block" src="https://images.gr-assets.com/books/1339423248l/60931.jpg" alt="Kindred on Goodreads"></a>
						</div>
					</div>
					<div class="col-md-4">
						<div class="well">
							<p><span class="book-title">Dawn (Xenogenesis Book #1)</span></p> 
							<p class="book-summary">Lilith Iyapo has just lost her husband and son when atomic fire consumes Earth - the last stage of the planet's final war. Hundreds of years later Lilith awakes, deep in the hold of a massive spacecraft piloted by Oankali aliens. Now it is time for Lilith to lead them back to her home world, but life among the Oankali on the newly resettled planet will be nothing like it was before.</p>
							<a href="https://www.goodreads.com/book/show/60929.Dawn" alt="Dawn on Goodreads" target="_blank"><img class="img-responsive center-block" src="https://images.gr-assets.com/books/1353948203l/16097463.jpg" alt="Dawn on Goodreads"></a>
						</div>
					</div>
					<div class="col-md-4">
						<div class="well">
							<p><span class="book-title">Fledgling</span></p> 
							<p class="book-summary">The story of an apparently young, amnesiac girl whose alarmingly inhuman needs and abilities lead her to a startling conclusion: She is in fact a genetically modified, 53-year-old vampire. Forced to discover what she can about her stolen former life, she must at the same time learn who wanted - and still wants - to destroy her and those she cares for and how she can save herself. Fledgling is a captivating novel that tests the limits of "otherness" and questions what it means to be truly human. </p>
							<a href="https://www.goodreads.com/book/show/60925.Fledgling" alt="Fledgling on Goodreads" target="_blank"><img class="img-responsive center-block" src="https://images.gr-assets.com/books/1441479816l/60925.jpg" alt="Fledgling on Goodreads"></a>
						</div>
					</div>
				</div>
			</div>
			<h3 class="heading bg-primary"><a class="primary-link" href="https://en.wikipedia.org/wiki/Octavia_E._Butler" target="_blank">Click here</a> to learn more about the life and books of Octavia E. Butler</h3>
		</div>
	</div>
</body>
</html>
              
            
!

CSS

              
                .body-bg {
	background-color: #337AB7;
}

.well-page {
	margin: 3% 7% 5% 7%;
}

.heading {
  font-family: calligraffitti, monospace;
  text-align: center;
  margin-bottom: -10px;
  padding: 15px;
}

.main-title {
  font-family: federo, serif;
  text-align: center;
  text-shadow: 4px 4px 4px #aaa;
}

.sub-title {
	font-family: federo, serif;
	font-size: 20px;
	text-align: center;
	margin-bottom: 30px;
}

.body-header {
  font-family: federo, serif;
  text-align: center;
  font-size: 26px;
}

.body-header-well {
	margin-top: 60px;
	margin-bottom: 30px;
}

.img-border {
	border-radius: 15px;
	border-width: 2px;
	border-color: #337AB7;
	border-style: double;
}

.photo-credit {
	text-align: center;
	margin-bottom: 50px;
}

.well-facts {
	margin-left: 5%;
	margin-right: 5%;
  padding:0;
}

.book-title {
	font-family: federo, serif;
	font-size: : 24px;
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
}

.book-summary {
	margin-bottom: 2em;
	text-align: justify;
}

.primary-link {
	color: white;
	text-decoration: underline;
}

li {
	margin-bottom: 2em;
	font-family: raleway, sans-serif;
	font-size: 16px;
}

p {
	font-family: raleway, sans-serif;
}
              
            
!

JS

              
                
              
            
!
999px

Console