Script index.html :
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/logo-hb.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>SMK HARAPAN BANGSA</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/hexagons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-hb.png" alt="image" height="60" width="80"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a>
</li>
<li><a href="contacts.html">Kontak</a></li>
<li>
<button class="search">
<span class="lnr lnr-magnifier" id="search"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-input" id="search-input-box">
<div class="container">
<form class="d-flex justify-content-between">
<input type="text" class="form-control" id="search-input" placeholder="Search Here" />
<button type="submit" class="btn"></button>
<span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
</form>
</div>
</div>
</header>
<!-- ================ End Header Area ================= -->
<!-- ================ start banner Area ================= -->
<section class="home-banner-area">
<div class="container">
<div class="row justify-content-center fullscreen align-items-center">
<div class="col-lg-5 col-md-8 home-banner-left">
<h1 class="text-white">
SMK<BR>
Harapan Bangsa<BR>
Depok</BR>
</h1>
<p class="mx-auto text-white mt-20 mb-40">
SMK Harapan Bangsa didirikan dibawah naungan Yayasan Reste Nur Insani yang merupakan institusi pendidikan formal mempunyai visi misi dan strategi baru dalam proses pembelajaran.
</p>
</div>
<div class="offset-lg-2 col-lg-5 col-md-12 home-banner-right">
<img class="foto-fluid" src="img/foto1.png" alt="" />
</div>
</div>
</div>
</section>
<!-- ================ End banner Area ================= -->
<!-- ================ Start Feature Area ================= -->
<section class="feature-area">
<div class="container-fluid">
<div class="feature-inner row">
<div class="feature-item d-flex">
<div class="section-title text-left text-black">
<h2>
VISI :
</h2>
<ul>
<li>1. Menjadi SMK yang terkemuka dan disegani, dengan penampilan peserta didik yang disiplin, berakhlak mulia, beriman dan berakhlak mulia.</li>
<li>2. Tidak menciptakan pengangguran baru, dengan lulusan yang memiliki nilai unggul, sehingga mendapatkan kepercayaan dan citra yang baik serta citra yang baik dari pemangku kepentingan</li>
</UL><BR>
<h2>
MISI :
</h2>
<ul>
<li>1. Menyediakan fasilitas belajar mengajar yang memadai</li>
<li>2. Menyelenggarakan proses belajar mengajar yang disiplin</li>
<li>3. Membekali guru sesuai proporsi ketentuan kompetensi</li>
<li>4. Menjaga keharmonisan dan kekompakan antara Yayasan, Guru, Staf dan siswa</li>
<li>5. Menyelenggarakan kegiatan ekstrakurikuler dengan sarana dan prasarana yang memadai</li>
<li>6. Mengembangkan guru dan staf dalam hal keterampilan teknis dan manajemen serta mengedepankan nilai seni keteladanan</li>
<li>7. Menjaga situasi yang kondusif untuk mendukung semua kegiatan agar dapat berjalan sesuai dengan harapan pemangku kepentingan</li>
</ul><BR>
<h2>
KEUNGGULAN HARAPAN BANGSA :
</h2>
<ul>
<li>1. Terakreditasi A (Sangat Baik)</li>
<li>2. sopan santun, disiplin, tanggung jawab, dan kreatif</li>
<li>3. tampil di tingkat kota</li>
<li>4. dikelola oleh Reste Nur Insani yang telah berpengalaman dalam dunia pendidikan</li>
<li>5. Disiplin belajar yang ketat, sekolah bebas narkoba, rokok & minuman keras.</li>
<li>6. tes sekolah berbasis online</li>
<li>7. kelas maksimal 32 siswa</li>
<li>8. Tambahan bahan kajian yaitu pengetahuan praktis, sikap life skill sesuai kebutuhan dunia kerja.</li>
<li>9. telah diakui oleh dunia bisnis dan industri</li>
<li>10. beasiswa tersedia</li>
<li>11. Memiliki unit kegiatan yang bervariasi</li>
<li>12. Dibantu program magang kerja*, dengan banyaknya MOU dengan perusahaan dan instansi terkait jurusan di SMK Harapan Bangsa</li>
<li>13. Menjalin kerjasama dengan beberapa Perguruan Tinggi Swasta dan Negeri dalam hal peningkatan kualitas SMK & penerimaan mahasiswa baru</li>
<li>14. Dengan jaringan hubungan perusahaan yang telah kami bentuk, tidak sulit bagi kami untuk menyalurkan alumni kami untuk bekerja sesuai dengan bidangnya, karena banyaknya permintaan lulusan termuda harapan bangsa, permintaan tenaga kerja yang datang dari perusahaan obat, serta institusi kesehatan ternama, serta perusahaan – perusahaan swasta dan BUMN yang membutuhkan akuntan muda dan tenaga komputer jaringan</li>
<li>15. absensi siswa dan guru berbasis online.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Feature Area ================= -->
<!-- ================ Start Popular Course Area ================= -->
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>
Bidang keahlian Jurusan :
</h2>
</div>
</div>
<div class="owl-carousel popuar-course-carusel">
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/tkj2.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Teknik Komputer Jaringan</p>
<p class="value">TKJ</p>
</div>
<a href="#">
<h4>TEKNIK KOMPUTER JARINGAN</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/akuntan.jpg" alt="img.akuntan" height="632" width="480"/>
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Akuntansi Komputer</p>
<p class="value">AKOM</p>
</div>
<a href="#">
<h4>AKUNTANSI KOMPUTER</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/farmasi1.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Farmasi Kesehatan</p>
</div>
<a href="#">
<h4>FARMASI KESEHATAN</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/tlm2.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Teknologi Laboratorium Medik</p>
</div>
<a href="#">
<h4>TEKNOLOGI LABORATORIUM MEDIK</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Popular Course Area ================= -->
<!-- ================ Start Video Area ================= -->
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Profile SMK <br>
Harapan Bangsa
</h2>
<p>
Tujuan pembangunan nasional Indonesia yang salah satunya adalah mencerdaskan dan mendewasakan seluruh masyarakat Indonesia.
Dengan cerdas dan dewasa dalam berpikir, bersikap, dan bertindak, maka akan tercapai cita-cita nasional lainnya,
sebagaimana tertuang dalam pembukaan UUD 1945, yaitu: Melindungi segenap bangsa, memajukan kesejahteraan umum, mencerdaskan kehidupan bangsa, dan melaksanakan dunia. memesan.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel">
<div class="single-video">
<div class="video-part"><br><br><br><br>
<img class="img-fluid" src="img/gedung2.png" alt="">
</a>
</div>
<p class="text-white mb-20"><br>
Salah satu bidang pembinaan dalam rangka mencerdaskan dan mendewasakan kehidupan bangsa adalah melalui pendidikan dan pelatihan.
Sehingga mencerdaskan kehidupan bangsa merupakan suatu keharusan dan tidak dapat ditawar lagi jika bangsa ini ingin maju,
berkembang, dan berkarakter, sehingga mampu bersaing dan sejajar dengan bangsa lain dalam segala bidang.<br>
Berdasarkan latar belakang di atas, maka pada tahun 2007 SMK Harapan Bangsa lahir di bawah naungan Yayasan Reste Nur Insani yang merupakan lembaga pendidikan formal dengan visi, misi dan strategi baru dalam proses pembelajaran.
</p>
</div>
<div class="single-video">
<div class="video-part"><br><br><br><br><br><br><br><br>
<img src="img/gedung1.png" />
</div>
<p class="text-white mb-20"><br>
Kota Depok memiliki banyak potensi lapangan pekerjaan, sehingga dengan potensi yang ada, dibutuhkan sumber daya manusia yang mampu memanfaatkan potensi yang ada.
Namun kendala yang dihadapi antara lain fasilitas kota yang minim jumlah sarana prasarana pendidikan, kesehatan, transportasi dan transportasi.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Video Area ================= -->
<!-- ================ Start Feature Area ================= -->
<section class="other-feature-area">
<div class="container">
<div class="feature-inner row">
<div class="col-lg-12">
<div class="section-title text-left">
<h2>
Ekstrakulikuler
</h2>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="other-feature-item">
<img src="img/tekwondo.png" alt="image" height="60" width="80"/>
<h4>Taekwondo</h4>
<div>
<p>
Taekwondo adalah seni bela diri asal Korea yang juga sebagai olahraga nasional Tiongkok.
Taekwondo adalah salah satu seni bela diri terkenal dunia yang dipertandingkan di olimpiade.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--160">
<div class="other-feature-item">
<img src="img/pencak.jpg" alt="image" height="60" width="80"/>
<h4>Pencak Silat</h4>
<div>
<p>
Pencak silat adalah suatu seni bela diri tradisional yang berasal dari Kepulauan Nusantara.
Seni bela diri ini secara luas dikenal di Indonesia, Malaysia, Brunei, dan Singapura, Filipina selatan,
dan Thailand selatan sesuai dengan penyebaran berbagai suku bangsa Nusantara.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--260">
<div class="other-feature-item">
<img src="img/futsal.jpg" alt="image" height="60" width="80"/>
<h4>Futsal</h4>
<div>
<p>
Futsal adalah permainan bola yang dimainkan oleh dua tim,
yang masing-masing beranggotakan lima orang. Tujuannya adalah memasukkan bola ke gawang lawan,
dengan memanipulasi bola dengan kaki. Selain lima pemain utama, setiap regu juga diizinkan memiliki pemain cadangan.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="other-feature-item">
<img src="img/tkjhb.png" alt="image" height="60" width="80"/>
<h4>TKJ Club</h4>
<div>
<p>
Program TKJ CLUB adalah model pengembangan pendidikan karakter berbasis sumber daya manusia
yang disesuaikan dengan minat dan bakat serta kompetensi bagi peserta didik untuk menjadi
bibit yang unggul melalui program PSG (Pendidikan Sistem Ganda) atau PRAKERIN (Praktek Kerja Industri) didunia industri.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--160">
<div class="other-feature-item">
<img src="img/paskibra.jpg" alt="image" height="60" width="80"/>
<h4>Paskibra</h4>
<div>
<p>
Paskibra adalah singkatan dari Pasukan Pengibar Bendera yang bukan bertugas
sebagai pengibar dan/atau penurun duplikat sang saka merah putih di tingkat
kota/kabupaten, provinsi, maupun nasional. Mereka bertugas ditingkat lain
seperti di sekolah, kantor diplomatik Perwakilan Indonesia di luar negeri, serta di suatu instansi/organisasi lain.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--260">
<div class="other-feature-item">
<img src="img/pramuka.png" alt="image" height="60" width="80"/>
<h4>Pramuka</h4>
<div>
<p>
Gerakan Pramuka Indonesia adalah nama organisasi pendidikan nonformal yang menyelenggarakan pendidikan kepanduan di Indonesia.
Kata "Pramuka" merupakan singkatan dari Praja Muda Karana, yang memiliki arti Jiwa Muda yang Suka Berkarya.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Feature Area ================= -->
<!-- ================ Start Testimonials Area ================= -->
<section class="blog-post-area">
<div class="container">
<h2>
FASILITAS<br>
SMK HARAPAN BANGSA : <br>
</h2>
<div class="offset-lg-1 col-lg-6">
<img src="img/fasilitas.png" alt="" />
</div>
</div>
<!-- ================ End Testimonials Area ================= -->
<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 single-footer-widget">
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a></li>
<li><a href="contacts.html">Kontak</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Informasi</h4>
<a class=>Email : </a><p>ariefichwan2404@gmail.com</p>
<a class=>Phone : </a><p>Telp. 021 87720786 | Fax. 021-87721016</p>
<a class=>Alamat : </a><p>Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951</p>
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="fa fa-heart-o" aria-hidden="true"></i> by arief</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="https://www.facebook.com/smksharapanbangsa/"target="_new"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link"target="_new"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Hasil dari codingan tersebut :
Script about.html untuk profile :
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/logo-hb.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Profile</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/hexagons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-hb.png" alt="image" height="60" width="80"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a>
</li>
<li><a href="contacts.html">Kontak</a></li>
<li>
<button class="search">
<span class="lnr lnr-magnifier" id="search"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-input" id="search-input-box">
<div class="container">
<form class="d-flex justify-content-between">
<input type="text" class="form-control" id="search-input" placeholder="Search Here" />
<button type="submit" class="btn"></button>
<span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
</form>
</div>
</div>
</header>
<!-- ================ End Header Area ================= -->
<!-- ================ start banner Area ================= -->
<section class="banner-area">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Profile dan Fasilitas
</h1>
<p class="mx-auto text-white mt-20 mb-40">
Sebagai institusi pendidikan berusaha menyelaraskan kualitas pendidikan dengan<BR>
kebutuhan dunia kerja dalam pembentukan sumber daya manusia yang unggul.
</p>
<div class="link-nav">
<span class="box">
<a href="index.html">Home </a>
<i class="lnr lnr-arrow-right"></i>
<a href="about.html">Profile</a>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End banner Area ================= -->
<!-- ================ Start Video Area ================= -->
<section class="video-area section-gap-bottom">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="section-title text-white">
<h2 class="text-white">
Profile SMK <br>
Harapan Bangsa
</h2>
<p>
Tujuan pembangunan nasional Indonesia yang salah satunya adalah mencerdaskan dan mendewasakan seluruh masyarakat Indonesia.
Dengan cerdas dan dewasa dalam berpikir, bersikap, dan bertindak, maka akan tercapai cita-cita nasional lainnya,
sebagaimana tertuang dalam pembukaan UUD 1945, yaitu: Melindungi segenap bangsa, memajukan kesejahteraan umum, mencerdaskan kehidupan bangsa, dan melaksanakan dunia. memesan.
</p>
</div>
</div>
<div class="offset-lg-1 col-md-6 video-left">
<div class="owl-carousel video-carousel">
<div class="single-video">
<div class="video-part"><br><br><br><br>
<img class="img-fluid" src="img/gedung2.png" alt="">
</a>
</div>
<p class="text-white mb-20"><br>
Salah satu bidang pembinaan dalam rangka mencerdaskan dan mendewasakan kehidupan bangsa adalah melalui pendidikan dan pelatihan.
Sehingga mencerdaskan kehidupan bangsa merupakan suatu keharusan dan tidak dapat ditawar lagi jika bangsa ini ingin maju,
berkembang, dan berkarakter, sehingga mampu bersaing dan sejajar dengan bangsa lain dalam segala bidang.<br>
Berdasarkan latar belakang di atas, maka pada tahun 2007 SMK Harapan Bangsa lahir di bawah naungan Yayasan Reste Nur Insani yang merupakan lembaga pendidikan formal dengan visi, misi dan strategi baru dalam proses pembelajaran.
</p>
</div>
<div class="single-video">
<div class="video-part"><br><br><br><br><br><br><br><br>
<img src="img/gedung1.png" />
</div>
<p class="text-white mb-20"><br>
Kota Depok memiliki banyak potensi lapangan pekerjaan, sehingga dengan potensi yang ada, dibutuhkan sumber daya manusia yang mampu memanfaatkan potensi yang ada.
Namun kendala yang dihadapi antara lain fasilitas kota yang minim jumlah sarana prasarana pendidikan, kesehatan, transportasi dan transportasi.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Video Area ================= -->
<!-- ================ Start Feature Area ================= -->
<section class="other-feature-area">
<div class="container">
<div class="feature-inner row">
<div class="col-lg-12">
<div class="section-title text-left">
<h2>
Ekstrakulikuler
</h2>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="other-feature-item">
<img src="img/tekwondo.png" alt="image" height="60" width="80"/>
<h4>Taekwondo</h4>
<div>
<p>
Taekwondo adalah seni bela diri asal Korea yang juga sebagai olahraga nasional Tiongkok.
Taekwondo adalah salah satu seni bela diri terkenal dunia yang dipertandingkan di olimpiade.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--160">
<div class="other-feature-item">
<img src="img/pencak.jpg" alt="image" height="60" width="80"/>
<h4>Pencak Silat</h4>
<div>
<p>
Pencak silat adalah suatu seni bela diri tradisional yang berasal dari Kepulauan Nusantara.
Seni bela diri ini secara luas dikenal di Indonesia, Malaysia, Brunei, dan Singapura, Filipina selatan,
dan Thailand selatan sesuai dengan penyebaran berbagai suku bangsa Nusantara.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--260">
<div class="other-feature-item">
<img src="img/futsal.jpg" alt="image" height="60" width="80"/>
<h4>Futsal</h4>
<div>
<p>
Futsal adalah permainan bola yang dimainkan oleh dua tim,
yang masing-masing beranggotakan lima orang. Tujuannya adalah memasukkan bola ke gawang lawan,
dengan memanipulasi bola dengan kaki. Selain lima pemain utama, setiap regu juga diizinkan memiliki pemain cadangan.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="other-feature-item">
<img src="img/tkjhb.png" alt="image" height="60" width="80"/>
<h4>TKJ Club</h4>
<div>
<p>
Program TKJ CLUB adalah model pengembangan pendidikan karakter berbasis sumber daya manusia
yang disesuaikan dengan minat dan bakat serta kompetensi bagi peserta didik untuk menjadi
bibit yang unggul melalui program PSG (Pendidikan Sistem Ganda) atau PRAKERIN (Praktek Kerja Industri) didunia industri.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--160">
<div class="other-feature-item">
<img src="img/paskibra.jpg" alt="image" height="60" width="80"/>
<h4>Paskibra</h4>
<div>
<p>
Paskibra adalah singkatan dari Pasukan Pengibar Bendera yang bukan bertugas
sebagai pengibar dan/atau penurun duplikat sang saka merah putih di tingkat
kota/kabupaten, provinsi, maupun nasional. Mereka bertugas ditingkat lain
seperti di sekolah, kantor diplomatik Perwakilan Indonesia di luar negeri, serta di suatu instansi/organisasi lain.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt--260">
<div class="other-feature-item">
<img src="img/pramuka.png" alt="image" height="60" width="80"/>
<h4>Pramuka</h4>
<div>
<p>
Gerakan Pramuka Indonesia adalah nama organisasi pendidikan nonformal yang menyelenggarakan pendidikan kepanduan di Indonesia.
Kata "Pramuka" merupakan singkatan dari Praja Muda Karana, yang memiliki arti Jiwa Muda yang Suka Berkarya.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Feature Area ================= -->
<!-- ================ Start Testimonials Area ================= -->
<section class="blog-post-area">
<div class="container">
<h2>
FASILITAS<br>
SMK HARAPAN BANGSA : <br>
</h2>
<div class="offset-lg-1 col-lg-6">
<img src="img/fasilitas.png" alt="" />
</div>
</div>
<!-- ================ End Testimonials Area ================= -->
<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 single-footer-widget">
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a></li>
<li><a href="contacts.html">Kontak</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Informasi</h4>
<a class=>Email : </a><p>ariefichwan2404@gmail.com</p>
<a class=>Phone : </a><p>Telp. 021 87720786 | Fax. 021-87721016</p>
<a class=>Alamat : </a><p>Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951</p>
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="fa fa-heart-o" aria-hidden="true"></i> by arief</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="https://www.facebook.com/smksharapanbangsa/"target="_new"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link"target="_new"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Hasil dari codingan tersebut :
Script courses.html :
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/logo-hb.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Prestasi</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/hexagons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-hb.png" alt="image" height="60" width="80"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a>
</li>
<li><a href="contacts.html">Kontak</a></li>
<li>
<button class="search">
<span class="lnr lnr-magnifier" id="search"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-input" id="search-input-box">
<div class="container">
<form class="d-flex justify-content-between">
<input type="text" class="form-control" id="search-input" placeholder="Search Here" />
<button type="submit" class="btn"></button>
<span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
</form>
</div>
</div>
</header>
<!-- ================ End Header Area ================= -->
<!-- ================ start banner Area ================= -->
<section class="banner-area">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
PRESTASI DAN BIDANG KEAHLIAN
</h1>
<p class="mx-auto text-white mt-20 mb-40">
SMK Harapan Bangsa Memiliki beberapa Prestasi loh!!
</p>
<div class="link-nav">
<span class="box">
<a href="index.html">Home </a>
<i class="lnr lnr-arrow-right"></i>
<a href="courses.html">Prestasi</a>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End banner Area ================= -->
<!-- ================ Start Feature Area ================= -->
<div class="col-lg-2 col-md-6">
<div class="feature-item d-flex">
<div class="ml-20">
</div>
</div>
</div>
<div class="flex flex-wrap overflow-hidden px-10">
<div class="w-full xl:w-1/2">
</div>
<div class="w-full grid justify-items-center items-center xl:w-1/2">
<img src="img/piala.png" class="mt-4" width="500" height="500" alt="">
</div>
<!-- component -->
<div class="flex mt-16 w-full items-center text-center justify-center">
<div class="grid grid-cols-1 gap-20 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
<!-- 1 card -->
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/gold 1.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 1 <br> Ankes Jabodetabek
<br> 2019
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/gold 1.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 1 <br> Farmasi Kota Depok
<br> 2015
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/gold 1.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 1 <br> PASKIBRAKA Depok
<br> 2019
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/gold 1.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 1 <br> TKJ Kota Depok
<br> 2018
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/gold 1.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 1 <br> TKJ Kota Depok
<br> 2019
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/silver.png." class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 2 <br> Farmasi Kota Depok
<br> 2016
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/silver.png." class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 2 <br> Kim. Ind. Kota Depok
<br> 2016
</p>
</div>
<div class="relative bg-white py-6 px-6 w-56 h-56 rounded-3xl my-4 shadow-xl ">
<img src="img/coklat.png" class="inline xl:mt-3" width="80" height="80" alt="">
<p class="pt-3 font-semibold text-lg">Juara 3 <br> TKJ Kota Depok
<br> 2016
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Feature Area ================= -->
<!-- ================ Start Popular Course Area ================= -->
<section class="popular-course-area section-gap">
<div class="container-fluid">
<div class="row justify-content-center section-title">
<div class="col-lg-12">
<h2>
Bidang keahlian Jurusan :
</h2>
</div>
</div>
<div class="owl-carousel popuar-course-carusel">
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/tkj2.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Teknik Komputer Jaringan</p>
<p class="value">TKJ</p>
</div>
<a href="#">
<h4>TEKNIK KOMPUTER JARINGAN</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/akuntan.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Akuntansi Komputer</p>
<p class="value">AKOM</p>
</div>
<a href="#">
<h4>AKUNTANSI KOMPUTER</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/farmasi1.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Farmasi Kesehatan</p>
</div>
<a href="#">
<h4>FARMASI KESEHATAN</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
<div class="single-popular-course">
<div class="thumb">
<img class="f-img img-fluid mx-auto" src="img/tlm2.jpg" alt="" />
</div>
<div class="details">
<div class="d-flex justify-content-between mb-20">
<p class="name">Teknologi Laboratorium Medik</p>
</div>
<a href="#">
<h4>TEKNOLOGI LABORATORIUM MEDIK</h4>
</a>
<div class="bottom d-flex mt-15">
<ul class="list">
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-star"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End Popular Course Area ================= -->
<!-- ================ Start Feature Area ================= -->
<section class="other-feature-area">
<div class="container">
<div class="feature-inner row">
<div class="col-lg-12">
<div class="section-title text-left">
<h2>
Struktur Dewan Guru
</h2>
</div>
</div>
<div class="w-full grid justify-items-center items-center xl:w-1/2">
<img src="img/gambar.png" class="mt-4" width="1100" height="600" alt="">
</div>
<div class="w-full mb-14">
<img src="/image/Struktr img/gambar.png" alt="">
</div>
<div class="w-full">
<h2 class="text-3xl font-bold text-bold">Guru : </h2>
</div>
<!-- Daftar Guru -->
<div class="flex my-5 w-full flex-wrap justify-center">
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ali Imran, S.Kom</p>
<p class="text-sm font-bold">IT Consultant</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Arif Rifai, S.Kom</p>
<p class="text-sm font-bold">Komputer Jaringan Dasar</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">A. Latif, S.Ag</p>
<p class="text-sm font-bold">PAI</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kurnia Mustiarti, M.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Paryati, SE</p>
<p class="text-sm font-bold">Ilmu Resep, Prak. Resep, Responsi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ety Suyety, S.Pd</p>
<p class="text-sm font-bold">Pajak, PKK, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nur Handayani, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rusdiana, SKM</p>
<p class="text-sm font-bold">K3LH, PKK (T)</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Sutardi, SE</p>
<p class="text-sm font-bold">PKN</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nirsanto, S.Pd., MM</p>
<p class="text-sm font-bold">Sejarah Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Redi Dias Setiadi, S.Pd</p>
<p class="text-sm font-bold">Bahasa Sunda</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Sri Hastutie, S.Ag., S.Pd.I</p>
<p class="text-sm font-bold">Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fathiah Ramadani El Afsya, S.Pd</p>
<p class="text-sm font-bold">IPA, Fisika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Indra Panca Hermawan, S.Pd., MM</p>
<p class="text-sm font-bold">PKN, SBK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ratna Suminar, S.Pd</p>
<p class="text-sm font-bold">Seni Budaya, Bahasa Sunda</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">P. Catur Nugroho</p>
<p class="text-sm font-bold">UUK, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Setiyarini, S.Si, M.Farm, Apt.</p>
<p class="text-sm font-bold">Ilmu Resep, Farmakognosi, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Drs. Tulus Sutanto</p>
<p class="text-sm font-bold">Akuntansi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ir. M. Husni Usman, MM</p>
<p class="text-sm font-bold">Matematika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kiki Herwanti, S.Pd</p>
<p class="text-sm font-bold">Kimia Dasar, Kimia Farmasi, Kimia Organik , PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ely Sulistriana, M.Pd</p>
<p class="text-sm font-bold">Bahasa Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Veronika Cahyandari, S.Pd, S.Farm</p>
<p class="text-sm font-bold">Simulasi Apotek, Prak. Resep, Responsi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rachmat, SE</p>
<p class="text-sm font-bold">IPS</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Septiana Putri Rahayu, S.Pd</p>
<p class="text-sm font-bold">Kimia Anorganik, Fisika, Biologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Dian Solinda, S.Pd., M.Pd</p>
<p class="text-sm font-bold">Matematika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Santy Widyasari, S.Si., Apt</p>
<p class="text-sm font-bold">Farmakologi, Prak. Resep, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Didik Sudjanto, S.Pd</p>
<p class="text-sm font-bold">Simdig, Siskom</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Eva Octaviani, SS</p>
<p class="text-sm font-bold">Bahasa Jepang</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rusdiana, S.KM</p>
<p class="text-sm font-bold">K3LH, PKK (T)</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Catur Nugroho</p>
<p class="text-sm font-bold">UUK, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Santy Widyasari, S.Si, Apt. </p>
<p class="text-sm font-bold">Farmakologi, Prak. Resep, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Didik Sudjanto, S.Pd.</p>
<p class="text-sm font-bold">Simdig, Siskom</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Yeni Ayu Rahmawati, S.Pd</p>
<p class="text-sm font-bold">Adm. Umum, Simdig</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Isma Yulianto, SE., MM</p>
<p class="text-sm font-bold">Teknologi WAN</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Muhammad Kafrawi, S.E</p>
<p class="text-sm font-bold">Spreadsheet, Akuntansi Lembaga</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Basri, S.PD.I</p>
<p class="text-sm font-bold">Agama, BTQ</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ita Octaviani, S.Pd</p>
<p class="text-sm font-bold">Matematika, SBK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Dedi Jayadi, S.Sy</p>
<p class="text-sm font-bold">Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nuni Setiarmi, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fajri Islamiyanto, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fariz Achmad</p>
<p class="text-sm font-bold">PJOK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Arum Esti Mumpuni, S.Pd</p>
<p class="text-sm font-bold">Labkesda, Parasitolog</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kiky Rizky Amalia, S.Pd</p>
<p class="text-sm font-bold">Mikrobiologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Tegar Prasetyo, S,Kom</p>
<p class="text-sm font-bold">Pemrograman Dasar, Design Grafis</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Herlin Nur Indah, A.Md</p>
<p class="text-sm font-bold">Teknologi Layanan Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Zeta Adha Trisativa</p>
<p class="text-sm font-bold">Administrasi Sistem Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Anisa Dwi Kusherawati</p>
<p class="text-sm font-bold">Praktik PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Detta Pagisty Arthamaya</p>
<p class="text-sm font-bold">Hematologi, Anfisman, Mikrobiologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Febi Larasati, S.Pd</p>
<p class="text-sm font-bold">Bahasa Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Gunawan Agung</p>
<p class="text-sm font-bold">BTQ, Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Feby Saskia Putri, S.Farm</p>
<p class="text-sm font-bold">Farmakologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nurul Hana, S.Pd</p>
<p class="text-sm font-bold">Akuntansi Keuangan, Akuntansi Lembaga</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kartika Diana Priyadi</p>
<p class="text-sm font-bold">PKK, Kimia Klinik</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rahmawati Utami Fajrin</p>
<p class="text-sm font-bold">Dasman, Imunoserologi, Histologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Khoirunnisa</p>
<p class="text-sm font-bold">Administrasi Sistem Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Iin Tri Mulya Ningsih, S.Pd</p>
<p class="text-sm font-bold">Prak. Akuntansi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Siti Sundari, S.M</p>
<p class="text-sm font-bold">Dasar Perbankan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Adji Saka Ardhana</p>
<p class="text-sm font-bold">IoT</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rifqi Fadhlurrahman</p>
<p class="text-sm font-bold">Administrasi Infrastruktur Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Siti Muthiah, S.E.I</p>
<p class="text-sm font-bold">Etika Profesi, Pengantar Ekonomi Bisnis</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Yubel Tampasigi, S.Th</p>
<p class="text-sm font-bold">Pendidikan Agama Kristen</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Achmad Faisal Ghifari</p>
<p class="text-sm font-bold">Siskom, Simdig</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Bagas Hadi Saputra</p>
<p class="text-sm font-bold">PJOK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Intania Maharani</p>
<p class="text-sm font-bold">Kimia Klinik</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Isti Nurhasanah</p>
<p class="text-sm font-bold">PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nurhayati</p>
<p class="text-sm font-bold">Guru TU</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</section>
<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 single-footer-widget">
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a></li>
<li><a href="contacts.html">Kontak</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Informasi</h4>
<a class=>Email : </a><p>ariefichwan2404@gmail.com</p>
<a class=>Phone : </a><p>Telp. 021 87720786 | Fax. 021-87721016</p>
<a class=>Alamat : </a><p>Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951</p>
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="fa fa-heart-o" aria-hidden="true"></i> by arief</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="https://www.facebook.com/smksharapanbangsa/"target="_new"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link"target="_new"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Hasil dari codingan tersebut : 
Script courses.html :
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/logo-hb.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Struktur Dewan Guru</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/hexagons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-hb.png" alt="image" height="60" width="80"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a>
</li>
<li><a href="contacts.html">Kontak</a></li>
<li>
<button class="search">
<span class="lnr lnr-magnifier" id="search"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-input" id="search-input-box">
<div class="container">
<form class="d-flex justify-content-between">
<input type="text" class="form-control" id="search-input" placeholder="Search Here" />
<button type="submit" class="btn"></button>
<span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
</form>
</div>
</div>
</header>
<!-- ================ End Header Area ================= -->
<!-- ================ start banner Area ================= -->
<section class="banner-area">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Struktur Dewan Guru
</h1>
<p class="mx-auto text-white mt-20 mb-40">
Berikut Struktur dan para guru yang mengajar ada SMK Harapan Bangsa Depok.
</p>
<div class="link-nav">
<span class="box">
<a href="index.html">Home </a>
<i class="lnr lnr-arrow-right"></i>
<a href="courses.html">Courses </a>
<i class="lnr lnr-arrow-right"></i>
<a href="course-details.html">Course Details</a>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End banner Area ================= -->
<!--================ Start Course Details Area =================-->
<section class="other-feature-area">
<div class="container">
<div class="feature-inner row">
<div class="col-lg-12">
<div class="w-full grid justify-items-center items-center xl:w-1/2">
<img src="img/gambar.png" class="mt-4" width="1100" height="600" alt="">
</div>
<div class="w-full mb-14">
<img src="/image/Struktr img/gambar.png" alt="">
</div>
<div class="w-full">
<h2 class="text-3xl font-bold text-bold">Guru : </h2>
</div>
<!-- Daftar Guru -->
<div class="flex my-5 w-full flex-wrap justify-center">
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ali Imran, S.Kom</p>
<p class="text-sm font-bold">IT Consultant</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Arif Rifai, S.Kom</p>
<p class="text-sm font-bold">Komputer Jaringan Dasar</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">A. Latif, S.Ag</p>
<p class="text-sm font-bold">PAI</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kurnia Mustiarti, M.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Paryati, SE</p>
<p class="text-sm font-bold">Ilmu Resep, Prak. Resep, Responsi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ety Suyety, S.Pd</p>
<p class="text-sm font-bold">Pajak, PKK, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nur Handayani, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rusdiana, SKM</p>
<p class="text-sm font-bold">K3LH, PKK (T)</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Sutardi, SE</p>
<p class="text-sm font-bold">PKN</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nirsanto, S.Pd., MM</p>
<p class="text-sm font-bold">Sejarah Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Redi Dias Setiadi, S.Pd</p>
<p class="text-sm font-bold">Bahasa Sunda</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Sri Hastutie, S.Ag., S.Pd.I</p>
<p class="text-sm font-bold">Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fathiah Ramadani El Afsya, S.Pd</p>
<p class="text-sm font-bold">IPA, Fisika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Indra Panca Hermawan, S.Pd., MM</p>
<p class="text-sm font-bold">PKN, SBK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ratna Suminar, S.Pd</p>
<p class="text-sm font-bold">Seni Budaya, Bahasa Sunda</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">P. Catur Nugroho</p>
<p class="text-sm font-bold">UUK, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Setiyarini, S.Si, M.Farm, Apt.</p>
<p class="text-sm font-bold">Ilmu Resep, Farmakognosi, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Drs. Tulus Sutanto</p>
<p class="text-sm font-bold">Akuntansi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ir. M. Husni Usman, MM</p>
<p class="text-sm font-bold">Matematika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kiki Herwanti, S.Pd</p>
<p class="text-sm font-bold">Kimia Dasar, Kimia Farmasi, Kimia Organik , PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ely Sulistriana, M.Pd</p>
<p class="text-sm font-bold">Bahasa Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Veronika Cahyandari, S.Pd, S.Farm</p>
<p class="text-sm font-bold">Simulasi Apotek, Prak. Resep, Responsi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rachmat, SE</p>
<p class="text-sm font-bold">IPS</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Septiana Putri Rahayu, S.Pd</p>
<p class="text-sm font-bold">Kimia Anorganik, Fisika, Biologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Dian Solinda, S.Pd., M.Pd</p>
<p class="text-sm font-bold">Matematika</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Santy Widyasari, S.Si., Apt</p>
<p class="text-sm font-bold">Farmakologi, Prak. Resep, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Didik Sudjanto, S.Pd</p>
<p class="text-sm font-bold">Simdig, Siskom</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Eva Octaviani, SS</p>
<p class="text-sm font-bold">Bahasa Jepang</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rusdiana, S.KM</p>
<p class="text-sm font-bold">K3LH, PKK (T)</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Catur Nugroho</p>
<p class="text-sm font-bold">UUK, Prak. Resep</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Santy Widyasari, S.Si, Apt. </p>
<p class="text-sm font-bold">Farmakologi, Prak. Resep, Adm. Farmasi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Didik Sudjanto, S.Pd.</p>
<p class="text-sm font-bold">Simdig, Siskom</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Yeni Ayu Rahmawati, S.Pd</p>
<p class="text-sm font-bold">Adm. Umum, Simdig</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Isma Yulianto, SE., MM</p>
<p class="text-sm font-bold">Teknologi WAN</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Muhammad Kafrawi, S.E</p>
<p class="text-sm font-bold">Spreadsheet, Akuntansi Lembaga</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Basri, S.PD.I</p>
<p class="text-sm font-bold">Agama, BTQ</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Ita Octaviani, S.Pd</p>
<p class="text-sm font-bold">Matematika, SBK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Dedi Jayadi, S.Sy</p>
<p class="text-sm font-bold">Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nuni Setiarmi, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fajri Islamiyanto, S.Pd</p>
<p class="text-sm font-bold">Bahasa Inggris</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Fariz Achmad</p>
<p class="text-sm font-bold">PJOK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Arum Esti Mumpuni, S.Pd</p>
<p class="text-sm font-bold">Labkesda, Parasitolog</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kiky Rizky Amalia, S.Pd</p>
<p class="text-sm font-bold">Mikrobiologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Tegar Prasetyo, S,Kom</p>
<p class="text-sm font-bold">Pemrograman Dasar, Design Grafis</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Herlin Nur Indah, A.Md</p>
<p class="text-sm font-bold">Teknologi Layanan Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Zeta Adha Trisativa</p>
<p class="text-sm font-bold">Administrasi Sistem Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Anisa Dwi Kusherawati</p>
<p class="text-sm font-bold">Praktik PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Detta Pagisty Arthamaya</p>
<p class="text-sm font-bold">Hematologi, Anfisman, Mikrobiologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Febi Larasati, S.Pd</p>
<p class="text-sm font-bold">Bahasa Indonesia</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Gunawan Agung</p>
<p class="text-sm font-bold">BTQ, Agama</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Feby Saskia Putri, S.Farm</p>
<p class="text-sm font-bold">Farmakologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nurul Hana, S.Pd</p>
<p class="text-sm font-bold">Akuntansi Keuangan, Akuntansi Lembaga</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Kartika Diana Priyadi</p>
<p class="text-sm font-bold">PKK, Kimia Klinik</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rahmawati Utami Fajrin</p>
<p class="text-sm font-bold">Dasman, Imunoserologi, Histologi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Khoirunnisa</p>
<p class="text-sm font-bold">Administrasi Sistem Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Iin Tri Mulya Ningsih, S.Pd</p>
<p class="text-sm font-bold">Prak. Akuntansi</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Siti Sundari, S.M</p>
<p class="text-sm font-bold">Dasar Perbankan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Adji Saka Ardhana</p>
<p class="text-sm font-bold">IoT</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Rifqi Fadhlurrahman</p>
<p class="text-sm font-bold">Administrasi Infrastruktur Jaringan</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Siti Muthiah, S.E.I</p>
<p class="text-sm font-bold">Etika Profesi, Pengantar Ekonomi Bisnis</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Yubel Tampasigi, S.Th</p>
<p class="text-sm font-bold">Pendidikan Agama Kristen</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Achmad Faisal Ghifari</p>
<p class="text-sm font-bold">Siskom, Simdig</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Bagas Hadi Saputra</p>
<p class="text-sm font-bold">PJOK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Intania Maharani</p>
<p class="text-sm font-bold">Kimia Klinik</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Isti Nurhasanah</p>
<p class="text-sm font-bold">PKK</p>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="w-full flex justify-center md:w-1/2 xl:w-1/4">
<div class="w-72 h-28 border-black-300 flex items-center shadow-md rounded-3xl mx-2 my-5 border-2">
<div class="w-1/4">
<img src="img/guru.gif" class="inline mx-2" alt="" width="60" height="60">
</div>
<div class="w-3/4 my-5 mx-3">
<div class="divide-y-2 divide-gray-300 mr-5">
<p class="text-base font-bold text-bold">Nurhayati</p>
<p class="text-sm font-bold">Guru TU</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</section>
<!--================ End Course Details Area =================-->
<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 single-footer-widget">
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a></li>
<li><a href="contacts.html">Kontak</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Informasi</h4>
<a class=>Email : </a><p>ariefichwan2404@gmail.com</p>
<a class=>Phone : </a><p>Telp. 021 87720786 | Fax. 021-87721016</p>
<a class=>Alamat : </a><p>Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951</p>
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="fa fa-heart-o" aria-hidden="true"></i> by arief</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="https://www.facebook.com/smksharapanbangsa/"target="_new"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link"target="_new"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Hasil dari codingan tersebut :
Script courses.html :
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/logo-hb.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>SMK HARAPAN BANGSA</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700" rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/linearicons.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/hexagons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo-hb.png" alt="image" height="60" width="80"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a>
</li>
<li><a href="contacts.html">Kontak</a></li>
<li>
<button class="search">
<span class="lnr lnr-magnifier" id="search"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="search-input" id="search-input-box">
<div class="container">
<form class="d-flex justify-content-between">
<input type="text" class="form-control" id="search-input" placeholder="Search Here" />
<button type="submit" class="btn"></button>
<span class="lnr lnr-cross" id="close-search" title="Close Search"></span>
</form>
</div>
</div>
</header>
<!-- ================ End Header Area ================= -->
<!-- ================ start banner Area ================= -->
<section class="banner-area">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Kontak saya dibawah
</h1>
<div class="link-nav">
<span class="box">
<a href="index.html">Home </a>
<i class="lnr lnr-arrow-right"></i>
<a href="contacts.html">Contacts</a>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- ================ End banner Area ================= -->
<!-- ================ Start contact-page Area ================= -->
<section class="contact-page-area section-gap">
<div class="container">
<div class="row">
<div class="Map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2724.080530773068!2d106.83513506534179!3d-6.3530505382590325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69eb428c638947%3A0x3be0fb2677668621!2sSekolah%20Menengah%20Kejuruan%20Harapan%20Bangsa!5e0!3m2!1sid!2sid!4v1659928487017!5m2!1sid!2sid" width="1150" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col-lg-4 d-flex flex-column address-wrap"><br>
<div class="single-contact-address d-flex flex-row"><br>
<div class="icon"><br>
<span class="lnr lnr-home"></span><br>
</div>
<div class="contact-details">
<h5>SMK HARAPAN BANGSA</h5>
<p>
Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951
</p>
</div>
</div>
<div class="single-contact-address d-flex flex-row">
<div class="icon">
<span class="lnr lnr-phone-handset"></span>
</div>
<div class="contact-details">
<h5>Telp. 021 ‒ 87720786 </h5>
<p> Fax. 021- 87721016</p>
</div>
</div>
<div class="single-contact-address d-flex flex-row">
<div class="icon">
<span class="lnr lnr-envelope"></span>
</div>
<div class="contact-details">
<h5>ariefichwan2404@gmail.com</h5>
</div>
</div>
<ul>
<li><a rel="nofollow" href="https://www.facebook.com/smksharapanbangsa/" target="_new"><img src="img/fb.png" alt="fb"> SMK HARAPAN BANGSA</a></li>
<li><a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link" target="_new"><img src="img/twt.png" target="_new" alt="tweter"> SMK HARAPAN BANGSA</a></li>
<li><a href="https://www.youtube.com/channel/UCfJ_yGJB-K9qv90ks6DGMzA" target="_new"><img src="img/ytb.png" target="_new" alt="youtube"> SMK HARAPAN BANGSA</a></li>
</ul>
</div>
<div class="col-lg-8"><br>
<form class="form-area contact-form text-right" id="myForm" action="mail.php" method="post">
<div class="row">
<div class="col-lg-6 form-group">
<input name="name" placeholder="Enter your name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'"
class="common-input mb-20 form-control" required="" type="text">
<input name="email" placeholder="Enter email address" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" class="common-input mb-20 form-control"
required="" type="email">
<input name="subject" placeholder="Enter subject" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter subject'"
class="common-input mb-20 form-control" required="" type="text">
</div>
<div class="col-lg-6 form-group">
<textarea class="common-textarea form-control" name="message" placeholder="Enter Messege" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Enter Messege'" required=""></textarea>
</div>
<div class="col-lg-12">
<div class="alert-msg" style="text-align: left;"></div>
<button class="btn" style="float: right;">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- ================ End contact-page Area ================= -->
<!-- ================ start footer Area ================= -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6 single-footer-widget">
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Profile</a></li>
<li><a href="courses.html">Prestasi</a></li>
<li><a href="course-details.html">Struktur Dewan Guru</a></li>
<li><a href="contacts.html">Kontak</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 single-footer-widget">
<h4>Informasi</h4>
<a class=>Email : </a><p>ariefichwan2404@gmail.com</p>
<a class=>Phone : </a><p>Telp. 021 87720786 | Fax. 021-87721016</p>
<a class=>Alamat : </a><p>Jl. Komjen Pol. M. Jasin ( Akses UI ) No. 89 Kelapa Dua Cimanggis, Depok Jawa Barat 16951</p>
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
<div class="footer-bottom row align-items-center">
<p class="footer-text m-0 col-lg-8 col-md-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="fa fa-heart-o" aria-hidden="true"></i> by arief</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
<div class="col-lg-4 col-md-12 footer-social">
<a href="https://www.facebook.com/smksharapanbangsa/"target="_new"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/smk_harapanbangsa/?utm_medium=copy_link"target="_new"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Hasil dari codingan tersebut :
0 Komentar