Nikola Tesla - Tribute

In this example below you will see how to do a Nikola Tesla - Tribute with some HTML / CSS and Javascript

Code Camper Experimentation

Thumbnail
This awesome code was written by gabriele-gentile, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gabriele-gentile ©
  • HTML
  • CSS
  • JavaScript
    <div style="background: url(http://www.activistpost.com/wp-content/uploads/2012/01/Nikola-Tesla.jpg) no-repeat center fixed; width: 100%; height: 800px; background-size: cover;"> </div>
<div class="container jumbotron">
  <h1 class="text-center">Nikola Tesla</h1>
  <p class="text-center"><i>発明家 -  電気技師 </i></p>
  <div class="row">
    <div class="col-sm-6">
      <div class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Tesla_circa_1890.jpeg" class="img-responsive" alt="Nikola Tesla" width="300px">
        <div class="caption text-center">
          <h4>1893年撮影</h4></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/N.Tesla.JPG" class="img-responsive" alt="Nikola Tesla" width="300px">
        <div class="caption text-center">
          <h4>1890年撮影</h4></div>
      </div>
    </div>
  </div>
  <!--End Row -->
</div>
</div>


<div class="container" style="font-size:18px">
  <h3>年譜</h3>
  <table style="width:100%">
    <tr>
      <td>1856年7月9日</td>
      <td>オーストリア帝国(現在のクロアチア西部)スミリャンで生まれる</td>
    </tr>
    <tr>
      <td>1880年</td>
      <td>グラーツのポリテクニック・スクール在学中に交流電磁誘導の原理を発見する。</td>
    </tr>
    <tr>
      <td>1882年 </td>
      <td>二相交流による回転磁界の原理を考案する。</td>
    </tr>
    <tr>
      <td>1884年</td>
      <td>アメリカに渡り、エジソンの会社・エジソン電灯に採用される。</td>
    </tr>
    <tr>
      <td>1887年</td>
      <td>独立したテスラは、Tesla Electric Light Company(テスラ電灯社)を設立し、独自に交流電流による電力事業を推進。</td>
    </tr>
    <tr>
      <td>1891年</td>
      <td>100万ボルトまで出力できる高圧変圧器を発明。</td>
    </tr>
    <tr>
      <td>1893年</td>
      <td>無線トランスミッター発明。</td>
    </tr>
    <tr>
      <td>1901年</td>
      <td>J・P・モルガンの援助により、ロングアイランド、ショアハムに高さ57mの無線送信塔「ウォーデンクリフ・タワー (英語版)」の建設を開始。</td>
    </tr>
    <tr>
      <td>1915年</td>
      <td>エジソンとともにノーベル物理学賞受賞候補となるが、共に受賞せず。</td>
    </tr>
    <tr>
      <td>1943年1月7日</td>
      <td>ニューヨーク・マンハッタンのニューヨーカー・ホテルで死去。</td>
    </tr>
  </table>
  <br>

  <blockquote>
    <p>Let the future tell the truth, and evaluate each one according to his work and accomplishments. The present is theirs; the future, for which I have really worked, is mine.</p><cite>Nikola Tesla</cite></blockquote>

  <div>ニコラ・テスラについて調べたければ、<a href="https://ja.wikipedia.org/wiki/%E3%83%8B%E3%82%B3%E3%83%A9%E3%83%BB%E3%83%86%E3%82%B9%E3%83%A9" target="_blank">ウイキペディアページ</a>をご覧ください。</div>


</div>
<!-- End Container -->

/*Downloaded from https://www.codeseek.co/gabriele-gentile/nikola-tesla-tribute-QNpGMe */
    body{
  background-color: #0b2641;
  color: white;
}

td{
  padding: 15px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap
}

.jumbotron{
  background-color: #0b2641;
}

.thumbnail{
  border-radius: 10px;
}


/*Downloaded from https://www.codeseek.co/gabriele-gentile/nikola-tesla-tribute-QNpGMe */
    

Comments