Airbnb Homepage

Developer
Sindhuja
Size
2,480 Kb
Views
36,432
  1. Airbnb Homepage Previews
  2. Airbnb Homepage HTML Codes
  3. Airbnb Homepage CSS Codes

How do I make an airbnb homepage?

This is a recreation of Airbnb's homepage using HTML, CSS, and Bootstrap. What is a airbnb homepage? How do you make a airbnb homepage? This script and codes were developed by Sindhuja on 14 September 2022, Wednesday.

Airbnb Homepage Previews
IQ Test

Airbnb Homepage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Airbnb Homepage</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> <link rel="stylesheet" href="main.css"> </head> <body> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Name</a></li> <li><a href="#">Browse</a></li> </ul> <ul class = "pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> <div class="jumbotron"> <div class="container"> <h1>Find a place to stay.</h1> <p>Rent from people in over 34,000 cities and 192 countries.</p> <a href="#">Learn More</a> </div> </div> <div class="neighborhood-guides"> <div class="container"> <h2>Neighborhood Guides</h2> <p>Not sure where to stay? We've created neighborhood cuides for cities all around the world</p> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="https://goo.gl/0sX3jq"> </div> <div class="thumbnail"> <img src="https://goo.gl/an2HXY"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="https://goo.gl/Av1pac"> </div> <div class="thumbnail"> <img src="https://goo.gl/vw43v1"> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="https://goo.gl/0Kd7UO"> </div> </div> </div> </div> </div> <div class="learn-more"> <div class="container">	<div class="row"> <div class="col-md-4">	<h3>Travel</h3>	<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>	<p><a href="#">See how to travel on Airbnb</a></p> </div> <div class="col-md-4">	<h3>Host</h3>	<p>Renting out your unused space could pay your bills or fund your next vacation.</p>	<p><a href="#">Learn more about hosting</a></p> </div> <div class="col-md-4">	<h3>Trust and Safety</h3>	<p>From Verified ID to our worldwide customer support team, we've got your back.</p>	<p><a href="#">Learn about trust at Airbnb</a></p> </div> </div> </div>	</div> </body>
</html>
</body>
</html>

Airbnb Homepage - Script Codes CSS Codes

.nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-transform: uppercase;
}
.nav li { display: inline;
}
.jumbotron { background-position:center; background-image:url('https://goo.gl/04j7Nn'); background-repeat:no-repeat; height: 500px;
}
.jumbotron .container { position: relative; top:100px;
}
.jumbotron h1 { color: #fff; font-size: 48px; font-family: 'Shift', sans-serif; font-weight: bold;
}
.jumbotron p { font-size: 20px; color: #fff;
}
.learn-more { background-color: #f7f7f7;
}
.learn-more h3 { font-family: 'Shift', sans-serif; font-size: 18px; font-weight: bold;
}
.learn-more a { color: #00b0ff;
}
.neighborhood-guides{ background-color:#efefef; border-bottom:1px solid #dbdbdb;
}
.neighborhood-guides h2{ color:#393c3d; font-size:24px;
}
.neighborhood-guides p{ font-size:15px; margin-bottom:13px;
}
Airbnb Homepage - Script Codes
Airbnb Homepage - Script Codes
Home Page Home
Developer Sindhuja
Username SindhujaD
Uploaded September 14, 2022
Rating 3
Size 2,480 Kb
Views 36,432
Do you need developer help for Airbnb Homepage?

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!

Sindhuja (SindhujaD) Script Codes
Name
Earth Orbit
SVG Fill Animation
SVG Animation
Minimal SVG Animation
Website
Coffee
Anais Nin Quote Typography
Pizza Order Form
Cocoa Brownies Recipe
Animated CodePen Logo
Create amazing marketing copy 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!