API tools faq
paste
last63

html profile v2

last63
Nov 14th, 2022
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <meta name="description" content="Profile IDN" />
  8. <meta name="keywords" content="html|css|js" />
  9.  
  10. <!-- FAVICON -->
  11. <link
  12. rel="shortcut icon"
  13. href="assets/img/logo-favicon.png"
  14. type="image/x-icon"
  15. />
  16.  
  17. <!-- LINK CSS -->
  18. <link rel="stylesheet" href="assets/css/style.css" />
  19.  
  20. <title>Profile IDN</title>
  21. </head>
  22.  
  23. <body>
  24. <!-- ======================== NAVBAR ======================== -->
  25. <nav>
  26. <ul class="navbar-list">
  27. <li class="logo">
  28. <a href="#">IDN Boarding School</a>
  29. </li>
  30. <li class="toggle">
  31. <img src="assets/img/menu-bar.png" width="30" height="30" alt="menu"/>
  32. </li>
  33. <li class="navbar-item">
  34. <a href="#syarat-pendaftaran" class="navbar-link">Syarat Pendaftaran</a>
  35. </li>
  36. <li class="navbar-item">
  37. <a href="#status-kelulusan" class="navbar-link">Status Kelulusan</a>
  38. </li>
  39. <li class="navbar-item">
  40. <a href="#itfest" class="navbar-link">IDN IT Fest</a>
  41. </li>
  42. <li class="navbar-item">
  43. <a href="#profile" class="navbar-link">Profile</a>
  44. </li>
  45. <li class="navbar-item">
  46. <a href="#" class="navbar-link">Kontak</a>
  47. </li>
  48. <li class="navbar-item">
  49. <a href="#" class="navbar-link-login">Login</a>
  50. </li>
  51. <li class="navbar-item">
  52. <a href="#" class="navbar-link-register">Register</a>
  53. </li>
  54. </ul>
  55. </nav>
  56. <!-- ======================== END NAVBAR ======================== -->
  57.  
  58. <!-- ======================== HEADER ======================== -->
  59. <header>
  60. <section class="header">
  61. <div class="header-container">
  62. <div class="logo-idn">
  63. <img src="assets/img/logo-favicon.png" alt="" class="logo-img" />
  64. </div>
  65. <div class="big-heading">
  66. <h1>IDN Boarding School Solo</h1>
  67. <p>
  68. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam
  69. nulla autem atque error molestiae sapiente qui dolores perferendis
  70. ex quae? Excepturi id ex accusamus eveniet adipisci! Amet
  71. exercitationem quos debitis?
  72. </p>
  73. <button class="btn-explore">
  74. <a href="#">Explore 1</a>
  75. </button>
  76. <button class="btn-explore">
  77. <a href="#">Explore 2</a>
  78. </button>
  79. <button class="btn-explore">
  80. <a href="#">Explore 3</a>
  81. </button>
  82. <button class="btn-explore">
  83. <a href="#">Explore 4</a>
  84. </button>
  85. </div>
  86. </div>
  87. </section>
  88. </header>
  89. <!-- ======================== END HEADER ======================== -->
  90.  
  91. <!-- ======================== SYARAT PENDAFATARAN ======================== -->
  92. <article>
  93. <section class="collection" id="syarat-pendaftaran">
  94. <h2>Syarat Pendaftaran</h2>
  95. <h6>Penerimaan Peserta Didik Baru</h6>
  96. <div class="collection-container">
  97. <div class="list-persyaratan">
  98. <ol class="activity-feed">
  99. <li class="feed-item feed-item-default">
  100. Buku Rapor SMP atau sederajat.
  101. </li>
  102. <li class="feed-item feed-item-primary">
  103. <p class="date">9 November 2022</p>
  104. Surat keterangan nilai rapor semester 1-5 SMP atau sederajat
  105. yang diterbitkan oleh sekolah terkait.
  106. </li>
  107. <li class="feed-item feed-item-secondary">
  108. <p class="date">9 November 2022</p>
  109. Ijazah SMP/sederajat atau surat keterangan bahwa siswa telah
  110. menyelesaikan pendidikan SMP atau sederajat yang dikeluarkan
  111. pihak sekolah.
  112. </li>
  113. <li class="feed-item feed-item-success">
  114. Akta kelahiran dengan batas usia maksimal 21 tahun pada awal
  115. tahun ajaran 2022/2023.
  116. </li>
  117. <li class="feed-item feed-item-info">
  118. Kartu Keluarga (KK) yang diterbitkan minimal 1 tahun sebelum
  119. tanggal pendaftaran PPDB.
  120. </li>
  121. <li class="feed-item feed-item-warning">
  122. Bagi calon peserta didik lulusan pesantren harus membawa surat
  123. keterangan bahwa pesantren terdaftar pada Educational Management
  124. Islamic System (EMIS) yang diterbitkan oleh Kantor Wilayah
  125. Kementrian Agama terkait.
  126. </li>
  127. <li class="feed-item feed-item-danger">
  128. Terdaftar pada Data Terpadu Kesejahteraan Sosial (DTKS) dan atau
  129. menyertakan bukti kepemilikan Kartu Indonesia Pintar (KIP) yang
  130. diterbitkan Mendikbud untuk peserta jalur Afirmasi.
  131. </li>
  132. <li class="feed-item feed-item-default">
  133. Surat penugasan dari instansi terkait bagi peserta didik dengan
  134. jalur Perpindahan Tugas Orang Tua.
  135. </li>
  136. <li class="feed-item feed-item-primary">
  137. Piagam prestasi tertinggi yang dimiliki sesuai dengan ketentuan
  138. untuk pendaftaran jalur Prestasi.
  139. </li>
  140. </ol>
  141. </div>
  142. <div class="logo-list">
  143. <img src="assets/img/logo.jpg" alt="Gambar List" class="list-img" />
  144. </div>
  145. </div>
  146. </section>
  147. </article>
  148. <!-- ======================== END SYARAT PENDAFTARAN ======================== -->
  149.  
  150. <!-- ======================== STATUS KELULUSAN ======================== -->
  151. <article>
  152. <section class="collection-kelulusan" id="status-kelulusan">
  153. <div class="card-cek">
  154. <h2>Cek Status Kelulusan</h2>
  155. </div>
  156. <div class="card-input">
  157. <input type="text" class="input-name" placeholder="Input your name" />
  158. </div>
  159. <div class="card-input">
  160. <input
  161. type="text"
  162. class="input-name"
  163. placeholder="Input your no. Registration"
  164. />
  165. </div>
  166. <div class="card-input">
  167. <button class="button-cek">
  168. <h2>Cek Kelulusan</h2>
  169. </button>
  170. </div>
  171. </section>
  172. </article>
  173. <!-- ======================== END STATUS KELULUSAN ======================== -->
  174.  
  175. <!-- ======================== IDN IT FEST ======================== -->
  176. <article>
  177. <section class="collection-itfest" id="itfest">
  178. <h2>IDN IT Fest</h2>
  179. <div class="collection-itfest-container">
  180.  
  181. <!-- ==== Network ==== -->
  182. <div class="collection-itfest-card">
  183. <div class="image-box">
  184. <img src="/assets/img/network.jpg" alt="network.jpg" srcset="">
  185. </div>
  186. <h3>Network Engineer</h3>
  187. <button class="card-button">Visit</button>
  188. </div>
  189. <!-- ==== End Network ==== -->
  190.  
  191. <!-- ==== UI UX ==== -->
  192. <div class="collection-itfest-card">
  193. <div class="image-box">
  194. <img src="/assets/img/uiux.jpg" alt="uiux.jpg" srcset="">
  195. </div>
  196. <h3>UI UX Designer</h3>
  197. <button class="card-button">Visit</button>
  198. </div>
  199. <!-- ==== End UI UX ==== -->
  200.  
  201. <!-- ==== Web Developer ==== -->
  202. <div class="collection-itfest-card">
  203. <div class="image-box">
  204. <img src="/assets/img/web-dev.jpg" alt="web-dev.jpg" srcset="">
  205. </div>
  206. <h3>Web Developer</h3>
  207. <button class="card-button">Visit</button>
  208. </div>
  209. <!-- ==== End Web Developer ==== -->
  210. </div>
  211. </section>
  212. </article>
  213. <!-- ======================== END IDN IT FEST ======================== -->
  214.  
  215. <!-- ======================== PROFILE ======================== -->
  216. <article>
  217. <section class="collection-profile" id="profile">
  218. <h2>Profile</h2>
  219. <div class="collection-profile-container">
  220.  
  221.  
  222. <div class="collection-profile-card">
  223. <div class="image-box">
  224. <img src="/assets/img/profile_adobe_express.png" alt="network.jpg" srcset="">
  225. </div>
  226. <h3>Tio Risnanto</h3>
  227. <a class="card-button">Visit</a>
  228. </div>
  229.  
  230.  
  231. </div>
  232. </section>
  233. </article>
  234. <!-- ======================== END PROFILE ======================== -->
  235.  
  236. <!-- ======================== JS ======================== -->
  237. <script src="assets/js/main.js"></script>
  238. <!-- ======================== END JS ======================== -->
  239. </body>
  240. </html>
  241.  
  242.  
  243. pastebin.com/m627aZ6q
  244. pastebin.com/pTuszjAR
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!