Semua Gaya Tipografi dan Komponen Elemen yang Tersedia (Manual Mode)

<figure class='mb-4'>
  <img class='w-100 mb-2 shadow-xl' width='640' height='360' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdSlKiyEM7xUj_qu1BblCTAt1Ipz0YiRTsawuMBpXYubZty7CmxrmGRIMWHZwpFM46-kxN-Lq3BbWbjti3CLpN1eeQZk7xPHy9yJQwMNmo4elKeUD2Z2y4d3UYH-G2Yul0LQ0EZxP2dfcN5WGsv99i4oS7aX_x6PgEYVRf0Pj6SMG1uabMTAoSjGmoVaq/s1600-rw/img.jpg' alt='Guru Mempelajari Gaya Tipografi'/>
  <figcaption class='text-center text-slate'>
    <small>Guru Mempelajari Gaya Tipografi</small>
  </figcaption>
</figure>

<p class='text-dropcap'>
  Teks ini akan mempunyai huruf besar pada huruf pertama.
</p>

<h2>Heading yang Memberikan Kerangka Topik</h2>
<h3>Subheading yang Menjelaskan Bagian Kerangka Topik</h3>
<h4>Minor Heading yang Memberikan Detail Lebih Spesifik</h4>

<p>Anda dapat menggunakan tag mark untuk <mark>menyoroti</mark> teks.</p>
<p>Baris teks ini del dimaksudkan untuk dianggap sebagai <del>teks yang dihapus.</del></p>
<p>Baris teks ini s dimaksudkan untuk dianggap <s>tidak lagi akurat.</s></p>
<p>Baris teks ini ins dimaksudkan untuk dianggap sebagai <ins>tambahan pada dokumen.</ins></p>
<p>Baris teks ini u akan ditampilkan dengan <u>garis bawah.</u></p>
<p><small>Baris teks ini small dimaksudkan untuk dianggap sebagai catatan kecil.</small></p>
<p><strong>Baris teks ini strong ditampilkan sebagai teks tebal.</strong></p>
<p><em>Baris teks ini em ditampilkan sebagai teks miring.</em></p>

<figure class='figquote bg-primary bg-opacity-10 bg-dm-dark'>
  <blockquote class='blockquote'>
    <p>A great website layout is a bonus, but the main focus should be on relevance of information.</p>
  </blockquote>
  <figcaption class='blockquote-footer'>
    Dwi Prastyo in <cite title='Eduzaid School'>Eduzaid School</cite>
  </figcaption>
</figure>

<nav id='nav-tabs' class='nav nav-tabs mb-3'>
  <a class='nav-link active' role='button' href='#content-one'>First Tab</a>
  <a class='nav-link' role='button' href='#content-two'>Second Tab</a>
  <a class='nav-link' role='button' href='#content-three'>Third Tab</a>
  <a class='nav-link' role='button' href='#content-four'>Fourth Tab</a>
</nav>
<div id='nav-tabs-content' class='mb-4'>
  <div class='collapse show' id='content-one'>
    Komponen nav-tabs adalah fitur antarmuka yang memungkinkan navigasi antar konten berbeda dalam satu halaman web tanpa harus memuat ulang halaman. Ini mempermudah pengguna untuk mengakses informasi yang mereka butuhkan dengan cepat dan efisien.
  </div>
  <div class='collapse' id='content-two'>
    Untuk menggunakan nav-tabs, cukup klik pada tab yang tersedia di bagian atas. Konten yang terkait dengan tab tersebut akan muncul di bawahnya. Anda bisa menambahkan berbagai tab sesuai kebutuhan, seperti tab untuk informasi umum, fitur produk, atau kontak.
  </div>
  <div class='collapse' id='content-three'>
    Nav-tabs memiliki banyak manfaat, termasuk meningkatkan pengalaman pengguna dengan menyediakan navigasi yang intuitif dan mengurangi waktu pemuatan halaman. Ini juga membantu dalam mengorganisir konten dengan cara yang lebih terstruktur dan mudah diakses.
  </div>
  <div class='collapse' id='content-four'>
    Berikut adalah contoh implementasi nav-tabs dalam halaman web. Tab pertama bisa berisi pengenalan produk, tab kedua bisa berisi fitur-fitur utama, tab ketiga bisa menampilkan ulasan pelanggan, dan tab keempat bisa berisi informasi kontak.
  </div>
