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 id=Container-Fluid>
<div class="row"> 
  <div class="col-sm-4 GreyBackground" id="FamousQuotes"> 
    <p class="BlackFont"> Famous Quotes </p>
    <center> 
      <div class="btn button bluebutton"> 
        <div class="SmallBlackFont"> Click Me! <div class="smallerBlackFont"> for a quote </div> 
        
       </div> 
    </center>
  </div>
  <div class="col-sm-4 GreyBackground" id="FamousProtests">

    <p> <div class="firstLetter">  </div> <div class="BlackFont"> Famous Protests </div> </p>
<center> 
      <div class="btn button bluebutton"> 
       <div class="SmallBlackFont"> Click Me! <div class="smallerBlackFont">
         for a protest
         </div>
        </div>
       </div> 
    </center>
       
  </div> 
  <div class="col-sm-4 GreyBackground" id="randomFacts">
    
    <p class="BlackFont"> Random Facts </p>
 <center> 
      <div class="btn button bluebutton"> 
     <div class="SmallBlackFont"> Click Me! <div class="smallerBlackFont">
       for a random fact 
       </div> 
        </div>
       </div> 
    </center>
  </div>
  </div>
  <h1 class="lightBlueFont Underline" >Gandhi</h1>
  <h2 class="subTitleFont" id="SubTitle"> <em> The Leader of Passive resistance and The Destroyer of Greed 
    </em> </h2> 

   <div class="row">
     <div class="col-sm-4 smallBlueFontCenter" id="blueBox"> 
 "The greatness of a nation and its moral progress can be judged by the way that its animals are treated." Gandhi helped launch the vegen movement.
     </div> 
    <div class="col-sm-4">
    <img class="GhandiImageBackground"src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQEgU_Ik3AHKdwKNMq-XXkQoahLWLBHZ4QN231Uyh5dApKLjhiK" alt="picture of ghandi">
     <center>  <figcaption class="smallerBlueFont"> Gandhi Practicing his right to protest.</figcaption> </center> 
     </div>
     
   
    </div>
  <div class= "col-sm-4 hidden" id=protests ="redBox"> 
    
<div id="protest1">  
  </div> 
  <div id="protest2"> 
  </div> 
  <div id="protest3"> 
  </div> 
  <div id="protest4"> 
  </div> 
  <div id="protest5"> 
  </div> 
  <div id="protest6"> 
    </div> 
  <div id="protest7"> 
    </div> 
    <div id="protest8"> 
    </div> 
    <div id="protest9"> 
    </div> 
    <div id="protest10"> 
    </div> 
    
  </div>
  <div class="timeLine"> 
  </div> 
  <div class="wrap">
  <center>  <h1 class="subTitleFont"> 
    <b>  The Life of Gandhi </b> 
    </center> 
    </h1> 
   <ul class="smallBlueFont"> 
     <li> <span> <b> Growing-Up </b> </span> </li> 
     <ul class="smallerBlueFont"> 
       <li> <span> Was born in  Porbandar, Gujarat India in <b> October 2, 1869 </b> </span> 
       </li> 
       <li> <span> Was <b> Hindu </b> </span> </li> 
       <li> <span> Gandhi studied <b> Law </b> in London. </span> </li> 
       <li> <span> 
         <a href= " http://www.lausd.net/Belvedere_MS/student_work/Gandhi/Gandhi%20childhood " target="_blank"> More Info! </a>
         </span>  </li> 
     </ul> 
     <li> <span> <b> The Big Step </b></span> </li> 
     <ul class="smallerBlueFont"> 
       <li> <span> Gandhi was <b> kicked off </b> a train in Pietermaritzburg for not complying with the segregation rules.</span> </li> 
       <li> <span> Gandhi decided, after become a victim of <b> social injustics </b> himself, to fight the system by practicing <b> passive resistence. </b> </span> </li> 
       <li> <span> Gandhi was soon <b> jailed </b> for practicing his right to protest. </span> </li> 
       <li> <span> 
         This event sparked many more events where <b> only </b> peaceful methods were used to <b> create change </b> by Gandhi and his followers. 
         </span> 
       </li> 
       <li> <span>
         <a href = "http://www.sahistory.org.za/dated-event/mk-gandhi-forcibly-removed-whites-only-train-carriage" target="_Blank"> For More Information </a> 
         </span></li>
       </li> 
     </ul> 
  <li> <span> <b> Movement after Movement</b> </span> </li>
     <ul class="smallerBlueFont"> 
       <li> <span>Gandhi Stayed in South Africa to fight a bill that took away the <b>  right </b> of Indians to vote.  </span> </li> 
       <li> <span> Gandhi founded the National Indian Congress due to the <b> consisent neglect </b> of Indians and the need for a spokesperson when Indians were facing difficult times. </span> </li> 
       <li> <span> Gandhi is arrested for practicing <b> Passive Resistance </b> by refusing to carry an obligitory Id card.  </span> </li> 
       <li> <span> There were <b> many more movements </b>  that Gandhi contributed to. A list of them can be found 
         <a href="https://worldhistoryproject.org/topics/mahatma-gandhi" target="_Blank"> here. </a> </span> </li> 
         
     </ul> 
  <li> <span> <b> The Moment It Stops </b> </span> </li> 
     <p class="smallerBlueFont">
       It was thought that by preaching tolarance, Gandhi was <b> endangering </b> those who would other-wise not willingly put themselves in a place where they had no physical means of fighting back. This belief led <b> Nathuram Godse </b>  to <b> shoot Gandhi </b> five times in the chest, causing Gandhi's ultimate death on <b> January 30th, 1948, </b> in New Delhi, India. Directly after his death, thousands of people turned to violence against the Brahims; they <b> blamed the Brahims for their "extremist views" </b> that allowed for Nathuram Godse. This was of-course un-founded and showed just how badly <b> people like Gandhi </b> were needed to spread morality and values to those who failed to see it. 
     </p> 
    </ul> 
  </div> 
      

  
