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 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

              
                <link href="https://fonts.googleapis.com/css?family=Cormorant+SC|Special+Elite" rel="stylesheet">
	<div class="container">
		<div class="jumbotron">
			<h1 class="text-center">A Tribute to John Muir</h1>
			<h3 class="text-center">A naturalist, author, environmental philosopher and early advocate of preservation of wilderness in the United States</h3>
			<div class="row">
				<img id="image1" class="img-responsive center-block img-thumbnail main-image" src="https://upload.wikimedia.org/wikipedia/commons/9/92/John_Muir_c1902.jpg" alt="John Muir sitting on rock.">
				<img id="image2" class="img-responsive center-block img-thumbnail main-image" src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Muir_and_Roosevelt_restored.jpg" alt="John Muir and Teddy Rosevelt">
				<img id="image4" class="img-responsive center-block img-thumbnail main-image" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/John_Muir_Cane.JPG" alt="John Muir sitting.">
				<div id="quote1" class="quote text-center">The mountains are calling and I must go.<br>- John Muir</div>
				<div id="quote3" class="quote3 text-center">The power of imagination makes us infinite.<br>- John Muir</div>
			</div>
		<div id="push" class="row thumbnail">

			<!-- Nav tabs -->
      <ul class="nav nav-tabs nav-justified" role="tablist">
        <li role="presentation" class="active"><a href="#facts" aria-controls="facts" role="tab" data-toggle="tab">Quick Facts</a></li>
        <li role="presentation"><a href="#bibliography" aria-controls="bibliography" role="tab" data-toggle="tab">Bibliography</a></li>
        <li role="presentation"><a href="#chronology" aria-controls="chronology" role="tab" data-toggle="tab">Chronology</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="facts">
					<ul><b>Born:</b> April 21, 1838 in Dunbar, East Lothian, Scotland</ul>
					<ul><b>Died:</b> December 24, 1914 (aged 76), in Los Angeles, California</ul>
					<ul><b>Cause of death:</b> Pneumonia</ul>
					<ul><b>Occupation:</b> Engineer, naturalist, philosopher, writer, botanist, geologist</ul>
					<ul><b>Known for:</b> Founder of Sierra Club</ul>
					<ul><b>Spouse(s):</b> Louisa Wanda Strentzel (1847–1905) (m. 1880–1905)</ul>
					<ul><b>Children:</b>	Wanda Muir Hanna, and Helen Muir Funk</ul>
					<ul><b>Parent(s):</b>	Daniel Muir and Ann Gilrye</ul>
        </div>

				<div role="tabpanel" class="tab-pane" id='bibliography'>
					<ul><b><i>John Muir</i></b>, Spiritual Writings</ul>
					<ul><b><i>Studies in the Sierra</i></b>, (1950 reprint of serials from 1874)</ul>
					<ul><b><i>Picturesque California</i></b>, 1888</ul>
					<ul><b><i>The Mountains of California</i></b>, New York: Century, 1894.</ul>
					<ul><b><i>Stickeen: An Adventure with a Dog and a Glacier</i></b>, (1897)</ul>
					<ul><b><i>Our National Parks</i></b>, Boston: Houghton, Mifflin, 1901.</ul>
					<ul><b><i>My First Summer in the Sierra</i></b>, Boston: Houghton Mifflin, 1911.</ul>
					<ul><b><i>Edward Henry Harriman</i></b>, Garden City, N.Y.: Doubleday, Page, 1911.</ul>
					<ul><b><i>The Yosemite</i></b>, New York: Century, 1912.</ul>
					<ul><b><i>The Story of My Boyhood and Youth</i></b>, Boston: Houghton Mifflin, 1913.</ul>
					<ul><b><i>Travels in Alaska</i></b>, Boston: Houghton Mifflin, 1915.</ul>
					<ul><b><i>Letters to a Friend</i></b>, Boston: Houghton Mifflin, 1915.</ul>
					<ul><b><i>A Thousand-mile Walk to the Gulf</i></b>, Boston: Houghton Mifflin, 1916.</ul>
					<ul><b><i>The Cruise of the Corwin, Boston: Houghton Mifflin</i></b>, 1917.</ul>
					<ul><b><i>Steep Trails</i></b>, Boston: Houghton, 1918.</ul>
        </div>
				
        <div role="tabpanel" class="tab-pane" id="chronology">
					<ul><b>Born</b> - April 21, 1838</ul>
					<ul><b>Immigrated to the United States</b> - 1849</ul>
					<ul><b>Enrolled in University of Wisconsin-Madison</b> - 1860</ul>
					<ul><b>Left Wisconsin to explore Canadian wilderness</b> - 1864</ul>
					<ul><b>Undertook 1,000 mile walk from Kentucky to Florida</b> - 1867</ul>
					<ul><b>Traveled to Cuba</b> - 1868</ul>
					<ul><b>Moved to San Francisco, California</b> - 1868</ul>
					<ul><b>Moved to Yosemite, California</b> - 1868</ul>
					<ul><b>Offered teaching position at Harvard, declines</b> - 1871</ul>
					<ul><b>Discovers active glacier below Merced peak</b> - 1871</ul>
					<ul><b>Experiences Lone Pine earthquake</b> - 1872</ul>
					<ul><b>Travels to Alaska</b> - 1879</ul>
					<ul><b>Gets married</b> - 1880</ul>
					<ul><b>Co-founds the Sierra Club</b> - 1892</ul>
					<ul><b>Accompanies President Theodore Roosevelt to Yosemite</b> - 1903</ul>
					<ul><b>Dies of pneumonia</b> - December 24, 1914</ul>
        </div>
      </div>

    </div>
		<div class="text-center end-text">For more detailed information on John Muir visit his <a href="https://en.wikipedia.org/wiki/John_Muir" target="_blank">Wikipedia</a> page.</div>
		<div class="text-center end-text">Site created by <a href="https://codepen.io/JoJa15/" target="_blank">John O'Keefe</a>.</div>
		</div>
	</div>