</div>

<div class='accordion mb-4' id='accordionExample'>
  <!-- Item 1 -->
  <div class='accordion-item'>
    <div class='accordion-header'>
      <button class='accordion-button fw-semibold' type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne'>
        Accordion Item #1
      </button>
    </div>
    <div id='collapseOne' class='accordion-collapse collapse show' data-bs-parent='#accordionExample'>
      <div class='accordion-body'>
        Saya memungkinkan pengguna untuk mengungkap atau menyembunyikan konten terkait dengan mengklik header, sehingga mempermudah navigasi dalam halaman web. Fungsi ini sangat berguna dalam berbagai konteks, seperti menampilkan daftar pertanyaan yang sering diajukan (FAQ), rincian produk, atau langkah-langkah dalam tutorial.
      </div>
    </div>
  </div>
  <!-- Item 2 -->
  <div class='accordion-item'>
    <div class='accordion-header'>
      <button class='accordion-button fw-semibold collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo'>
        Accordion Item #2
      </button>
    </div>
    <div id='collapseTwo' class='accordion-collapse collapse' data-bs-parent='#accordionExample'>
      <div class='accordion-body'>
        Saya dirancang untuk fleksibilitas dan dapat disesuaikan sesuai kebutuhan spesifik pengguna dan pengembang web. Baik dalam menambah atau mengurangi item, atau menyesuaikan tampilan dan gaya agar selaras dengan desain keseluruhan situs web, saya dapat diatur untuk memenuhi berbagai keperluan.
      </div>
    </div>
  </div>
  <!-- Item 3 -->
  <div class='accordion-item'>
    <div class='accordion-header'>
      <button class='accordion-button fw-semibold collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree'>
        Accordion Item #3
      </button>
    </div>
    <div id='collapseThree' class='accordion-collapse collapse' data-bs-parent='#accordionExample'>
      <div class='accordion-body'>
        Dengan fitur yang memungkinkan konten disembunyikan hingga diperlukan, saya menjaga halaman tetap teratur dan fokus. Pendekatan ini memudahkan navigasi dan memastikan bahwa pengguna dapat dengan cepat menemukan informasi yang mereka butuhkan tanpa harus menggulir melalui halaman yang panjang.
      </div>
    </div>
  </div>
  <!-- Item End -->
</div>

