Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <html lang="en">

	<!-- Meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="freeCodeCamp" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <meta name="keywords" content="Tribute page, HTML, CSS">
    <meta name="mobile-web-app-capable" content="yes">
	<title>Tribute Page</title>

	<!-- CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">

	<!-- Font -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet">

	<div class="container-fluid">
		<div class="jumbotron jumbotron-fluid">									
			<div class="container">

					<h1 class="text-center">Jonathan Livingston Seagull</h1>
					<h5 class="text-center"><em>From Wikipedia, the free encyclopedia</em></h5>
					<h4 class="text-center">
						<i>This article is about the book.
					<div class="text-center">
						<a href="https://500px.com/photo/191182411/lines-by-iryna-soltyska">	
	   					<img class="img-fluid" src="https://drscdn.500px.org/photo/191182411/m%3D900/v2?user_id=12405&webp=true&sig=f338efc7972eca5dba6b18e4129257c5cf70738be272320bc71f341c88b257f8" alt="Beach view">				
    					<p class="caption"><a href="https://500px.com/soltyska" class="btn btn-default btn-sm btn-block" target="blank">More Photos</a></p>									
					</div> <!--/.thumbnail -->

					<p class="article">
						Jonathan Livingston Seagull, written by Richard Bach, and illustrated by Russell Munson is a fable in novella form about a seagull who is trying to learn about life and flight, and a homily about self-perfection. It was first published in 1970, by the end of 1972 over a million copies were in print. Reader's Digest published a condensed version, and the book reached the top of the New York Times Best Seller list, where it remained for 38 weeks. In 1972 and 1973, the book topped the Publishers Weekly list of bestselling novels in the United States. In 2014 the book was reissued as Jonathan Livingston Seagull: The Complete Edition, which added a 17-page fourth part to the story.
					<h3 class="text-left">Plot</h3>
					<p class="article">
						The book tells the story of Jonathan Livingston Seagull, a seagull who is bored with daily squabbles over food. Seized by a passion for flight, he pushes himself, learning everything he can about flying, until finally his unwillingness to conform results in his expulsion. An outcast, he continues to learn, becoming increasingly pleased with his abilities as he leads a peaceful and happy life.

						One day, Jonathan met two gulls who took him to a "higher plane of existence" in which there was no heaven but a better world found through perfection of knowledge. There he meets another seagull who loves to fly. He discovers that his sheer tenacity and desire to learn make him "pretty well a one-in-a-million bird." In this new place, Jonathan befriends the wisest gull, Chiang, who takes him beyond his previous learning, teaching him how to move instantaneously to anywhere else in the Universe. The secret, Chiang says, is to "begin by knowing that you have already arrived." Not satisfied with his new life, Jonathan returns to Earth to find others like him, to bring them his learning and to spread his love for flight. His mission is successful, gathering around him others who have been outlawed for not conforming. Ultimately, the very first of his students, Fletcher Lynd Seagull, becomes a teacher in his own right, and Jonathan leaves to teach other flocks.
					<h4 class="text-left"><b>Part one</b></h4>
					<p class="article">
						Part One of the book finds young Jonathan Livingston frustrated with the meaningless materialism, conformity, and limitation of the seagull life. He is seized with a passion for flight of all kinds, and his soul soars as he experiments with exhilarating challenges of daring aerial feats. Eventually, his lack of conformity to the limited seagull life leads him into conflict with his flock, and they turn their backs on him, casting him out of their society and exiling him. Not deterred by this, Jonathan continues his efforts to reach higher and higher flight goals, finding he is often successful but eventually he can fly no higher. He is then met by two radiant, loving seagulls who explain to him that he has learned much, and that they are there now to teach him more.
					<h4 class="text-left"><b>Part two</b></h4>
					<p class="article">
						Jonathan transcends into a society where all the gulls enjoy flying. He is only capable of this after practicing hard alone for a long time and the first learning process of linking the highly experienced teacher and the diligent student is raised into almost sacred levels. They, regardless of the all immense difference, are sharing something of great importance that can bind them together: "You've got to understand that a seagull is an unlimited idea of freedom, an image of the Great Gull." He realizes that you have to be true to yourself: "You have the freedom to be yourself, your true self, here and now, and nothing can stand in your way."
					<h4 class="text-left"><b>Part three</b></h4>
					<p class="article">
						In the third part of the book are the last words of Jonathan's teacher: "Keep working on love." Through his teachings, Jonathan understands that the spirit cannot be really free without the ability to forgive, and that the way to progress leads—for him, at least—through becoming a teacher, not just through working hard as a student. Jonathan returns to the Breakfast Flock to share his newly discovered ideals and the recent tremendous experience, ready for the difficult fight against the current rules of that society. The ability to forgive seems to be a mandatory "passing condition."<a class="link-button" href="https://en.wikipedia.org/wiki/Jonathan_Livingston_Seagull" target="blank"> Read more </a>
					<h4 class="text-left"><b>Part four</b></h4>
					<p class="article">
						In 2013 Richard Bach took up a non-published fourth part of the book which he had written contemporaneously with the original. He edited and polished it and then sent the result to a publisher. Bach reported that it was a near-death experience which had occurred in relation to a nearly fatal plane crash in August 2012, that had inspired him to finish the fourth part of his novella.[1] In February 2014, the 138-page Bach work Illusions II was published as a booklet by Kindle Direct Publishing. It also contains allusions to and insights regarding the same near-death experience. In October 2014, Jonathan Livingston Seagull: The Complete Edition, was reissued and includes part four of the story.

					<h3 class="text-left">In popular culture</h3>
					<h6 class="text-left">Jonathan Livingston Seagull is named after John H. Livingston, a Waco test pilot who died of a heart attack at 76 while test flying an acrobatic home-built Pitts Special.</h6>
						<li>A 1972 parody, Marvin Stanley Pigeon, was published by Thomas Meehan in The New Yorker: "Marvin Stanley Pigeon was no ordinary pigeon. While other pigeons spent their time grubbing for food, Marvin Stanley Pigeon worked away on his book on the window ledge outside the Manuscript Room of the Public Library in Bryant Park. He wanted to get his novel done in time for Macmillan's spring list."</li>
						<li>Hubert Bermont wrote and published another parody, Jonathan Livingston Fliegle, with illustrations drawn by Harold Isen, in 1973. Its content contained many examples of Jewish humor.</li>
						<li>Also in 1973, Price Stern Sloan published Ludwig von Wolfgang Vulture, a Satire by Dolph Sharp, a story about a vulture determined to push the limits on speed-reading.</li>
						<li><a href="https://en.wikipedia.org/wiki/Jonathan_Livingston_Seagull" target="blank"> Read more </a></li>
		    </div> <!--/.container close -->
		    </div> <!--/.jumbotron close -->
		    <footer class="navbar-default navbar-block-bottom">
		    	<div class="text-center">
  					<a href="https://www.freecodecamp.com" target="blank">freeCodeCamp</a> Tribute Page Project by <a href="https://github.com/irsol/freeCodeCamp/tree/master/tribute_page_project" target="blank">Iryna Soltyska</a>
			</footer> <!-- footer -->				
	</div> <!--/.container-fluid close -->	
              * {
  	box-sizing: border-box;

body {
	font-family: 'Lato', sans-serif;
  	padding: 10px 0;
  	font: 300 15px;
  	color: #666756;
  	background: #fff;
  	margin-top: 20px;
  	margin-bottom: 10px;

img {
	width: 800px;

a:visited {
	color: #02b3e4;
  	font-size: 1.2em;

footer.navbar-default.navbar-block-bottom {
	height: 2em;
  	margin-top: 0.5em;
  	padding: 0.3em 0;


.article {
	text-align: justify;
	padding: 0 15px 15px 0;


.img-fluid {
	max-width: 100%;
	height: auto;

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.