API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 20th, 2018
187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 41.68 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  
  10. <title>Portfolio</title>
  11.  
  12. <meta name="description" content="Portfolio Jonathan Wijaya" />
  13. <meta name="keywords" content="portfolio jonathan wijaya , jonathan wijaya , jowimedia , jowi" />
  14. <meta name="author" content="Jowi Media" />
  15.  
  16. <!-- Open Sans Google font -->
  17. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
  18. <!-- Raleway Google font -->
  19. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:700">
  20. <!-- Favicons -->
  21. <link rel="shortcut icon" href="img/favico/marqa.ico">
  22. <link rel="apple-touch-icon" sizes="60x60" href="img/favico/apple-icon-60x60.png">
  23. <!-- Fontawesome fonts css file -->
  24. <link rel="stylesheet" href="css/font-awesome.min.css">
  25. <!-- Animate.css file -->
  26. <link rel="stylesheet" href="css/animate.css">
  27. <!-- Owl carousel css file -->
  28. <link rel="stylesheet" href="css/owl.carousel.css">
  29. <!-- Bootstrap file -->
  30. <link rel="stylesheet" href="css/bootstrap.min.css">
  31. <!-- Custom styles css file -->
  32. <link rel="stylesheet" href="css/style.css">
  33.  
  34. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  35. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  36. <!--[if lt IE 9]>
  37. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  38. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  39. <![endif]-->
  40. </head>
  41. <body>
  42. <!-- Start Loading page -->
  43. <div class="loading">
  44. <div class="loading-wrapper">
  45. <div class="rec r1"></div>
  46. <div class="rec r2"></div>
  47. <div class="rec r3"></div>
  48. <div class="rec r4"></div>
  49. <div class="rec r5"></div>
  50. </div>
  51. </div>
  52. <!-- End Loading page -->
  53.  
  54.  
  55. <!-- Start Header Section -->
  56. <div class="header" id="header">
  57. <div id="large-header" class="large-header">
  58. <canvas id="demo-canvas"></canvas>
  59. <div class="content center">
  60. <div class="container">
  61. <p>Hello, It's me</p>
  62. <h1>Jonathan Wijaya</h1>
  63. <p>Programmer Keliling - Gamer - Solo Player</p>
  64. <a href="#about-me">Biography</a>
  65. <a href="#portfolio">my works</a>
  66. </div> <!-- End container -->
  67. </div>
  68. <div class="mouse" id="mouse"></div> <!-- Mouse Icon -->
  69. </div>
  70. </div>
  71. <!-- End Header Section -->
  72.  
  73. <!-- Start Side Menu -->
  74. <nav id="top-nav">
  75. <div class="logo center"><a href="#">Home</a></div> <!-- LOGO -->
  76. <div class="menu" id="menu">
  77. <span class="bar b1"></span>
  78. <span class="bar b2"></span>
  79. <span class="bar b3"></span>
  80. </div>
  81. <div class="side-menu" id="side-menu"> <!-- Menu items -->
  82. <a href="#header">Home</a>
  83. <a href="#about-me">about me</a>
  84. <a href="#services">services</a>
  85. <a href="#skills">skills</a>
  86. <a href="#experiences">experiences</a>
  87. <a href="#portfolio">Portfolio</a>
  88. <a href="#testmonials">testmonials</a>
  89. <a href="#contact-me">Contact Me</a>
  90. </div>
  91. </nav>
  92. <!-- End Side Menu -->
  93.  
  94. <!-- Start About Me Section -->
  95. <div class="about-me clearfix" id="about-me">
  96. <div class="container">
  97. <div class="row">
  98. <!-- Profile Pic -->
  99. <div class="my-pic center col-sm-4 col-xs-12 wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="200">
  100. <img src="/img/picture.jpg" height="200px" width="180;">
  101. </div>
  102. <div class="introduction col-sm-8 col-xs-12 wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="200">
  103. <h2 class="h2">Jowi</h2>
  104. <div class="heading-line"></div>
  105. <p class="introduce">Jonathan Wijaya</p>
  106. <p class="intro">Nama Saya Jonathan Wijaya sering dipanggil Jowi, Saya lulusan TKJ Dari Smk St Louis</p>
  107.  
  108. </div>
  109. </div>
  110. <div class="row">
  111. <div class="profile col-sm-4 col-xs-12 wow fadeInUp text-center" data-wow-duration="0.5s" data-wow-offset="200">
  112. <h3>personal info</h3>
  113. <div class="heading-line"></div>
  114. <div class="personal-wrapper">
  115. <span><strong>Nama: </strong>Jonathan Wijaya</span>
  116. <span><strong>E-mail: </strong>support@jowimedia.me</span>
  117. <span><strong>Whatsapp : </strong>+62 (819)3306-1024</span>
  118. <span><strong>Facebook: </strong> <a href="https://www.facebook.com/jowimedia"><font color = "black">KLIK DISINI</font></a></span>
  119. <span><strong>Instagram: </strong> <a href="https://www.instagram.com/jowi.jpg"><font color = "red">KLIK DISINI</font></a></span>
  120. </div>
  121. </div>
  122. <div class="why-me col-sm-8 col-xs-12 wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="200">
  123. <!-- Start Accordion -->
  124. <div class="accordion">
  125. <div class="acc-item">
  126. <div class="acc-title"><i class="fa fa-plus"></i> Who am i?</div>
  127. <div class="acc-content">Saya Anak Pertama dari 3 Bersaudara</div>
  128. </div>
  129. <div class="acc-item">
  130. <div class="acc-title"><i class="fa fa-plus"></i> Favorite Food and Drinks?</div>
  131. <div class="acc-content">Soup Asparagus and Juice Durian</div>
  132. </div>
  133. <div class="acc-item">
  134. <div class="acc-title"><i class="fa fa-plus"></i> WHAT IS MY HOBBIES</div>
  135. <div class="acc-content">Bermain Game, Berjualan, Koding</div>
  136. </div>
  137. <div class="acc-item">
  138. <div class="acc-title"><i class="fa fa-plus"></i> The Result of my Work?</div>
  139. <div class="acc-content">Loren Ipsum.</div>
  140. </div>
  141. </div> <!-- End Accordion -->
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <!-- End About Me Section -->
  147.  
  148. <!-- Start Fun Facts Section -->
  149. <div class="fun-facts center" id="facts">
  150. <div class="pattern"></div>
  151. <div class="container">
  152. <div class="row">
  153. <!-- Fact No. 1 -->
  154. <div class="col-md-3 col-sm-6">
  155. <div class="fact">
  156. <i class="fa fa-code"></i>
  157. <p id="number_1">0</p>
  158. <span>lines of code</span>
  159. </div>
  160. </div>
  161. <!-- Fact No. 2 -->
  162. <div class="col-md-3 col-sm-6">
  163. <div class="fact">
  164. <i class="fa fa-code-fork"></i>
  165. <p id="number_2">0</p>
  166. <span>projects done</span>
  167. </div>
  168. </div>
  169. <!-- Fact No. 3 -->
  170. <div class="col-md-3 col-sm-6">
  171. <div class="fact">
  172. <i class="fa fa-coffee"></i>
  173. <p id="number_3">0</p>
  174. <span>cups of coffee</span>
  175. </div>
  176. </div>
  177. <!-- Fact No. 4 -->
  178. <div class="col-md-3 col-sm-6">
  179. <div class="fact">
  180. <i class="fa fa-smile-o"></i>
  181. <p id="number_4">0</p>
  182. <span>satisfied customers</span>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!-- End Fun Facts Section -->
  189.  
  190. <!-- Start Services Section -->
  191. <div class="services center" id="services">
  192. <div class="container">
  193. <!-- Title -->
  194. <div class="title">
  195. <h2 class="h2">Here's what i'm doing</h2>
  196. <div class="heading-line"></div>
  197. <p class="main-para">Progressively reintermediate magnetic services vis-a-vis focused supply chains. Appropriately coordinate high-quality human capital without.</p>
  198. </div>
  199. <div class="row">
  200. <!-- Service No. 1 -->
  201. <div class="col-md-3 col-sm-6">
  202. <div class="service">
  203. <i class="fa fa-css3"></i>
  204. <h3>HTML5/CSS3 coding</h3>
  205. <p>Simplify corporate e-services after diverse imperatives. Competently leverage existing excellent systems and seamless value.</p>
  206. </div>
  207. </div>
  208. <!-- Service No. 2 -->
  209. <div class="col-md-3 col-sm-6">
  210. <div class="service">
  211. <i class="fa fa-code"></i>
  212. <h3>development</h3>
  213. <p>Simplify corporate e-services after diverse imperatives. Competently leverage existing excellent systems and seamless value.</p>
  214. </div>
  215. </div>
  216. <!-- Service No. 3 -->
  217. <div class="col-md-3 col-sm-6">
  218. <div class="service">
  219. <i class="fa fa-laptop"></i>
  220. <h3>responsive</h3>
  221. <p>Simplify corporate e-services after diverse imperatives. Competently leverage existing excellent systems and seamless value.</p>
  222. </div>
  223. </div>
  224. <!-- Service No. 4 -->
  225. <div class="col-md-3 col-sm-6">
  226. <div class="service">
  227. <i class="fa fa-life-buoy"></i>
  228. <h3>24/7 support</h3>
  229. <p>Simplify corporate e-services after diverse imperatives. Competently leverage existing excellent systems and seamless value.</p>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. <!-- End Services Section -->
  236.  
  237. <!-- Start Technical Skills Section -->
  238. <div class="technical-skills center" id="skills">
  239. <div class="pattern"></div>
  240. <div class="container">
  241. <!-- Title -->
  242. <div class="title">
  243. <h2 class="h2">technical skills</h2>
  244. <div class="heading-line"></div>
  245. <p class="title">Authoritatively foster bricks-and-clicks networks rather than superior architectures. Compellingly mesh frictionless imperatives vis-a-vis emerging.</p>
  246. </div>
  247. <!-- Start main skills -->
  248. <div class="skills-wrapper row">
  249. <!-- main skill No. 1 -->
  250. <div class="skill col-md-3 col-sm-6">
  251. <div class="chart center" data-percent="88">
  252. <span><span id="chart_num_1">0</span> %</span>
  253. </div>
  254. <h2>html5</h2>
  255. </div>
  256. <!-- main skill No. 2 -->
  257. <div class="skill col-md-3 col-sm-6">
  258. <div class="chart center" data-percent="85">
  259. <span><span id="chart_num_2">0</span> %</span>
  260. </div>
  261. <h2>css3</h2>
  262. </div>
  263. <!-- main skill No. 3 -->
  264. <div class="skill col-md-3 col-sm-6">
  265. <div class="chart center" data-percent="55">
  266. <span><span id="chart_num_3">0</span> %</span>
  267. </div>
  268. <h2>javascript</h2>
  269. </div>
  270. <!-- main skill No. 4 -->
  271. <div class="skill col-md-3 col-sm-6">
  272. <div class="chart center" data-percent="75">
  273. <span><span id="chart_num_4">0</span> %</span>
  274. </div>
  275. <h2>php</h2>
  276. </div>
  277. </div> <!-- End main skills -->
  278. <div class="other-skills">
  279. <h2 class="h2">other skills</h2>
  280. <div class="heading-line"></div>
  281. <p class="title">Distinctively implement granular e-commerce whereas business innovation. Rapidiously unleash viral niches vis-a-vis real-time catalysts.</p>
  282. <!-- Start other skills -->
  283. <div class="skills-wrapper row">
  284. <!-- Skill No. 1 -->
  285. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  286. <div class=" bar_group__bar thick elastic" data-value="85" data-tooltip="true" data-label="communication" data-show-values="true" data-unit="%"></div>
  287. </div>
  288. <!-- Skill No. 2 -->
  289. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  290. <div class=" bar_group__bar thick elastic" data-value="90" data-tooltip="true" data-label="organization" data-show-values="true" data-unit="%"></div>
  291. </div>
  292. <!-- Skill No. 3 -->
  293. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  294. <div class=" bar_group__bar thick elastic" data-value="75" data-tooltip="true" data-label="visual design" data-show-values="true" data-unit="%"></div>
  295. </div>
  296. <!-- Skill No. 4 -->
  297. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  298. <div class=" bar_group__bar thick elastic" data-value="75" data-tooltip="true" data-label="programming" data-show-values="true" data-unit="%"></div>
  299. </div>
  300. <!-- Skill No. 5 -->
  301. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  302. <div class=" bar_group__bar thick elastic" data-value="80" data-tooltip="true" data-label="planning" data-show-values="true" data-unit="%"></div>
  303. </div>
  304. <!-- Skill No. 6 -->
  305. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  306. <div class=" bar_group__bar thick elastic" data-value="80" data-tooltip="true" data-label="learning" data-show-values="true" data-unit="%"></div>
  307. </div>
  308. <!-- Skill No. 7 -->
  309. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  310. <div class=" bar_group__bar thick elastic" data-value="55" data-tooltip="true" data-label="marketing" data-show-values="true" data-unit="%"></div>
  311. </div>
  312. <!-- Skill No. 8 -->
  313. <div class='bar_group col-md-6 col-xs-12' data-max="100">
  314. <div class=" bar_group__bar thick elastic" data-value="80" data-tooltip="true" data-label="ux-design" data-show-values="true" data-unit="%"></div>
  315. </div>
  316. </div> <!-- End other skills -->
  317. </div>
  318. </div>
  319. </div>
  320. <!-- End Technical Skills Section -->
  321.  
  322. <!-- Start Experience Section -->
  323. <div class="experiences center" id="experiences">
  324. <div class="container">
  325. <!-- Title -->
  326. <div class="title wow fadeIn" data-wow-duration="0.5s" data-wow-offset="200">
  327. <h2 class="h2">MY STORIES</h2>
  328. <div class="heading-line"></div>
  329. <p class="main-para">Who am i?</p>
  330. </div>
  331. <!-- start timeline -->
  332. <div class="timeline wow fadeIn" data-wow-duration="0.5s" data-wow-offset="200">
  333. <!-- Event No. 1 -->
  334. <div class="timeline-block clearfix wow fadeInLeft" data-wow-duration="0.5s" data-wow-offset="200">
  335. <div class="icon">
  336. <i class="fa fa-graduation-cap"></i>
  337. </div>
  338. <div class="content left round-corners">
  339. <h3>SDK Indriasana 4</h3>
  340. <span class="duration">( 2004 - 2010 )</span>
  341. <span class="job-title"> Student</span>
  342. <p>Growing up with intelligence.</p>
  343. </div>
  344. </div>
  345. <!-- Event No. 2 -->
  346. <div class="timeline-block clearfix wow fadeInRight" data-wow-duration="0.5s" data-wow-offset="200">
  347. <div class="icon">
  348. <i class="fa fa-graduation-cap"></i>
  349. </div>
  350. <div class="content right round-corners">
  351. <h3>SMPK St Vincentius</h3>
  352. <span class="duration">( 2010 - 2015 )</span>
  353. <span class="job-title">Student</span>
  354. <p>Difficult Times</p>
  355. </div>
  356. </div>
  357. <!-- Event No. 3 -->
  358. <div class="timeline-block clearfix wow fadeInLeft" data-wow-duration="0.5s" data-wow-offset="200">
  359. <div class="icon">
  360. <i class="fa fa-graduation-cap"></i>
  361. </div>
  362. <div class="content left round-corners">
  363. <h3>Smk St Louis</h3>
  364. <span class="duration">( 2015 - 2018 )</span>
  365. <span class="job-title">Student</span>
  366. <p>Get New Thing</p>
  367. </div>
  368. </div>
  369. </div> <!-- End Timeline -->
  370. </div>
  371. </div>
  372. <!-- End Experience Section -->
  373.  
  374. <!-- Start Quote Section -->
  375. <div class="quote">
  376. <div class="overlay"></div>
  377. <div class="container">
  378. <div class="qoute-wrapper">
  379. <p class="words"><span class="quote-mark open">"</span>Even if you are on the right track, you will get run over if you just set there.<span class="quote-mark end">"</span></p>
  380. <p class="author">- Poncoe -</p>
  381. </div>
  382. </div>
  383. </div>
  384. <!-- End Quote Section -->
  385.  
  386. <!-- Start Portfolio Section -->
  387. <div class="portfolio" id="portfolio">
  388. <div class="container">
  389. <!-- Title -->
  390. <div class="center">
  391. <h2 class="h2">My awesome portfolio</h2>
  392. <div class="heading-line"></div>
  393. <p class="main-para">Collaboratively fabricate alternative quality vectors through multimedia based web services. Conveniently procrastinate cost effective.</p>
  394. </div>
  395. <!-- Mixitup controls -->
  396. <div class="controls center">
  397. <button class="filter round-corners" data-filter="all" data-content="All">All</button>
  398. <button class="filter round-corners" data-filter=".photos" data-content="PHOTOS">PHOTOS</button>
  399. <button class="filter round-corners" data-filter=".branding" data-content="BRANDING">BRANDING</button>
  400. <button class="filter round-corners" data-filter=".illustration" data-content="ILLUSTRATION">ILLUSTRATION</button>
  401. </div>
  402. <div id="Container">
  403. <!-- Project No. 1 -->
  404. <div class="mix branding col-md-3 col-sm-6 col-xs-6" data-my-order="1">
  405. <div class="img-wrapper overlay-slide-right center">
  406. <!-- Project Image -->
  407. <img src="img/large/01.jpg" class="center-block img-responsive" alt="project 1">
  408. <div class="overlay-content">
  409. <span>project name</span>
  410. <i class="fa fa-search" data-toggle="modal" data-target="#modal-1"></i>
  411. </div>
  412. </div>
  413. <!-- Modal -->
  414. <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="label_1">
  415. <div class="modal-dialog" role="document">
  416. <div class="modal-content">
  417. <!-- Modal Header -->
  418. <div class="modal-header center">
  419. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  420. <h3 class="modal-title" id="label_1">Project Name</h3>
  421. <div class="heading-line"></div>
  422. <p class="cat">( branding )</p>
  423. </div>
  424. <!-- Modal Body -->
  425. <div class="modal-body">
  426. <!-- Project Image In Modal -->
  427. <img class="center-block img-responsive" src="img/large/01.jpg" alt="project-1">
  428. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  429. </div>
  430. </div>
  431. </div>
  432. </div> <!-- End Modal -->
  433. </div>
  434.  
  435. <!-- Project No. 2 -->
  436. <div class="mix photos col-md-3 col-sm-6 col-xs-6" data-my-order="2">
  437. <div class="img-wrapper overlay-slide-right center">
  438. <!-- Project Image -->
  439. <img src="img/large/02.jpg" class="center-block img-responsive" alt="project 2">
  440. <div class="overlay-content">
  441. <span>project name</span>
  442. <i class="fa fa-search" data-toggle="modal" data-target="#modal-2"></i>
  443. </div>
  444. </div>
  445. <!-- Modal -->
  446. <div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="label_2">
  447. <div class="modal-dialog" role="document">
  448. <div class="modal-content">
  449. <!-- Modal Header -->
  450. <div class="modal-header center">
  451. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  452. <h3 class="modal-title" id="label_2">Project Name</h3>
  453. <div class="heading-line"></div>
  454. <p class="cat">( photos )</p>
  455. </div>
  456. <!-- Modal Body -->
  457. <div class="modal-body">
  458. <!-- Project Image In Modal -->
  459. <img class="center-block img-responsive" src="img/large/02.jpg" alt="project-2">
  460. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  461. </div>
  462. </div>
  463. </div>
  464. </div> <!-- End Modal -->
  465. </div>
  466.  
  467. <!-- Project No. 3 -->
  468. <div class="mix illustration col-md-3 col-sm-6 col-xs-6" data-my-order="3">
  469. <div class="img-wrapper overlay-slide-right center">
  470. <!-- Project Image -->
  471. <img src="img/large/03.jpg" class="center-block img-responsive" alt="project 3">
  472. <div class="overlay-content">
  473. <span>project name</span>
  474. <i class="fa fa-search" data-toggle="modal" data-target="#modal-3"></i>
  475. </div>
  476. </div>
  477. <!-- Modal -->
  478. <div class="modal fade" id="modal-3" tabindex="-1" role="dialog" aria-labelledby="label_3">
  479. <div class="modal-dialog" role="document">
  480. <div class="modal-content">
  481. <!-- Modal Header -->
  482. <div class="modal-header center">
  483. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  484. <h3 class="modal-title" id="label_3">Project Name</h3>
  485. <div class="heading-line"></div>
  486. <p class="cat">( illustration )</p>
  487. </div>
  488. <!-- Modal Body -->
  489. <div class="modal-body">
  490. <!-- Project Image In Modal -->
  491. <img class="center-block img-responsive" src="img/large/03.jpg" alt="project-3">
  492. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  493. </div>
  494. </div>
  495. </div>
  496. </div> <!-- End Modal -->
  497. </div>
  498.  
  499. <!-- Project No. 4 -->
  500. <div class="mix photos col-md-3 col-sm-6 col-xs-6" data-my-order="4">
  501. <div class="img-wrapper overlay-slide-right center">
  502. <!-- Project Image -->
  503. <img src="img/large/04.jpg" class="center-block img-responsive" alt="project 4">
  504. <div class="overlay-content">
  505. <span>project name</span>
  506. <i class="fa fa-search" data-toggle="modal" data-target="#modal-4"></i>
  507. </div>
  508. </div>
  509. <!-- Modal -->
  510. <div class="modal fade" id="modal-4" tabindex="-1" role="dialog" aria-labelledby="label_4">
  511. <div class="modal-dialog" role="document">
  512. <div class="modal-content">
  513. <!-- Modal Header -->
  514. <div class="modal-header center">
  515. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  516. <h3 class="modal-title" id="label_4">Project Name</h3>
  517. <div class="heading-line"></div>
  518. <p class="cat">( photos )</p>
  519. </div>
  520. <!-- Modal Body -->
  521. <div class="modal-body">
  522. <!-- Project Image In Modal -->
  523. <img class="center-block img-responsive" src="img/large/04.jpg" alt="project-4">
  524. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  525. </div>
  526. </div>
  527. </div>
  528. </div> <!-- End Modal -->
  529. </div>
  530.  
  531. <!-- Project No. 5 -->
  532. <div class="mix branding col-md-3 col-sm-6 col-xs-6" data-my-order="5">
  533. <div class="img-wrapper overlay-slide-right center">
  534. <!-- Project Image -->
  535. <img src="img/large/05.jpg" class="center-block img-responsive" alt="project 5">
  536. <div class="overlay-content">
  537. <span>project name</span>
  538. <i class="fa fa-search" data-toggle="modal" data-target="#modal-5"></i>
  539. </div>
  540. </div>
  541. <!-- Modal -->
  542. <div class="modal fade" id="modal-5" tabindex="-1" role="dialog" aria-labelledby="label_5">
  543. <div class="modal-dialog" role="document">
  544. <div class="modal-content">
  545. <!-- Modal Header -->
  546. <div class="modal-header center">
  547. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  548. <h3 class="modal-title" id="label_5">Project Name</h3>
  549. <div class="heading-line"></div>
  550. <p class="cat">( branding )</p>
  551. </div>
  552. <!-- Modal Body -->
  553. <div class="modal-body">
  554. <!-- Project Image In Modal -->
  555. <img class="center-block img-responsive" src="img/large/05.jpg" alt="project-5">
  556. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  557. </div>
  558. </div>
  559. </div>
  560. </div> <!-- End Modal -->
  561. </div>
  562.  
  563. <!-- Project No. 6 -->
  564. <div class="mix illustration col-md-3 col-sm-6 col-xs-6" data-my-order="6">
  565. <div class="img-wrapper overlay-slide-right center">
  566. <!-- Project Image -->
  567. <img src="img/large/06.jpg" class="center-block img-responsive" alt="project 6">
  568. <div class="overlay-content">
  569. <span>project name</span>
  570. <i class="fa fa-search" data-toggle="modal" data-target="#modal-6"></i>
  571. </div>
  572. </div>
  573. <!-- Modal -->
  574. <div class="modal fade" id="modal-6" tabindex="-1" role="dialog" aria-labelledby="label_6">
  575. <div class="modal-dialog" role="document">
  576. <div class="modal-content">
  577. <!-- Modal Header -->
  578. <div class="modal-header center">
  579. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  580. <h3 class="modal-title" id="label_6">Project Name</h3>
  581. <div class="heading-line"></div>
  582. <p class="cat">( illustration )</p>
  583. </div>
  584. <!-- Modal Body -->
  585. <div class="modal-body">
  586. <!-- Project Image In Modal -->
  587. <img class="center-block img-responsive" src="img/large/06.jpg" alt="project-6">
  588. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  589. </div>
  590. </div>
  591. </div>
  592. </div> <!-- End Modal -->
  593. </div>
  594.  
  595. <!-- Project No. 7 -->
  596. <div class="mix photos col-md-3 col-sm-6 col-xs-6" data-my-order="7">
  597. <div class="img-wrapper overlay-slide-right center">
  598. <!-- Project Image -->
  599. <img src="img/large/02.jpg" class="center-block img-responsive" alt="project 7">
  600. <div class="overlay-content">
  601. <span>project name</span>
  602. <i class="fa fa-search" data-toggle="modal" data-target="#modal-7"></i>
  603. </div>
  604. </div>
  605. <!-- Modal -->
  606. <div class="modal fade" id="modal-7" tabindex="-1" role="dialog" aria-labelledby="label_7">
  607. <div class="modal-dialog" role="document">
  608. <div class="modal-content">
  609. <!-- Modal Header -->
  610. <div class="modal-header center">
  611. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  612. <h3 class="modal-title" id="label_7">Project Name</h3>
  613. <div class="heading-line"></div>
  614. <p class="cat">( photos )</p>
  615. </div>
  616. <!-- Modal Body -->
  617. <div class="modal-body">
  618. <!-- Project Image In Modal -->
  619. <img class="center-block img-responsive" src="img/large/02.jpg" alt="project-7">
  620. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  621. </div>
  622. </div>
  623. </div>
  624. </div> <!-- End Modal -->
  625. </div>
  626.  
  627. <!-- Project No. 8 -->
  628. <div class="mix illustration col-md-3 col-sm-6 col-xs-6" data-my-order="8">
  629. <div class="img-wrapper overlay-slide-right center">
  630. <!-- Project Image -->
  631. <img src="img/large/01.jpg" class="center-block img-responsive" alt="project 8">
  632. <div class="overlay-content">
  633. <span>project name</span>
  634. <i class="fa fa-search" data-toggle="modal" data-target="#modal-8"></i>
  635. </div>
  636. </div>
  637. <!-- Modal -->
  638. <div class="modal fade" id="modal-8" tabindex="-1" role="dialog" aria-labelledby="label_8">
  639. <div class="modal-dialog" role="document">
  640. <div class="modal-content">
  641. <!-- Modal Header -->
  642. <div class="modal-header center">
  643. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  644. <h3 class="modal-title" id="label_8">Project Name</h3>
  645. <div class="heading-line"></div>
  646. <p class="cat">( illustration )</p>
  647. </div>
  648. <!-- Modal Body -->
  649. <div class="modal-body">
  650. <!-- Project Image In Modal -->
  651. <img class="center-block img-responsive" src="img/large/01.jpg" alt="project-8">
  652. <p>Energistically develop reliable content for leading-edge networks. Dramatically enhance optimal testing procedures and multimedia based e-commerce. Holisticly syndicate standardized human capital without extensible experiences. <br> Efficiently synthesize client-based solutions through resource sucking systems. Proactively visualize mission-critical paradigms before competitive value. Efficiently disintermediate resource sucking e-markets via visionary e-markets.</p>
  653. </div>
  654. </div>
  655. </div>
  656. </div> <!-- End Modal -->
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. <!-- End Portfolio Section -->
  662.  
  663. <!-- Start Testmonials Section -->
  664. <div class="testmonials center" id="testmonials">
  665. <div class="overlay"></div>
  666. <div class="pattern"></div>
  667. <div class="container">
  668. <div class="test-owl">
  669. <!-- Clinent No.1 -->
  670. <div class="client text-center">
  671. <h3>- Felmi Putra -</h3>
  672. <p>Photography , Programmer</p>
  673. <div class="stars">
  674. <span class="fa fa-star"></span>
  675. <span class="fa fa-star"></span>
  676. <span class="fa fa-star"></span>
  677. <span class="fa fa-star"></span>
  678. <span class="fa fa-star-half"></span>
  679. </div>
  680. <div class="opinion">
  681. <i class="fa fa-quote-left"></i>
  682. <p>Professionally expedite clicks-and-mortar methods of empowerment through excellent convergence. Efficiently strategize user friendly e-commerce before technically sound interfaces. Professionally harness one-to-one outsourcing whereas future-proof.</p>
  683. <i class="fa fa-quote-right reversed"></i>
  684. </div>
  685. </div>
  686. <!-- Clinent No.2 -->
  687. <div class="client text-center">
  688. <h3>- Rahmat Syaefullah -</h3>
  689. <p>Web Designer , Programmer</p>
  690. <div class="stars">
  691. <span class="fa fa-star"></span>
  692. <span class="fa fa-star"></span>
  693. <span class="fa fa-star"></span>
  694. <span class="fa fa-star"></span>
  695. <span class="fa fa-star-half"></span>
  696. </div>
  697. <div class="opinion">
  698. <i class="fa fa-quote-left"></i>
  699. <p>Assertively innovate technically sound process improvements with best-of-breed users. Seamlessly matrix dynamic processes rather than multimedia based scenarios. Seamlessly myocardinate front-end e-commerce vis-a-vis state of the art core competencies. Energistically create intermandated models.</p>
  700. <i class="fa fa-quote-right reversed"></i>
  701. </div>
  702. </div>
  703. <!-- Clinent No.3 -->
  704. <div class="client text-center">
  705. <h3>- Billysani Akhyar -</h3>
  706. <p>Web Developer</p>
  707. <div class="stars">
  708. <span class="fa fa-star"></span>
  709. <span class="fa fa-star"></span>
  710. <span class="fa fa-star"></span>
  711. <span class="fa fa-star"></span>
  712. <span class="fa fa-star"></span>
  713. </div>
  714. <div class="opinion">
  715. <i class="fa fa-quote-left"></i>
  716. <p>Globally integrate resource maximizing information through economically sound results. Enthusiastically generate functionalized applications rather than quality imperatives. Monotonectally deploy integrated products.</p>
  717. <i class="fa fa-quote-right reversed"></i>
  718. </div>
  719. </div>
  720. <!-- Clinent No.4 -->
  721. <div class="client text-center">
  722. <h3>- Afdrian Juarlin -</h3>
  723. <p>Android developer</p>
  724. <div class="stars">
  725. <span class="fa fa-star"></span>
  726. <span class="fa fa-star"></span>
  727. <span class="fa fa-star"></span>
  728. <span class="fa fa-star"></span>
  729. <span class="fa fa-star"></span>
  730. </div>
  731. <div class="opinion">
  732. <i class="fa fa-quote-left"></i>
  733. <p>Compellingly evolve future-proof total linkage via team driven information. Authoritatively maximize B2C paradigms rather than diverse channels. Dynamically pontificate B2C solutions whereas enterprise human capital. Interactively incentivize client-focused e-services.</p>
  734. <i class="fa fa-quote-right reversed"></i>
  735. </div>
  736. </div>
  737. <!-- Clinent No.5 -->
  738. <div class="client text-center">
  739. <h3>- Ferdiansah -</h3>
  740. <p>Megazine Designer</p>
  741. <div class="stars">
  742. <span class="fa fa-star"></span>
  743. <span class="fa fa-star"></span>
  744. <span class="fa fa-star"></span>
  745. <span class="fa fa-star"></span>
  746. </div>
  747. <div class="opinion">
  748. <i class="fa fa-quote-left"></i>
  749. <p>Credibly aggregate low-risk high-yield opportunities after e-business expertise. Distinctively brand front-end sources with bricks-and-clicks supply chains. Rapidiously engineer ubiquitous e-commerce rather than virtual process.</p>
  750. <i class="fa fa-quote-right reversed"></i>
  751. </div>
  752. </div>
  753. </div>
  754. </div>
  755. </div>
  756. <!-- End Testmonials Section -->
  757.  
  758. <!-- Start Contact Section -->
  759. <div class="contact center" id="contact-me">
  760. <div class="container">
  761. <!-- Title -->
  762. <div class="title wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="200">
  763. <h2 class="h2">Get in touch</h2>
  764. <div class="heading-line"></div>
  765. <p class="main-para">Globally empower viral services whereas mission-critical platforms. Rapidiously optimize scalable paradigms before covalent technologies.</p>
  766. </div>
  767. <div class="row form-wrapper">
  768. <div class="col-md-8 col-md-offset-2 wow fadeInUp" data-wow-duration="0.5s" data-wow-offset="200">
  769. <!-- Contact-Me Form -->
  770. <form data-toggle="validator" role="form" id="contact-form">
  771. <div class="form-group has-feedback">
  772. <input type="text" name="name" id="name" class="form-control" data-error="Please, Enter Your Name." required>
  773. <label for="name">Your Name</label>
  774. <span class="help-block with-errors"></span>
  775. </div>
  776. <div class="form-group has-feedback">
  777. <input type="email" name="mail" id="mail" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" data-error="Your E-mail isn't correct" required>
  778. <label for="mail">Your E-mail</label>
  779. <span class="help-block with-errors"></span>
  780. </div>
  781. <div class="form-group has-feedback">
  782. <textarea name="message" id="message" class="form-control" data-error="Please, Type Your Message" required></textarea>
  783. <label for="message">Your Message Here</label>
  784. <span class="help-block with-errors"></span>
  785. </div>
  786. <div class="submit-container">
  787. <button type="submit" class="btn submit-btn">Send Your Message</button>
  788. </div>
  789. <p class="form-response"></p>
  790. </form> <!-- End Form -->
  791. </div>
  792. </div>
  793. <!-- Contact Details -->
  794. <div class="row contact-info">
  795. <div class="col-md-3 col-sm-6 col-xs-12 info">
  796. <i class="fa fa-phone center"></i>
  797. <div class="info-content">
  798. <h3>call me</h3>
  799. <span>(+62) 819 3306 1024</span>
  800. <span>(+62) 822 3372 2356</span>
  801. </div>
  802. </div>
  803. <div class="col-md-3 col-sm-6 col-xs-12 info">
  804. <i class="fa fa-envelope center"></i>
  805. <div class="info-content">
  806. <h3>Send a message</h3>
  807. <span>support@jowimedia.tk</span>
  808. </div>
  809. </div>
  810. <div class="col-md-3 col-sm-6 col-xs-12 info">
  811. <i class="fa fa-home center"></i>
  812. <div class="info-content">
  813. <h3>Visit me</h3>
  814. <span>Jl.Petemon Barat</span><span>Indonesia</span>
  815. </div>
  816. </div>
  817. <div class="col-md-3 col-sm-6 col-xs-12 info">
  818. <i class="fa fa-clock-o center"></i>
  819. <div class="info-content">
  820. <h3>Work time</h3>
  821. <span>Sat - Wed : 07.00 - 22.00 </span>
  822. <span>Thursday : 09.00 - 21.00 </span>
  823. </div>
  824. </div>
  825. </div>
  826. </div>
  827. <!-- Google Map -->
  828. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1978.8818017113645!2d112.7183097580245!3d-7.2677208380270235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd7f95576fcf2dd%3A0x8ddf5da05f6b6282!2sJl.+Petemon+Bar.%2C+Kota+SBY%2C+Jawa+Timur!5e0!3m2!1sen!2sid!4v1529535032037" width="1500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
  829. <!-- End Contact Section -->
  830.  
  831. <!-- Start Partners Section -->
  832. <div class="partners">
  833. <div class="container">
  834. <div class="partners-owl-carousel">
  835. <div class="partner"><img src="img/brands/3docean-logo.png" alt="partner"></div>
  836. <div class="partner"><img src="img/brands/audiojungle-logo.png" alt="partner"></div>
  837. <div class="partner"><img src="img/brands/codecanyon-logo.png" alt="partner"></div>
  838. <div class="partner"><img src="img/brands/graphicriver-logo.png" alt="partner"></div>
  839. <div class="partner"><img src="img/brands/photodune-logo.png" alt="partner"></div>
  840. <div class="partner"><img src="img/brands/themeforest-logo.png" alt="partner"></div>
  841. <div class="partner"><img src="img/brands/videohive-logo.png" alt="partner"></div>
  842. </div>
  843. </div>
  844. </div>
  845. <!-- End Partners Section -->
  846.  
  847. <!-- Start Footer Section -->
  848. <div class="footer center">
  849. <div class="container">
  850. <div class="row">
  851. <div class="follow-me">follow me</div>
  852. <div class="col-md-12 col-xs-12 links">
  853. <!-- Social links -->
  854. <div class="icon-wrapper center">
  855. <!-- Facebook Link -->
  856. <a href="www.facebook.com/jowimedia" class="icon fb">
  857. <i class="fa fa-facebook"></i>
  858. <i class="fa fa-facebook"></i>
  859. </a>
  860. <!-- Twitter Link -->
  861. <a href="www.twitter.com/jowimedia" class="icon tw">
  862. <i class="fa fa-twitter"></i>
  863. <i class="fa fa-twitter"></i>
  864. </a>
  865. <!-- Github Link -->
  866. <a href="#" class="icon gh">
  867. <i class="fa fa-github"></i>
  868. <i class="fa fa-github"></i>
  869. </a>
  870. <!-- Google Plus Link -->
  871. <a href="#" class="icon gp">
  872. <i class="fa fa-google-plus"></i>
  873. <i class="fa fa-google-plus"></i>
  874. </a>
  875. <!-- Linkedin Link -->
  876. <a href="#" class="icon lin">
  877. <i class="fa fa-linkedin"></i>
  878. <i class="fa fa-linkedin"></i>
  879. </a>
  880. <!-- Pinterest Link -->
  881. <a href="#" class="icon pin">
  882. <i class="fa fa-pinterest"></i>
  883. <i class="fa fa-pinterest"></i>
  884. </a>
  885. </div>
  886. </div>
  887. <div class="col-md12 col-xs-12 copyright">
  888. <h6>&copy; JowiMedia 2018 All RightsReserved. Designed by Jonathan</h6>
  889. </div>
  890. </div>
  891. </div>
  892. </div>
  893. <!-- End Footer Section -->
  894.  
  895. <!-- Start To Top button -->
  896. <div class="back-to-top center">
  897. <i class="fa fa-long-arrow-up"></i>
  898. </div>
  899. <!-- End To Top button -->
  900.  
  901. <!-- Start scroll percentage -->
  902. <div id="scroll"></div>
  903. <!-- End scroll percentage -->
  904.  
  905.  
  906.  
  907. <!-- Including jQuery file -->
  908. <script src="js/jquery-1.12.1.min.js"></script>
  909. <!-- Including jQuery.appear file -->
  910. <script src="js/jquery.appear.js"></script>
  911. <!-- Bootstrap js file -->
  912. <script src="js/bootstrap.min.js"></script>
  913. <!-- easy pie chart -->
  914. <script src="js/jquery.easypiechart.min.js"></script>
  915. <!-- NiceScroll plugin -->
  916. <script src="js/jquery.nicescroll.min.js"></script>
  917. <!-- animate numbers plugin -->
  918. <script src="js/jquery.animatenumber.min.js"></script>
  919. <!-- Horizontal bar chart -->
  920. <script src="js/bars.js"></script>
  921. <!-- mixitup plugin -->
  922. <script src="js/jquery.mixitup.min.js"></script>
  923. <!-- animated background header -->
  924. <script src="js/tweenlite.min.js"></script>
  925. <!-- form validation file -->
  926. <script src="js/validator.min.js"></script>
  927. <!-- Owl carousel js file -->
  928. <script src="js/owl.carousel.min.js"></script>
  929. <!-- Google Map -->
  930. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJOx2cEs3x3dTSubqABijclN_3uEmL7f8"></script>
  931. <!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> -->
  932. <!-- Custom file -->
  933. <script src="js/plugins.js"></script>
  934. <!-- Wow.js file -->
  935. <script src="js/wow.min.js"></script>
  936. <script>
  937. new WOW().init();
  938. </script>
  939. </body>
  940. </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!