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

              
                <main id="main">
  <h1 id="title"> Subhas chandra bose</h1>
  <p> Give me blood and i will give you freedom </p>
  <figure id="img-div">
    <img
         id="image"
         
         src="https://i.pinimg.com/564x/5b/f7/a6/5bf7a6e21d4a721c566be09667b68349.jpg"
         alt= "Subhas Bose (standing, right) with friends in England, 1920"
         />
    <figcaption id="img-caption">
      Subhas Bose (standing, right) with friends in England, 1920
    </figcaption>
    </figure>
 <section id="tribute-info">
   <h3 id="headline"> Here's a time line of Subhas Chnadra Bose's life:</h3>
    <ul> 
      <li> <strong> 1897 </strong> - Born in Odhisa, India </li>
      
        <li> <strong> 1912 </strong> - He secured the second position in the matriculation examination conducted under the auspices of the University of Calcutta. </li>
      <li> <strong>1921 </strong> - Bose joined Indian National Congress </li>
       <li> <strong> 1933-37</strong> - During the mid-1930s Bose travelled in Europe, visiting Indian students and European politicians, including Benito Mussolini. </li>
       <li> <strong>1938 </strong> - Bose stated his opinion that the INC "should be organised on the broadest anti-imperialist front with the two-fold objective of winning political freedom and the establishment of a socialist regime</li>
       <li> <strong>1941-43 </strong> - Bose's arrest and subsequent release set the scene for his escape to Germany, via Afghanistan and the Soviet Union. A few days before his escape, he sought solitude and, on this pretext, avoided meeting British guards and grew a beard</li>
       <li> <strong>1944</strong>- After being disillusioned that Germany could be of any help in gaining India's independence, Bose left for Japan. He travelled with the German submarine U-180 around the Cape of Good Hope to the southeast of Madagascar, where he was transferred to the I-29 for the rest of the journey to Imperial Japan. </li>
      <li> <strong>18 august 1945 </strong> India lost it's greatest freedom fighter and the greatest leader</li>
   </ul>
   <blockquote cite="https://en.wikipedia.org/wiki/Subhas_Chandra_Bose">
    <p> "Life loses half its interest if there is no struggle — if there are no risks to be taken" </p>
     <cite> ---Subhash Chandra Bose </cite>
     <blockquote>
       <h3>
         If you have time, you should read more about this incredible human being
      on his
          <a
        id="tribute-link"
        href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjnksei_ObxAhXJyjgGHSFJCYAQFjAAegQIDRAD&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSubhas_Chandra_Bose&usg=AOvVaw1kuEmOcTteFB1IeJpQPHLd"
        target="_blank"
        >wikipedia entry</a
      >.
    </h3>
  </section>
</main>

        
      
              
            
!

CSS

              
                html {
 
  font-size: 10px;
}

body {
 font-family: naive-sans, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

#img-div {
  background: white;
  padding: 10px;
  margin: 10;
}

#img-caption {
  margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 50px 0;
  text-align: center;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}

              
            
!

JS

              
                
              
            
!
999px

Console