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.

            
              <!--Header starts--> 
  <h1 class="text-center">
  Nikola Tesla
</h1>
<div class="container-fluid">
<div class="border-bot">
  <h4 class="text-center">
    "If you want to find the secrets of the universe,<br>Think of it in terms of Energy,Frequency & Vibration"
  </h4>
  </div>
<!--Header ends--> 

<!--portrait starts-->   
<img class="img-responsive portrait" src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg" alt="Nikola Tesla">
<!--portrait ends-->   
  
<!--intro starts-->   
<div class="header">
  <p>
    <span>Nikola Tesla</span>
  </p>
  </div>
  <div>
    <p>
      Legend, magician, sorcerer, time traveler, or simply an extraordinary scientist who was just way ahead of his time. Nikola Tesla, born in 1856 was one of the most mysterious persons to walk on the earth. Legend has it that he was born during an electrical storm at the stroke of midnight. His magical inventions (over 100 years ago) that amazed his fellow scientists, included wireless transmission, remote control systems, an earlier version of florescent lights, the electric motor, AC power, radar, and numerous others. As a sorcerer, he created man-made lightning that terrorized the communities near his workshops. He could speak atleast 9 languages. Some speculate he was a time traveler, because how else could a man change Thomas Edison’s electrical power ideas from deadly and hazardous to the safe systems we all use today.
    </p>
  </div>
<!--Intro ends--> 
  
<!--bio starts-->   
<h3>BIO</h3>
<div class="bio table">
  <table>
    <tr>
      <td>BORN</td>
      <td>10 Jul 1856 AD</td>
    </tr>
    <tr>
      <td>PLACE OF BIRTH</td>
      <td>Smiljan, Austrian Empire (modern-day Croatia)</td>
    </tr>
    <tr>
      <td>FATHER</td>
      <td>Milutin Tesla</td>
    </tr>
    <tr>
      <td>MOTHER</td>
      <td>Duka Tesla</td>
    </tr>
    <tr>
      <td>SIBLINGS</td>
      <td>Dane, Milka, Angelina, Marica</td>
    </tr>
    <tr>
      <td>MARRIED</td>
      <td>No</td>
    </tr>
     <tr>
      <td>DIED</td>
      <td>07 Jan 1943 AD (AGE 87)</td>
    </tr>
    <tr>
      <td>PLACE OF DEATH</td>
      <td>New York City, New York, USA</td>
    </tr>
  </table>
  </div>
<!--bio ends--> 
  