</div> 
              
            
!

CSS

              
                #Container-Fluid {background: #d7dee8
}
.lightBlueFont {
  color: #1b425b; 
  font-family: Comic Sans MS;
  text-align: Center;
}
.Underline {
text-decoration: Underline;
}
.subTitleFont { 
    color: #39527a;
    font-family: Comic Sans MS;
    text-align: Center;
}
.BlackFont{
color:black; 
  font-family: Comic Sans MS; 
    text-align: Center;
  font-size: 2em;
}

.GreyBackground { 
 backGround: grey;
   border: solid #2d3035;
    border-radius: 3em 3em 3em 3em
   
   
}

.GhandiImageBackground{
 border-radius: 1.5em 3em 1.5em 3em;
border: 1em solid #92a0b7;
}
.bluebutton {
  border-radius: 60;
    background-color:#8ea0a0;
  padding:1em;
border: black solid .1em;
}
.SmallBlackFont {
  color:black; 
  font-family: Comic Sans MS; 
    text-align: Center;
  font-size: .7em;
  
}
.smallerBlackFonter {
   color:black; 
  font-family: Comic Sans MS; 
    text-align: Center;
  font-size: .3em;
}
.smallBlueFont {
  color: #1b425b; 
  font-family: Comic Sans MS;
 
  font-size: 1.5em;

}

li span {
  position: relative;
  left: -.2em;
}

.smallerBlueFont {
  color: #1b425b; 
  font-family: Comic Sans MS;
 
  font-size: .8em;
  font-style: italic;
  
}
.smallBlueFontCenter {
  color: #1b425b; 
  font-family: Comic Sans MS;
   text-align: center;
  font-size: 1.5em;
}
.wrap {
  padding: .5em 6em 3em 6em;
  background-color: #dce2ed;
  box-shadow: .3em .5em .5em .5em #c0c8d6;
  border: 8em #9da7b7;
  margin: .5em 3em 1em 3em;
  
}
/*.firstLetter {
  float: left; 
  margin: 0em 0em 0em 0em;
  font-size: 3em;
  color:black; 
  font-family: Comic Sans MS; 
    text-align: Center;
 
} */
.hidden {
  display: none;
}
              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "80px";
document.getElementById("FamousQuotes").onclick = 
 function(famousquotesF) {
 var famousQuotesA = [
      "Morality is the basis of things and truth is the substance of all morality.",
  "Non-violence is the greatest force at the disposal of mankind. It is mightier than the mightiest weapon of destruction devised by the ingenuity of man.",
  "Strength does not come from physical capacity. It comes from an indomitable will.",
 "The weak can never forgive. Forgiveness is the attribute of the strong.",
 "The best way to find yourself is to lose yourself in the service of others.",
"A man is but the product of his thoughts; what he thinks, he becomes."
 ];
  document.getElementById("SubTitle").innerHTML =(famousQuotesA[Math.floor((Math.random())*famousQuotesA.length)]);
  };
document.getElementById("randomFacts").onclick = function(randomFactsF) {
var randomFactsA = [
  "Gandhi actually wrote a letter to Hitler asking him not to go to war.",
  "Steve Jobs glasses were in tribute to Gandhi.",
  "Despite being nominated for the nobel peace prize 5 times, he became leonardo dicaprio of the past.",
  "Gandhi smoked with his older brother, but didn't like it so he stopped.",
  "Gandhi wanted to be a laywer but was to anxious in court. He made 15 grand a year.",
  "Henry Ford had a boy crush on Gandhi. Actually he was just a fan but boy-crush sounds better.",
  "Gandhi was the man of the year in 1930.",
  "Gandhi had never been in a plane.",
  "Gandhi hated cinima",
  "Gandhi didn't want to speak in the microphone on the radio, hence his famous first words: 'Do I have to speak in this thing?'"]
  document.getElementById("blueBox").innerHTML = (randomFactsA[Math.floor(Math.random()*randomFactsA.length)]);

};


              
            
!
999px

Console