Skip to content

Commit 89d15b0

Browse files
abhirajadhikary06abhirajadhikary06
authored
Added Swag Shipment Form (#1397)
1 parent 04b12af commit 89d15b0

File tree

6 files changed

+196
-4
lines changed

6 files changed

+196
-4
lines changed

‎Components/Forms/Glassmorphism-Login-Form/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33

44
<head>
55
<link rel="stylesheet" type="text/css" href="./style.css">
@@ -37,7 +37,6 @@ <h2>Login Form</h2>
3737
</div>
3838
</div>
3939
</section>
40-
4140
</body>
4241

43-
</html>
42+
</html>

‎Components/Forms/Glassmorphism-Login-Form/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,4 +193,4 @@ section .color:nth-child(3) {
193193
left: 140px;
194194
width: 60px;
195195
height: 60px;
196-
}
196+
}

‎Components/Forms/Swag-Shipment-Form/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Swag Shipment Form</title>
10+
</head>
11+
12+
<body>
13+
<h1>Swag Shipment Form</h1>
14+
<div class="container">
15+
<form id="shipment-form">
16+
<div class="form-group">
17+
<label for="name">Name</label>
18+
<input id="name" name="name" type="text" required />
19+
</div>
20+
<div class="form-group">
21+
<label for="phone">Phone Number</label>
22+
<input id="phone" name="phone" type="text" required />
23+
</div>
24+
<div class="form-group">
25+
<label for="email">Email</label>
26+
<input id="email" name="email" type="email" required />
27+
</div>
28+
<div class="form-group">
29+
<label for="street-address">Street Address</label>
30+
<input id="street-address" name="street-address" type="text" required />
31+
</div>
32+
<div class="form-group">
33+
<label for="apartment">Apartment/Colony</label>
34+
<input id="apartment" name="apartment" type="text" />
35+
</div>
36+
<div class="form-group">
37+
<label for="city">City</label>
38+
<input id="city" name="city" type="text" required />
39+
</div>
40+
<div class="form-group">
41+
<label for="state">State/Province/Region</label>
42+
<input id="state" name="state" type="text" required />
43+
</div>
44+
<div class="form-group">
45+
<label for="postal">Postal/ZIP</label>
46+
<input id="postal" name="postal" type="text" required />
47+
</div>
48+
<div class="form-group">
49+
<label for="country">Country</label>
50+
<input id="country" name="country" type="text" required />
51+
</div>
52+
<div class="form-group">
53+
<label for="landmark">Nearest Landmark</label>
54+
<input id="landmark" name="landmark" type="text" />
55+
</div>
56+
<button type="submit" class="submit-btn">Send Form</button>
57+
</form>
58+
<div class="submission-message" id="submission-message">Your form has been submitted!</div>
59+
</div>
60+
<script src="script.js"></script>
61+
</body>
62+
63+
</html>

‎Components/Forms/Swag-Shipment-Form/script.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const form = document.getElementById('shipment-form');
2+
const submissionMessage = document.getElementById('submission-message');
3+
4+
form.addEventListener('submit', (e) => {
5+
e.preventDefault();
6+
form.reset();
7+
submissionMessage.style.display = 'block';
8+
setTimeout(() => {
9+
submissionMessage.style.display = 'none';
10+
}, 3000);
11+
});

‎Components/Forms/Swag-Shipment-Form/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
body {
2+
font-family: 'Poppins', sans-serif;
3+
background: linear-gradient(135deg, #6a11cb, #2575fc);
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
color: #fff;
11+
flex-direction: column;
12+
}
13+
14+
h1 {
15+
font-size: 36px;
16+
color: #ffe77b;
17+
margin-bottom: 20px;
18+
font-weight: 600;
19+
}
20+
21+
.container {
22+
background: rgba(255, 255, 255, 0.9);
23+
color: #333;
24+
border-radius: 10px;
25+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
26+
padding: 25px;
27+
width: 100%;
28+
max-width: 600px;
29+
animation: fadeIn 1s ease-in-out;
30+
}
31+
32+
@keyframes fadeIn {
33+
from {
34+
opacity: 0;
35+
transform: translateY(-20px);
36+
}
37+
38+
to {
39+
opacity: 1;
40+
transform: translateY(0);
41+
}
42+
}
43+
44+
.form-group label {
45+
font-weight: 600;
46+
color: #555;
47+
}
48+
49+
.form-group input {
50+
padding: 10px;
51+
border: 1px solid #ddd;
52+
border-radius: 5px;
53+
width: 100%;
54+
margin-top: 5px;
55+
font-size: 16px;
56+
transition: all 0.3s ease-in-out;
57+
}
58+
59+
.form-group input:focus {
60+
border-color: #2575fc;
61+
box-shadow: 0 0 8px rgba(37, 117, 252, 0.5);
62+
}
63+
64+
.submit-btn {
65+
background: #2575fc;
66+
color: #fff;
67+
padding: 15px 20px;
68+
border: none;
69+
border-radius: 5px;
70+
width: 100%;
71+
font-size: 18px;
72+
font-weight: bold;
73+
cursor: pointer;
74+
transition: all 0.3s ease-in-out;
75+
}
76+
77+
.submit-btn:hover {
78+
background: #6a11cb;
79+
}
80+
81+
.submit-btn:active {
82+
transform: scale(0.98);
83+
}
84+
85+
.submission-message {
86+
display: none;
87+
margin-top: 20px;
88+
font-size: 18px;
89+
color: #4caf50;
90+
text-align: center;
91+
}
92+
93+
@media (max-width: 768px) {
94+
.container {
95+
padding: 20px;
96+
}
97+
98+
h1 {
99+
font-size: 28px;
100+
}
101+
102+
.submit-btn {
103+
font-size: 16px;
104+
padding: 12px;
105+
}
106+
}

‎assets/html_files/forms.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -604,6 +604,19 @@ <h1>Survey Form</h1>
604604
</a>
605605
</div>
606606
</div>
607+
<div class="box">
608+
<h1>Swag Shipment Form</h1>
609+
<div class="preview">
610+
<a href="../../Components/Forms/Swag-Shipment-Form/index.html" title="Live Preview" target="_blank">
611+
<img src="../images/link.png">
612+
</a>
613+
</div>
614+
<div class="source">
615+
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Swag-Shipment-Form" title="Source Code" target="_blank">
616+
<img src="../images/github.png">
617+
</a>
618+
</div>
619+
</div>
607620
<div class="box">
608621
<h1>Terms And Conditions Form</h1>
609622
<div class="preview">

0 commit comments

Comments
 (0)