</div>


              
            
!

CSS

              
                body {
	margin-top: 10px;
}

h1 {
	font-family: 'Cormorant SC', serif;
	font-size: 60px;
}

h3 {
	font-family: 'Cormorant SC', serif;
	font-size: 25px;
}

#push {
	margin-top: 84%;
}

.end-text {
	font-family: 'Cormorant SC', serif;
	font-size: 20px;
}

.quote {
	margin-top: 30%;
/* 	font-family: 'Permanent Marker', cursive; */
	font-family: 'Cormorant SC', serif;
	font-size: 32px;
}

.quote3 {
	margin-top: -13%;
/* 	font-family: 'Permanent Marker', cursive; */
	font-family: 'Cormorant SC', serif;
	font-size: 32px;
}

#quote1, #quote2 {
	animation-duration: 30s;	
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;	
	animation-name: quote1;
}

#quote3, #quote4 {
	animation-duration: 30s;	
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;	
	animation-name: quote2;
}

.tab-pane {
	font-family: 'Special Elite', cursive;
	padding: 20px;
}

.main-image {
	animation-duration: 30s;	
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
	position: absolute;
}

#image1 {
	animation-name: image1;
	z-index: 1;
	width: 38%;
/* 	height: 50%; */
	left: 31%;
}

#image2 {
	animation-name: image2;
	z-index: 2;
	width: 40%;
/* 	height: 50%; */
	left: 30%;
}

#image4 {
	animation-name: image4;
	z-index: 3;
	width: 34%;
/* 	height: 50%; */
	left: 33%;
}

@keyframes image1 {
	0% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	8% {
    opacity: 1.0;
		filter: blur(0px);
  }	
	
	17% {
    opacity: 1.0;
		filter: blur(0px);
  }
	
	25% {
    opacity: 0.0;
		filter: blur(5px);
  }

	33% {
    opacity: 0.0;

  }
	
	42% {
    opacity: 0.0;
  }

	50% {
    opacity: 0.0;
  }	

	58% {
    opacity: 0.0;
  }	

	67% {
    opacity: 0.0;
  }	

	75% {
    opacity: 0.0;
  }	
	
	83% {
    opacity: 0.0;
  }

	92% {
    opacity: 0.0;
  }

	100% {
    opacity: 0.0;
  }

}

@keyframes quote1 {
	0% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	8% {
    opacity: 0.0;
		filter: blur(5px);
  }	
	
	17% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	25% {
    opacity: 1.0;
		filter: blur(0px);
  }

	33% {
    opacity: 1.0;
		filter: blur(0px);
  }
	
	42% {
    opacity: 0.0;
		filter: blur(5px);
  }

	50% {
    opacity: 0.0;
  }	

	58% {
    opacity: 0.0;
  }	

	67% {
    opacity: 0.0;
  }	

	75% {
    opacity: 0.0;
  }	
	
	83% {
    opacity: 0.0;
  }

	92% {
    opacity: 0.0;
  }

	100% {
    opacity: 0.0;
  }
}

@keyframes image2 {
	0% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	8% {
    opacity: 0.0;
		filter: blur(5px);
  }	
	
	17% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	25% {
    opacity: 0.0;
		filter: blur(5px);
  }

	33% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	42% {
    opacity: 1.0;
		filter: blur(0px);
  }

	50% {
    opacity: 1.0;
		filter: blur(0px);
  }	

	58% {
    opacity: 0.0;
		filter: blur(5px);
  }	

	67% {
    opacity: 0.0;
  }	

	75% {
    opacity: 0.0;
  }	
	
	83% {
    opacity: 0.0;
  }

	92% {
    opacity: 0.0;
  }

	100% {
    opacity: 0.0;
  }
}

@keyframes quote2 {
	0% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	8% {
    opacity: 0.0;
		filter: blur(5px);
  }	
	
	17% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	25% {
    opacity: 0.0;
		filter: blur(5px);
  }

	33% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	42% {
    opacity: 0.0;
		filter: blur(5px);
  }

	50% {
    opacity: 0.0;
		filter: blur(5px);
  }	

	58% {
    opacity: 1.0;
		filter: blur(0px);
  }	

	67% {
    opacity: 1.0;
		filter: blur(0px);
  }	

	75% {
    opacity: 0.0;
		filter: blur(5px);
  }	
	
	83% {
    opacity: 0.0;
  }

	92% {
    opacity: 0.0;
  }

	100% {
    opacity: 0.0;
  }
}

@keyframes image4 {
	0% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	8% {
    opacity: 0.0;
		filter: blur(5px);
  }	
	
	17% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	25% {
    opacity: 0.0;
		filter: blur(5px);
  }

	33% {
    opacity: 0.0;
		filter: blur(5px);
  }
	
	42% {
    opacity: 0.0;
		filter: blur(5px);
  }

	50% {
    opacity: 0.0;
		filter: blur(5px);
  }	

	58% {
    opacity: 0.0;
		filter: blur(5px);
  }	

	67% {
    opacity: 0.0;
		filter: blur(5px);
  }	

	75% {
    opacity: 1.0;
		filter: blur(0px);
  }	
	
	83% {
    opacity: 1.0;
		filter: blur(0px);
  }

	92% {
    opacity: 0.0;
		filter: blur(5px);
  }

	100% {
    opacity: 0.0;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console