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.

              		<div class="container">
			<div class="jumbotron mt-5">
				<div class="row">
					<div class="col col-xs-12">
						<!-- Headings --> 
						<h1 class="text-center">Yuri Gagarin</h1>
						<h2 class="text-center"><em>The first man in the space</em></h2>
						<!-- Photo -->
						<div class="text-center mt-4">
							<img src="" alt="Yuri Gagarin" class="img-fluid rounded img-thumbnail border border-secondary">
							<p class="figure-caption text-center text-dark font-weight-bold">
								Yuri Gagarin in the spacecraft
						<!-- Life story -->	
						<div class="col-xs-12 col-sm-10 col-md-8 offset-sm-1 offset-md-2">
							<h4>Facts about our Hero:</h4>
									<li>Yuri Gagarin <strong>was born</strong> on the 9th of March 1934 in the village of Klushino, near Gzhatsk. He was the third child. Except him, his parents had two sons - Valentin and Boris - and doughter Zoya.</li>
									<li>In 1946, the family moved to Gzhatsk, where Gagarin <strong>continued his secondary education</strong>.</li>
									<li>At age 16 in 1950, Gagarin <strong>entered into an apprenticeship as a foundryman</strong> at the Lyubertsy Steel Plant near Moscow and also enrolled at a local "young workers" school for seventh grade evening classes.</li>
									<li>After graduating in 1951 from both the seventh grade and the vocational school with honours in moldmaking and foundry-work, Gagarin was selected for <strong>further training at the Saratov Industrial Technical School</strong>, where he studied tractors. While in Saratov, Gagarin volunteered for weekend training as a Soviet <strong>air cadet</strong> at a local flying club, where he learned to fly - at first in a biplane and later in a Yak-18 trainer.</li>
									<li>Gagarin was sent to the First Chkalov Air Force Pilot's School in Orenburg and soloed in a MiG-15 in 1957. He became a Lieutenant in the Soviet Air Forces on 5 November 1957; on 6 November 1959 he received the rank of <strong>Senior Lieutenant</strong>.</li>
									<li>In 1960, Gagarin was chosen with 19 other pilots for the <strong>Soviet space program</strong>. Gagarin and other prospective candidates were subjected to experiments designed to test physical and psychological endurance; he also underwent training for the upcoming flight.</li>
									<li>Twenty people were selected, and Gagarin and Gherman Titov were the final choices <strong>for the first launch</strong>. The two candidates were chosen for their good performance during training sessions in addition to their diminutive physical characteristics — space was limited in the small Vostok cockpit, and both men were rather short.</li>
									<li>On 12 April 1961, the Vostok 3KA-3 (Vostok 1) spacecraft with Gagarin aboard was launched from Baikonur Cosmodrome. Gagarin thus became both the <strong>first human to travel into space</strong>, and the first to orbit the Earth.</li>
									<li>Gagarin's informal <strong>"Poyekhali!"</strong> ("Let's go!") became a historical phrase in the Eastern Bloc, used to refer to the beginning of the Space Age in human history.</li>
									<li>Gagarin became a national hero of the Soviet Union and Eastern Bloc, and a worldwide celebrity.</li>
									<li>On 27 March 1968, Gagarin, then 34 years old, and flight instructor Vladimir Seryogin were on a routine training flight out of Chkalovsky Air Base when they <strong>were killed in the crash of a MiG-15UTI aircraft </strong>near the town of Kirzhach. The bodies of Gagarin and Seryogin were cremated, and the ashes were interred in the walls of the Kremlin on Red Square.</li>
							<blockquote class="blockquote text-center">
								<p>"The feeling of weightlessness was somewhat unfamiliar compared with Earth conditions. Here, you feel as if you were hanging in a horizontal position in straps. You feel as if you are suspended."</p>
							<footer class="blockquote-footer text-center">Gagarin recalled his experience of spaceflight, having been the first human in space.</footer>
						<!-- Link -->
						<div class="text-center mt-5">
							<h5>Read more about this great man who started a Space Age in human history at <a href="" target="_blank" class="text-info">his page in Wikipedia</a>.</h5>
				<footer class="text-center text-white">
				Written and coded by <a href="" target="_blank">Marina Shakarova</a>
              body {
	background-image: url("");

.jumbotron {
	background-color: rgba(255,255,255, 0.9) !important;
🕑 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.