Skip to content

Commit d262a1c

Browse files
BintScriptsBintScripts
authored
Add files via upload
1 parent 50816d3 commit d262a1c

2 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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>Contact Form</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="form-container">
12+
<form class="form">
13+
<div class="form-group">
14+
<label for="email">Company Email</label>
15+
<input required name="email" id="email" type="email" placeholder="you@company.com">
16+
</div>
17+
<div class="form-group">
18+
<label for="textarea">How Can We Help You?</label>
19+
<textarea required id="textarea" name="textarea" placeholder="Describe your needs..."></textarea>
20+
</div>
21+
<button type="submit" class="form-submit-btn">Submit Request</button>
22+
</form>
23+
</div>
24+
</body>
25+
</html>

‎style.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
:root {
2+
--light: #bfccd5;
3+
--dark: #4b5d70;
4+
--accent: #b4f8f9;
5+
--bg: #0d161f;
6+
}
7+
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
min-height: 100vh;
16+
background: var(--bg);
17+
display: grid;
18+
place-items: center;
19+
font-family: 'Poppins', sans-serif;
20+
}
21+
22+
.form-container {
23+
position: relative;
24+
max-width: 500px;
25+
width: 90%;
26+
background: var(--dark);
27+
border-radius: 25px;
28+
padding: 40px 35px;
29+
box-shadow: 0 0 30px rgba(75, 93, 112, 0.4);
30+
animation: float 4s ease-in-out infinite;
31+
}
32+
33+
.form-container::before {
34+
content: '';
35+
position: absolute;
36+
top: 0;
37+
left: 0;
38+
right: 0;
39+
bottom: 0;
40+
border-radius: 25px;
41+
padding: 2px;
42+
background: linear-gradient(45deg, var(--light), var(--accent), var(--dark));
43+
background-size: 200% 200%;
44+
animation: border-glow 6s linear infinite;
45+
z-index: -1;
46+
}
47+
48+
.form {
49+
display: flex;
50+
flex-direction: column;
51+
gap: 30px;
52+
}
53+
54+
.form-group {
55+
position: relative;
56+
}
57+
58+
.form-group label {
59+
display: block;
60+
margin-bottom: 10px;
61+
color: var(--dark); /* Dark text for labels */
62+
font-size: 14px;
63+
font-weight: 600;
64+
letter-spacing: 0.8px;
65+
}
66+
67+
.form-group input,
68+
.form-group textarea {
69+
width: 100%;
70+
padding: 18px 22px;
71+
border: 2px solid var(--dark);
72+
border-radius: 15px;
73+
background: transparent;
74+
color: var(--dark); /* Dark text for input/textarea values */
75+
font-family: inherit;
76+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
77+
}
78+
79+
.form-group input::placeholder,
80+
.form-group textarea::placeholder {
81+
color: var(--dark); /* Dark placeholder text */
82+
opacity: 0.7;
83+
}
84+
85+
.form-group input:focus,
86+
.form-group textarea:focus {
87+
border-color: var(--accent);
88+
box-shadow: 0 0 0 2px rgba(110, 192, 216, 0.4);
89+
transform: scale(1.02);
90+
}
91+
92+
.form-group textarea {
93+
min-height: 140px;
94+
resize: vertical;
95+
}
96+
97+
.form-submit-btn {
98+
width: 100%;
99+
padding: 18px 40px;
100+
background: var(--dark);
101+
border: 2px solid var(--accent);
102+
color: var(--light); /* Light text on button */
103+
font-weight: 600;
104+
font-size: 16px;
105+
border-radius: 15px;
106+
cursor: pointer;
107+
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
108+
margin-top: 20px;
109+
position: relative;
110+
overflow: hidden;
111+
}
112+
113+
.form-submit-btn::after {
114+
content: '';
115+
position: absolute;
116+
top: 0;
117+
left: 0;
118+
right: 0;
119+
bottom: 0;
120+
background: var(--accent);
121+
opacity: 0;
122+
transition: opacity 0.3s;
123+
z-index: -1;
124+
}
125+
126+
.form-submit-btn:hover {
127+
color: var(--light); /* Light text on hover */
128+
}
129+
130+
.form-submit-btn:hover::after {
131+
opacity: 0.2;
132+
}
133+
134+
.form-submit-btn:active {
135+
transform: scale(0.98);
136+
}
137+
138+
@keyframes border-glow {
139+
0% { background-position: 0% 50%; }
140+
50% { background-position: 100% 50%; }
141+
100% { background-position: 0% 50%; }
142+
}
143+
144+
@keyframes float {
145+
0%, 100% { transform: translateY(0); }
146+
50% { transform: translateY(-15px); }
147+
}
148+
149+
/* Responsive Design */
150+
@media (max-width: 600px) {
151+
.form-container {
152+
padding: 30px 25px;
153+
}
154+
155+
.form-group input,
156+
.form-group textarea {
157+
padding: 15px 18px;
158+
}
159+
160+
.form-submit-btn {
161+
padding: 16px 30px;
162+
font-size: 15px;
163+
}
164+
}

0 commit comments

Comments
 (0)