API tools faq
paste
Guest User

Untitled

a guest
Sep 28th, 2025
14
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.57 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 name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Kelompok 7</title>
  7. <style>
  8. body {
  9. margin: 0;
  10. font-family: 'Courier New', Courier, monospace;
  11. background: url('grass.png') no-repeat center center fixed;
  12. background-size: cover;
  13. overflow: hidden; /* static, no scroll */
  14. }
  15.  
  16. .container {
  17. max-width: 700px;
  18. margin: 35px auto;
  19. background: rgba(255, 255, 255, 0.9);
  20. border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAnElEQVQ4T72UXQqAMAyDN/BqntqrCcqESo1d0zqmTxbbj6Q/1jLhqRHmVpZD8tay0xqa0IAahLElyoVqQO89DEW7LEbwS2nEnoZY+fOhYjMyYVFr1dxKs7axj7r+gmYm68GE84CO2jehqDp6bTKDB/QLjPbUmyRT605fg7Mrhfnzlx/b0OKmYvj2e3ed2eX//6e9drCNoEoZwPp+AqOsihZWJcCkAAAAAElFTkSuQmCC") 7 / 7px / 0 round;
  21. border-width: 7px;
  22. border-style: solid;
  23. padding: 10px;
  24. position: relative;
  25. }
  26.  
  27. /* HEADER */
  28. .header {
  29. position: relative;
  30. text-align: center;
  31. z-index: 2;
  32. }
  33.  
  34. .header img.group-full {
  35. width: 100%;
  36. display: block;
  37. position: relative;
  38. z-index: 2;
  39. }
  40.  
  41. .header h2 {
  42. position: absolute;
  43. top: 10px;
  44. left: 50%;
  45. color: white;
  46. transform: translateX(-50%);
  47. font-size: 12px;
  48. z-index: 3;
  49. opacity: 70%;
  50. }
  51.  
  52. .title-overlay {
  53. position: absolute;
  54. bottom: -10%;
  55. left: 65%;
  56. transform: translateX(-50%);
  57. z-index: 8;
  58. }
  59.  
  60. .title-overlay img {
  61. width: 600px;
  62. }
  63.  
  64. /* PERSONAL CUTOUTS */
  65. .cutout {
  66. position: absolute;
  67. cursor: pointer;
  68. transition: filter 0.3s;
  69. z-index: 3;
  70. }
  71.  
  72. /* NOTE: adjust width/height and top/left per person manually */
  73. .cutout1 { width: 200px; height: auto; top: 47px; left: 255px; }
  74. .cutout2 { width: 183px; height: auto; top: 78px; left: 28px; }
  75. .cutout3 { width: 170px; height: auto; top: 101px; left: 155px; }
  76. .cutout4 { width: 190px; height: auto; top: 65px; left: 500px; }
  77. .cutout5 { width: 170px; height: auto; top: 100px; left: 395px; }
  78.  
  79. .webperson1 span {
  80. opacity: 0;
  81. position: absolute;
  82. top: 50%;
  83. left: 51%;
  84. transform: translate(-50%, -50%);
  85. z-index: 99;
  86. font-size: 1rem;
  87. color: #FFF;
  88. filter: drop-shadow(1px 1px 0 #cb0202)
  89. drop-shadow(-1px 1px 0 #cb0202)
  90. drop-shadow(1px -1px 0 #cb0202)
  91. drop-shadow(-1px -1px 0 #cb0202);
  92. }
  93. .webperson1:hover span, .webperson1:focus span {opacity: 1;}
  94. .webperson1:hover img, .webperson1:focus img {filter: saturate(1.5);}
  95.  
  96. .webperson2 span {
  97. opacity: 0;
  98. position: absolute;
  99. top: 50%;
  100. left: 17%;
  101. transform: translate(-50%, -50%);
  102. z-index: 99;
  103. font-size: 1rem;
  104. color: #FFF;
  105. filter: drop-shadow(1px 1px 0 #cb0202)
  106. drop-shadow(-1px 1px 0 #cb0202)
  107. drop-shadow(1px -1px 0 #cb0202)
  108. drop-shadow(-1px -1px 0 #cb0202);
  109. }
  110. .webperson2:hover span, .webperson2:focus span {opacity: 1;}
  111. .webperson2:hover img, .webperson2:focus img {filter: saturate(1.5);}
  112.  
  113. .webperson3 span {
  114. opacity: 0;
  115. position: absolute;
  116. top: 50%;
  117. left: 35%;
  118. transform: translate(-50%, -50%);
  119. z-index: 99;
  120. font-size: 1rem;
  121. color: #FFF;
  122. filter: drop-shadow(1px 1px 0 #cb0202)
  123. drop-shadow(-1px 1px 0 #cb0202)
  124. drop-shadow(1px -1px 0 #cb0202)
  125. drop-shadow(-1px -1px 0 #cb0202);
  126. }
  127. .webperson3:hover span, .webperson3:focus span {opacity: 1;}
  128. .webperson3:hover img, .webperson3:focus img {filter: saturate(1.5);}
  129.  
  130. .webperson4 span {
  131. opacity: 0;
  132. position: absolute;
  133. top: 50%;
  134. left: 85%;
  135. transform: translate(-50%, -50%);
  136. z-index: 99;
  137. font-size: 1rem;
  138. color: #FFF;
  139. filter: drop-shadow(1px 1px 0 #cb0202)
  140. drop-shadow(-1px 1px 0 #cb0202)
  141. drop-shadow(1px -1px 0 #cb0202)
  142. drop-shadow(-1px -1px 0 #cb0202);
  143. }
  144. .webperson4:hover span, .webperson4:focus span {opacity: 1;}
  145. .webperson4:hover img, .webperson4:focus img {filter: saturate(1.5);}
  146.  
  147. .webperson5 span {
  148. opacity: 0;
  149. position: absolute;
  150. top: 50%;
  151. left: 68%;
  152. transform: translate(-50%, -50%);
  153. z-index: 99;
  154. font-size: 1rem;
  155. color: #FFF;
  156. filter: drop-shadow(1px 1px 0 #cb0202)
  157. drop-shadow(-1px 1px 0 #cb0202)
  158. drop-shadow(1px -1px 0 #cb0202)
  159. drop-shadow(-1px -1px 0 #cb0202);
  160. }
  161. .webperson5:hover span, .webperson5:focus span {opacity: 1;}
  162. .webperson5:hover img, .webperson5:focus img {filter: saturate(1.5);}
  163.  
  164.  
  165. /* BODY */
  166. .body {
  167. display: flex;
  168. margin-top: 20px;
  169. }
  170.  
  171. .nav {
  172. width: 200px;
  173. display: flex;
  174. flex-direction: column;
  175. gap: 15px;
  176. }
  177.  
  178. .nav a {
  179. display: block;
  180. padding: 7px;
  181. background: white;
  182. text-align: center;
  183. text-decoration: none;
  184. color: #cb0202;
  185. font-weight: bold;
  186. border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAnElEQVQ4T72UXQqAMAyDN/BqntqrCcqESo1d0zqmTxbbj6Q/1jLhqRHmVpZD8tay0xqa0IAahLElyoVqQO89DEW7LEbwS2nEnoZY+fOhYjMyYVFr1dxKs7axj7r+gmYm68GE84CO2jehqDp6bTKDB/QLjPbUmyRT605fg7Mrhfnzlx/b0OKmYvj2e3ed2eX//6e9drCNoEoZwPp+AqOsihZWJcCkAAAAAElFTkSuQmCC") 7 / 7px / 0 round;
  187. border-width: 10px;
  188. border-style: solid;
  189. }
  190.  
  191. .content {
  192. flex: 1;
  193. margin-left: 20px;
  194. color: #cb0202;
  195. }
  196.  
  197. /* FOOTER */
  198. footer {display: flex;
  199. align-items: center;
  200. flex-direction: row;
  201. gap: 20px;
  202. justify-content: center;
  203. top: 20px;
  204. }
  205. footer img {width: 90px;}
  206.  
  207. </style>
  208. </head>
  209. <body>
  210. <div class="container">
  211. <!-- HEADER -->
  212. <header class="header">
  213. <h2>Klik Kami</h2>
  214. <img src="fotokelompokfull.jpeg" alt="Group Full" class="group-full">
  215. <div class="title-overlay">
  216. <img src="logokelompoktimerah.png" alt="Group Title">
  217. </div>
  218.  
  219. <!-- Personal cutouts -->
  220. <a href="lamantsabit" class="webperson1">
  221. <img src="fotokelompoktsabit.png" alt="Person 1" class="cutout cutout1">
  222. <span>Tsabit</span>
  223. </a>
  224. <a href="lamanamanda" class="webperson2">
  225. <img src="fotokelompokamanda.png" alt="Person 2" class="cutout cutout2">
  226. <span>Amanda</span>
  227. </a>
  228. <a href="halamanbunga" class="webperson3">
  229. <img src="fotokelompokbunga.png" alt="Person 3" class="cutout cutout3">
  230. <span>Bunga</span>
  231. </a>
  232. <a href="lamankirani" class="webperson4">
  233. <img src="fotokelompokkarina.png" alt="Person 4" class="cutout cutout4">
  234. <span>Kirani</span>
  235. </a>
  236. <a href="lamanruth" class="webperson5">
  237. <img src="fotokelompokruth.png" alt="Person 5" class="cutout cutout5">
  238. <span>Ruth</span>
  239. </a>
  240. </header>
  241.  
  242. <!-- BODY -->
  243. <div class="body">
  244. <nav class="nav">
  245. <a href="html.html">HTML & CSS Page</a>
  246. <a href="resources.html">Resources</a>
  247. </nav>
  248. <div class="content">
  249. <p>Kami adalah Kelompok 7, ini adalah laman utama kami. Disini ada berbagai pilihan tujuan selanjutnya. Jika ingin melihat full html dan css dari laman-laman kami, bisa klik pada tombol-tombol di kiri. Jika ingin melihat apa saja sumber daya yang kami pakai untuk pembuatan laman-laman kami, klik tombol di kiri. Terimakasih waktunya!</p>
  250. </div>
  251. </div>
  252.  
  253. <!-- FOOTER -->
  254. <footer>
  255. <a href="https://neocities.org"><img src="neocities.png" alt="Neocities"></a>
  256. <p>&copy; 2025 Kelompok 7</p>
  257. <a href="sitemap.html">Sitemap</a>
  258. </footer>
  259. </div>
  260. </body>
  261. </html>
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!