css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <div class="container">
  <div class="well">
    <div class="row">
      <h4 class="text-muted text-center"> A tribute page to</h4>
      <br />
      <h1 class="text-primary text-center"> Nikola Tesla</h1>
      <br />
      <h5 class="text-info text-center lead"> The genius of 20th century</h5>
      <div class="thumbnail">
        <img src="http://www.popmech.ru/upload/iblock/ffe/ffe1cab69e10886dbd3d929b0271d5bb.jpg" alt="Picture of Nikola Tesla" class="img-responsive" />
        <p id="desc" class="caption text-center">The man himself - the legendary Nikola Tesla</p>
      </div>
      <div class="row">
        <div class="col-xs-2">
        </div>
        <div class="col-xs-8">
          <ul>
            <li><b> 1856, 10 July. </b>Born at Smiljan, a village near Gospic (a small town in Austrian-Empire, now in the Republic of Croatia)</li>
            <li><b>1873. </b>Passed the final examination in the secondary school (Realgymnasium) at Karlovac</li>
            <li><b>1875 – 1878. </b>Studies at the Polytechnics in Graz</li>
            <li><b>1880. </b>Studies natural philosophy at the Charles’ University in Prague</li>
            <li><b>1881. </b>Starts working for the Central Telegraph Office in Budapest and makes his first invention: voice amplifier for the telephone receiver</li>
            <li><b>1882. </b>Invents the rotating magnetic field and leaves Budapest; finds employment in the Edison Continental Company in Paris</li>
            <li><b>1883. </b>Spends six months working on the reconstruction of the power station in Strasbourg. Makes the first model of the induction motor;</li>
            <li><b>1884. </b>Returns to Paris. On the recommendation of the Board in Paris travels to New York to work in the “Edison Machine Works”</li>
            <li><b>1885. </b>Leaves Edison’s company and founds the “Tesla Arc Light Co.” in New York. Makes first alternating current motors and generators. Applies his first patent “Commutator for Dynamo-electric Machines”, followed by patents on arc-lamps regulators</li>
            <li><b>1887. </b>Applies the patents on the polyphase alternating current motors and generators. Gives his first lecture: “New systems of Alternate Currents Motors and Transformers” before the AIEE (American Institute of Electrical Engineers); signs the contract with Westinghouse Electric Co. on the exploitation of his patents</li>
            <li><b>1889. </b>Works in the Westinghouse Electric Co. in Pittsburgh on the improvement of his motors. The production of these motors began in this year.</li>
            <li><b>1890. </b>Begins the experiments with high-frequency currents. Invents the high-frequency current generator</li>
            <li><b>1891. </b>Invents the coreless transformers.</li>
            <li><b>1892. </b>Gives lectures in London and Paris on his latest researches (“”Experiments With Alternate Currents of high potential and high frequency”); visits his homeland and Belgrade.</li>
            <li><b>1893. </b>Invents the wireless telegraphy system; achieves great success with his lectures at the World Exhibition in Chicago. Together with Westinghouse demonstrates his system of production, transmission and use of alternate currents, influencing decisively the acceptance of this project proposal for the construction of hydroelectric power plant at the Niagara Falls</li>
            <li><b>1895. </b>Fire destroys his laboratory in New York</li>
            <li><b>1895-1896. </b>Makes experiments with X-rays</li>
            <li><b>1897-1898. </b>Applies his first patents on the wireless transmissions of energy; demonstrates the model of the remote-controlled boat. (It was the first experiment of the use of radio waves for remote control)</li>
            <li><b>1899. </b>Builds the laboratory at the Colorado Springs and performs experiments with the high-frequency transformer (Tesla Coil) of 12 million volts</li>
            <li><b>1900-1905. </b>Constructs his Transmitting Tower i.e. the aerial for “World Telegraph” at Long Island, Wardencliff, N.Y.C., intending to create the world-wide system for the transmission of information and energy</li>
            <li><b>1907. </b>Makes the first model of the turbine based on a new principle of the utilization of the energy of the fluid by the viscous friction.</li>
            <li><b>1909. </b>Makes drafts and plans for aeromobile; makes first tests with the steam and gas turbines</li>
            <li><b>1911-1913. </b>Tests his steam turbines in the Edison’s power plant in New York</li>
            <li><b>1914. </b>Applies patents on several types of speed indicators; constructs new types of fountains etc.</li>
            <li><b>1917. </b>Works on the project of a turbo-generator</li>
            <li><b>1918-1920. </b>Co-operates with the Alis Chalmers Co. on the production and testing of his steam and gas turbines</li>
            <li><b>1920-1923. </b>Co-operates with the Bud Co. on the production of automobile motors</li>
            <li><b>1928. </b>Applies patents for the vertically ascending aeroplane</li>
            <li><b>1930 - 1935. </b>Studies the possibilities of the improvements in the production and processing of sulphur, iron and copper</li>
            <li><b>1936. </b>Makes project proposals for telegeodynamics or the energy transmission through the earth and of defensive weapon known as “death rays”</li>
            <li><b>1937. </b>Injured in the traffic accident in New York</li>
            <li><b>1943, 7 Jan. </b>Died in the hotel “New Yorker” in New York.</li>
          </ul>
          <p id = "tesla">Tesla was a genius ahead of his time. He was a great futurist too. He described a smartphone a century ago.</p>
          <blockquote class = "blockquote-reverse "id = "quote">
            <p>
              When wireless is perfectly applied the whole earth will be converted into a huge brain, which in fact it is, all things being particles of a real and rhythmic whole. We shall be able to communicate with one another instantly, irrespective of distance. Not only this, but through television and telephony we shall see and hear one another as perfectly as though we were face to face, despite intervening distances of thousands of miles; and the instruments through which we shall be able to do his will be amazingly simple compared with our present telephone. A man will be able to carry one in his vest pocket.
            </p>
            <footer>Nikola Tesla, 1926 </footer>
          </blockquote>
         <p style="font-size: 22px;">
           For more information about Nikola Tesla, please visit the 
          <a href ="https://en.wikipedia.org/wiki/Nikola_Tesla" >Wikipedia page</a>
        </p>
        </div>
        <div class="col-xs-2">
        </div>
      </div>
    </div>
    
  </div>
  <hr />
  <footer class = "text-center text-info" style="font-size: 12px;">
    <p>Designed by Arman Vasilyan</p>
  </footer>
</div>
</div>
</div>
</div>
            
          
!
            
              body {
  margin-top: 60px;
  background-color: rgb(189, 195, 199);
}

h1 {
  font-size: 75px;
  font-family: Century Gothic;
}

#desc {
  font-size: 24px;
  font-family: Lucida Bright;
}
#tesla {
  font-size: 24px;
  font-family: Segoe UI bold;
}
#quote{
  font-size; 30px;
  font-family: Segoe UI light, sans-serif;
}

            
          
!
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.
Loading ..................

Console