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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <html lang='en'>
<head>
	<title>Aphra Behn</title>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="Behn.css">
</head>

<body>
<div class='fluid-container'>	
<div id='Entrance'>
	<img src='https://upload.wikimedia.org/wikipedia/commons/2/23/Aphra_Behn_by_Mary_Beale_2.jpg'>
	<div id='Top'></div>
	<div id='Bottom'></div>
	<h1>Aphra Behn</h1>
	<h2>Citizen, Playwright, Spy</h2>
</div>

<div id='Content'>
<div id='Know1' class='Know'>
	<h4>Did you know?</h4>
	<p2>Aphra Behn is considered to be <br>the first prominent female playwright. <br>Her first play was produced in 1670 in the court of Charles II.</p2>
</div>

<div id='Introduction' class='Paragraph'>
	<p>
		Aphra Behn, who went by the psuedonym Astrea, was the first woman to earn her living by writing plays. She served as a scribe in the British court, and wrote six plays that can still be read today. An outspoken advocate of the Tudor line, her later works often provoked dangerous criticism from those in power.
	</p>
</div>

<div id='Background' class='Paragraph'>
	<div id='Title'>
	<h3>Background</h3>
	</div>
	<p>Little is known about Aphra Behn's early life, although much speculation persists. She was born during the English Civil War, a period of great upheavel in her country, but her parents, siblings, and upbringing are largely a mystery. Much of the mystery comes from Behn herself, who took great care to obscure her past and private life. She claims to have been widowed during the Civil War, but it has been suggested that this information is also false, an attempt to give herself legitimacy during her time period while also remaining independent.
	</p>

	<p>Aphra Behn served in the court of Charles II, who had recently been restored to power before the Second Anglo-Dutch War. Far from being an ornament at court, however, Behn was recruited to act as a spy for the monarchy.<p>
  
	<p>Her mission involved traveling to the plague-swept Netherlands in the attempt to turn James Scot, a former British citizen whose father had been exiled, into a double-agent for the Britsh Crown. Although Scot seemed ready to work with the monarchy in exchange for returning to England, he is believed to have betrayed Behn, who was forced to flee home.</p>
</div>

<div id='Know2' class='Know'>
	<h4>Did you know?</h4>
	<p>Although the records of the <br>time are unreliaible, many believe <br>that Aphra Behn was never paid <br>for her time as a spy, having to return<br> penniless to Englind after being<br> thrown into prison for her debts.</p>
</div>

<div id='Career' class='Paragraph'>
	<h3>Career</h3>
	<p>Receiving little, if any, financial support from Charles II for her efforts, Behn returned home penniless. After being briefly imprisoned as a debtor, she returned to the royal court as a scribe in order to pay off her debts.<p>
  
	<p>During this time, the national theaters that had been closed under the previous monarch's rule were being re-opened. Aphra Behn's first play, <em>The Forc'd Marriage</em>, opened in 1670.</p>

	<p>Aphra Behn is most remembered for her contributions as a playwright in a time when it was considered inappropriate for women to serve as writers. She wrote at least nineteen plays that were produced, as well as penning poetry and translations. Although her personal life is obscured in mystery, her legacy as a writer and pioneer paved the way for all of the female writers that came after her.</p>
</div>

<div id='Plays'>
	<h3>Stageplays</h3>
	<ul>
		<li>The Forc'd Marriage, 1670</li>
  		<li>The Amorous Prince, 1671</li>
  		<li>The Dutch Lover, 1673</li>
  		<li>Abdelazer, 1676</li>
  		<li>The Town Foop, 1676</li>
  		<li>The Rover, Part I and II, 1677</li>
  		<li>Sir Patient Fancy, 1678</li>
  		<li>The Feigned Courtesans, 1679</li>
  		<li>The Young King, 1679</li>
  		<li>The False Count, 1681</li>
  		<li>The Roundheads, 1681</li>
  		<li>The City Heiress, 1682</li>
  		<li>Like Father, Like Son, 1682</li>
  		<li>The Sabine War, 1682</li>
  		<li>The Lucky Chance, 1686</li>
  		<li>The Emporer of the Moon, 1687</li>
	</ul>
</div>
</div>


<div id='Closer'>
	You can read Aphra Behn's most famous works <a href='https://archive.org/stream/worksofaphrbehn01behnuoft/worksofaphrbehn01behnuoft_djvu.txt'>here.
</div>
<div id='Top'></div>
 </div>

</body>
</html>
              
            
!

CSS

              
                
body{background:white;	
}

h1{
	text-align: left;
	font-style: italic;
	font-family: 'Papyrus';
	margin-left:100px;
	float:left;
	margin-top:-65px;
	font-size: 60px;
}

h2{
	text-align: right;
	font-family: 'Copperplate';
	font-size:40px;
	float:right;
	margin-right:100px;
	margin-top:-40px;
}

#Entrance {
	position:relative;
}

#Top{
	border:40px solid blue;
	}

#Bottom{
	border:20px solid #d3046b;
	}

img{
	border:10px solid blue;
	border-radius:50%;
	margin:auto;
	display:block;
	position:absolute;
	left:0;
	right:0;
	height:190px;
	width:170px;
}

#Introduction{
	padding-top:100px;
}

.Know {
	border: 10px outset blue;
	width: 250px;
	height:200px;
	padding: 20px;
	margin: 30px;
	background:pink;
}

#Know1{
	float:left;
	clear:left;
}

#Know2{
	float:right;
	margin-top:85px;
}

#Content{
	padding-top:20px;
}

#Title{
	text-align:right;
}

h4{
	font-family:'Brush Script Std';
	text-align: center;
	font-size: 30px;
	margin-top:-5px;
}

h3{
	text-align: left;
	font-size: 30px;
	background:#d3046b;
	color:white;
}

#Career{
	margin-top:30px;
}

p{
	width:1300px;
}

#Closer{
	border:10px solid #d3046b;
	background:#d3046b;
	color:white;
	text-align: center;
	font-size: 20px;
}
              
            
!

JS

              
                
              
            
!
999px

Console