Hotel Booking ..in progress

Developer
Size
4,458 Kb
Views
24,288

How do I make an hotel booking ..in progress?

Inspiration: https://dribbble.com/shots/1808252-Booking-Engine?list=shots&sort=popular&timeframe=now&offset=72 . What is a hotel booking ..in progress? How do you make a hotel booking ..in progress? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.

Hotel Booking ..in progress Previews

Hotel Booking ..in progress - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hotel Booking ..in progress</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; background: #f0f0f4;
}
.up1 { transition: 240ms ease-out; box-shadow: inset 0 -1px rgba(17, 17, 17, 0.2), inset 0 1px rgba(255, 255, 255, 0.2);
}
.up1:hover,
.up1:active,
.up1:focus { box-shadow: inset 0 -1px rgba(17, 17, 17, 0.4), inset 0 1px rgba(255, 255, 255, 0.4), 2px 2px 3px rgba(17, 17, 17, 0.2);
}
.up6 { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}
.hotel_form { position: relative; width: 20rem; padding: 2rem 0; margin: 6rem auto; font-family: 'Lato', sans-serif; color: #e0e0e0; border-radius: 1rem; background: #2196F3;
}
.hotel_form input { border: 0; border-radius: 0.25rem;
}
.w--whole { width: 16rem;
}
.w--halves { width: 7rem;
}
.w--thirds { width: 4rem;
}
.title { position: absolute; width: 100%; bottom: 100%; margin: 0 0 2rem; font-size: 2rem; line-height: 1; font-weight: normal; text-align: center; color: #2196F3;
}
.text_input { display: block; float: left; height: 2rem; margin: 0 0 1rem 2rem; padding: 0; font-size: 1rem; color: #424242; text-align: center; background: #E3F2FD;
}
.text_input:hover,
.text_input:active,
.text_input:focus { background: #EfF9Ff;
}
.label { display: block; float: left; text-align: center; margin: 0 0 0.5rem 2rem;
}
.calender { float: left; margin: 0 0 2rem 2rem; height: 6rem; border-radius: 0.25rem; overflow: hidden;
}
.select { width: calc(100% + 17px); text-align: center; cursor: pointer; border: 0; font-family: 'Lato', sans-serif; text-indent: -3px;
}
.select > option { color: #555; font-size: 1rem; background: #fff;
}
.month { height: 2rem; font-size: 1rem; color: #f5f5f5; transition: 240ms ease-out; background: #1565C0;
}
.month:hover,
.month:active,
.month:focus { background: #1976D2;
}
.day { height: 4rem; font-size: 2rem; color: #0D47A1; transition: 240ms ease-out; background: #E3F2FD;
}
.day:hover,
.day:active,
.day:focus { background: #EfF9Ff;
}
.submit { height: 3rem; margin: 0 0 0 2rem; color: #eee; line-height: 1; font-size: 1.5rem; cursor: pointer; transition: 240ms; background: #00E676; font-family: 'Lato', sans-serif;
}
.submit:hover { background: #00d855;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<form class="hotel_form up6"> <h1 class="title">Find a Hotel</h1> <label class="label w--whole">Destination</label> <input type="text" class="text_input w--whole up1" placeholder="State, City, or ZIP Code" /> <label class="label w--thirds">Rooms</label> <label class="label w--thirds">Adults</label> <label class="label w--thirds">Kids</label> <input type="text" class="text_input w--thirds up1" placeholder="-" /> <input type="text" class="text_input w--thirds up1" placeholder="-" /> <input type="text" class="text_input w--thirds up1" placeholder="-" /> <label class="label w--halves">Check in</label> <label class="label w--halves">Check out</label> <div class="calender w--halves up1"> <select class="select month" name="month-in"> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <select class="select day" name="day-in"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> <div class="calender w--halves up1"> <select class="select month" name="month-out"> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <select class="select day" name="day-out"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> </div> <input class="submit w--whole up1" type="submit" value="Search" />
</form>
</body>
</html>

Hotel Booking ..in progress - Script Codes CSS Codes

body { margin: 0; background: #f0f0f4;
}
.up1 { transition: 240ms ease-out; box-shadow: inset 0 -1px rgba(17, 17, 17, 0.2), inset 0 1px rgba(255, 255, 255, 0.2);
}
.up1:hover,
.up1:active,
.up1:focus { box-shadow: inset 0 -1px rgba(17, 17, 17, 0.4), inset 0 1px rgba(255, 255, 255, 0.4), 2px 2px 3px rgba(17, 17, 17, 0.2);
}
.up6 { box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}
.hotel_form { position: relative; width: 20rem; padding: 2rem 0; margin: 6rem auto; font-family: 'Lato', sans-serif; color: #e0e0e0; border-radius: 1rem; background: #2196F3;
}
.hotel_form input { border: 0; border-radius: 0.25rem;
}
.w--whole { width: 16rem;
}
.w--halves { width: 7rem;
}
.w--thirds { width: 4rem;
}
.title { position: absolute; width: 100%; bottom: 100%; margin: 0 0 2rem; font-size: 2rem; line-height: 1; font-weight: normal; text-align: center; color: #2196F3;
}
.text_input { display: block; float: left; height: 2rem; margin: 0 0 1rem 2rem; padding: 0; font-size: 1rem; color: #424242; text-align: center; background: #E3F2FD;
}
.text_input:hover,
.text_input:active,
.text_input:focus { background: #EfF9Ff;
}
.label { display: block; float: left; text-align: center; margin: 0 0 0.5rem 2rem;
}
.calender { float: left; margin: 0 0 2rem 2rem; height: 6rem; border-radius: 0.25rem; overflow: hidden;
}
.select { width: calc(100% + 17px); text-align: center; cursor: pointer; border: 0; font-family: 'Lato', sans-serif; text-indent: -3px;
}
.select > option { color: #555; font-size: 1rem; background: #fff;
}
.month { height: 2rem; font-size: 1rem; color: #f5f5f5; transition: 240ms ease-out; background: #1565C0;
}
.month:hover,
.month:active,
.month:focus { background: #1976D2;
}
.day { height: 4rem; font-size: 2rem; color: #0D47A1; transition: 240ms ease-out; background: #E3F2FD;
}
.day:hover,
.day:active,
.day:focus { background: #EfF9Ff;
}
.submit { height: 3rem; margin: 0 0 0 2rem; color: #eee; line-height: 1; font-size: 1.5rem; cursor: pointer; transition: 240ms; background: #00E676; font-family: 'Lato', sans-serif;
}
.submit:hover { background: #00d855;
}
Hotel Booking ..in progress - Script Codes
Hotel Booking ..in progress - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded October 04, 2022
Rating 3
Size 4,458 Kb
Views 24,288
Do you need developer help for Hotel Booking ..in progress?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Crist (billyysea) Script Codes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!