<!--timeline starts-->  
  <div>
    <h3>Timeline</h3>
    <ul>
      <li>
        <b>1856 - </b>Born to Serbian parents on July 10th
      </li>
      <li><b>1875 - </b>Did technical studies at Graz Institute</li>
      <li><b>1880 - </b>Moves to Prague and studies Physics and Mathematics at Karl University.</li>
      <li><b>1881 - </b>Begins the career as an engineer in Budapest.</li>
      <li><b>1882 - </b>Conceives of the AC induction motor, begins working for Continental Edison in Paris.</li>
      <li><b>1884 - </b>Leaves for America and gets a job in Edison’s company.</li>
      <li><b>1885 - </b>Leaves Edison and launches Tesla Electric Light & Manufacturing, but the financial backers are unable to comprehend the technological advances and refuse to fund Tesla's AC Motor, and they fire Tesla.</li>
      <li><b>1887 - </b>Builds the first AC Induction Motor, makes a deal with George Westinghouse for production.</li>
      <li><b>1891 - </b>Demonstrates WIRELESS power transmission.</li>
      <li><b>1892 - </b>Discovers <b>X-RAY RADIATION</b> three years before they are rediscovered by Willhelm Roentgen.</li>
      <li><b>1893 - </b>Demonstrates a <b>Wireless Transmitter/Receiver system (RADIO)</b>,two years before Marconi's.</li>
      <li><b>1894 - </b>Generates 1,000,000 volts using a conical air-core Tesla Coil. He later achieves 16 foot discharges (lightning) in his New York City lab. That’s ONE MILLION VOLTS.</li>
      <li><b>1895 - </b>The fire which broke out in Tesla’s laboratory in New York destroyed all his apparatus, instruments, documentation, plans etc.</li>
      <li><b>1898 - </b>Demonstrates a wireless controlled boat. But, is unable to interest the military. He also develops an electric igniter for Gasoline Engines, the ignition coil, basically the same automobile ignition system used today.</li>
      <li><b>1899 - </b>Begins his Colorado Springs research with WIRELESS TRANSMISSION of messages and electrical power. Stories of Tesla’s experiments with man-made balls of lightning being projected from his lab, and citizens being electrocuted from unknown sources still remain today.</li>
      <li><b>1900 - </b>Begins building the Wardenclyffe Transmitter, a 200 KW system. Later that year he was issued patents for methods of transmitting wireless energy.</li>
      <li><b>1903 - </b>Patents #723,188 and #725,605, contain the basic principles of the logical AND circuit element basic to all computers.</li>
      <li><b>1904 - </b>Marconi is awarded the patent for radio, to which Marconi later recieved a Nobel Prize and Tesla begins his fight as the original inventor.</li>
      <li><b>1906 - </b>creates the 200 hp, 16,000 RPM Bladeless Turbine. </li>
      <li><b>1915 - </b>Signs over the Wardenclyffe deed to George Boldt, to pay a $20,000 debt, and to help fund his continuing lawsuit against Marconi.</li>
      <li><b>1916 - </b>Declares bankruptcy, owes back taxes, is penniless and living on credit at the Waldorf-Astoria.</li>
      <li><b>1917 - </b>Irony prevails as Tesla receives the Edison Medal, the most prestigious honor the AIEE can bestow upon an engineer.</li>
      <li><b>1928 - </b>Receives his last US patent at age 72, "Apparatus for Aerial Transportation" - similar to a helicopter or VTOL aircraft.</li>
      <li><b>1931 - </b>Turns 75 and is honored by being on the cover of Time Magazine, and received congratulations from more than 70 pioneers in science and engineering including Albert Einstein.</li>
      <li><b>1936 - </b>Badly injured in a car accident in New York. He never completely recovered from the obtained injuries to the end of his life.</li>
      <li><b>1943 - </b> Died (7 January) aged 87.</li>
      <li><b>1944 - </b>Tesla is finally awarded the Patent for Radio. A year afer his death.</li>
    </ul>
  </div>
  <!--timeline ends--> 
  
  <!--quote 1 starts--> 
  <div class="slider">
      "Do not think there is any thrill that can go through the human heart like that felt by the inventor as he sees some creation of the brain unfolding to success... such emotions make a man forget food, sleep, friends, love, everything"
  </div>
<!--quote 1 ends--> 
  
<!--trivia starts ends--> 
  <div>
    <h3>Trivia</h3>
    <ul>
      <li>The TESLA, a new unit of magnetic flux density in the metric system, is named in Nikola Tesla's honor. The new unit is equivalent to 10,000 Gauss.</li>
      <li>Tesla had 221 World Patents and was involved with, or helped influence countless others.</li>
      <li>The FBI ordered the Office of Alien Property to seize Tesla's papers and possessions although Tesla was a U.S. citizen since 1891. The papers and scientific work were eventually released and inherited by Tesla's nephew, Sava Kosanovich, and are now housed in the Nikola Tesla Museum in Belgrade, Yugoslavia.</li>
      <li>Westinghouse and Tesla provide AC power to light the 1893 Chicago's World's Fair. (In anger, Edison forbids the use of his light bulbs)</li>
      <li>Tesla arrived in New York at age 28 and began working for Thomas Edison to improve Edison's DC dynamos. Edison promises to pay Tesla $50,000 if he can improve the DC dynamo’s performance. Tesla succeeded beyond Edison’s expectations, but Edison reneges on his promise to pay Tesla $50,000 for improvements to his dynamos, saying he was just joking - Tesla resigned in disgust.</li> 
      <li>Tesla conceived of the AC induction motor, when he saw rotating fields in a vision, and then he meticulously detailed the construction of both single and polyphase motors in his notebook.</li>
      <li>The United States Postal Service honored Tesla with a commemorative stamp in 1983.</li>
      <li>Tesla was inducted into the Inventor’s Hall of Fame in 1975.</li>
      <li>The Nikola Tesla Award is one of the most distinguished honors presented by the Institute of Electrical Engineers. The award has been given annually since 1976.</li> 
      <li>The Nikola Tesla Statue is located on Goat Island to honor the man whose inventions were incorporated into the Niagara Falls Power Station  in 1895. Tesla is known as the inventor of polyphase alternating current.</li> 
      <li>The Nikola Tesla Corner Sign, located at the intersection of 40th Street and 6th Avenue in Manhattan, is a constant reminder to all New Yorkers of the greatness of this genius.</li>
      <li>He had a strict schedule for his everyday life. He worked for almost 15 hours a day with not more than two hours of sleep. He walked for eight to ten miles each day and did not have much of a social life.</li>
      <li>He had a photographic memory with the talent to speak in eight languages. He never married and did not have any known relationships despite the fact that many women were madly in love with him.</li>
    </ul>
  </div>
