Skip to content

Commit f44747a

Browse files
zalabhavyzalabhavy
authored
Added All In One Form (#1321)
1 parent daa019e commit f44747a

File tree

3 files changed

+150
-0
lines changed

3 files changed

+150
-0
lines changed

‎Components/Forms/All-In-One-Form/index.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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>All in One Form</title>
7+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="title-heading">All In One Form</div>
12+
<form class="all-in-one-form">
13+
14+
<div class="form-group">
15+
<label for="textInput">UserName</label>
16+
<input type="text" class="form-control" id="textInput" placeholder="Enter text">
17+
</div>
18+
19+
<div class="form-group">
20+
<label for="passwordInput">Password</label>
21+
<input type="password" class="form-control" id="passwordInput" placeholder="Enter password">
22+
</div>
23+
24+
<div class="form-group">
25+
<label for="emailInput">Email</label>
26+
<input type="email" class="form-control" id="emailInput" placeholder="Enter email">
27+
</div>
28+
29+
<div class="form-group">
30+
<label for="textarea">Textarea</label>
31+
<textarea class="form-control" id="textarea" rows="3" placeholder="Enter your message"></textarea>
32+
</div>
33+
34+
<div class="form-group">
35+
<label>Checkbox</label>
36+
<div class="form-check">
37+
<input class="form-check-input" type="checkbox" id="check1">
38+
<label class="form-check-label" for="check1">
39+
Option 1
40+
</label>
41+
</div>
42+
<div class="form-check">
43+
<input class="form-check-input" type="checkbox" id="check2">
44+
<label class="form-check-label" for="check2">
45+
Option 2
46+
</label>
47+
</div>
48+
</div>
49+
50+
<div class="form-group">
51+
<label>Radio Options</label>
52+
<div class="form-check">
53+
<input class="form-check-input" type="radio" name="radioOptions" id="radio1" value="option1">
54+
<label class="form-check-label" for="radio1">
55+
Option 1
56+
</label>
57+
</div>
58+
<div class="form-check">
59+
<input class="form-check-input" type="radio" name="radioOptions" id="radio2" value="option2">
60+
<label class="form-check-label" for="radio2">
61+
Option 2
62+
</label>
63+
</div>
64+
</div>
65+
66+
<div class="form-group">
67+
<label for="fileInput">File Input</label>
68+
<input type="file" class="form-control-file" id="fileInput">
69+
</div>
70+
71+
<div class="form-group">
72+
<label for="dropdown">Dropdown Menu</label>
73+
<select class="form-control" id="dropdown">
74+
<option value="1">Option 1</option>
75+
<option value="2">Option 2</option>
76+
<option value="3">Option 3</option>
77+
</select>
78+
</div>
79+
80+
<div class="form-group">
81+
<label for="rangeInput">Range</label>
82+
<input type="range" class="form-control-range" id="rangeInput" min="0" max="100">
83+
</div>
84+
85+
<button type="submit" class="btn btn-primary btn-block">Submit</button>
86+
</form>
87+
88+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
89+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
90+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
91+
92+
</body>
93+
</html>

‎Components/Forms/All-In-One-Form/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
background: linear-gradient(45deg, #ff7e5f, #feb47b, #86e3ce, #ff6b6b, #feca57);
3+
background-size: 400% 400%;
4+
animation: gradientShift 10s ease infinite;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
margin: 0;
10+
font-family: Arial, sans-serif;
11+
min-height: 100vh; /* Ensure full viewport height */
12+
}
13+
@keyframes gradientShift {
14+
0% {background-position: 0% 50%;}
15+
50% {background-position: 100% 50%;}
16+
100% {background-position: 0% 50%;}
17+
}
18+
.title-heading {
19+
color: white;
20+
margin-bottom: 10px;
21+
margin-top: 10px;
22+
font-size: 2.5rem;
23+
font-weight: bold;
24+
text-shadow: 2px 2px 8px rgba(71, 45, 167, 0.6);
25+
text-align: center;
26+
}
27+
.all-in-one-form {
28+
background: white;
29+
padding: 30px;
30+
border-radius: 10px;
31+
box-shadow: 0 8px 25px rgba(71, 45, 167, 0.6);
32+
width: 100%;
33+
max-width: 600px;
34+
margin-top: 2px;
35+
margin-bottom: 20px;
36+
transition: box-shadow 0.3s ease;
37+
}
38+
.all-in-one-form:hover {
39+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
40+
}
41+
.all-in-one-form .form-control:focus {
42+
border-color: #007bff;
43+
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
44+
}

‎assets/html_files/forms.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,19 @@ <h1>Yeti Login Form</h1>
623623
</a>
624624
</div>
625625
</div>
626+
<div class="box">
627+
<h1>All In One Form</h1>
628+
<div class="preview">
629+
<a href="../../Components/Forms/All-In-One-Form/index.html" title="Live Preview" target="_blank">
630+
<img src="../images/link.png">
631+
</a>
632+
</div>
633+
<div class="source">
634+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/All-In-One-Form" title="Source Code" target="_blank">
635+
<img src="../images/github.png">
636+
</a>
637+
</div>
638+
</div>
626639
</div>
627640
</section>
628641

0 commit comments

Comments
 (0)