API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 24th, 2017
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.76 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. <meta name="description" content="Creative One Page Parallax Template">
  7. <meta name="keywords" content="Creative, Onepage, Parallax, HTML5, Bootstrap, Popular, custom, personal, portfolio" />
  8. <meta name="author" content=""> \
  9. <title>Dinas Komunikasi dan Informatika</title>
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <link href="css/prettyPhoto.css" rel="stylesheet">
  12. <link href="css/font-awesome.min.css" rel="stylesheet">
  13. <link href="css/animate.css" rel="stylesheet">
  14. <link href="css/main.css" rel="stylesheet">
  15. <link href="css/responsive.css" rel="stylesheet">
  16. <!--[if lt IE 9]> <script src="js/html5shiv.js"></script>
  17. <script src="js/respond.min.js"></script> <![endif]-->
  18. <link rel="shortcut icon" href="images/TA/logo.png">
  19. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
  20. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
  21. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
  22. <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
  23. </head><!--/head-->
  24. <body>
  25. <header id="navigation">
  26. <div class="navbar navbar-inverse navbar-fixed-top" role="banner">
  27. <div class="container">
  28. <div class="navbar-header">
  29. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  30. <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
  31. </button>
  32. <a class="navbar-brand" href="TA.html"><h1><img src="images/TA/logo1.png" alt="logo"></h1></a>
  33. </div>
  34. <div class="collapse navbar-collapse">
  35. <ul class="nav navbar-nav navbar-right">
  36. <li class="scroll active"><a href="#navigation">Home</a></li>
  37. <li class="scroll"><a href="#about-us">Tentang Kami</a></li>
  38. <li class="scroll"><a href="#services">Inventarisasi</a></li>
  39. <li class="scroll"><a href="#our-team">Pusat Data</a></li>
  40. <li class="scroll"><a href="#contact">Contact Us</a></li>
  41. <!--<li class="scroll"><a href="#portfolio">Portfolio</a></li></li>
  42. <li class="scroll"><a href="#clients">Producer</a>
  43. <li class="scroll"><a href="#blog">Login</a></li>-->
  44. </ul>
  45. </div>
  46. </div>
  47. </div><!--/navbar-->
  48. </header> <!--/#navigation-->
  49.  
  50. <section id="home">
  51. <div class="home-pattern"></div>
  52. <div id="main-carousel" class="carousel slide" data-ride="carousel">
  53. <ol class="carousel-indicators">
  54. <li data-target="#main-carousel" data-slide-to="0" class="active"></li>
  55. <li data-target="#main-carousel" data-slide-to="1"></li>
  56. <li data-target="#main-carousel" data-slide-to="2"></li>
  57. </ol><!--/.carousel-indicators-->
  58. <div class="carousel-inner">
  59. <div class="item active" style="background-image: url(images/slider/slide3.jpg)">
  60. <div class="carousel-caption">
  61. <div>
  62. <h2 class="heading animated bounceInDown">Sistem Informasi Kepegawaian</h2>
  63. <p class="animated bounceInUp">Dinas Komunikasi dan Informatika</p>
  64. <!--<a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a>-->
  65. </div>
  66. </div>
  67. </div>
  68. <div class="item" style="background-image: url(images/slider/slide2.jpg)">
  69. <div class="carousel-caption"> <div>
  70. <h2 class="heading animated bounceInDown">Sekretariat</h2>
  71. <p class="animated bounceInUp">Dinas Komunikasi dan Informatika</p>
  72. <!--<a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a> -->
  73. </div>
  74. </div>
  75. </div>
  76. <div class="item" style="background-image: url(images/slider/slide1.jpg)">
  77. <div class="carousel-caption">
  78. <div>
  79. <h2 class="heading animated bounceInRight">Bidang - Bidang</h2>
  80. <p class="animated bounceInLeft">Dinas Komunikasi dan Informatika</p>
  81. <!--<a class="btn btn-default slider-btn animated bounceInUp" href="#">Get Started</a> -->
  82. </div>
  83. </div>
  84. </div>
  85. </div><!--/.carousel-inner-->
  86.  
  87. <a class="carousel-left member-carousel-control hidden-xs" href="#main-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
  88. <a class="carousel-right member-carousel-control hidden-xs" href="#main-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
  89. </div>
  90.  
  91. </section><!--/#home-->
  92.  
  93. <section id="about-us">
  94. <div class="container">
  95. <div class="text-center">
  96. <div class="col-sm-8 col-sm-offset-2">
  97. <h2 class="title-one">Dinas Komunikasi dan Informatika</h2>
  98. <p>Pembantuan bidang komunikasi dan informatika, bidang statistik dan bidang persandian Kota Salatiga.</p>
  99. </div>
  100. </div>
  101. <div class="about-us">
  102. <div class="row">
  103. <div class="col-sm-6">
  104. <h3>Bagaimana DISKOMINFO itu?</h3>
  105. <ul class="nav nav-tabs">
  106. <li class="active"><a href="#about" data-toggle="tab"><i class="fa fa-chain-broken"></i> Tentang</a></li>
  107. <li><a href="#mission" data-toggle="tab"><i class="fa fa-th-large"></i> Tugas</a></li>
  108. <!--<li><a href="#community" data-toggle="tab"><i class="fa fa-users"></i> Fungsi</a></li>-->
  109. </ul>
  110. <div class="tab-content">
  111. <div class="tab-pane fade in active" id="about">
  112. <div class="media">
  113. <img class="pull-left media-object" src="images/about-us/about.jpg" alt="about us">
  114. <div class="media-body">
  115. <p class="text-info">Dinas Komunikasi dan Informatika merupakan dinas yang berdiri pada tahun 2017 (termasuk dinas baru). Beralamat di jalan Letjen Sukowati No. 51, Salatiga, Jawa Tengah. Buka setiap hari senin — kamis : 07:00–15:30 dan jum'at : 07:00–11:00.</p>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="tab-pane fade" id="mission">
  120. <div class="media">
  121. <img class="pull-left media-object" src="images/about-us/mission.jpg" alt="Mission">
  122. <div class="media-body">
  123. <p>Berdasarkan Peraturan Walikota Salatiga No. 38 Tahun 2016 tentang Kedudukan, Susunan Organisasi, Tugas dan Fungsi serta Tata Kerja Dinas Komunikasi dan Informatika, Dinas Kominfo Kota Salatiga mempunyai tugas membantu Walikota melaksanakan urusan Pemerintahan yang menjadi kewenangan Daerah bidang komunikasi dan informatika, bidang statistik dan bidang persandian serta tugas pembantuan yang diberikan kepada Daerah.</p>
  124. </div>
  125. </div>
  126. </div>
  127. <div class="tab-pane fade" id="community">
  128. <div class="media">
  129. <img class="pull-left media-object" src="images/about-us/community.jpg" alt="Community">
  130. <div class="media-body">
  131. <p>Perumusan kebijakan bidang komunikasi dan informatika, bidang statistik dan bidang persandian; Pelaksanaan kebijakan bidang komunikasi dan informatika, bidang statistik dan bidang persandian; Pelaksanaan evaluasi dan pelaporan bidang komunikasi dan informatika, bidang statistik dan bidang persandian; Pelaksanaan administrasi Dinas; Pelaksanaan fungsi lain yang diberikan oleh Walikota terkait dengan tugas dan fungsinya.</p>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="col-sm-6">
  138. <h3>Fungsi</h3>
  139. <div class="skill-bar">
  140. <div class="skillbar clearfix" data-percent="100%">
  141. <div class="skillbar-title"><span>Perumusan kebijakan bidang komunikasi dan informatika, stastika, dan persandian</span></div>
  142. <div class="skillbar-bar"></div>
  143. <div class="skill-bar-percent"></div>
  144. </div> <!-- End Skill Bar -->
  145. <div class="skillbar clearfix" data-percent="100%">
  146. <div class="skillbar-title"><span>Pelaksanaan kebijakan bidang komunikasi dan informatika, statistik dan persandian</span></div>
  147. <div class="skillbar-bar"></div>
  148. <div class="skill-bar-percent"></div>
  149. </div> <!-- End Skill Bar -->
  150. <div class="skillbar clearfix " data-percent="100%">
  151. <div class="skillbar-title"><span>Pelaksanaan evaluasi dan pelaporan bidang kominfo, statistik dan persandian</span></div>
  152. <div class="skillbar-bar"></div>
  153. <div class="skill-bar-percent"></div>
  154. </div> <!-- End Skill Bar -->
  155. <div class="skillbar clearfix " data-percent="100%">
  156. <div class="skillbar-title"><span>Pelaksanaan administrasi Dinas</span></div>
  157. <div class="skillbar-bar"></div>
  158. <div class="skill-bar-percent"></div>
  159. </div> <!-- End Skill Bar -->
  160. <div class="skillbar clearfix " data-percent="100%">
  161. <div class="skillbar-title"><span>Pelaksanaan fungsi lain yang diberikan oleh Walikota</span></div>
  162. <div class="skillbar-bar"></div>
  163. <div class="skill-bar-percent"></div>
  164. </div> <!-- End Skill Bar --></div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </section><!--/#about-us-->
  170.  
  171. <section id="services" class="parallax-section">
  172. <div class="container">
  173. <div class="row text-center">
  174. <div class="col-sm-8 col-sm-offset-2">
  175. <h2 class="title-one">Inventarisasi</h2>
  176. <p>Pelayanan Pendataan Tercepat dan Termudah.</p>
  177. <p>Masukkan data anda<a href="Inventarisasi.html"> disini</a></p>
  178. </div>
  179. </div>
  180. <!--<table width="405" height="169" border="0" align="center" cellpadding="0" cellspacing="0" box-sizing: border-box>
  181. <tbody bgcolor="#FFFFFF">
  182. <tr>
  183. <td height="37" colspan="3" align="center"><strong>Masukkan Data Anda</strong></td>
  184. </tr>
  185. <tr>
  186. <th scope="row" width="405" height="40">Nama Pegawai</th>
  187. <td>:</td>
  188. <td width="95"></td>
  189. </tr>
  190. <tr>
  191. <th scope="row" width="405" height="40">Nomor Induk Pegawai(NIP)</th>
  192. <td>:</td>
  193. <td>&nbsp;</td>
  194. </tr>
  195. <tr>
  196. <th scope="row" width="405" height="40">Tempat Tanggal Lahir</th>
  197. <td>:</td>
  198. <td>&nbsp;</td>
  199. </tr>
  200. <tr>
  201. <th scope="row" width="405" height="40">Agama</th>
  202. <td>:</td>
  203. <td>&nbsp;</td>
  204. </tr>
  205. <tr>
  206. <th scope="row" width="405" height="40">Status Perkawinan</th>
  207. <td>:</td>
  208. <td>&nbsp;</td>
  209. </tr>
  210. <tr>
  211. <th scope="row" width="405" height="40">Alamat Rumah</th>
  212. <td>:</td>
  213. <td>&nbsp;</td>
  214. </tr>
  215. <tr>
  216. <th scope="row" width="405" height="40">Pendidikan Terakhir</th>
  217. <td>:</td>
  218. <td>&nbsp;</td>
  219. </tr>
  220. <tr>
  221. <th scope="row" width="405" height="40">Jabatan</th>
  222. <td>:</td>
  223. <td>&nbsp;</td>
  224. </tr>
  225. <tr>
  226. <th scope="row" width="405" height="40">Masa Kerja</th>
  227. <td>:</td>
  228. <td>&nbsp;</td>
  229. </tr>
  230. <tr>
  231. <th scope="row" width="405" height="40">Nomor HP</th>
  232. <td>:</td>
  233. <td>&nbsp;</td>
  234. </tr>
  235. </tbody>
  236. </table> -->
  237.  
  238. <!--<div class="row">
  239. <div class="col-sm-12">
  240. <div class="our-service">
  241. <div class="services row">
  242. <div class="col-sm-4">
  243. <div class="single-service">
  244. <i class="fa fa-users"></i>
  245. <!--<h2>Modern Design</h2>
  246. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>-->
  247. <!--</div>
  248. </div>
  249. <a href="D:/TA/Inventarisasi.html"><div class="col-sm-4">
  250. <div class="single-service">
  251. <i class="fa fa-th"></i></a>
  252. <h2>Web Development</h2>
  253. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </p>
  254. </div>
  255. </div>
  256. <div class="col-sm-4">
  257. <div class="single-service">
  258. <i class="fa fa-html5"></i>
  259. <!--<h2>Online Marketing</h2>
  260. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
  261. </div>
  262. </div>
  263. </div>-->
  264.  
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </section><!--/#service-->
  270.  
  271. <section id="our-team">
  272. <div class="container">
  273. <div class="row text-center">
  274. <div class="col-sm-8 col-sm-offset-2">
  275. <h2 class="title-one">Pusat Data</h2>
  276. <p>Pelayanan Informasi Terlengkap.</p>
  277. </div>
  278. </div>
  279. <!--<div id="team-carousel" class="carousel slide" data-interval="false">
  280. <a class="member-left" href="#team-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  281. <a class="member-right" href="#team-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
  282. <div class="carousel-inner team-members">
  283. <div class="row item active">
  284. <div class="col-sm-6 col-md-3">
  285. <div class="single-member">
  286. <a href="D:/TA/PusatData.html"><img src="images/our-team/member1.jpg" alt="team member" /></a>
  287. <h4>William Hurt</h4>
  288. <h5>Sr. Web Developer</h5>
  289. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  290. <div class="socials">
  291. <a href="#"><i class="fa fa-facebook"></i></a>
  292. <a href="#"><i class="fa fa-twitter"></i></a>
  293. <a href="#"><i class="fa fa-google-plus"></i></a>
  294. <a href="#"><i class="fa fa-dribbble"></i></a>
  295. <a href="#"><i class="fa fa-linkedin"></i></a>
  296. </div>
  297. </div>
  298. </div>
  299. <!--<div class="col-sm-6 col-md-3">
  300. <div class="single-member">
  301. <a href="D:/TA/PusatData.html"><img src="images/our-team/member2.jpg" alt="team member" /></a>
  302. <h4>Alekjandra Jony</h4>
  303. <h5>Creative Designer</h5>
  304. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  305. <div class="socials">
  306. <a href="#"><i class="fa fa-facebook"></i></a>
  307. <a href="#"><i class="fa fa-twitter"></i></a>
  308. <a href="#"><i class="fa fa-google-plus"></i></a>
  309. <a href="#"><i class="fa fa-dribbble"></i></a>
  310. <a href="#"><i class="fa fa-linkedin"></i></a>
  311. </div>
  312. </div>
  313. </div>
  314. <div class="col-sm-6 col-md-3">
  315. <div class="single-member">
  316. <a href="D:/TA/PusatData.html"><img src="images/our-team/member3.jpg" alt="team member" /></a>
  317. <h4>Paul Johnson</h4>
  318. <h5>Skilled Programmer</h5>
  319. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  320. <div class="socials">
  321. <a href="#"><i class="fa fa-facebook"></i></a>
  322. <a href="#"><i class="fa fa-twitter"></i></a>
  323. <a href="#"><i class="fa fa-google-plus"></i></a>
  324. <a href="#"><i class="fa fa-dribbble"></i></a>
  325. <a href="#"><i class="fa fa-linkedin"></i></a>
  326. </div>
  327. </div>
  328. </div>
  329. <div class="col-sm-6 col-md-3">
  330. <div class="single-member">
  331. <a href="D:/TA/PusatData.html"><img src="images/our-team/member4.jpg" alt="team member" /></a>
  332. <h4>John Richerds</h4>
  333. <h5>Marketing Officer</h5>
  334. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  335. <div class="socials">
  336. <a href="#"><i class="fa fa-facebook"></i></a>
  337. <a href="#"><i class="fa fa-twitter"></i></a>
  338. <a href="#"><i class="fa fa-google-plus"></i></a>
  339. <a href="#"><i class="fa fa-dribbble"></i></a>
  340. <a href="#"><i class="fa fa-linkedin"></i></a>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. <div class="row item">
  346. <div class="col-sm-6 col-md-3">
  347. <div class="single-member">
  348. <a href="D:/TA/PusatData.html"><img src="images/our-team/member1.jpg" alt="team member" /></a>
  349. <h4>William Hurt</h4>
  350. <h5>Sr. Web Developer</h5>
  351. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  352. <div class="socials">
  353. <a href="#"><i class="fa fa-facebook"></i></a>
  354. <a href="#"><i class="fa fa-twitter"></i></a>
  355. <a href="#"><i class="fa fa-google-plus"></i></a>
  356. <a href="#"><i class="fa fa-dribbble"></i></a>
  357. <a href="#"><i class="fa fa-linkedin"></i></a>
  358. </div>
  359. </div>
  360. </div>
  361. <div class="col-sm-6 col-md-3">
  362. <div class="single-member">
  363. <a href="D:/TA/PusatData.html"><img src="images/our-team/member3.jpg" alt="team member" /></a>
  364. <h4>Paul Johnson</h4>
  365. <h5>Skilled Programmer</h5>
  366. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  367. <div class="socials">
  368. <a href="#"><i class="fa fa-facebook"></i></a>
  369. <a href="#"><i class="fa fa-twitter"></i></a>
  370. <a href="#"><i class="fa fa-google-plus"></i></a>
  371. <a href="#"><i class="fa fa-dribbble"></i></a>
  372. <a href="#"><i class="fa fa-linkedin"></i></a>
  373. </div>
  374. </div>
  375. </div>
  376. <div class="col-sm-6 col-md-3">
  377. <div class="single-member">
  378. <a href="D:/TA/PusatData.html"><img src="images/our-team/member2.jpg" alt="team member" /></a>
  379. <h4>Alekjandra Jony</h4>
  380. <h5>Creative Designer</h5>
  381. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  382. <div class="socials">
  383. <a href="#"><i class="fa fa-facebook"></i></a>
  384. <a href="#"><i class="fa fa-twitter"></i></a>
  385. <a href="#"><i class="fa fa-google-plus"></i></a>
  386. <a href="#"><i class="fa fa-dribbble"></i></a>
  387. <a href="#"><i class="fa fa-linkedin"></i></a>
  388. </div>
  389. </div>
  390. </div>
  391. <div class="col-sm-6 col-md-3">
  392. <div class="single-member">
  393. <a href="D:/TA/PusatData.html"><img src="images/our-team/member4.jpg" alt="team member" /></a>
  394. <h4>John Richerds</h4>
  395. <h5>Marketing Officer</h5>
  396. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p>
  397. <div class="socials">
  398. <a href="#"><i class="fa fa-facebook"></i></a>
  399. <a href="#"><i class="fa fa-twitter"></i></a>
  400. <a href="#"><i class="fa fa-google-plus"></i></a>
  401. <a href="#"><i class="fa fa-dribbble"></i></a>
  402. <a href="#"><i class="fa fa-linkedin"></i></a>
  403. </div>
  404. </div>
  405. </div>-->
  406. </div>
  407. </div>
  408. </div>
  409. </div>
  410. </section><!--/#Our-Team-->
  411.  
  412. <!--<section id="portfolio">
  413. <div class="container">
  414. <div class="row text-center">
  415. <div class="col-sm-8 col-sm-offset-2">
  416. <h2 class="title-one">Pusat Data</h2>
  417. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
  418. </div>
  419. </div>
  420. <ul class="portfolio-filter text-center">
  421. <li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
  422. <li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
  423. <li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
  424. <li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
  425. <li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
  426. </ul><!--/#portfolio-filter
  427. <div class="portfolio-items">
  428. <div class="col-sm-3 col-xs-12 portfolio-item html">
  429. <div class="view efffect">
  430. <div class="portfolio-image">
  431. <img src="images/portfolio/1.jpg" alt=""></div>
  432. <div class="mask text-center">
  433. <h3>Novel</h3>
  434. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  435. <a href="#"><i class="fa fa-link"></i></a>
  436. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  437. </div>
  438. </div>
  439. </div>
  440. <div class="col-sm-3 col-xs-12 portfolio-item jooma">
  441. <div class="view efffect" >
  442. <div class="portfolio-image">
  443. <img src="images/portfolio/2.jpg" alt="">
  444. </div>
  445. <div class="mask text-center">
  446. <h3>Novel</h3>
  447. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  448. <a href="#"><i class="fa fa-link"></i></a>
  449. <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  450. </div>
  451. </div>
  452. </div>
  453. <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
  454. <div class="view efffect">
  455. <div class="portfolio-image">
  456. <img src="images/portfolio/3.jpg" alt="">
  457. </div>
  458. <div class="mask text-center">
  459. <h3>Novel</h3>
  460. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  461. <a href="#"><i class="fa fa-link"></i></a>
  462. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  463. </div>
  464. </div>
  465. </div>
  466. <div class="col-sm-3 col-xs-12 portfolio-item megento">
  467. <div class="view efffect">
  468. <div class="portfolio-image">
  469. <img src="images/portfolio/4.jpg" alt="">
  470. </div>
  471. <div class="mask text-center">
  472. <h3>Novel</h3>
  473. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  474. <a href="#"><i class="fa fa-link"></i></a>
  475. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  476. </div>
  477. </div>
  478. </div>
  479. <div class="col-sm-3 col-xs-12 portfolio-item html">
  480. <div class="view efffect">
  481. <div class="portfolio-image">
  482. <img src="images/portfolio/5.jpg" alt="">
  483. </div> <div class="mask text-center">
  484. <h3>Novel</h3>
  485. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  486. <a href="#"><i class="fa fa-link"></i></a>
  487. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  488. </div>
  489. </div>
  490. </div>
  491. <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
  492. <div class="view efffect">
  493. <div class="portfolio-image">
  494. <img src="images/portfolio/6.jpg" alt="">
  495. </div>
  496. <div class="mask text-center">
  497. <h3>Novel</h3>
  498. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  499. <a href="#"><i class="fa fa-link"></i></a>
  500. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  501. </div>
  502. </div>
  503. </div>
  504. <div class="col-sm-3 col-xs-12 portfolio-item html">
  505. <div class="view efffect">
  506. <div class="portfolio-image">
  507. <img src="images/portfolio/7.jpg" alt="">
  508. </div>
  509. <div class="mask text-center">
  510. <h3>Novel</h3>
  511. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  512. <a href="#"><i class="fa fa-link"></i></a>
  513. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  514. </div>
  515. </div>
  516. </div>
  517. <div class="col-sm-3 col-xs-12 portfolio-item joomla">
  518. <div class="view efffect">
  519. <div class="portfolio-image">
  520. <img src="images/portfolio/8.jpg" alt=""></div>
  521. <div class="mask text-center">
  522. <h3>Novel</h3>
  523. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  524. <a href="#"><i class="fa fa-link"></i></a>
  525. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  526. </div>
  527. </div>
  528. </div>
  529. <div class="col-sm-3 col-xs-12 portfolio-item html">
  530. <div class="view efffect">
  531. <div class="portfolio-image">
  532. <img src="images/portfolio/9.jpg" alt="">
  533. </div>
  534. <div class="mask text-center">
  535. <h3>Novel</h3>
  536. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  537. <a href="#"><i class="fa fa-link"></i></a>
  538. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  539. </div>
  540. </div>
  541. </div>
  542. <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
  543. <div class="view efffect">
  544. <div class="portfolio-image">
  545. <img src="images/portfolio/10.jpg" alt=""></div>
  546. <div class="mask text-center">
  547. <h3>Novel</h3>
  548. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  549. <a href="#"><i class="fa fa-link"></i></a>
  550. <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  551. </div>
  552. </div>
  553. </div>
  554. <div class="col-sm-3 col-xs-12 portfolio-item joomla">
  555. <div class="view efffect">
  556. <div class="portfolio-image">
  557. <img src="images/portfolio/11.jpg" alt=""></div>
  558. <div class="mask text-center">
  559. <h3>Novel</h3>
  560. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  561. <a href="#"><i class="fa fa-link"></i></a>
  562. <a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  563. </div>
  564. </div>
  565. </div>
  566. <div class="col-sm-3 col-xs-12 portfolio-item megento">
  567. <div class="view efffect">
  568. <div class="portfolio-image">
  569. <img src="images/portfolio/12.jpg" alt=""></div>
  570. <div class="mask text-center">
  571. <h3>Novel</h3>
  572. <h4>Lorem ipsum dolor sit amet consectetur</h4>
  573. <a href="#"><i class="fa fa-link"></i></a>
  574. <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  575. </div>
  576. </div>
  577. </div>
  578. </div>
  579. </div>
  580.  
  581. </section> <!--/#portfolio
  582.  
  583. <section id="clients" class="parallax-section">
  584. <div class="container">
  585. <div class="clients-wrapper">
  586. <div class="row text-center">
  587. <div class="col-sm-8 col-sm-offset-2">
  588. <h2 class="title-one">About Producer</h2>
  589. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
  590. </div>
  591. </div>
  592. <div id="clients-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators
  593. <ol class="carousel-indicators">
  594. <li data-target="#clients-carousel" data-slide-to="0" class="active"></li>
  595. <li data-target="#clients-carousel" data-slide-to="1"></li>
  596. <li data-target="#clients-carousel" data-slide-to="2"></li>
  597. </ol> <!-- Wrapper for slides
  598. <div class="carousel-inner">
  599. <div class="item active">
  600. <div class="single-client">
  601. <div class="media">
  602. <img class="pull-left" src="images/clients/client1.jpg" alt="">
  603. <div class="media-body">
  604. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous in Source Title</small><a href="">www.yourwebsite.com</a></blockquote>
  605. </div>
  606. </div>
  607. </div>
  608. </div>
  609. <div class="item">
  610. <div class="single-client">
  611. <div class="media">
  612. <img class="pull-left" src="images/clients/client3.jpg" alt="">
  613. <div class="media-body">
  614. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous in Source Title</small><a href="">www.yourwebsite.com</a></blockquote>
  615. </div>
  616. </div>
  617. </div>
  618. </div>
  619. <div class="item">
  620. <div class="single-client">
  621. <div class="media">
  622. <img class="pull-left" src="images/clients/client2.jpg" alt="">
  623. <div class="media-body">
  624. <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small>Someone famous in Source Title</small><a href="">www.yourwebsite.com</a></blockquote>
  625. </div>
  626. </div>
  627. </div>
  628. </div>
  629. </div>
  630. </div>
  631. </div>
  632. </div>
  633. </section><!--/#clients-->
  634.  
  635. <!--<section id="blog">
  636. <div class="container">
  637. <div class="row text-center clearfix">
  638. <div class="col-sm-8 col-sm-offset-2">
  639. <h2 class="title-one">Login</h2>
  640. <p class="blog-heading">Untuk bisa menggunakan fasilitas dari kami, terlebih dahulu Anda harus login atau masuk ke akun yang sudah Anda miliki.</p>
  641. </div>
  642. </div>
  643. <div class="row">
  644. <div class="col-sm-4">
  645. <div class="single-blog">
  646. <img src="images/blog/1.jpg" alt="" />
  647. <h2>Lorem ipsum dolor sit amet</h2>
  648. <ul class="post-meta">
  649. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  650. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  651. </ul>
  652. <div class="blog-content">
  653. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  654. </div>
  655. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-detail">Read More</a>
  656. </div>
  657. <div class="modal fade" id="blog-detail" tabindex="-1" role="dialog" aria-hidden="true">
  658. <div class="modal-dialog">
  659. <div class="modal-content">
  660. <div class="modal-body">
  661. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  662. <img src="images/blog/3.jpg" alt="" />
  663. <h2>Lorem ipsum dolor sit amet</h2>
  664. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. </div>
  670. <div class="col-sm-4">
  671. <div class="single-blog">
  672. <img src="images/blog/2.jpg" alt="" />
  673. <h2>Lorem ipsum dolor sit amet</h2>
  674. <ul class="post-meta">
  675. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  676. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  677. </ul>
  678. <div class="blog-content">
  679. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  680. </div>
  681. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-two">Read More</a>
  682. </div>
  683. <div class="modal fade" id="blog-two" tabindex="-1" role="dialog" aria-hidden="true">
  684. <div class="modal-dialog">
  685. <div class="modal-content">
  686. <div class="modal-body">
  687. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  688. <img src="images/blog/2.jpg" alt="" />
  689. <h2>Lorem ipsum dolor sit amet</h2>
  690. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  691. </div>
  692. </div>
  693. </div>
  694. </div>
  695. </div>
  696. <div class="col-sm-4">
  697. <div class="single-blog">
  698. <img src="images/blog/3.jpg" alt="" />
  699. <h2>Lorem ipsum dolor sit amet</h2>
  700. <ul class="post-meta">
  701. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  702. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  703. </ul>
  704. <div class="blog-content">
  705. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  706. </div>
  707. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-three">Read More</a>
  708. </div>
  709. <div class="modal fade" id="blog-three" tabindex="-1" role="dialog" aria-hidden="true">
  710. <div class="modal-dialog">
  711. <div class="modal-content">
  712. <div class="modal-body">
  713. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  714. <img src="images/blog/3.jpg" alt="" />
  715. <h2>Lorem ipsum dolor sit amet</h2>
  716. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  717. </div>
  718. </div>
  719. </div>
  720. </div>
  721. </div>
  722. <div class="col-sm-4">
  723. <div class="single-blog">
  724. <img src="images/blog/3.jpg" alt="" />
  725. <h2>Lorem ipsum dolor sit amet</h2>
  726. <ul class="post-meta">
  727. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  728. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  729. </ul>
  730. <div class="blog-content">
  731. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  732. </div>
  733. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-four">Read More</a></div>
  734. <div class="modal fade" id="blog-four" tabindex="-1" role="dialog" aria-hidden="true">
  735. <div class="modal-dialog">
  736. <div class="modal-content">
  737. <div class="modal-body">
  738. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  739. <img src="images/blog/3.jpg" alt="" />
  740. <h2>Lorem ipsum dolor sit amet</h2>
  741. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  742. </div>
  743. </div>
  744. </div>
  745. </div>
  746. </div>
  747. <div class="col-sm-4">
  748. <div class="single-blog">
  749. <img src="images/blog/2.jpg" alt="" />
  750. <h2>Lorem ipsum dolor sit amet</h2>
  751. <ul class="post-meta">
  752. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  753. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  754. </ul>
  755. <div class="blog-content">
  756. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  757. </div>
  758. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-six">Read More</a>
  759. </div>
  760. <div class="modal fade" id="blog-six" tabindex="-1" role="dialog" aria-hidden="true">
  761. <div class="modal-dialog">
  762. <div class="modal-content">
  763. <div class="modal-body">
  764. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  765. <img src="images/blog/2.jpg" alt="" />
  766. <h2>Lorem ipsum dolor sit amet</h2>
  767. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  768. </div>
  769. </div>
  770. </div>
  771. </div>
  772. </div>
  773.  
  774. <div class="col-sm-4">
  775. <div class="single-blog">
  776. <img src="images/blog/1.jpg" alt="" />
  777. <h2>Lorem ipsum dolor sit amet</h2>
  778. <ul class="post-meta">
  779. <li><i class="fa fa-pencil-square-o"></i><strong> Posted By:</strong> John</li>
  780. <li><i class="fa fa-clock-o"></i><strong> Posted On:</strong> Apr 15 2014</li>
  781. </ul>
  782. <div class="blog-content">
  783. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  784. </div>
  785. <a href="" class="btn btn-primary" data-toggle="modal" data-target="#blog-seven">Read More</a>
  786. </div>
  787. <div class="modal fade" id="blog-seven" tabindex="-1" role="dialog" aria-hidden="true">
  788. <div class="modal-dialog">
  789. <div class="modal-content">
  790. <div class="modal-body">
  791. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  792. <img src="images/blog/1.jpg" alt="" />
  793. <h2>Lorem ipsum dolor sit amet</h2>
  794. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  795. </div>
  796. </div>
  797. </div>
  798. </div>
  799. </div>
  800. </div>
  801. </div>
  802. </section> <!--/#blog-->
  803.  
  804. <section id="contact">
  805. <div class="container">
  806. <div class="row text-center clearfix">
  807. <div class="col-sm-8 col-sm-offset-2">
  808. <div class="contact-heading">
  809. <h2 class="title-one">Contact With Us</h2>
  810. <p>Hubungi kami jika Anda membutuhkan dan atau menemukan sesuatu</p>
  811. </div>
  812. </div>
  813. </div>
  814. </div>
  815. <div class="container">
  816. <div class="contact-details">
  817. <div class="pattern"></div>
  818. <div class="row text-center clearfix">
  819. <div class="col-sm-6">
  820. <div class="contact-address"><address><p><span>Dinas</span>Kominfo</p><strong>Jl. Letjen Sukowati No. 51<br>Salatiga<br>Jawa Tengah</strong><br><small>Dinas Komunikasi dan Informatika Pemerintah Kota Salatiga</small></address>
  821. <div class="social-icons">
  822. <a href="#"><i class="fa fa-facebook"></i></a><a href="#"><i class="fa fa-twitter"></i></a>
  823. <a href="#"><i class="fa fa-google-plus"></i></a><a href="#"><i class="fa fa-dribbble"></i></a>
  824. <a href="#"><i class="fa fa-linkedin"></i></a>
  825. </div>
  826. </div>
  827. </div>
  828. <div class="col-sm-6">
  829. <div id="contact-form-section">
  830. <div class="status alert alert-success" style="display: none"></div>
  831. <form id="contact-form" class="contact" name="contact-form" method="post" action="send-mail.php">
  832. <div class="form-group">
  833. <input type="text" name="name" class="form-control name-field" required="required" placeholder="Your Name"></div>
  834. <div class="form-group">
  835. <input type="email" name="email" class="form-control mail-field" required="required" placeholder="Your Email">
  836. </div>
  837. <div class="form-group">
  838. <textarea name="message" id="message" required class="form-control" rows="8" placeholder="Message"></textarea>
  839. </div>
  840. <div class="form-group">
  841. <button type="submit" class="btn btn-primary">Send</button>
  842. </div>
  843. </form>
  844. </div>
  845. </div>
  846. </div>
  847. </div>
  848. </div>
  849. </section> <!--/#contact-->
  850.  
  851. <footer id="footer">
  852. <div class="container">
  853. <div class="text-center">
  854. <p>Copyright &copy; 2017 - <a href="http://mostafiz.me/">Tugas Akhir</a> | XII TKJ A</p>
  855. </div>
  856. </div>
  857. </footer> <!--/#footer-->
  858.  
  859. <script type="text/javascript" src="js/jquery.js"></script>
  860. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  861. <script type="text/javascript" src="js/smoothscroll.js"></script>
  862. <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
  863. <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
  864. <script type="text/javascript" src="js/jquery.parallax.js"></script>
  865. <script type="text/javascript" src="js/main.js"></script>
  866. </body>
  867. </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!