Skip to content

Commit 191876e

Browse files
sneha-tech03sneha-tech03
authored
Contact Form (#507)
1 parent 69a20f0 commit 191876e

File tree

3 files changed

+364
-1
lines changed

3 files changed

+364
-1
lines changed

‎issue.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,4 +310,4 @@ <h3>Subscribe to our Newsletter</h3>
310310
</footer>
311311
<script src="index.js"></script>
312312
</body>
313-
</html>
313+
</html>

‎open-source.css‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,295 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* body, input , textarea{
8+
9+
} */
10+
11+
.container{
12+
position: relative;
13+
width: 100%;
14+
min-height: 100vh;
15+
padding: 2rem;
16+
overflow: hidden;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
.form{
23+
width: 100%;
24+
max-width: 820px;
25+
height: 500px;
26+
background-color: #fff;
27+
border-radius: 10px;
28+
box-shadow: 0 0 20px 1px rgba(0,0, 0 ,0.4);
29+
z-index: 2;
30+
overflow: hidden;
31+
display: grid;
32+
grid-template-columns: repeat(2, 1fr);
33+
34+
}
35+
36+
.input-container span{
37+
position: absolute;
38+
top: 0;
39+
left: 25px;
40+
transform: translateY(-50%);
41+
font-size: 0.8rem;
42+
padding: 0 0.4rem;
43+
color: transparent;
44+
pointer-events: none;
45+
z-index: 1;
46+
47+
}
48+
49+
.contact-info{
50+
background-color: rgb(255, 255, 255);
51+
position: relative;
52+
padding: 2.3rem 2.2rem;
53+
}
54+
55+
.contact-form{
56+
background: linear-gradient(45deg, rgb(204, 145, 145), rgb(122, 41, 90), rgb(163, 84, 84));
57+
position: relative;
58+
59+
}
60+
61+
.contact-form:before{
62+
content: '';
63+
position: absolute;
64+
width: 26px;
65+
height: 26px;
66+
background: linear-gradient(45deg,rgb(163, 84, 84), rgb(122, 41, 90));
67+
transform: rotate(45deg);
68+
top: 50px;
69+
left: -13px;
70+
}
71+
72+
form{
73+
padding: 2.3rem 2.2rem;
74+
z-index: 1;
75+
overflow: hidden;
76+
position: relative;
77+
}
78+
79+
.title{
80+
color: #fff;
81+
font-weight: 600;
82+
font-size: 1.5rem;
83+
line-height: 1;
84+
margin-bottom: 0.7rem;
85+
}
86+
87+
.input-container{
88+
position: relative;
89+
margin: 1rem 0;
90+
}
91+
92+
.input{
93+
width: 100%;
94+
outline: none;
95+
border: 2px solid #fafafa;
96+
background: none;
97+
padding: 0.6rem 1.2rem;
98+
color: #fff;
99+
font-weight: 500;
100+
font-size: 0.95rem;
101+
letter-spacing: 0.5px;
102+
border-radius: 25px;
103+
transition: 0.3s;
104+
}
105+
106+
textarea.input{
107+
padding: 0.8rem 1.2rem;
108+
min-height: 150px;
109+
resize: none;
110+
overflow-y: auto;
111+
}
112+
113+
.input-container label{
114+
position: absolute;
115+
top: 50%;
116+
left:15px;
117+
transform: translateY(-50%);
118+
padding: 0 0.4rem;
119+
color: #fafafa;
120+
font-size: 0.9rem;
121+
font-weight: 400;
122+
pointer-events: none;
123+
z-index: 4;
124+
transition: 0.5s;
125+
}
126+
127+
.input-container.textarea label{
128+
top: 1rem;
129+
transform: translateY(0);
130+
}
131+
132+
.btn{
133+
padding: 0.6rem 1.3rem;
134+
background-color: #fff;
135+
border: 2px solid #fafafa;
136+
font-size:0.95rem;
137+
font-weight: 600;
138+
color: #780000;
139+
line-height: 1;
140+
border-radius: 25px;
141+
outline: none;
142+
cursor: pointer;
143+
}
144+
145+
.btn:hover{
146+
background-position: right center;
147+
background:none;
148+
color: #fff;
149+
box-shadow: 0 0 12px #780000;
150+
}
151+
152+
.input-container span {
153+
position: absolute;
154+
top: 0;
155+
left: 25px;
156+
transform: translateY(-50%);
157+
font-size: 0.8rem;
158+
padding: 0 0.4rem;
159+
color: transparent;
160+
pointer-events: none;
161+
z-index: 3;
162+
}
163+
164+
.input-container span:before,
165+
.input-container span:after {
166+
content: '';
167+
position: absolute;
168+
width: 10%;
169+
opacity: 0;
170+
transition: 0.3s;
171+
height: 5px;
172+
top: 50%;
173+
transform: translateY(-50%);
174+
background-color: rgb(122, 41, 90);
175+
}
176+
177+
.input-container span:before{
178+
left: 50%;
179+
}
180+
181+
.input-container span:after{
182+
right: 50%;
183+
}
184+
185+
.input-container.focus label{
186+
top: 0;
187+
transform: translateY(-50%);
188+
left: 25px;
189+
font-size: 0.8rem;
190+
}
191+
192+
.input-container.focus span:before,
193+
.input-container.focus span:after
194+
{
195+
width: 50%;
196+
opacity: 1;
197+
}
198+
199+
.information i{
200+
width: 25px;
201+
color: #780000;
202+
}
203+
204+
.information{
205+
display: flex;
206+
flex-direction: column;
207+
padding: 2rem;
208+
line-height: 1.5rem;
209+
}
210+
211+
212+
.contact-info .title{
213+
color: #780000;
214+
font-weight: 600;
215+
}
216+
217+
.social-media{
218+
padding: 2rem 0 0 0;
219+
}
220+
221+
.social-media p{
222+
color: #333;
223+
224+
}
225+
226+
.social-icon{
227+
display: flex;
228+
margin-top: 0.5rem;
229+
230+
}
231+
232+
.contact-info a{
233+
width: 35px;
234+
height: 35px;
235+
border-radius: 5px;
236+
background: linear-gradient(45deg, #990000, #be6767);
237+
color: #fff;
238+
text-align: center;
239+
line-height: 35px;
240+
margin-right: 0.5rem;
241+
transition: 0.5s ease-in-out;
242+
243+
}
244+
245+
.contact-info a:hover{
246+
background: #5b1111;
247+
transform: scale(1.1);
248+
249+
}
250+
251+
@media (max-width: 768px) {
252+
.form {
253+
grid-template-columns: 1fr;
254+
height: auto;
255+
}
256+
257+
.contact-info {
258+
padding: 1.5rem;
259+
}
260+
261+
.contact-form {
262+
padding: 1.5rem;
263+
}
264+
265+
.title {
266+
font-size: 1.3rem;
267+
}
268+
269+
.input {
270+
font-size: 0.9rem;
271+
}
272+
273+
.btn {
274+
text-align: center;
275+
}
276+
277+
.social-icon {
278+
justify-content: center;
279+
flex-wrap: wrap;
280+
}
281+
282+
.social-icon a {
283+
margin: 0.3rem;
284+
}
285+
286+
.information {
287+
padding: 1rem;
288+
font-size: 0.9rem;
289+
}
290+
}
291+
292+
1293
.btn-gssoc {
2294
display: inline-block;
3295
padding: 12px 25px;

‎open-source.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Open Source | The Cawnpore</title>
88
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
99
<link rel="stylesheet" href="style.css" />
10+
<link rel="stylesheet" href="open-source.css">
1011
<link rel="preconnect" href="https://fonts.googleapis.com" />
1112
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1213
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@1,700&display=swap" rel="stylesheet" />
@@ -140,6 +141,56 @@ <h2 id="namaste">Namaste Contributors </h2>
140141
</section>
141142

142143

144+
<div class="container">
145+
<div class="form">
146+
<div class="contact-info">
147+
<h3 class="title">Let's get in touch</h3>
148+
<p class="text">Connet with us in our wonderful journey. Feel free to share you thoughts , we will appreciate it &#127882; </p>
149+
<div class="info">
150+
<div class="information">
151+
<p><i class="fa-solid fa-location-dot"></i><br>Kanpur </p>
152+
<p><i class="fa-solid fa-envelope"></i><br>thecawnporemagofficial@gmail.com</p>
153+
</div>
154+
155+
<div class="social-media">
156+
<p>Connect with us</p>
157+
<div class="social-icon">
158+
<a href="https://www.instagram.com/thecawnporemagazine/?igsh=MWQzcXkxeGNkd29oeA%3D%3D" target="_blank"><i class="fa-brands fa-instagram"></i></a>
159+
<a href="https://www.linkedin.com/company/the-cawnpore-magazine/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
160+
<a href="https://x.com/TheCawnporeMag?s=09" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
161+
</div>
162+
</div>
163+
164+
</div>
165+
</div>
166+
167+
<div class="contact-form">
168+
<form
169+
action="https://formspree.io/f/mzzvyzzo"
170+
method="POST">
171+
<h3 class="title">Contact Us</h3>
172+
<div class="input-container">
173+
<input type="text" name="name" class="input" required/>
174+
<label for="">Username</label>
175+
<span>Username</span>
176+
</div>
177+
<div class="input-container">
178+
<input type="email" name="email" class="input" required/>
179+
<label for="">Email</label>
180+
<span>Email</span>
181+
</div>
182+
<div class="input-container textarea">
183+
<textarea name="message" class="input"></textarea>
184+
<label for="">Message</label>
185+
<span>Message</span>
186+
</div>
187+
<input type="submit" value="Send" class="btn"/>
188+
</form>
189+
</div>
190+
</div>
191+
</div>
192+
193+
143194
<!-- Logos -->
144195
<section class="listings" style="text-align: center; margin-bottom: 40px;">
145196
<h3>Open Source Proudly Powered By:</h3>
@@ -303,6 +354,26 @@ <h3>Subscribe to our Newsletter</h3>
303354
}
304355
// Update the year in the footer
305356
document.getElementById("year").textContent = new Date().getFullYear();
357+
const inputs = document.querySelectorAll(".input");
358+
359+
function focusFunc() {
360+
let parent = this.parentNode;
361+
parent.classList.add("focus");
362+
}
363+
364+
function blurFunc() {
365+
let parent = this.parentNode;
366+
if(this.value == "") {
367+
parent.classList.remove("focus");
368+
}
369+
}
370+
371+
372+
inputs.forEach(input => {
373+
input.addEventListener("focus", focusFunc);
374+
input.addEventListener("blur", blurFunc);
375+
});
376+
306377
</script>
307378
</body>
308379

0 commit comments

Comments
 (0)