API tools faq
paste
Advertisement
Guest User

AutoComplete

a guest
Dec 28th, 2015
271
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Groovy 12.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  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.     <meta name="description" content="">
  10.     <meta name="author" content="">
  11.  
  12.     <title>Acha: Repair and Service provider in the Philippines</title>
  13.     <script src="https:code.jquery.com/jquery-1.11.3.min.js"></script>
  14.     <script src="autocomplete/jquery.easy-autocomplete.js"></script>
  15.     <link rel="stylesheet" href="autocomplete/easy-autocomplete.css">
  16.     <!-- Bootstrap Core CSS -->
  17.     <link href="css/bootstrap.min.css" rel="stylesheet">
  18.  
  19.     <!-- Custom CSS -->
  20.     <link href="css/landing-page.css" rel="stylesheet">
  21.  
  22.     <!-- Custom Fonts -->
  23.     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  24.     <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  25.     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  26.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  27.    <!--[if lt IE 9]>
  28.        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  29.        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  30.    <![endif]-->
  31.  
  32. </head>
  33.  
  34. <body>
  35.  
  36.    <!-- Navigation -->
  37.    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
  38.        <div class="container topnav">
  39.            <!-- Brand and toggle get grouped for better mobile display -->
  40.            <div class="navbar-header">
  41.                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  42.                    <span class="sr-only">Toggle navigation</span>
  43.                    <span class="icon-bar"></span>
  44.                    <span class="icon-bar"></span>
  45.                    <span class="icon-bar"></span>
  46.                </button>
  47.                <a class="navbar-brand topnav visible-lg" href="#">Acha.ph - No.1 Service provider Platform in the Philippines</a>
  48.  
  49.            </div>
  50.            <!-- Collect the nav links, forms, and other content for toggling -->
  51.            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  52.                <ul class="nav navbar-nav navbar-right">
  53.                    
  54.                     <li><div class="bottomMenu"> <a href="https://twitter.com/SBootstrap" class="pull-right navbar-brand topnav"><i class="fa fa-search fa-fw"></i> <span class="network-name">Get Free Quote</span></a></div>
  55.                     </li>
  56.                    
  57.                    <li>
  58.                        <a href="#about">About</a>
  59.                    </li>
  60.                    <li>
  61.                        <a href="#services">Services</a>
  62.                    </li>
  63.                    <li>
  64.                        <a href="#contact">Contact</a>
  65.                    </li>
  66.                </ul>
  67.            </div>
  68.            <!-- /.navbar-collapse -->
  69.        </div>
  70.        <!-- /.container -->
  71.    </nav>
  72.  
  73.  
  74.    <!-- Header -->
  75.    <a name="about"></a>
  76.    <div class="intro-header">
  77.        <div class="container">
  78.  
  79.            <div class="row">
  80.                <div class="col-lg-12">
  81.                    <div class="intro-message">
  82.                         <div class="container">
  83.                             <div class="row">
  84.                                 <div class="col-lg-offset-3 col-lg-6">
  85.                                     <h2><i>Your Problem, Our Solution.</i></h2>
  86.                                     <input type="text" id="basics" class="form-control input-lg" placeholder="Renovation, Plumming, Welder, Carpent, Driver , Cleaner Etc...">
  87.                                     <br>
  88.                                      <button type="sutmit"class="btn btn-default btn-lg"><i class="fa fa-search fa-fw"></i> <span class="network-name">Get Free Quote</span></button><hr>
  89.                                 </div>
  90.                             </div>
  91.                         </div>
  92.                                 <h1>    <img class="img-responsive center-block" src="assets/logo3.png" alt="">Acha.ph</h1>
  93.                        <h3>The faster and easier way to hire services in the Philippines.</h3>
  94.                        <h4>Get up to 5 custom quotes to compare & hire the best. Quick. Easy. Free.</h4>
  95.                        <hr class="intro-divider">
  96.                        <ul class="list-inline intro-social-buttons">
  97.                            <li>
  98.                                <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
  99.                            </li>
  100.                            <li>
  101.                                <a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
  102.                            </li>
  103.                            <li>
  104.                                <a href="#" class="btn btn-default btn-lg"><i class="fa fa-instagram fa-fw"></i> <span class="network-name">Instagram</span></a>
  105.                            </li>
  106.                        </ul>
  107.                    </div>
  108.                </div>
  109.                 <!--<div class="col-lg-6">
  110.                     <div class="intro-message">
  111.                         <div class="embed-responsive embed-responsive-16by9">
  112.                           <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent"></iframe>
  113.                         </div>
  114.                         <h4>•Step1-Quote, you Can Find atleast 5 quotation from different vendors  </h4>
  115.                         <h4>•Step2-Book, Pay the neccessary Downpayment  </h4>
  116.                         <h4>•Step3-Work, Vendor will go to you and serve you  </h4>
  117.                     </div>
  118.                 </div> -->
  119.            </div>
  120.  
  121.        </div>
  122.        <!-- /.container -->
  123.  
  124.    </div>
  125.    <!-- /.intro-header -->
  126.  
  127.    <!-- Page Content -->
  128.  
  129.     <a  name="services"></a>
  130.    <div class="content-section-a">
  131.  
  132.        <div class="container">
  133.            <div class="row">
  134.                 <div class="col-lg-12  col-sm-6">
  135.                     <div class="process">
  136.                         <!-- Lynch Color -->
  137.                         <center><h1 style="color:#6C7A89;">Process on How to Hire in Acha.ph</h1><center>
  138.                     </div>
  139.                 </div>
  140.                 <div class="col-lg-4  col-sm-6">
  141.                     <div class="text-center">
  142.                         <img class="img-responsive center-block" src="assets/1.png" alt="">
  143.                         <h2 class="center">Select</h2>
  144.                     </div>
  145.                </div>
  146.                <div class="col-lg-4  col-sm-6">
  147.                     <div class="text-center">
  148.                         <img class="img-responsive center-block" src="assets/2.png" alt="">
  149.                         <h2 class="center">Book</h2>
  150.                     </div>
  151.                </div>
  152.                <div class="col-lg-4  col-sm-6">
  153.                     <div class="text-center">
  154.                         <img class="img-responsive center-block" src="assets/3.png" alt="">
  155.                         <h2 class="center">Service</h2>
  156.                     </div>
  157.                </div>
  158.            </div>
  159.  
  160.        </div>
  161.        <!-- /.container -->
  162.  
  163.    </div>
  164.    <!-- /.content-section-a -->
  165.  
  166.    <div class="content-section-b">
  167.  
  168.        <div class="container">
  169.            <div class="row">
  170.  
  171.                 <div class="col-lg-12  col-sm-6">
  172.                     <div class="process">
  173.                         <!-- Lynch Color -->
  174.                         <center><h1 style="color:#6C7A89;">Services available for Quotation</h1><center>
  175.                     </div>
  176.                 </div>
  177.  
  178.                 <div class="col-lg-4  col-sm-6">
  179.                     <div class="text-center">
  180.                         <img class="img-responsive center-block" src="assets/household.png" alt="">
  181.                         <h2 class="center">Household Service <br>(repair)</h2>
  182.                     </div>
  183.                </div>
  184.  
  185.               <div class="col-lg-4  col-sm-6">
  186.                     <div class="text-center">
  187.                         <img class="img-responsive center-block" src="assets/transport.png" alt="">
  188.                         <h2 class="center">Transport</h2>
  189.                     </div>
  190.                </div>
  191.  
  192.               <div class="col-lg-4  col-sm-6">
  193.                     <div class="text-center">
  194.                         <img class="img-responsive center-block" src="assets/others.png" alt="">
  195.                         <h2 class="center">Others</h2>
  196.                     </div>
  197.                </div>
  198.  
  199.            </div>
  200.  
  201.        </div>
  202.        <!-- /.container -->
  203.  
  204.    </div>
  205.    <!-- /.content-section-b -->
  206.  
  207.    <div class="content-section-a">
  208.  
  209.        <div class="container">
  210.  
  211.            <div class="row">
  212.                <div class="col-lg-5 col-sm-6">
  213.                    <hr class="section-heading-spacer">
  214.                    <div class="clearfix"></div>
  215.                    <h2 class="section-heading">Partners etc.....<br>Font Awesome Icons</h2>
  216.                    <p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
  217.                </div>
  218.                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
  219.                    <img class="img-responsive" src="img/phones.png" alt="">
  220.                </div>
  221.            </div>
  222.  
  223.        </div>
  224.        <!-- /.container -->
  225.  
  226.    </div>
  227.    <!-- /.content-section-a -->
  228.  
  229.    <div class="content-section-b">
  230.  
  231.        <div class="container">
  232.  
  233.            <div class="row">
  234.                <div class="col-lg-5 col-sm-6">
  235.                    <hr class="section-heading-spacer">
  236.                    <div class="clearfix"></div>
  237.                    <h2 class="section-heading">Testimonials<br>Font Awesome Icons</h2>
  238.                    <p class="lead">This template features the 'Lato' font, part of the <a target="_blank" href="http://www.google.com/fonts">Google Web Font library</a>, as well as <a target="_blank" href="http://fontawesome.io">icons from Font Awesome</a>.</p>
  239.                </div>
  240.                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
  241.                    <img class="img-responsive" src="img/phones.png" alt="">
  242.                </div>
  243.            </div>
  244.  
  245.        </div>
  246.        <!-- /.container -->
  247.  
  248.    </div>
  249.    <!-- /.content-section-b -->
  250.  
  251.     <a  name="contact"></a>
  252.    <div class="banner">
  253.  
  254.        <div class="container">
  255.  
  256.            <div class="row">
  257.                <div class="col-lg-offset-2 col-lg-5">
  258.                     <!-- THUNDERBIRD  color-->
  259.                    <h2 style="color:#D91E18;">17,000<br><h3>Generated Quotations</h3></h2>
  260.                </div>
  261.                <div class="col-lg-5">
  262.                    <h2 style="color:#D91E18;">1000<br><h3>Partners & Clients</h3></h2>
  263.                </div>
  264.            </div>
  265.  
  266.        </div>
  267.        <!-- /.container -->
  268.  
  269.    </div>
  270.    <!-- /.banner -->
  271.  
  272.    <!-- Footer -->
  273.    <footer>
  274.        <div class="container">
  275.            <div class="row">
  276.                <div class="col-lg-12">
  277.                    <ul class="list-inline">
  278.                        <li>
  279.                            <a href="#">Home</a>
  280.                        </li>
  281.                        <li class="footer-menu-divider">&sdot;</li>
  282.                        <li>
  283.                            <a href="#about">About</a>
  284.                        </li>
  285.                        <li class="footer-menu-divider">&sdot;</li>
  286.                        <li>
  287.                            <a href="#services">Services</a>
  288.                        </li>
  289.                        <li class="footer-menu-divider">&sdot;</li>
  290.                        <li>
  291.                            <a href="#contact">Contact</a>
  292.                        </li>
  293.                    </ul>
  294.                    <p class="copyright text-muted small">Copyright &copy; Your Company 2014. All Rights Reserved</p>
  295.                </div>
  296.            </div>
  297.        </div>
  298.    </footer>
  299.  
  300.    <!-- jQuery -->
  301.    <script src="js/jquery.js"></script>
  302. <script>
  303. var options = {
  304.     data: ["blue", "green", "pink", "red", "yellow"]
  305. };
  306.  
  307. $("#basics").easyAutocomplete(options);
  308. </script>
  309.     <script>
  310. $(window).scroll(function() {
  311.  
  312.    if ($(this).scrollTop()>0)
  313.     {
  314.        $('.bottomMenu').fadeIn();
  315.     }
  316.    else
  317.     {
  318.      $('.bottomMenu').fadeOut();
  319.     }
  320. });
  321.  
  322. $(window).load(function(){
  323.  setTimeout(function(){ $('.bottomMenu').fadeOut() }, 1000);
  324. });
  325.  
  326.     </script>
  327.  
  328.  
  329.    <!-- Bootstrap Core JavaScript -->
  330.    <script src="js/bootstrap.min.js"></script>
  331.  
  332. </body>
  333.  
  334. </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!