API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 19th, 2020
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title>Pemerintah Kota Surabaya</title>
  6. <link rel="stylesheet" type="text/css" href="src/css/sidr.css">
  7. <link rel="stylesheet" type="text/css"
  8. href="https://cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  10. integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  11. <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  12. <link rel="stylesheet" href="src/css/style.css">
  13. <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  14. integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  15. crossorigin="anonymous"></script>
  16. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  17. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  18. crossorigin="anonymous"></script>
  19. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  20. integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  21. crossorigin="anonymous"></script>
  22. <script src="https://cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
  23. <script src="src/js/main.js"></script>
  24. </head>
  25.  
  26. <body>
  27. <div class="container-fluid intro">
  28. <div class="container header">
  29. <img src="src/images/logo.jpg" class="mr-5" alt="" width="220" height="50">
  30. <ul class="nav">
  31. <li class="nav-item" align="center">
  32. <a class="nav-link align-middle" href="#" align="center">Profil</a>
  33. </li>
  34. <li class="nav-item">
  35. <a class="nav-link" href="#">Pelayanan</a>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link" href="#">Informasi</a>
  39. </li>
  40. </ul>
  41. </div>
  42. <div class="smartphone header-menu-mobile">
  43. <img src="src/images/logo.jpg" alt="" class="image-logo-mobile" width="150" height="10">
  44. <a id="simple-menu" class="menu-button" href="#sidr">
  45. <i class="fa fa-bars" aria-hidden="true"></i>
  46. </a>
  47. <div id="sidr">
  48. <ul>
  49. <li><a href="#">Profil</a></li>
  50. <li><a href="#">Pelayanan</a></li>
  51. <li><a href="#">Informasi</a></li>
  52. </ul>
  53. </div>
  54. </div>
  55. <div class="smartphone"></div>
  56. <div class="row slide-header">
  57. <div class="col-md-6 slider-head">
  58. <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  59. <div class="carousel-inner slide-back">
  60. <div class="carousel-item active">
  61. <img src="src/images/img1.jpg" class="d-block w-100" alt="">
  62. </div>
  63. <div class="carousel-item">
  64. <img src="src/images/img2.jpg" class="d-block w-100" alt="">
  65. </div>
  66. <div class="carousel-item">
  67. <img src="src/images/img3.jpg" class="d-block w-100" alt="">
  68. </div>
  69. </div>
  70. <a class="carousel-control-prev lanjut" href="#carouselExampleControls" role="button"
  71. data-slide="prev">
  72. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  73. <span class="sr-only">Previous</span>
  74. </a>
  75. <a class="carousel-control-next lanjut" href="#carouselExampleControls" role="button"
  76. data-slide="next">
  77. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  78. <span class="sr-only">Next</span>
  79. </a>
  80. </div>
  81. </div>
  82. <div class="col-md-6 img-surabaya">
  83. <img src="src/images/bg_sby_polos.png">
  84. <div class="teks-surabaya">Surabaya</div>
  85. <div class="teks-surabaya-2">Kota Sentosa, Berkarakter,<br> Berdaya Saing Global, Berbasis Ekologi</div>
  86. </div>
  87. </div>
  88. </div>
  89.  
  90. <div class="container info">
  91. <div class="smartphone">
  92. <h1>INFO PENTING</h1>
  93. </div>
  94. <h1>INFO<br>PENTING</h1>
  95. <div id="row">
  96. <div class="row__inner">
  97. <div class="tile">
  98. <div class="tile__media">
  99. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg"
  100. alt="" />
  101. </div>
  102. <div class="tile__details">
  103. <div class="tile__title">
  104. Top Gear
  105. </div>
  106. </div>
  107. </div>
  108.  
  109. <div class="tile">
  110. <div class="tile__media">
  111. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg"
  112. alt="" />
  113. </div>
  114. <div class="tile__details">
  115. <div class="tile__title">
  116. Top Gear
  117. </div>
  118. </div>
  119. </div>
  120.  
  121. <div class="tile">
  122. <div class="tile__media">
  123. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg"
  124. alt="" />
  125. </div>
  126. <div class="tile__details">
  127. <div class="tile__title">
  128. Top Gear
  129. </div>
  130. </div>
  131. </div>
  132.  
  133. <div class="tile">
  134. <div class="tile__media">
  135. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg"
  136. alt="" />
  137. </div>
  138. <div class="tile__details">
  139. <div class="tile__title">
  140. Top Gear
  141. </div>
  142. </div>
  143. </div>
  144.  
  145. <div class="tile">
  146. <div class="tile__media">
  147. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg"
  148. alt="" />
  149. </div>
  150. <div class="tile__details">
  151. <div class="tile__title">
  152. Top Gear
  153. </div>
  154. </div>
  155. </div>
  156.  
  157. <div class="tile">
  158. <div class="tile__media">
  159. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg"
  160. alt="" />
  161. </div>
  162. <div class="tile__details">
  163. <div class="tile__title">
  164. Top Gear
  165. </div>
  166. </div>
  167. </div>
  168.  
  169. <div class="tile">
  170. <div class="tile__media">
  171. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg"
  172. alt="" />
  173. </div>
  174. <div class="tile__details">
  175. <div class="tile__title">
  176. Top Gear
  177. </div>
  178. </div>
  179. </div>
  180.  
  181. <div class="tile">
  182. <div class="tile__media">
  183. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg"
  184. alt="" />
  185. </div>
  186. <div class="tile__details">
  187. <div class="tile__title">
  188. Top Gear
  189. </div>
  190. </div>
  191. </div>
  192. <div class="tile">
  193. <div class="tile__media">
  194. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg"
  195. alt="" />
  196. </div>
  197. <div class="tile__details">
  198. <div class="tile__title">
  199. Top Gear
  200. </div>
  201. </div>
  202. </div>
  203.  
  204. <div class="tile">
  205. <div class="tile__media">
  206. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg"
  207. alt="" />
  208. </div>
  209. <div class="tile__details">
  210. <div class="tile__title">
  211. Top Gear
  212. </div>
  213. </div>
  214. </div>
  215.  
  216. <div class="tile">
  217. <div class="tile__media">
  218. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg"
  219. alt="" />
  220. </div>
  221. <div class="tile__details">
  222. <div class="tile__title">
  223. Top Gear
  224. </div>
  225. </div>
  226. </div>
  227.  
  228. <div class="tile">
  229. <div class="tile__media">
  230. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg"
  231. alt="" />
  232. </div>
  233. <div class="tile__details">
  234. <div class="tile__title">
  235. Top Gear
  236. </div>
  237. </div>
  238. </div>
  239.  
  240. <div class="tile">
  241. <div class="tile__media">
  242. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg"
  243. alt="" />
  244. </div>
  245. <div class="tile__details">
  246. <div class="tile__title">
  247. Top Gear
  248. </div>
  249. </div>
  250. </div>
  251.  
  252. <div class="tile">
  253. <div class="tile__media">
  254. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg"
  255. alt="" />
  256. </div>
  257. <div class="tile__details">
  258. <div class="tile__title">
  259. Top Gear
  260. </div>
  261. </div>
  262. </div>
  263.  
  264. <div class="tile">
  265. <div class="tile__media">
  266. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg"
  267. alt="" />
  268. </div>
  269. <div class="tile__details">
  270. <div class="tile__title">
  271. Top Gear
  272. </div>
  273. </div>
  274. </div>
  275.  
  276. <div class="tile">
  277. <div class="tile__media">
  278. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg"
  279. alt="" />
  280. </div>
  281. <div class="tile__details">
  282. <div class="tile__title">
  283. Top Gear
  284. </div>
  285. </div>
  286. </div>
  287.  
  288. <div class="tile">
  289. <div class="tile__media">
  290. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg"
  291. alt="" />
  292. </div>
  293. <div class="tile__details">
  294. <div class="tile__title">
  295. Top Gear
  296. </div>
  297. </div>
  298. </div>
  299.  
  300. <div class="tile">
  301. <div class="tile__media">
  302. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg"
  303. alt="" />
  304. </div>
  305. <div class="tile__details">
  306. <div class="tile__title">
  307. Top Gear
  308. </div>
  309. </div>
  310. </div>
  311.  
  312. <div class="tile">
  313. <div class="tile__media">
  314. <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg"
  315. alt="" />
  316. </div>
  317. <div class="tile__details">
  318. <div class="tile__title">
  319. Top Gear
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325.  
  326. <div class="container berita ">
  327. <h1>BERITA</h1>
  328. <div class="row berita-isi ">
  329. <div class="col-md-4 img-berita ">
  330. <img src="src/images/img.jpg " />
  331. </div>
  332. <div class="col-md-4 judul-berita ">
  333. <h2>Judul Berita</h2>
  334. </div>
  335. <div class="col-md-4 ">
  336.  
  337. </div>
  338. </div>
  339. </div>
  340. </div>
  341. <script type="text/javascript">
  342. var speed = 0;
  343. var scroll = 0;
  344. var container = $('#row');
  345. var container_w = container.width();
  346. var max_scroll = container[0].scrollWidth - container.outerWidth();
  347.  
  348. container.on('mousemove', function (e) {
  349. var mouse_x = e.pageX - container.offset().left;
  350. var mouseperc = 100 * mouse_x / container_w;
  351. speed = mouseperc - 50;
  352. }).on('mouseleave', function () {
  353. speed = 0;
  354. });
  355.  
  356. function updatescroll() {
  357. if (speed !== 0) {
  358. scroll += speed / 5;
  359. if (scroll < 0) scroll = 0;
  360. if (scroll > max_scroll) scroll = max_scroll;
  361. $('#row').scrollLeft(scroll);
  362. }
  363. $("#speed").html('Speed: ' + speed);
  364. $("#scroll").html('Scroll: ' + scroll);
  365. window.requestAnimationFrame(updatescroll);
  366. }
  367. window.requestAnimationFrame(updatescroll);
  368. </script>
  369. </body>
  370.  
  371. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!