Now, Going to see how to create simple reservation form using html and css code. This form use hotel , Restaurant etc. Simple and Easy create using html and css coding. This form only need name, Vacation date, Address. Below see the code
Code:
<div class="lead">
<h1>Reservation</h1>
</div>
<div class="container">
<form action="">
<div class="first-group">
<label for="first">First Name:</label>
<input id="first" type="text" />
</div>
<div class="last-group">
<label for="last">Last Name: </label>
<input id="last" type="text" />
</div>
<div class="vac-group">
<label for="when">Vacation Date:</label>
<input id="when" type="text" placeholder="mm/dd/yyyy"/>
</div>
<div class="email-group">
<label for="email">Email Address: </label>
<input id="email" type="email" />
</div>
<div class="row">
<button disabled type="submit">
Reserve
</button>
</div>
</form>
</div>
Css:
body {
background-image: url('https://www.10wallpaper.com/wallpaper/2560x1600/1702/Kosmeya_flowers_meadow-High_Quality_HD_Wallpaper_2560x1600.jpg');
background-size: 120%;
background-position: top;
/* box-sizing: border-box; */
font-family: 'Raleway', sans-serif;
}
.lead {
width: 600px;
margin: auto;
color: purple;
font-size: 2em;
}
label {
color: #46526A;
}
.container {
width: 600px;
height: 600px;
margin: auto;
}
form {
width: 100%;
}
input, label {
width: 100%;
line-height: 1.5em;
}
input {
line-height: 2em;
}
.last-group, .first-group {
display: inline-block;
width: 240px;
margin-bottom: 30px;
}
.first-group {
margin-right: 115px;
}
.vac-group, .email-group {
display: inline-block;
}
.vac-group {
width: 110px;
}
.vac-group input {
width: 85px;
}
.email-group {
width: 290px;
margin-left: 195.5px;
padding-top: 2px;
}
input:placeholder-shown,
input {
font-family: 'Raleway', sans-serif;
font-size: .8em;
font-weight: 400;
outline: none;
}
.row {
width: 100%;
}
button {
width: 200px;
height: 40px;
border-radius: 4px;
margin-top: 34px;
margin-left: 200px;
font-family: 'Raleway', sans-serif;
font-size: 1em;
font-weight: 500;
background: #46526A;
color: white;
border: none;
padding 18px;
}
button:hover {
background-color: #617293;
cursor: pointer;
outline: none;
}
h1{
text-align:center;
font-color:purple;
}
0 Comments