<!--trivia ends-->  
  
<!--quote 2 starts-->   
  <div class="slider">
      "Money does not represent such a value as men have placed upon it. All my money has been invested into experiments with which I have made new discoveries enabling mankind to have a little easier life"
  </div>
<!--quote 2 ends--> 
  
<!--signature image starts -->   
  <div class="sign">
      <img height="50" width="350" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Nikola_Tesla_signature_1900.svg/1280px-Nikola_Tesla_signature_1900.svg.png" float="right">
    </div>  
<!--signature image ends--> 
  
<!--footer starts ends-->   
  <div class="border-bot">
  </div>
  <div align="center">
    <font face="Abel" size="3">
      For more details visit 
      <a href="https://en.wikipedia.org/wiki/Nikola_Tesla">
        Nikola Tesla
      </a>
      <br>Coded by <i class="glyphicon glyphicon-heart-empty"></i> Thayyeb Salim for 
      <a href="https://www.freecodecamp.com/challenges/build-a-tribute-page">
        FreeCodeCamp</a>
      Project
    </font>
  </div>
<!--footer ends-->   
</div>
  
            
          
!
            
              body{
  font-size:25px;
  font-family:Rajdhani;
  margin:0px 160px 0px 150px;
  background-color:#EDEDED;
}
h1{
  font-family:Abel;
    font-size:100px;
  color:#527EA5;
}
h4{
  color: #5D656C;
  font-family:Raleway;
  text-transform:uppercase;
}
.border-bot{
  padding-bottom:8px;
  margin:5px 0px 5px 0px;
  border-bottom:5px #4E9CB5 solid;
}
.portrait{
  max-height:800px;
  float:right;
  margin:25px 0px 20px 22px;
    width: 600px;
  border-radius:15px;
  box-shadow: 10px 10px lightgrey;
 }
.header{
  margin-top:19px;
}
.header span{
  font-size:45px;
  text-decoration:underline;
}
h3{
  font-size:35px;
  text-decoration:underline;
}
.bio{
  box-shadow: 10px 10px lightgrey;
  border-radius:10px;
  padding:10px 0px 10px 10px;
  margin:10px 1000px 10px 0px;
  font-size:5mm;
  background-color:rgb(98,98,98);
  color:white;
  max-width:550px;
}
th, td {
    padding: 10px;
    text-align: left;
  border-bottom: 1px solid #ddd;
}
.slider {
  min-height: 100px;
  font-size: 22px;
  padding:20px 10px 10px 10px;
  margin:25px 25px 25px 25px;
  border-left:15px #6E6C6D solid;
  background-color: lightgrey;
  text-transform:uppercase;
}
@media screen and (max-width:1198px){
  body{
    margin:5px;
    padding:5px;
  }
}
.sign{
  width:100%;
  height:60px;
  margin:auto;
  margin-bottom:-15px;
}
.sign img{
  float:right;
}
            
          
!
999px
🕑 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.

Console