<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row pt-1 pb-1">
<div class="col-lg-12">
<h4 class="text-center">Search University</h4>
<h6 class="text-center">Find your dream universities</h6>
</div>
</div>
</div>
<section>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://pbs.twimg.com/media/EGHYvttU4AAYKb7?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://pbs.twimg.com/media/EGHYvtkUcAAuc8T?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://pbs.twimg.com/media/EGHYvtjU0AAO8w1?format=jpg&name=large" class="d-block w-100" alt="...">
</div>
<!--https://upload.wikimedia.org/wikipedia/commons/8/8d/Yarra_Night_Panorama%2C_Melbourne_-_Feb_2005.jpg-->
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="search-sec">
<div class="container">
<form action="#" method="post" novalidate="novalidate">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Enter University Country">
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<input type="text" class="form-control search-slt" placeholder="Enter City">
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<select class="form-control search-slt" id="exampleFormControlSelect1">
<option>Select University</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
<option>Australia</option>
<option>China</option>
<option>India</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 p-0">
<button type="button" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
<div><!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.1.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.1.1/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyAc2b9EtVbq88oojWu24aOVZ5dykLOBeRg",
authDomain: "applydash.firebaseapp.com",
databaseURL: "https://applydash.firebaseio.com",
projectId: "applydash",
storageBucket: "applydash.appspot.com",
messagingSenderId: "312925213284",
appId: "1:312925213284:web:2434e1ef3bab0a33d1c571",
measurementId: "G-0C1KSTE28T"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</div>
<template>
<div>
<header class="header">
<h1 class="header-title"><a href="/">Vue InstantSearch v2 starter</a></h1>
<p class="header-subtitle">
using
<a href="https://github.com/algolia/vue-instantsearch">
Vue InstantSearch
</a>
</p>
</header>
<div class="container">
<ais-instant-search
:search-client="searchClient"
index-name="demo_ecommerce"
>
<div class="search-panel">
<div class="search-panel__filters">
<ais-refinement-list attribute="categories" searchable />
</div>
<div class="search-panel__results">
<ais-search-box placeholder="Search here…" class="searchbox" />
<ais-hits>
<template slot="item" slot-scope="{ item }">
<h1><ais-highlight :hit="item" attribute="name" /></h1>
<p><ais-highlight :hit="item" attribute="description" /></p>
</template>
</ais-hits>
<div class="pagination"><ais-pagination /></div>
</div>
</div>
</ais-instant-search>
</div>
</div>
</template>
/*search box css start here*/
.search-sec{
padding: 2rem;
}
.search-slt{
display: block;
width: 100%;
font-size: 0.875rem;
line-height: 1.5;
color: #55595c;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
height: calc(3rem + 2px) !important;
border-radius:0;
}
.wrn-btn{
width: 100%;
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
height: calc(3rem + 2px) !important;
border-radius:0;
}
@media (min-width: 992px){
.search-sec{
position: relative;
top: -114px;
background: rgba(26, 70, 104, 0.51);
}
}
@media (max-width: 992px){
.search-sec{
background: #1A4668;
}
}
<style>
body,
h1 {
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.header {
display: flex;
align-items: center;
min-height: 50px;
padding: 0.5rem 1rem;
background-image: linear-gradient(to right, #4dba87, #2f9088);
color: #fff;
margin-bottom: 1rem;
}
.header a {
color: #fff;
text-decoration: none;
}
.header-title {
font-size: 1.2rem;
font-weight: normal;
}
.header-title::after {
content: ' ▸ ';
padding: 0 0.5rem;
}
.header-subtitle {
font-size: 1.2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.search-panel {
display: flex;
}
.search-panel__filters {
flex: 1;
margin-right: 1em;
}
.search-panel__results {
flex: 3;
}
.searchbox {
margin-bottom: 2rem;
}
.pagination {
margin: 2rem auto;
text-align: center;
}
</style>
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAc2b9EtVbq88oojWu24aOVZ5dykLOBeRg",
authDomain: "applydash.firebaseapp.com",
databaseURL: "https://applydash.firebaseio.com",
projectId: "applydash",
storageBucket: "applydash.appspot.com",
messagingSenderId: "312925213284",
appId: "1:312925213284:web:2434e1ef3bab0a33d1c571",
measurementId: "G-0C1KSTE28T"
};
<script>
import algoliasearch from 'algoliasearch/lite';
import 'instantsearch.css/themes/algolia-min.css';
export default {
data() {
return {
searchClient: algoliasearch(
'4UWR3TAQSB',
'8092c22981ccfe1677aee7d70ee981f2'
),
};
},
};
</script>
