Skip to content

Commit d82238d

Browse files
kanchn-httpskanchn-https
authored
Add files via upload
1 parent 4d50eb9 commit d82238d

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

‎form.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title></title>
7+
<style>
8+
form {
9+
background-color:#4a98f7;
10+
height: 600px;
11+
width:380px;
12+
position:absolute;
13+
margin: auto;
14+
left:0;
15+
right:0;
16+
top: 0;
17+
bottom: 0;
18+
border-radius: 10px;
19+
padding: 30px 70px;
20+
box-shadow: 0px 0px 20px 10px rgba(72, 67, 67, 0.067);
21+
overflow-y:scroll;
22+
overflow-x:hidden;
23+
scrollbar-width: none;
24+
}
25+
form * {
26+
border:none;
27+
outline:none;
28+
font-family:"Poppins",sans-serif;
29+
font-weight: 500;
30+
font-size: 13px;
31+
border-radius:4px;
32+
}
33+
input, textarea {
34+
display:block;
35+
height: 35px;
36+
width: calc(100% -40px);
37+
background-color:#fff;
38+
padding:0 15px;
39+
cursor:pointer;
40+
}
41+
textarea {
42+
padding: 10px;
43+
height:70px;
44+
}
45+
label {
46+
display:block;
47+
color:#e5e5e5;
48+
font-size:15px;
49+
margin-top:10px;
50+
}
51+
form h1 {
52+
text-align: center;
53+
margin-bottom: 20px;
54+
color:#e5e5e5;
55+
font-size: 30px;
56+
}
57+
form p {
58+
color:#e5e5e5;
59+
}
60+
#submit {
61+
margin-left:25px;
62+
width: 330px;
63+
position:fixed;
64+
bottom: 75px;
65+
padding: 12px 0;
66+
background-color:blur;
67+
color:#fff;
68+
border-radius:20px;
69+
cursor:pointer;
70+
background : linear-gradient(
71+
to top,
72+
rgba(147, 143, 143, 0.15),
73+
rgb(255, 255, 255, 0.15)
74+
);
75+
backdrop-filter: blur(25px);
76+
box-shadow: 0px 0px 20px 10px rgba(125, 111, 111, 0.25);
77+
}
78+
#invitations {
79+
display:block;
80+
width:120px;
81+
height: 35px;
82+
margin: -35px 220px 20px;
83+
border-radius:4px;
84+
background-color:#fff;
85+
color:#7a7777;
86+
cursor:pointer;
87+
}
88+
#submit:hover,#invitations:hover {
89+
box-shadow: 0px 0px 40px 10px rgb(0, 0, 0, 0.25);
90+
transition: box-shadow 0.3s ease;
91+
}
92+
input[type="radio"] {
93+
display:inline-block ;
94+
width: auto;
95+
margin-right: 10px;
96+
}
97+
.radio-group {
98+
margin: 10px auto;
99+
display: flex;
100+
flex-wrap: wrap;
101+
align-items: center;
102+
}
103+
.radio-group label {
104+
margin-right: 15px;
105+
display: inline-flex;
106+
margin-top: 20px;
107+
}
108+
</style>
109+
</head>
110+
<body>
111+
112+
<form action="/submit-form" method="post">
113+
<h1>Book Your Slot</h1>
114+
<label for="name">Name of the Oraganizer:</label><br>
115+
<input type="text" id="name" autocomplete="Name" placeholder="Enter Your Name"/><br><br>
116+
117+
<label for="Email">Email:</label><br>
118+
<input type="email" id="email" autocomplete="Email" placeholder="Enter Email"><br><br>
119+
120+
<label for="Address">Address:</label><br>
121+
<textarea placeholder="Enter Address"></textarea><br><br>
122+
123+
<label for="Country">Country:</label><br>
124+
<input type="text" id="Country" autocomplete="Country" placeholder="Enter Country"><br><br>
125+
126+
<label for="ZIP Code">ZIP Code:</label><br>
127+
<input type="number" id="ZIP Code" autocomplete="ZIP Code" placeholder="Enter ZIP Code"><br><br>
128+
129+
<label for="Event">Event Type:</label><br>
130+
131+
<div class="radio-group">
132+
<label><input type="radio" id="wedding" name="event" value="wedding">Wedding</label>
133+
<label><input type="radio" id="birthday" name="event" value="birthday">Birthday Celebration</label>
134+
<label><input type="radio" id="festival" name="event" value="festival">Festival</label>
135+
<label><input type="radio" id="corporate" name="event" value="corporate">Corporate Event</label>
136+
<label><input type="radio" id="press" name="event" value="press">Press Inquiry</label>
137+
</div>
138+
139+
<label for="Date">Date of the Event:</label><br>
140+
<input type="date" id="Date"><br><br>
141+
142+
<label for="Budget">Range of the Budget:</label><br>
143+
<input type="range" id="range"><br><br>
144+
145+
<label for="list">Count For The Guest:</label><br>
146+
<input type="text" id="list" placeholder="Enter The Count">
147+
148+
<button id="invitations">Send Invitations</button>
149+
150+
<button id="submit">Submit</button>
151+
</form>
152+
153+
<script></script>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)