xxxxxxxxxx1
<template>2
<section class="intro">3
<div class="bg-image vh-100" style="4
background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img7.jpg);5
">6
<div class="mask d-flex align-items-center h-100" style="background-color: rgba(0,0,0,.5);">7
<MDBContainer>8
<MDBRow>9
<MDBCol md="12" lg="11" xl="9" class="mx-auto">10
<MDBCard class="gradient-custom">11
<MDBCardBody class="p-4">12
<h2 class="text-black font-weight-bold mt-3 mb-4 pb-2">Search Hotels</h2>13
<MDBRow>14
<MDBCol col="12" class="d-flex justify-content-left">15
<MDBCard class="text-white text-center me-3 mb-4" style="background-color: #002d72;">16
<MDBCardBody>17
<i class="fas fa-bed fa-lg mb-3"></i>18
<p class="text-uppercase mb-0">hotel only</p>19
</MDBCardBody>20
</MDBCard>21
<MDBCard class="text-black text-center me-3 mb-4">22
<MDBCardBody>23
<div>24
<i class="fas fa-bed fa-lg me-2 mb-3"></i>25
<i class="fas fa-plane mb-3"></i>26
</div>27
<p class="text-uppercase mb-0">hotel + flight</p>28
</MDBCardBody>29
</MDBCard>30
<MDBCard class="text-black text-center me-3 mb-4">31
<MDBCardBody>32
<div>33
<i class="fas fa-bed fa-lg mb-3"></i>34
<i class="fas fa-plane mx-2 mb-3"></i>35
<i class="fas fa-car-alt mb-3"></i>36
</div>37
<p class="text-uppercase mb-0">hotel + flight + car</p>38
</MDBCardBody>39
</MDBCard>40
<MDBCard class="text-black text-center mb-4">41
<MDBCardBody>42
<div>43
<i class="fas fa-bed fa-lg me-2 mb-3"></i>44
<i class="fas fa-car-alt mb-3"></i>45
</div>46
<p class="text-uppercase mb-0">hotel + car</p>47
</MDBCardBody>48
</MDBCard>49
</MDBCol>50
</MDBRow>51
52
<MDBRow>53
<MDBCol col="12" class="mb-4">54
<MDBCard>55
<MDBCardBody class="p-3 d-flex justify-content-left">56
<i class="fas fa-search fa-lg text-black d-flex align-self-center me-2"></i>57
<div id="basic" class="form-outline flex-fill">58
<MDBInput v-model="input1" type="text" label="GOING TO"59
placeholder="Destination, hotel name" />60
</div>61
</MDBCardBody>62
</MDBCard>63
</MDBCol>64
</MDBRow>65
<MDBRow>66
<MDBCol col="4" class="mb-4">67
<MDBCard>68
<MDBCardBody class="p-3 d-flex justify-content-left">69
<i class="far fa-calendar fa-lg text-black d-flex align-self-center me-2"></i>70
<div class="form-outline datepicker flex-fill" data-mdb-toggle-button="false">71
<MDBDatepicker v-model="picker1" label="CHECK-IN" inputToggle :toggleButton="false" />72
</div>73
</MDBCardBody>74
</MDBCard>75
</MDBCol>76
<MDBCol col="4" class=" mb-4">77
<MDBCard>78
<MDBCardBody class="p-3 d-flex justify-content-left">79
<i class="fas fa-calendar fa-lg text-black d-flex align-self-center me-2"></i>80
<div class="form-outline datepicker flex-fill" data-mdb-toggle-button="false">81
<MDBDatepicker v-model="picker2" label="CHECK-OUT" inputToggle :toggleButton="false" />82
</div>83
</MDBCardBody>84
</MDBCard>85
</MDBCol>86
<MDBCol col="4" class="mb-4">87
<MDBCard>88
<MDBCardBody class="p-3 d-flex justify-content-left">89
<i class="fas fa-user-friends fa-lg text-black d-flex align-self-center me-2"></i>90
<div id="location" class="form-outline flex-fill">91
<MDBAutocomplete92
v-model="autocompleteBasic"93
:filter="filterGuests"94
label="NUMBER OF GUESTS"95
/> 96
</div>97
</MDBCardBody>98
</MDBCard>99
</MDBCol>100
</MDBRow>101
<MDBRow>102
<MDBCol col="12">103
<div class="mb-4">104
<div class="checkbox-style form-check form-check-inline" style="padding-left: 0">105
<MDBCheckbox v-model="addFlight" label="ADD A106
FLIGHT" />107
</div>108
<div class="checkbox-style form-check form-check-inline" style="padding-left: 0">109
<MDBCheckbox v-model="addCar" label="ADD A110
CAR" />111
</div>112
</div>113
<MDBBtn color="warning" size="lg">Search</MDBBtn>114
</MDBCol>115
</MDBRow>116
</MDBCardBody>117
</MDBCard>118
</MDBCol>119
</MDBRow>120
</MDBContainer>121
</div>122
</div>123
</section>124
125
</template>xxxxxxxxxx1
<style>2
#app {3
font-family: Roboto, Helvetica, Arial, sans-serif;4
}5
6
.checkbox-style label {7
color: white;8
}9
10
html,11
body,12
.intro {13
height: 100%;14
}15
16
.form-outline .form-control~.form-notch div {17
border-color: transparent;18
}19
20
.form-outline .form-control:focus~.form-notch .form-notch-leading {21
border-top: 0.125rem solid transparent;22
border-bottom: 0.125rem solid transparent;23
border-left: 0.125rem solid transparent;24
}25
26
.form-outline .form-control:focus~.form-notch .form-notch-middle {27
border-color: transparent;28
}29
30
.form-outline .form-control:focus~.form-notch .form-notch-trailing {31
border-top: 0.125rem solid transparent;32
border-bottom: 0.125rem solid transparent;33
border-right: 0.125rem solid transparent;34
}35
36
.form-outline .form-control:focus~.form-label {37
color: #000;38
}39
40
.autocomplete-input.focused~.form-notch .form-notch-leading {41
border-top: 2px solid transparent;42
border-bottom: 2px solid transparent;43
border-left: 2px solid transparent;44
transition: all 0.2s linear;45
}46
47
.autocomplete-input.focused~.form-notch .form-notch-middle {48
border-color: transparent;49
}50
51
.autocomplete-input.focused~.form-notch .form-notch-trailing {52
border-color: transparent;53
}54
55
.autocomplete-input.focused~.autocomplete-label {56
color: #000;57
}58
59
.gradient-custom {60
background: #4facfe;61
62
background: -webkit-linear-gradient(to bottom, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8));63
64
background: linear-gradient(to bottom, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8))65
}66
67
.form-control {68
border-color: transparent;69
}70
71
.form-control:focus {72
border-color: transparent;73
box-shadow: inset 0 0 0 1px transparent;74
}75
76
.form-check {77
line-height: 1.6;78
}79
80
.form-check-input[type=checkbox] {81
border-radius: .125rem;82
}83
</style>xxxxxxxxxx1
<script>2
import {3
MDBContainer,4
MDBCard,5
MDBCardBody,6
MDBRow,7
MDBCol,8
MDBAutocomplete,9
MDBBtn,10
MDBInput,11
MDBCheckbox,12
MDBDatepicker 13
} from "mdb-vue-ui-kit";14
15
import {16
ref17
} from "vue"18
19
export default {20
name: "App",21
components: {22
MDBContainer,23
MDBCard,24
MDBCardBody,25
MDBRow,26
MDBCol,27
MDBAutocomplete,28
MDBBtn,29
MDBInput,30
MDBCheckbox,31
MDBDatepicker 32
},33
setup() {34
const guestsAutocomplete = ref(['1 adult', '2 adults', '3 adults', '2 adults and 1 child', '2 adults and 2 children'])35
36
const filterGuests = value => {37
return guestsAutocomplete.value.filter(item => {38
return item.toLowerCase().startsWith(value.toLowerCase());39
});40
}; 41
42
const input1 = ref("")43
44
const picker1 = ref("");45
const picker2 = ref("");46
47
const addFlight = ref(true);48
const addCar = ref(false)49
50
return { filterGuests, input1, picker1, picker2, addFlight, addCar }51
}52
53
}; 54
</script> Console errors: 0