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>
<meta charset="UTF-8">
<meta name="description" content="Tribute page created as an exercise for the Free Code Camp.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S. M. Prokudin-Gorskii – Photographer to the Tsar</title>
  
</head>

<body>
    <header>
        <h1>Sergei <nobr>Prokudin-Gorskii</nobr></h1>
        <h2>PHOTOGRAPHER TO THE TSAR</h2>
    </header>
    <article>
        <p id="first-p"><img src="http://www.studio.gridenko.com/fcc/img/pg-portrait.jpg" alt="S. M. Prokudin-Gorskii">The photographs of <em>Sergei Mikhailovich Prokudin-Gorskii (1863-1944)</em> offer a vivid portrait of a lost world – the Russian Empire on the eve of World War I and the coming revolution.</p>
        <p> Born in St. Petersburg and educated as a chemist, Prokudin-Gorskii devoted his career to the advancement of photography. In the early 1900s, he developed an ingenious technique of taking colour photographs. The same object was captured in black and white on glass plate negatives, using red, green and blue filters. He then presented these images in colour in slide lectures using a light-projection system.  </p>
        <p>Supported by Tsar Nicholas II, between 1909 and 1915, Prokudin-Gorskii completed surveys of eleven regions of Russia, traveling in a specially equipped railroad car. His subjects ranged from the medieval churches and monasteries, to the railroads and factories of an emerging industrial power, to the daily life and work of Russia's diverse population.  </p>
        <p>In 1918, after the revolution, Prokudin-Gorskii went into exile, taking with him only his collection of nearly 2,000 glass-plate negatives and his photograph albums. The collection was purchased by the Library of Congress (LOC) in 1948 from his heirs.  </p>
        <p>In 2001, the number of glass plates have been scanned and, through an innovative process known as digichromatography, brilliant colour images have been produced. Virtual exhibition <em>The Empire that Was Russia</em> attracted millions of people throughout the world. </p>
        <p>When I first saw Prokudin-Gorskii’s photographs, I was so amazed and fascinated that immediately decided to try digichromatography myself. I have downloaded and restored 156 images that you can see on my website. Because of many years of negligent storage, most of the negatives are in very poor condition, and it takes me hours of scrupulous work to restore their original brilliance. Hundreds of unique colour images of the past are still waiting to be returned back to life.</p>
        
        <h2>LINKS </h2>
        <nav>
            <ul>
              <li><a href="https://en.wikipedia.org/wiki/Sergey_Prokudin-Gorsky" target="_blank">Prokudin-Gorskii on Wikipedia</a></li>
              <li><a href="http://www.loc.gov/exhibits/empire/index.html" target="_blank">Full Prokudin-Gorskii Photo Collection in the Library of Congress</a></li>
              <li><a href="http://www.gridenko.com/pg" target="_blank">My Restorations</a></li>
            </ul>
        </nav>
    </article>
    <footer>
        <p>Written and coded by <a href="https://www.freecodecamp.com/alex-virt" target="_blank">Alex Gridenko</a></p>
    </footer>
</body>
</html>
  
              
            
!

CSS

              
                /*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

html {
	background: #939393;
}

body {
	width: 80%;
	margin: 0 auto;
	min-width: 600px;
	max-width: 1280px;
	background: white;
	border: 1px solid #d2b785;
	margin-bottom:25px;
}

header {
	height:420px;
	border-bottom: 5px solid #d2b785;
	background-image: url(http://www.studio.gridenko.com/fcc/img/tribute-banner.jpg);
	background-position:left;
	background-repeat:no-repeat;
	text-align:center;
}

header h1 {
	font: 320% Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #7f223a;
	font-weight:normal;
	padding: 1em 4% 0 4%;
}

header h2 {
	font: 120% Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight:normal;
	color: black;
	padding: 1em 4% 0 4%;
	text-transform:uppercase;
	letter-spacing:.2em;
}

article {
	font: 120% Georgia, "Times New Roman", Times, serif;
	line-height: 1.5;
	color: #333;
	font-weight:normal;
	font-style:normal;
	text-align:justify;
	padding:4%;
}

article p {
	margin-bottom: .5em;
}

em {
	font-style: italic;
}

#first-p::first-letter {
	font-size: 4em;
	float:left;
	padding: 0 5px 0 0;
	line-height:1;
	color: #7f223a;
}

article img {
	width: 30%;
	max-width:320px;
	float:right;
	margin: 0 0 1em 1em;	
}

article h2 {
	font: 120% Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight:bold;
	text-align:center;
	padding-bottom: .5em;
}

article nav {
	font: 100% Arial, Helvetica, sans-serif;
	font-style: normal;
	text-align:center;
	
}

article nav li {
	list-style:none;
	padding-top: .5em;
}

footer {
	height: 5%;
	background-color:#d2b785;
	text-align:center;
}

footer p {
	font: 90% Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight:normal;
	color: white;
	padding: 1%;
}

a {
	text-decoration:none;
	color: #30698f;
}

a:visited {
	color: #7f223a;
}

a:hover {
	text-decoration: underline;
	
}

              
            
!

JS

              
                
              
            
!
999px

Console