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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Jose Raul Capablanca</title>
</head>
<body>
	<div id="main">
	    <h1 id="title">Jose Raul Capablanca</h1>
	    <p>World Chess Champion - a chess prodigy, he is considered as one of the greatest players of all time.</p>
	    <div id="img-div">
		    <img id="image" src="https://images2.imgbox.com/a5/4b/XDN2MCD5_o.png" alt="Jose Raul Capablanca">
		    <div id="img-caption">Jose Raul Capablanca in 1919</div>
        </div>
        <div id="tribute-info">
        	<h3 id="headline">Here's a time line of Jose Raul Capablanca's life:</h3>
        	<ul>
        		<li><strong>1888</strong> - Born in Havana, Cuba</li>
        		<li><strong>1908</strong> - He left the university to concentrate on chess.</li>
        		<li><strong>1911</strong> - Capablanca challenged Emanuel Lasker for the World Chess Championship.</li>
        		<li><strong>1913</strong> - Capablanca accepted a job in the Cuban Foreign Office.</li>
        		<li><strong>1920</strong> - Emanuel Lasker and Capablanca signed an agreement to play a World Championship match.</li>
        		<li><strong>1921</strong> - Capablanca won his match against Lasker after fourteen games, having won four games.</li>
        		<li><strong>1921</strong> - In December, shortly after becoming World Champion, Capablanca married Gloria Simoni Betancourt. They had a son, José Raúl Jr., in 1923 and a daughter, Gloria, in 1925. According to Capablanca's second wife, Olga, his first marriage broke down fairly soon, and he and Gloria had affairs. Both his parents died during his reign, his father in 1923 and mother in 1926</li>
        		<li><strong>1922</strong> - Capablanca won the London tournament of 1922 with 13 points from 15 games with no losses.</li>
        		<li><strong>1927</strong> - Won New York chess tournament.</li>
        		<li><strong>1927</strong> - Played World Chess Championship match against Alexander Alekhine. Alekhine won the match, played from September to November at Buenos Aires, by 6 wins, 3 losses, and 25 draws.</li>
        		<li><strong>1938</strong> - He divorced his first wife and then married Olga on October 20, about a month before the AVRO tournament.</li>
        		<li><strong>1939</strong> - Capablanca played for Cuba in the 8th Chess Olympiad, held in Buenos Aires, and won the gold medal for the best performance on the top board.</li>
        		<li><strong>1942</strong> - dies at the age of 53, in New York.</li>
        	</ul>
        	<div class="opinions">
        	    <p>"I have known many chess players, but among them there has been only one genius - Capablanca!
                His ideal was to win by manoeuvring. Capablanca's genius reveals itself in his probing of the opponent's weak point. The slightest weakness cannot escape from his keen eye."<br>
                <em>World Chess Champion Emanuel Lasker</em></p>
                <p>"Capablanca's play produced and still produces an irresistible artistic effect.
                In his games a tendency towards simplicity predominated, and in this simplicity there was a unique beauty of genuine depth."<br>
                <em>World Chess Champion Mikhail Botvinik</em></p>
                <p>"The ideal in chess can only be a collective image, but in my opinion it is Capablanca who most closly approachess this...His book was the first chess book thet I studied from cover to cover. Of course, his ideas influenced me."<br>
                <em>World Chess Champion Anatoly Karpov</em>
                </p>
            </div>
        </div>

        <h3>Read more about Jose Raul Capablanca on <a id="tribute-link" href="https://en.wikipedia.org/wiki/Jose_Raul_Capablanca" target="_blank"> Wikipedia </a></h3>
	</div>
</body>
</html>
              
            
!

CSS

              
                html {
			font-size: 10px;
		}
		#main {
            max-width:1366px;
            margin-top:30px;
            margin-bottom: 30px;
            margin-right: 8px;
            margin-left: 8px;
            background-color: #eee;
            padding: 15px;
            border-radius:5px;
            text-align: center;
            font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
            font-size: 1.6rem;
            line-height: 1.5;
            color: #333;
   		}
   		@media (max-width: 480px) {
             #main {
                margin: 0;
                }
        }
		#title {
            font-size: 4rem;
            margin-bottom: 0;
		}
		@media (max-width: 480px) {
            h1 {
               font-size: 3.5rem;
               line-height: 1.2;
               }
        }
        img {
            max-width: 100%;
            display: block;
            height: auto;
            margin: 0 auto;
        }
		#img-div {
            background-color: white;
            padding: 20px;
            margin: 0;
		}
		#image {
               max-width: 100%;
               border-radius: 10px;
		}
		#img-caption {
			padding-top: 15px;
		}
		@media (max-width: 480px) {
       #img-caption {
           font-size: 1.4rem;
               }
        }
		
		.opinions{
			max-width: 540px;
			text-align: left;
			margin-right: auto;
			margin-left: auto;
			margin-top: 0;
			margin-bottom: 0;
		}
		ul {
			max-width: 550px;
			text-align: left;
			margin-bottom: 50px;
			margin-right: auto;
			margin-left: auto;
			margin-top: 0;
			display: block;
			} 

		li {
			margin-top: 16px;
			margin-bottom:16px;
		}
		#headline {
			margin: 50px 0;
            text-align: center;
		}
              
            
!

JS

              
                
              
            
!
999px

Console