Hotel Booking ..in progress
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 - 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;
}
Developer | Billy Crist |
Username | billyysea |
Uploaded | October 04, 2022 |
Rating | 3 |
Size | 4,458 Kb |
Views | 24,288 |
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!
Name | Size |
A Little Menu Bar | 3,899 Kb |
Camera | 2,136 Kb |
CSS Slider | 1,910 Kb |
A Simple, Fashionable, Loader | 1,661 Kb |
A Perfect Minimal iPhone Template | 2,322 Kb |
A Bouncy Menu Toggle | 4,563 Kb |
Mobile Twitter Log-in Design | 3,177 Kb |
Random Swim Slider | 2,345 Kb |
DMND | 2,796 Kb |
Some Ugly Icons | 3,930 Kb |
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!
Name | Username | Size |
DIV wormhole | Heydon | 1,932 Kb |
Draggable directive | YahyaKacem | 2,277 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Tab panels | Accessibility | 0 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Blog Concept 2 | JGallardo | 2,994 Kb |
STIKHOI | Denmch | 7,122 Kb |
Pure css thumbnails hover | Ksksoft | 1,773 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!