<div class='table-responsive'>
  <table class='table table-basic table-bordered'>
    <thead>
      <tr>
        <th>#</th>
        <th>First</th>
        <th>Last</th>
        <th>Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>The Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class='table-responsive'>
  <table class='table table-basic table-bordered text-center fs-n1'>
    <thead>
      <tr>
        <th>No</th>
        <th>Waktu</th>
        <th>JP</th>
        <th>Senin</th>
        <th>Selasa</th>
        <th>Rabu</th>
        <th>Kamis</th>
        <th>Jum'at</th>
        <th>Sabtu</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>07.30 - 08.05</td>
        <td>1</td>
        <td>Upacara</td>
        <td>IPAS</td>
        <td>B. Indonesia</td>
        <td>Matematika</td>
        <td>B. Indonesia</td>
        <td>PAI</td>
      </tr>
      <tr>
        <td>2</td>
        <td>08.05 - 08.40</td>
        <td>2</td>
        <td>B. Indonesia</td>
        <td>IPAS</td>
        <td>B. Indonesia</td>
        <td>Matematika</td>
        <td>B. Indonesia</td>
        <td>PAI</td>
      </tr>
      <tr>
        <td>3</td>
        <td>08.40 - 09.15</td>
        <td>3</td>
        <td>B. Indonesia</td>
        <td>IPAS</td>
        <td>Seni</td>
        <td>Matematika</td>
        <td>P5</td>
        <td>PAI</td>
      </tr>
      <tr>
        <td>4</td>
        <td>09.15 - 09.30</td>
        <td style='letter-spacing:20px' colspan='7'>ISTIRAHAT</td>
      </tr>
      <tr>
        <td>5</td>
        <td>09.30 - 10.05</td>
        <td>4</td>
        <td>IPAS</td>
        <td>Matematika</td>
        <td>Pend. Pancasila</td>
        <td>Pend. Pancasila</td>
        <td>B. Inggris</td>
        <td>PJOK</td>
      </tr>
      <tr>
        <td>6</td>
        <td>10.05 - 10.40</td>
        <td>5</td>
        <td>IPAS</td>
        <td>Matematika</td>
        <td>Pend. Pancasila</td>
        <td>Pend. Pancasila</td>
        <td>B. Inggris</td>
        <td>PJOK</td>
      </tr>
      <tr>
        <td>7</td>
        <td>10.40 - 10.55</td>
        <td style='letter-spacing:20px' colspan='7'>ISTIRAHAT</td>
      </tr>
      <tr>
        <td>8</td>
        <td>10.55 - 11.30</td>
        <td>7</td>
        <td>Seni</td>
        <td>B. Daerah</td>
        <td>P5</td>
        <td>P5</td>
        <td>-</td>
        <td>PJOK</td>
      </tr>
      <tr>
        <td>9</td>
        <td>11.30 - 12.05</td>
        <td>8</td>
        <td>Seni</td>
        <td>B. Daerah</td>
        <td>P6</td>
        <td>P5</td>
        <td>-</td>
        <td>P5</td>
      </tr>
      <tr>
        <td>10</td>
        <td>12.05 - 12.40</td>
        <td>9</td>
        <td>BTA</td>
        <td>BTA</td>
        <td>PAK</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
      </tr>
    </tbody>
  </table>
</div>

<table class='table table-striped'>
  <tr>
    <td>Nama</td>
    <td>:</td>
    <td class='teacher-name'>Dwi Prastyo, S.Pd.</td>
  </tr>
  <tr>
    <td>Jabatan</td>
    <td>:</td>
    <td class='teacher-position'>Guru Olahraga</td>
  </tr>
  <tr>
    <td>NUPTK</td>
    <td>:</td>
    <td>12345678900</td>
  </tr>
  <tr>
    <td>NIP</td>
    <td>:</td>
    <td>12345678900</td>
  </tr>
  <tr>
    <td>Tempat Lahir</td>
    <td>:</td>
    <td>Ponorogo, 15 Desember 1925</td>
  </tr>
  <tr>
    <td>Agama</td>
    <td>:</td>
    <td>Islam</td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>Laki-laki</td>
  </tr>
  <tr>
    <td>Status</td>
    <td>:</td>
    <td>PNS</td>
  </tr>
  <tr>
    <td>No. HP</td>
    <td>:</td>
    <td>628980440088</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>:</td>
    <td>dwiprasthetic@gmail.com</td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td>:</td>
    <td>Jl. Sultan Agung No. 26, RT03/RW08, Bangunsari, Ponorogo, Jawa Timur, 63419</td>
  </tr>
</table>

<ol>
  <li>Hubungi admin kami untuk informasi awal atau sekedar tanya jawab.</li>
  <li>Coba versi gratis dari tema Eduzaid School.</li>
  <li>Minta kode lisensi untuk mengaktifkan tema selama periode percobaan.</li>
  <li>Eksplorasi fitur gratis yang tersedia untuk menilai kebutuhan pengunaan.</li>
  <li>Memutuskan untuk membeli versi premium atau membiarkan kode lisensi hangus otomatis.</li>
</ol>

<!-- Konten Atas -->
<hr>
<!-- Konten Bawah  -->