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

              
                <div class="container">
    <div class="jumbotron container-fluid">
      <h2 class="text-center"> Dr. Babasaheb Ambedkar </h2>
      <h3 class="text-center"><em>The man who fought for social discrimination</em></h3>
      <div class="thumbnail"> <center><img class="img-responsive" src="http://mocomipullzone.anibraindigitalt.netdna-cdn.com/wp-content/uploads/2016/05/MOC_BIO_TUSHAR_BABASAHEB_AMBEDKAR_Featured.jpg" alt="google image"></center>
<div class="caption text-center">
    <h5 id="caption-text">Dr. Bhimrao Ramji Ambedkar, popularly known as Babasaheb Ambedkar, was a jurist, social reformer and politician.</h5>  
    </div>
</div>
<div class="col-md-12 ">
  <h4>Here's a time line of Dr. Babasaheb's life:</h4>
  </div>
  <ul id="text-center">
    <li><strong>1891</strong> - Born in Mhow in central provinces</li>
    <li><strong>1906</strong> - He shifted to Bombay</li>
    <li><strong>1906</strong> - He married to Ramabai at the age of 15</li>
    <li><strong>1908</strong> - He cleared his matriculation in 1908 from Elphinstone High School</li>
    <li><strong>1912</strong> - In 1908, Ambedkar got the opportunity to study at the Elphinstone College and obtained his graduate degree in Economics and Political Science in the year 1912 from Bombay University.</li>
    <li><strong>1915</strong> - He completed his master's degree and title him with "Ancient Indian commerce.</li>
    <li><strong>1916</strong> - He enrolled in the London School of Economics and started working on his doctoral thesis titled &nbsp“The problem of the rupee: Its origin and its solution”.</li>
    <li><strong>1927</strong> - He was awarded a Doctorate by the University of Columbia.</li>
    <li><strong>1932</strong> - The Poona Pact was signed between Dr. Ambedkar and Pandit Madan Mohan Malviya, representative of the Hindu Brahmins relinquishing reservation of seats for the untouchable classes in the Provisional legislatures, within the general electorate.</li>
    <li><strong>1936</strong> - Ambedkar founded the Independent Labor Party. In the 1937 elections to the Central Legislative Assembly, his party won 15 seats.</li>
    <li><strong>1947</strong> - Dr. Ambedkar was appointed as the chairman of the constitution drafting committee on August 29</li>
    <li><strong>1950</strong> - Ambedkar travelled to Sri Lanka to attend a convention of Buddhist scholars and monks. After his return he decided to write a book on Buddhism and soon, converted to Buddhism.</li>
    <li><strong>1956</strong> - He completed his final manuscript, "The Buddha or Karl Marx" on December 2.</li>
    <li><strong>1956</strong> - He died at his home in Delhi</li>
  </ul>
      <blockquote id="quote-text">
        <p>" No Hindu community, however low, will touch cow's flesh. On the other hand, there is no community which is really an Untouchable community which has not something to do with the dead cow. Some eat her flesh, some remove the skin, some manufacture articles out of her skin and bones."</p>
        <footer><cite> Dr.Babasaheb Amdedkar</cite></footer>
      </blockquote>
      <h3 id="footer-text">If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/B._R._Ambedkar" target="_blank">Wikipedia entry.</a></h3>
  </div>
  <hr>
  <footer class="text-center">Written by <a href="https://www.freecodecamp.com/avinashpawar" target="_blank">Avinash Pawar </a></footer>
</div>

              
            
!

CSS

              
                $blue: #a3d5d3;

body {
  background-color: white;
  margin-top:50px;

}
.thumbnail{
  background-color:black;
}
#caption-text{
  color:white;
}
.col-md-12{
  margin-left:200px;
}
ul{
  list-style-position:inside;
  margin-left:210px;
}
ul li{
  font-size:15px;
}
#quote-text {
  margin-left:210px;
  font-family:times new roman;
  
}
blockquote:p{
  font-size:10px;
}
#footer-text{
  margin-left:150px;
  margin-right:150px;
}
              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "80px";
              
            
!
999px

Console