Creating a website header form for a hotel using HTML and CSS is a fairly straightforward process. The header form typically includes a navigation bar, a search bar, and a call-to-action button. Here's a step-by-step guide on how to create a basic hotel header form using HTML and CSS:
- Start by creating a new HTML file in your code editor and adding the basic HTML structure. This includes the <!DOCTYPE html> declaration, the <html> tags, and the <head> section.
- Within the <head> section, add a <title> tag to give your page a title. You can also add meta tags to specify the character set and viewport.
- Next, create a <header> element within the <body> section of your HTML file. This will contain all of the elements of your header form.
- Within the <header> element, create a <nav> element to house your navigation bar. This can include links to different pages on your site, as well as drop-down menus for different categories.
- After your navigation bar, add a <form> element to include your search bar. You can customize the input field with CSS to match the style of your site.
- Finally, add a call-to-action button to encourage users to take a specific action on your site, such as booking a room or signing up for a newsletter.
- Use CSS to style your header form to match the overall design of your website. This can include setting background colors, font styles, and adjusting the size and positioning of each element.
By following these steps, you can create a clean and functional header form for your hotel website using HTML and CSS.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>taj Hotel</title>
<!--ion-icon script file link-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!--main css file link-->
<link rel="stylesheet" href="form.css">
</head>
<body>
<section class="header" id="header">
<nav class="navbar" id="navbar">
<div class="logo">
<h1>taj hotel</h1>
</div>
<div class="link" id="link">
<a href="#home">home</a>
<a href="#layout">layout</a>
<a href="#features">features</a>
<a href="#elements">elements</a>
<a href="#pages">pages</a>
<a href="#portfolio">portfolio</a>
<a href="#blog">blog</a>
<a href="#shop">shop</a>
</div>
<div class="icon">
<ion-icon name="search-outline"></ion-icon>
<ion-icon name="globe-outline"></ion-icon>
<ion-icon name="menu-outline" id="menu-btn" onclick="openmenu()"></ion-icon>
<ion-icon name="close-outline" id="close" onclick="closemenu()"></ion-icon>
</div>
</nav>
<div class="header_content">
<div class="heading">
<h1>5 star Hotel Wonderful Feelings</h1>
</div>
<div class="form">
<form id="myForm">
<div>
<label>Check in</label><br>
<input type="date">
</div>
<div>
<label>Check out</label><br>
<input type="date">
</div>
<br>
<div>
<label>Adults</label><br>
<input type="number">
</div>
<div>
<label>Children</label><br>
<input type="number">
</div><br>
<div>
<label for="type">Room type</label><br>
<select id="type">
<option>Select room type</option>
<option>Simgle Room</option>
<option>Double Room</option>
<option>King Double Room</option>
</select>
</div><br>
<center>
<button type="submit" onclick="myFunction()" value="Reset form" id="myBtn">submit</button>
</center>
</form>
</div>
</div>
</section>
<!--================================javascript start============================-->
<script>
let menu = document.getElementById('link')
let open = document.getElementById('menu-btn')
let close = document.getElementById('close')
let color = document.getElementById('navbar')
function openmenu() {
menu.style.top = "100%";
open.style.display = "none";
close.style.display = "inline-block"
color.style.background = "#1d3557"
color.style.transition = "1s"
}
function closemenu() {
menu.style.top = "-1100%";
open.style.display = "inline-block";
close.style.display = "none";
color.style.background = "none"
}
var scrollTrigger = 100;
let nav = document.getElementById('navbar');
</script>
<script>
var scrollTrigger = 100;
let nava = document.getElementById('navbar');
let mybutton = document.getElementById("myBtn");
let heading3 = document.getElementById("head");
window.onscroll = function () {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger) {
nava.style.background = "#1d3557";
nava.style.zIndex = "999999";
nava.style.boxShadow = "0px 0px 10px black";
} else {
nava.style.background = "none";
nava.style.zIndex = "999999";
nava.style.boxShadow = "none";
}
};
</script>
<!--================================javascript end============================-->
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
:root {
--main-color: #1d3557;
--main-color2: rgba(29, 53, 87, 0.829);
}
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
.header {
width: 100%;
height: 100vh;
padding: 0 5%;
background-image: url(background1.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: changeImages 10s ease-in-out infinite;
position: relative;
}
.header::before {
content: " ";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
@keyframes changeImages {
25% {
background-image: url(background2.jpeg);
}
50% {
background-image: url(background3.png);
}
75% {
background-image: url(background4.png);
}
100% {
background-image: url(background1.jpeg);
}
}
.navbar {
width: 100%;
padding: 30px 5%;
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar .logo h1 {
text-transform: uppercase;
font-family: Baskerville Old Face;
color: #eee;
font-size: 30px;
letter-spacing: 3px;
}
.navbar .link {
position: relative;
left: 150px;
z-index: 99999;
}
.navbar .link a {
color: #eee;
text-decoration: none;
font-family: Arial Rounded MT;
text-transform: uppercase;
padding: 10px 10px;
font-weight: 400;
font-size: 14px;
letter-spacing: 1px;
position: relative;
transition: .5s;
}
.link a::before {
content: " ";
width: 100%;
height: 0%;
position: absolute;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: .5s;
z-index: -1;
}
.link a:hover::before {
width: 100%;
height: 100%;
}
.navbar .icon ion-icon {
font-size: 20px;
color: #eee;
padding: 5px;
font-weight: 600;
cursor: pointer;
}
#menu-btn,
#close {
display: none;
}
.header_content {
width: 100%;
height: 90vh;
position: relative;
top: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.heading {
width: 50%;
height: 100%;
}
.heading h1 {
font-size: 90px;
padding: 70px 0 0 0;
color: #eee;
}
.form {
width: 50%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.form form {
display: inline-block;
width: 70%;
height: 100%;
padding: 20px 20px 30px 20px;
backdrop-filter: blur(3px);
position: relative;
top: -50px;
border-radius: 10px;
border: 10px solid rgba(0, 0, 0, 0.3);
}
.form form div {
width: 100%;
display: inline-block;
padding: 10px;
}
.form form div label {
color: black;
font-size: 15px;
}
.form form div input {
width: 100%;
padding: 10px;
border-radius: 5px;
background: #eee;
}
.form form div select {
width: 100%;
padding: 10px;
border-radius: 5px;
background: #eee;
}
.form form div select option {
font-size: 15px;
background: #eee;
}
.form form button {
width: 95%;
padding: 10px;
background: var(--main-color);
color: #eee;
text-transform: uppercase;
font-size: 20px;
border-radius: 10px;
}
.form form button:hover {
cursor: pointer;
}
@media only screen and (max-width: 991px) {
#menu-btn {
display: inline-block;
}
#header {
height: 120vh;
}
#navbar {
z-index: 99999;
}
#navbar .link {
position: absolute;
top: -1100%;
left: 0%;
width: 100%;
height: 80vh;
background: var(--main-color2);
padding: 2rem;
transition: 1s;
border-radius: 0px 0 200px 0;
overflow: hidden;
z-index: 99999;
}
#navbar .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 99999;
}
#navbar .icon ion-icon {
padding: 20px 10px;
font-size: 30px;
}
.header_content {
display: flex;
align-items: center;
justify-content: center;
}
.heading {
display: none;
}
.form {
width: 80%;
}
.form form {
position: relative;
top: -10px;
}
}
@media only screen and (max-width: 768px) {
html {
font-size: 55%;
}
.header {
padding: 0;
margin: 0;
}
.navbar {
padding: 0;
margin: 0;
}
#menu-btn {
display: inline-block;
}
#navbar {
display: block;
}
#navbar .link {
position: absolute;
top: -1100%;
left: 0%;
width: 100%;
height: 80vh;
background: var(--main-color2);
padding: 2rem;
transition: 1s;
border-radius: 0px 0 200px 0;
overflow: hidden;
z-index: 99999;
}
#navbar .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 9999;
}
#navbar .icon {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .logo {
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
#navbar .logo h1 {
z-index: 9999;
padding: 20px 0;
}
#navbar .icon ion-icon {
padding: 20px 10px;
font-size: 30px;
}
/* 768 */
.header_content {
position: relative;
top: 150px;
}
.header_content {
display: flex;
align-items: center;
justify-content: center;
}
.heading {
display: none;
}
.form {
width: 80%;
}
}
@media only screen and (max-width: 591px) {
.form {
width: 100%;
}
.form form {
width: 90%;
}
}
Comments
Post a Comment