Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<header>
	<h1>Land <span>of the</span> Lost</h1>
	<img src="mountain-range-front.png">
</header>
<main>
  <p>From this point he marched two stages—ten parasangs—to the river Psarus, which is two hundred feet broad, and from the Psarus he marched a single stage—five parasangs—to Issi, the last city in Cilicia. It lies on the seaboard—a prosperous, large and flourishing town. Here they halted three days, and here Cyrus was joined by his fleet. There were thirty-five ships from Peloponnesus, with the Lacedaemonian admiral Pythagoras on board. These had been piloted from Ephesus by Tamos the Egyptian, who himself had another fleet of twenty-five ships belonging to Cyrus. These had formed Tamos's blockading squadron at Miletus, when that city sided with Tissaphernes; he had also used them in other military services rendered to Cyrus in his operations against that satrap. There was a third officer on board the fleet, the Lacedaemonian Cheirisophus, who had been sent for by Cyrus, and had brought with him seven hundred hoplites, over whom he was to act as general in the service of Cyrus. The fleet lay at anchor opposite Cyrus's tent. Here too another reinforcement presented itself. This was a body of four hundred hoplites, Hellenic mercenaries in the service of Abrocomas, who deserted him for Cyrus, and joined in the campaign against the king.</p>
  <p>From Issi, he marched a single stage—five parasangs—to the gates of Cilicia and Syria. This was a double fortress: the inner and nearer one, which protects Cilicia, was held by Syennesis and a garrison of Cilicians; the outer and further one, protecting Syria, was reported to be garrisoned by a body of the king's troops. Through the gap between the two fortresses flows a river named the Carsus, which is a hundred feet broad, and the whole space between was scarcely more than six hundred yards. To force a passage here would be impossible, so narrow was the pass itself, with the fortification walls stretching down to the sea, and precipitous rocks above; while both fortresses were furnished with gates. It was the existence of this pass which had induced Cyrus to send for the fleet, so as to enable him to lead a body of hoplites inside and outside the gates; and so to force a passage through the enemy, if he were guarding the Syrian gate, as he fully expected to find Abrocomas doing with a large army. This, however, Abrocomas had not done; but as soon as he learnt that Cyrus was in Cilicia, he had turned round and made his exit from Phoenicia, to join the king with an army amounting, as report said, to three hundred thousand men.</p>
  <p>From this point Cyrus pursued his march, through Syria a single stage—five parasangs—to Myriandus, a city inhabited by Phoenicians, on the sea-coast. This was a commercial port, and numerous merchant vessels were riding at anchor in the harbour. Here they halted seven days, and here Xenias the Arcadian general, and Pasion the Megarian got on board a trader, and having stowed away their most valuable effects, set sail for home; most people explained the act as the outcome of a fit of jealousy, because Cyrus had allowed Clearchus to retain their men, who had deserted to him, in hopes of returning to Hellas instead of marching against the king; when the two had so vanished, a rumour spread that Cyrus was after them with some ships of war, and some hoped the cowards might be caught, others pitied them, if that should be their fate.</p>
</main>
              
            
!

CSS

              
                @font-face {
		font-family: 'Sucrose Bold Two';
		src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sucrose.woff2') format('woff2');
		}
@font-face {
    font-family: 'IM Fell French Canon Pro';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/im-fell-french-canon-pro.woff2') format('woff2');
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header { 
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mountain-range.jpg) no-repeat;
	padding-top: 61.93333333%;
	background-size: cover;
  font-family: 'Sucrose Bold Two';
}
header img {
	position: absolute;
	top: 0;
	right: 0;
	width: 45.8%;
}
header h1 { 
	position: fixed;
	top: 2rem;
	right: 2rem;
  font-size: 12vw;
  line-height: .8;
  margin-top: 0;
  text-align: center;
}
header h1 span {
  display: block;
  font-size: 8.75vw;
}
main { 
  background: #fff;
  position: relative;
  border: 1px solid #fff;
  font-family: 'IM Fell French Canon Pro';
  font-size: 1.4rem;
  padding: 2rem 25%;
  line-height: 1.6;
}
@media all and (max-width: 400px) {
  main { padding: 2rem; }
}
              
            
!

JS

              
                
              
            
!
999px

Console