Airbnb

Developer
Size
4,640 Kb
Views
2,024

How do I make an airbnb?

What is a airbnb? How do you make a airbnb? This script and codes were developed by John on 05 January 2023, Thursday.

Airbnb Previews

Airbnb - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Airbnb</title> <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <header> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">Home</a> <a href="#">Download the App</a> <a href="#">Become a Host</a> <a href="#">Sign Up</a> <a href="#">Log In</a> <a href="#">Discover</a> <a href="#">Search</a> <a href="#">How it Works</a> <a href="#"></a> <a href="#">Help</a>
</div> <div> <span style="font-size:1.5em;cursor:pointer" onclick="openNav()">☰ </span>
</div> <div class="logo"> <img class="img-responsive" src="http://www.colombiavipservices.com/assets/images/airbnb.png"> </div> </header>
</div>
<div id="main" class="jumbotron-fluid"> <div class="nav"> <ul> <li class="white-tooltip" data-toggle="tooltip" data-placement="bottom" title="You could earn $530 sharing your home in a week. Become a host.">Become a Host</li> <li>Help</li> <li>Sign Up</li> <li>Log In</li> </ul> </div> <!--nav end--> <div> <img id="play-btn" class="center-block img-responsive" src="http://airbnbhost.cz/assets/img/play-button.png"> <h2 class="text-xs-center">LIVE THERE</h2> <p id="sub-headline" class="text-xs-center font-weight-bold">Book homes from local hosts in 191+ countries and experience a place like you live there</p> </div> <div class="search"> <div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-md-offset-2"> <div class="form-section"> <div class="row"> <form role="form"> <div class="col-md-3"> <div class="form-group"> <label class="sr-only" for="location">Location</label> <input type="email" class="form-control" id="location" placeholder="Where to?"> </div> </div> <div class="col-md-2 hidden-sm-down"> <div class="form-group"> <label class="sr-only" for="checkin">Check in</label> <div class="input-group"> <input type="text" class="form-control" id="checkin" placeholder="Check in"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> <div class="col-md-2 hidden-sm-down"> <div class="form-group"> <label class="sr-only" for="checkout">Check out</label> <div class="input-group"> <input type="text" class="form-control" id="checkout" placeholder="Check out"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> <div class="col-md-2 hidden-sm-down"> <div class="form-group"> <label class="sr-only" for="guest">Guest</label> <select id="guest" name="guest" class="form-control"> <option value="0"></option> <option value="1">1 Guest</option> <option value="2">2 Guests</option> <option value="3">3 Guests</option> <option value="4">4 Guests</option> <option value="5">5 Guests</option> <option value="6">6 Guests</option> <option value="7">7 Guests</option> <option value="8">8 Guests</option> <option value="9">9 Guests</option> <option value="10">10 Guests</option> <option value="11">11 Guests</option> <option value="12">12 Guests</option> <option value="13">13 Guests</option> <option value="14">14 Guests</option> <option value="15">15 Guests</option> <option value="16">16+ Guests</option> </select> </div> </div> <div class="col-md-3 button"> <button type="submit" class="btn btn-default btn-primary">Search</button> </div> </form> </div> </div> </div> </div> </div> </div>
</div>
<!--jumbotron end-->
<div class="container">
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Airbnb - Script Codes CSS Codes

