Skip to content

Commit 9ec528c

Browse files
arorasneha08arorasneha08
committed
Added Halloween-themed input form using HTML & CSS
1 parent 618fa39 commit 9ec528c

File tree

2 files changed

+155
-0
lines changed

2 files changed

+155
-0
lines changed

‎halloween-input-form/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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>Halloween Login Form 🎃</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="pumpkin-bg"></div>
11+
12+
<div class="form-container">
13+
<h1>🎃 Spooky Login 🎃</h1>
14+
<form>
15+
<div class="input-group">
16+
<label for="email">🕸️ Email</label>
17+
<input type="email" id="email" placeholder="[email protected]" required />
18+
</div>
19+
20+
<div class="input-group">
21+
<label for="password">💀 Password</label>
22+
<input type="password" id="password" placeholder="Enter your secret spell" required />
23+
</div>
24+
25+
<button type="submit" class="submit-btn">Enter the Haunted House 👻</button>
26+
</form>
27+
</div>
28+
</body>
29+
</html>

‎halloween-input-form/style.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@400;600&display=swap');
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
height: 100vh;
7+
background: linear-gradient(135deg, #000000 0%, #1a0000 100%);
8+
font-family: 'Poppins', sans-serif;
9+
color: #fff;
10+
overflow: hidden;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
position: relative;
15+
}
16+
17+
/* Glowing pumpkin overlay */
18+
.pumpkin-bg::before {
19+
content: "🎃";
20+
font-size: 25rem;
21+
color: rgba(255, 140, 0, 0.05);
22+
position: absolute;
23+
top: 10%;
24+
left: 50%;
25+
transform: translateX(-50%);
26+
z-index: 0;
27+
}
28+
29+
/* Floating fog animation */
30+
.pumpkin-bg::after {
31+
content: "";
32+
position: absolute;
33+
bottom: 0;
34+
left: 0;
35+
width: 200%;
36+
height: 200%;
37+
background: radial-gradient(ellipse at bottom, rgba(255, 140, 0, 0.15), transparent);
38+
animation: fog 15s infinite linear;
39+
z-index: 0;
40+
}
41+
42+
@keyframes fog {
43+
0% { transform: translateX(0); }
44+
100% { transform: translateX(-50%); }
45+
}
46+
47+
/* Form container */
48+
.form-container {
49+
background: rgba(0, 0, 0, 0.85);
50+
padding: 2.5rem;
51+
border: 2px solid orange;
52+
border-radius: 20px;
53+
box-shadow: 0 0 25px orange;
54+
width: 320px;
55+
text-align: center;
56+
z-index: 1;
57+
position: relative;
58+
transition: 0.3s ease;
59+
}
60+
61+
.form-container:hover {
62+
box-shadow: 0 0 40px #ff6600;
63+
transform: scale(1.03);
64+
}
65+
66+
/* Title */
67+
h1 {
68+
font-family: 'Creepster', cursive;
69+
font-size: 2rem;
70+
color: #ff6600;
71+
margin-bottom: 1.5rem;
72+
text-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300;
73+
}
74+
75+
/* Inputs */
76+
.input-group {
77+
text-align: left;
78+
margin-bottom: 1rem;
79+
}
80+
81+
label {
82+
display: block;
83+
margin-bottom: 5px;
84+
color: #ffa500;
85+
font-weight: 600;
86+
font-size: 0.9rem;
87+
}
88+
89+
input {
90+
width: 100%;
91+
padding: 10px;
92+
background: #1a0000;
93+
border: 2px solid #ff6600;
94+
border-radius: 10px;
95+
color: #fff;
96+
font-size: 0.95rem;
97+
outline: none;
98+
transition: 0.3s;
99+
}
100+
101+
input:focus {
102+
border-color: #ff9933;
103+
box-shadow: 0 0 10px #ff9933;
104+
}
105+
106+
/* Button */
107+
.submit-btn {
108+
background: linear-gradient(45deg, #ff6600, #ff3300);
109+
border: none;
110+
color: black;
111+
font-weight: 700;
112+
border-radius: 12px;
113+
padding: 12px 18px;
114+
margin-top: 10px;
115+
cursor: pointer;
116+
width: 100%;
117+
transition: all 0.3s ease;
118+
font-family: 'Creepster', cursive;
119+
font-size: 1.1rem;
120+
}
121+
122+
.submit-btn:hover {
123+
background: linear-gradient(45deg, #ff9933, #ff3300);
124+
box-shadow: 0 0 25px #ff6600;
125+
transform: scale(1.05);
126+
}

0 commit comments

Comments
 (0)