A responsive website is one that looks good on any device, whether it’s a desktop computer, a laptop, a tablet, or a smartphone. In this tutorial, we’re going to build a responsive hotel booking website using HTML and CSS.
The first step is to create the HTML for our website. This will include the header, the main content area, and the footer.
Responsive Hotel Booking Website
Book a Hotel
Now that we have the HTML for our website, we need to style it using CSS. We’ll start by styling the header.
header {
height: 100px;
background-color: #333;
}
header h1 {
font-size: 48px;
font-weight: bold;
}
Next, we’ll style the main content area.
section {
max-width: 960px;
margin: 0 auto;
}
h2 {
font-size: 24px;
font-weight: bold;
}
form {
margin: 0 auto;
}
input {
width: 100%;
}
button {
width: 100%;
}
Finally, we’ll style the footer.
footer {
height: 50px;
background-color: #fff;
