API tools faq
paste
Advertisement
darmariduan

autocomplate

darmariduan
Dec 25th, 2019
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 8.66 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.   <title>Regna Bootstrap Template</title>
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.   <meta content="" name="keywords">
  8.   <meta content="" name="description">
  9.  
  10.   <!-- Favicons -->
  11.   <link href="img/favicon.png" rel="icon">
  12.   <link href="img/apple-touch-icon.png" rel="apple-touch-icon">
  13.  
  14.   <!-- Google Fonts -->
  15.   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Poppins:300,400,500,700" rel="stylesheet">
  16.  
  17.   <!-- Bootstrap CSS File -->
  18.   <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  19.  
  20.   <!-- Libraries CSS Files -->
  21.   <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  22.   <link href="lib/animate/animate.min.css" rel="stylesheet">
  23.  
  24.   <!-- Main Stylesheet File -->
  25.   <link href="css/style.css" rel="stylesheet">
  26.  
  27.   <!-- =======================================================
  28.     Theme Name: Regna
  29.     Theme URL: https://bootstrapmade.com/regna-bootstrap-onepage-template/
  30.     Author: BootstrapMade.com
  31.     License: https://bootstrapmade.com/license/
  32.   ======================================================= -->
  33. </head>
  34.  
  35. <body>
  36.  
  37.  
  38.  
  39.     <!--==========================
  40.       Portfolio Section
  41.     ============================-->
  42.     <section id="portfolio">
  43.       <div class="container wow fadeInUp">
  44.         <div class="section-header">
  45.           <h3 class="section-title">Portfolio</h3>
  46.           <p class="section-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
  47.             <div class="container">
  48.         <form action="" method="post">
  49.                 <input type="text" id="gbr" name="gbr" placeholder="Nama Gambar">
  50.             </form>
  51.           </div>
  52.         </div>
  53.  
  54.         <div class="row">
  55.  
  56.           <div class="col-lg-12">
  57.             <ul id="portfolio-flters">
  58.               <li data-filter=".filter-app, .filter-card, .filter-logo, .filter-web" class="filter-active">All</li>
  59.               <li data-filter=".filter-app">App</li>
  60.               <li data-filter=".filter-card">Card</li>
  61.               <li data-filter=".filter-logo">Logo</li>
  62.               <li data-filter=".filter-web">Web</li>
  63.             </ul>
  64.           </div>
  65.         </div>
  66.  
  67.         <div class="row" id="portfolio-wrapper">
  68.           <div class="col-lg-3 col-md-6 portfolio-item filter-app">
  69.             <a href="">
  70.               <img src="img/portfolio/app1.jpg" alt="">
  71.               <div class="details">
  72.                 <h4>App 1</h4>
  73.                 <span>Alored dono par</span>
  74.               </div>
  75.             </a>
  76.           </div>
  77.  
  78.           <div class="col-lg-3 col-md-6 portfolio-item filter-web">
  79.             <a href="">
  80.               <img src="img/portfolio/web2.jpg" alt="">
  81.               <div class="details">
  82.                 <h4>Web 2</h4>
  83.                 <span>Alored dono par</span>
  84.               </div>
  85.             </a>
  86.           </div>
  87.  
  88.           <div class="col-lg-3 col-md-6 portfolio-item filter-app">
  89.             <a href="">
  90.               <img src="img/portfolio/app3.jpg" alt="">
  91.               <div class="details">
  92.                 <h4>App 3</h4>
  93.                 <span>Alored dono par</span>
  94.               </div>
  95.             </a>
  96.           </div>
  97.  
  98.           <div class="col-lg-3 col-md-6 portfolio-item filter-card">
  99.             <a href="">
  100.               <img src="img/portfolio/card1.jpg" alt="">
  101.               <div class="details">
  102.                 <h4>Card 1</h4>
  103.                 <span>Alored dono par</span>
  104.               </div>
  105.             </a>
  106.           </div>
  107.  
  108.           <div class="col-lg-3 col-md-6 portfolio-item filter-card">
  109.             <a href="">
  110.               <img src="img/portfolio/card2.jpg" alt="">
  111.               <div class="details">
  112.                 <h4>Card 2</h4>
  113.                 <span>Alored dono par</span>
  114.               </div>
  115.             </a>
  116.           </div>
  117.  
  118.           <div class="col-lg-3 col-md-6 portfolio-item filter-web">
  119.             <a href="">
  120.               <img src="img/portfolio/web3.jpg" alt="">
  121.               <div class="details">
  122.                 <h4>Web 3</h4>
  123.                 <span>Alored dono par</span>
  124.               </div>
  125.             </a>
  126.           </div>
  127.  
  128.           <div class="col-lg-3 col-md-6 portfolio-item filter-card">
  129.             <a href="">
  130.               <img src="img/portfolio/card3.jpg" alt="">
  131.               <div class="details">
  132.                 <h4>Card 3</h4>
  133.                 <span>Alored dono par</span>
  134.               </div>
  135.             </a>
  136.           </div>
  137.  
  138.           <div class="col-lg-3 col-md-6 portfolio-item filter-app">
  139.             <a href="">
  140.               <img src="img/portfolio/app2.jpg" alt="">
  141.               <div class="details">
  142.                 <h4>App 2</h4>
  143.                 <span>Alored dono par</span>
  144.               </div>
  145.             </a>
  146.           </div>
  147.  
  148.           <div class="col-lg-3 col-md-6 portfolio-item filter-logo">
  149.             <a href="">
  150.               <img src="img/portfolio/logo1.jpg" alt="">
  151.               <div class="details">
  152.                 <h4>Logo 1</h4>
  153.                 <span>Alored dono par</span>
  154.               </div>
  155.             </a>
  156.           </div>
  157.  
  158.           <div class="col-lg-3 col-md-6 portfolio-item filter-logo">
  159.             <a href="">
  160.               <img src="img/portfolio/logo3.jpg" alt="">
  161.               <div class="details">
  162.                 <h4>Logo 3</h4>
  163.                 <span>Alored dono par</span>
  164.               </div>
  165.             </a>
  166.           </div>
  167.  
  168.           <div class="col-lg-3 col-md-6 portfolio-item filter-web">
  169.             <a href="">
  170.               <img src="img/portfolio/web1.jpg" alt="">
  171.               <div class="details">
  172.                 <h4>Web 1</h4>
  173.                 <span>Alored dono par</span>
  174.               </div>
  175.             </a>
  176.           </div>
  177.  
  178.           <div class="col-lg-3 col-md-6 portfolio-item filter-logo">
  179.             <a href="">
  180.               <img src="img/portfolio/logo2.jpg" alt="">
  181.               <div class="details">
  182.                 <h4>Logo 2</h4>
  183.                 <span>Alored dono par</span>
  184.               </div>
  185.             </a>
  186.           </div>
  187.  
  188.         </div>
  189.  
  190.       </div>
  191.     </section><!-- #portfolio -->
  192.  
  193.  
  194.  
  195.  
  196.   <!--==========================
  197.     Footer
  198.   ============================-->
  199.   <footer id="footer">
  200.     <div class="footer-top">
  201.       <div class="container">
  202.  
  203.       </div>
  204.     </div>
  205.  
  206.     <div class="container">
  207.       <div class="copyright">
  208.         &copy; Copyright <strong>Regna</strong>. All Rights Reserved
  209.       </div>
  210.       <div class="credits">
  211.         <!--
  212.           All the links in the footer should remain intact.
  213.           You can delete the links only if you purchased the pro version.
  214.           Licensing information: https://bootstrapmade.com/license/
  215.           Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Regna
  216.         -->
  217.         Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
  218.       </div>
  219.     </div>
  220.   </footer><!-- #footer -->
  221.  
  222.   <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  223.  <script type="text/javascript">
  224.             $(document).ready(function() {
  225.  
  226.                 // Data yang ditamilkan pada autocomplete.
  227.                 var gbr = [
  228.                     { value: 'App 1', data: 'App 1' },
  229.                     { value: 'Logo 1', data: 'Logo 1' },
  230.                     { value: 'Web 2', data: 'Web 2' },
  231.                     { value: 'App 2', data: 'App 2' },
  232.                  
  233.                 ];
  234.  
  235.                 // Selector input yang akan menampilkan autocomplete.
  236.                 $( "#gbr" ).autocomplete({
  237.                     lookup: gbr
  238.                 });
  239.             })
  240.         </script>
  241.   <!-- JavaScript Libraries -->
  242.   <script src="lib/jquery/jquery.min.js"></script>
  243.   <script src="lib/jquery/jquery-migrate.min.js"></script>
  244.   <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  245.   <script src="lib/easing/easing.min.js"></script>
  246.   <script src="lib/wow/wow.min.js"></script>
  247.   <script src="lib/waypoints/waypoints.min.js"></script>
  248.   <script src="lib/counterup/counterup.min.js"></script>
  249.   <script src="lib/superfish/hoverIntent.js"></script>
  250.   <script src="lib/superfish/superfish.min.js"></script>
  251.  
  252.   <!-- Contact Form JavaScript File -->
  253.   <script src="contactform/contactform.js"></script>
  254.  
  255.   <!-- Template Main Javascript File -->
  256.   <script src="js/main.js"></script>
  257.    <script src="jquery-3.2.1.min.js"></script>
  258.  
  259.         <!-- Memanggil Autocomplete.js -->
  260.         <script src="jquery.autocomplete.min.js"></script>
  261.  
  262. </body>
  263. </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!