Prophet Muhammad

In this example below you will see how to do a Prophet Muhammad with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Fayed, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Fayed ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title> Prophet Muhammad</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
<h1>Nabi Muhammad</h1>
<h4><em>One of the Hundred Most Influential People in History
  Satu dari Seratu Tokoh Paling Berpengaruh dalam Sejarah</em></h4>
  <div class="thumbnail">     
  <img class="img-reponsive" src="http://media.isnet.org/kmi/iptek/100/Mekkah.jpg" width="100%" height="100%"/>
          <div class="caption text-center">Ibadah haji di mekkah al-mukaromah, ibadah yang dihadiri dari pelosok negeri setiap tahun</div>
      </div>
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-8">
          <h3>Garis Waktu</h3>
<p>Kronologi Muhammad dari lahir sampai kematian</p>
          <ul>
    <li><strong>570</strong> - Tanggal lahir, 20 April di Kota Mekkah</li>
<li><strong>570</strong> - Tahun Gajah, gagalnya Abrahah menyerang Mekkah</li>
<li><strong>576</strong> - Meninggalnya ibu, Aminah</li>
<li><strong>578</strong> - Meninggalnya kakek, Abdul Muthalib</li>
<li><strong>583</strong> - Melakukan perjalanan dagang ke Suriah bersama Abu Thalib</li>
<li><strong>595</strong> - Bertemu dan menikah dengan Khadijah</li>
<li><strong>610</strong> - Wahyu pertama turun di Gua Hira dan menjadi nabi sekaligus rasul, kemudian mendapatkan sedikit pengikut: As-Sabiqun al-Awwalun</li>
<li><strong>613</strong> - Menyebarkan Islam kepada umum</li>
<li><strong>614</strong> - Mendapatkan banyak pengikut</li>
<li><strong>615</strong> - Hijrah pertama ke Habsyah</li>
<li><strong>616</strong> - Awal dari pemboikotan Quraisy terhadap Bani Hasyim</li>
<li><strong>619</strong> - Akhir dari pemboikotan Quraish terhadap Bani Hasyim</li>
<li><strong>619</strong> - Tahun kesedihan: Khadijah dan Abu Thalib meninggal</li>
<li><strong>620</strong> - Dihibur oleh Allah melalui Malaikat Jibril dengan cara Isra' dan Mi'raj sekaligus menerima perintah salat 5 waktu</li>
<li><strong>621</strong> - Bai'at 'Aqabah pertama</li>
<li><strong>622</strong> - Bai'at 'Aqabah kedua</li>
<li><strong>622</strong> - Hijrah ke Madinah</li>
<li><strong>624</strong> - Pertempuran Badar</li>
<li><strong>624</strong> - Pengusiran Bani Qaynuqa</li>
<li><strong>625</strong> - Pertempuran Uhud</li>
<li><strong>625</strong> - Pengusiran Bani Nadir</li>
<li><strong>625</strong> - Pertempuran Zaturriqa`</li>
<li><strong>626</strong> - Penyerangan ke Dumat al-Jandal: Suriah</li>
<li><strong>627</strong> - Pertempuran Khandak</li>
<li><strong>627</strong> - Perang Bani Qurayzhah</li>
<li><strong>628</strong> - Perjanjian Hudaibiyyah</li>
<li><strong>628</strong> - Melakukan umrah ke Ka'bah</li>
<li><strong>628</strong> - Pertempuran Khaybar</li>
<li><strong>629</strong> - Melakukan ibadah haji</li>
<li><strong>629</strong> - Pertempuran Mu'tah</li>
<li><strong>630</strong> - Pembukaan Kota Makkah</li>
<li><strong>630</strong> - Pertempuran Hunain</li>
<li><strong>630</strong> - Pertempuran Autas</li>
<li><strong>630</strong> - Pendudukan Thaif</li>
<li><strong>631</strong> - Menguasai sebagian besar Jazirah Arab</li>
<li><strong>632</strong> - Pertempuran Tabuk</li>
<li><strong>632</strong> - Haji Wada'</li>
<li><strong>632</strong> - Meninggal (8 Juni): Madinah</li>
  </ul>
    </div>
    <blockquote><p>
      Berasal-usul dari keluarga sederhana, Muhammad menegakkan dan menyebarkan salah satu dari agama terbesar di dunia, Agama Islam. Dan pada saat yang bersamaan tampil sebagai seorang pemimpin tangguh, tulen, dan efektif. Kini tiga belas abad sesudah wafatnya, pengaruhnya masih tetap kuat dan mendalam serta berakar.
      </p>
      <footer>
        <a href="http://media.isnet.org/kmi/iptek/100/Muhammad.html"><cite>
          Seratus Tokoh yang Paling Berpengaruh dalam Sejarah
           - Michael H. Hart, 1978
          </cite></a>
      </footer>
</blockquote>
<blockquote>
      <h4>Mari kita Pahami lebih dalam mengenai dirinya, silakan akses pada url berikut <a href="https://id.wikipedia.org/wiki/Muhammad">Nabi Muhammad</a>
      </h4>
  
  </div>
</div>
</div>
  <footer class="text-center">
    <hr>
    <p>Ditulis dan Kode by
    <a href="https://www.freecodecamp.org/fccdefdb9f1">Rikin</a>
    </p>
  </footer>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Fayed/prophet-muhammad-BZXvBY */
body {margin-top:60px;}

Comments