.jumbotron-fluid { background: lightgrey; height: 100vh; background-image: url('http://static1.techinsider.io/image/56ddea00910584145c8b485c-1190-625/this-private-club-is-like-airbnb-for-the-ultra-rich--take-a-look-inside.jpg'); background-size: cover;
}
.tooltip-arrow,
.white-tooltip + .tooltip > .tooltip-inner { background-color: #fff; color: #000; font-size: 1.2em; border-radius: 0;
}
.tooltip-inner { padding: 20px 0;
} h2 { color: #fff; }
/************** HEADLINE
**************/
#sub-headline { color: #fff; font-size: 1.2em;
}
/**************** SEARCH BAR
****************/
.search {	margin-top: 5%;
}
.row { margin: 5px 0 5px 0;
}
/* .search .form-section { margin-left: auto; margin-right: auto;
} */
.search .form-section{	background:rgba(0,0,0,0.6);	border: 1px solid #414141;	border-radius: 5px;	padding: 11px 0 1px 0;
}
.btn { background: #fd5c63; border-color: #fd5c63; padding: 7px 40px;
}
.btn:hover { background: rgba(241,102,100, .9); border-color: rgba(241, 102, 100, .9);
}
/*************** SCROLL BAR
****************/
::-webkit-scrollbar-track
{	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	border-radius: 5px;	background-color: #F5F5F5;
}
::-webkit-scrollbar
{	width: 8px;	background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{	border-radius: 10px;	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);	background-color: #fd5c63;
}
/*************** MEDIA QUERY
****************/
@media screen and (min-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 1.1em;}
}
@media (min-width: 769px) { header { background: white; height: 0; margin: 0; } #main { transition: margin-left .5s; padding: 7x;
} .logo { visibility: collapse; } img[src*="http://villabenni.it/wp-content/uploads/2015/10/airbnb_horizontal_lockup_white_web.png"] { width: 120px; } #play-btn { width: 80px; position: relative; top: 200px; padding-top: 40px; } h2 { font-size: 3.4em; position: relative; top: -100px; margin-top: 100px; margin-bottom: 50px; } #sub-headline { font-size: 1.4em; position: relative; top: -130px; } header span { margin: 10px; color: #fd5c63; visibility: hidden; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 100; top: 0; left: 0; background-color: #111; overflow-x: hidden; overflow: hidden; transition: 0.5s; padding-top: 60px;
}
.sidenav a { padding: 7px 8px 7px 32px; text-decoration: none; font-size: 25px; color: red; display: block; transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{ color: #fd5c63;
}
.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px;
} ul { list-style: none; color: white;
}
ul li:hover { cursor: pointer;
}
.nav,
ul{ display:flex; flex-direction: row; justify-content: flex-end; align-items: baseline;
}
li{ padding-right: 20px; margin-right: 15px; margin-top: 10px;
}
li:nth-of-type(1){ border: solid 2px #fff; padding: 5px 10px;
}
li:nth-of-type(1):hover { background: rgba(204, 204, 204, .2);
}
}
@media (max-width: 769px) { header { background: white; height: 45px; padding: 8px 0 0 15px; transition: .2s ease-out; } .logo { width: 100px; margin: -30px auto; } ul { visibility: hidden; } #play-btn { width: 60px; opacity:10; margin: 30px auto; } #sub-headline { font-size: .98em; } span { margin: 10px; color: #fd5c63; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 100; top: 0; left: 0; background-color: #111; overflow-x: hidden; overflow: hidden; transition: 0.5s; padding-top: 45px;
}
.sidenav a { padding: 8px 10px 7px 20px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{ color: #fd5c63;
}
.closebtn { position: absolute; top: 0; right: 20px; font-size: 36px !important; margin-left: 50px;
}
#main { transition: margin-left .5s; padding: 8x;
}
}
@media (max-width:766px) { .button { display: flex; justify-content: row; } .btn { flex-grow:1; margin-bottom: 8px; }
}

Airbnb - Script Codes JS Codes

function openNav() { document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() { document.getElementById("mySidenav").style.width = "0";
}
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip();
});
$(window).ready(function(){ var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0); var checkin = $('#checkin').datepicker({ onRender: function(date) { return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { if (ev.date.valueOf() > checkout.date.valueOf()) { var newDate = new Date(ev.date) newDate.setDate(newDate.getDate() + 1); checkout.setValue(newDate); } checkin.hide(); $('#checkout')[0].focus(); }).data('datepicker'); var checkout = $('#checkout').datepicker({ onRender: function(date) { return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { checkout.hide(); }).data('datepicker'); });
Airbnb - Script Codes
Airbnb - Script Codes
Home Page Home
Developer John
Username -J0hn-
Uploaded January 05, 2023
Rating 3
Size 4,640 Kb
Views 2,024
Do you need developer help for Airbnb?

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!

John (-J0hn-) Script Codes
Create amazing captions 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!