Skip to content

Commit a01a7e7

Browse files
ishap11ishap11
authored
•Contact (#393)
1 parent cf905eb commit a01a7e7

File tree

4 files changed

+149
-60
lines changed

4 files changed

+149
-60
lines changed

‎ScrollToTop.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,27 @@ goTopBtn.addEventListener('click', ()=>{
1616
top:0,
1717
behavior:"smooth"
1818
})
19-
})
19+
})
20+
21+
//contact form to excel sheet
22+
const scriptURL = 'https://script.google.com/macros/s/AKfycbzUSaaX3XmlE5m9YLOHOBrRuCh2Ohv49N9bs4bew7xPd1qlgpvXtnudDs5Xhp3jF-Fx/exec';
23+
const form = document.forms['submitToGoogleSheet']
24+
const msg = document.getElementById("msg")
25+
26+
form.addEventListener('submit', e => {
27+
e.preventDefault()
28+
fetch(scriptURL, { method: 'POST', body: new FormData(form) })
29+
.then(response => {
30+
msg.innerHTML = "Message sent successfully"
31+
setTimeout(function () {
32+
msg.innerHTML = ""
33+
}, 5000)
34+
form.reset()
35+
})
36+
.catch(error => console.error('Error!', error.message))
37+
})
38+
39+
40+
function updateActiveSection() {
41+
var scrollPosition = $(window).scrollTop();
42+
}

‎home.css

Lines changed: 91 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ body.dark-mode #Services{
449449
list-style: none;
450450
}
451451

452-
/*Styles for Contact */
452+
/* Styles for Contact */
453453

454454
.fa-linkedin,
455455
.fa-github,
@@ -461,32 +461,31 @@ body.dark-mode #Services{
461461
display: flex;
462462
justify-content: center;
463463
align-items: center;
464-
gap: 50px;
465-
padding: 50px;
464+
gap: 3px;
465+
padding: 0;
466466
}
467467

468-
.contact-style {
468+
.contact-content {
469469
display: flex;
470-
flex-direction: row;
471-
justify-content: space-between;
470+
flex-wrap: wrap;
472471
align-items: center;
472+
justify-content: center;
473473
padding: 50px;
474474
}
475475

476-
.contact-style div {
477-
width: 100%;
478-
height: auto;
476+
.col {
477+
flex: 1 1 50%;
478+
padding: 20px;
479479
}
480480

481-
.contact-style #contact-img {
482-
width: 60%;
483-
height: auto;
484-
object-fit: cover;
485-
animation: moveUpDown 1.5s infinite alternate;
481+
.contact-image img {
482+
width: 80%;
483+
max-width: 300px; /* Max width to ensure the image isn't too large */
484+
border-radius: 20px;
486485
}
487486

488-
/*Contact Form*/
489-
.contactForm {
487+
/* Contact Form */
488+
.contact {
490489
width: 100%;
491490
max-width: 570px;
492491
margin: auto;
@@ -496,41 +495,91 @@ body.dark-mode #Services{
496495
border-radius: 10px;
497496
}
498497

499-
.contactForm label {
500-
display: inline-block;
501-
margin-bottom: 0.5rem;
502-
font-weight: bold;
498+
.contact input,
499+
.contact textarea {
500+
width: 100%;
501+
padding: 15px;
502+
border: 0;
503+
margin-bottom: 10px;
504+
background-color: #e7eaff;
505+
border-radius: 10px;
506+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
503507
}
504508

505-
.contactForm input[type='text'],
506-
.contactForm input[type='email'],
507-
.contactForm textarea {
508-
display: block;
509-
width: 100%;
510-
padding: 0.5rem;
509+
.contact .submit {
510+
width: auto;
511+
background-color: #fed700;
512+
padding: 10px 12px;
513+
font-weight: bold;
514+
font-size: 18px;
515+
border-radius: 10px;
511516
font-size: 1rem;
512-
line-height: 1.5;
513-
border: 1px solid #ccc;
514-
border-radius: 4px;
515-
resize: vertical;
516-
margin-bottom: 1rem;
517+
margin-top: 3%
517518
}
518519

519-
.contactForm button {
520-
display: inline-block;
521-
padding: 0.5rem 1rem;
522-
font-size: 1rem;
523-
font-weight: bold;
520+
.contact .submit:hover {
521+
transform: scale(1.1);
522+
cursor: pointer;
524523
background-color: #007bff;
524+
}
525+
526+
#msg {
525527
color: #fff;
526-
border: none;
527-
border-radius: 4px;
528-
cursor: pointer;
529-
transition: background-color 0.2s ease;
528+
font-size: 20px;
529+
margin-top: -8px;
530+
display: block;
530531
}
531532

532-
.contactForm button:hover {
533-
background-color: #0056b3;
533+
.link {
534+
height: 70px;
535+
width: 70px;
536+
background-color: #f4f4f9;
537+
border-radius: 35px;
538+
text-align: center !important;
539+
margin: 7px;
540+
line-height: 80px;
541+
padding-left: 5px;
542+
padding-top: 3px;
543+
}
544+
545+
.link i {
546+
transition: all 0.3s linear;
547+
}
548+
549+
.link:hover i {
550+
transform: scale(1.5);
551+
}
552+
553+
.youtube:hover .fab.fa-youtube {
554+
color: red !important;
555+
}
556+
557+
.linkedin:hover .fab.fa-linkedin {
558+
color: rgb(47, 47, 228) !important;
559+
}
560+
561+
.instagram:hover .fab.fa-instagram {
562+
color: #e11d74 !important;
563+
}
564+
565+
.github:hover .fab.fa-github {
566+
color: black !important;
567+
}
568+
569+
.mail:hover .fas.fa-envelope {
570+
color: #B23121 !important;
571+
}
572+
573+
574+
/* Media Queries for Responsive Design */
575+
@media (max-width: 768px) {
576+
.contact-content {
577+
flex-direction: column;
578+
}
579+
580+
.col {
581+
flex: 1 1 100%;
582+
}
534583
}
535584

536585

‎home.html

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -292,24 +292,41 @@ <h2 class="section-heading" data-aos="fade-up">Why CSEdge Internship?</h2>
292292
</table>
293293
</section>
294294
<!--Contact Section-->
295-
<section id="contact">
296-
<h2 class="section-heading" data-aos="fade-up">Contact Us</h2>
297-
<p class="section-content" data-aos="fade-up">For more information or inquiries, please contact us:</p>
298-
<p class="section-content" data-aos="fade-up">Email: internship@csedge.courses</p>
299-
300-
<div class="contact-icons" data-aos="fade-up">
301-
<a href="mailto:cseedge@gmail.com" target="_blank"><i class="fas fa-envelope fa-2x"
302-
style="color: #0085ff;"></i></a>
303-
<a href="https://www.linkedin.com/company/csedge/" target="_blank"><i class="fab fa-linkedin fa-2x"
304-
style="color: #0085ff;"></i></a>
305-
<a href="https://github.com/CSEdgeOfficial" target="_blank"><i class="fab fa-github fa-2x"
306-
style="color: #0085ff;"></i></a>
307-
<a href="https://www.instagram.com/csedgeofficial" target="_blank"><i class="fab fa-instagram fa-2x"
308-
style="color: #0085ff;"></i></a>
309-
<a href="https://youtube.com/@CSEdgeOfficial" target="_blank"><i class="fab fa-youtube fa-2x"
310-
style="color: #0085ff;"></i></a>
295+
<!-- Contact Section -->
296+
<section id="contact">
297+
<h2 class="section-heading" data-aos="fade-up">Contact Us</h2>
298+
<p class="section-content" data-aos="fade-up">For more information or inquiries, please contact us:</p>
299+
<p class="section-content" data-aos="fade-up">Email: internship@csedge.courses</p>
300+
301+
<div class="contact-icons" data-aos="fade-up">
302+
<a class="link mail" href="mailto:cseedge@gmail.com" target="_blank"><i
303+
class="clshover fas fa-envelope fa-2x" style="color: #0085ff;"></i></a>
304+
<a class="link linkedin" href="https://www.linkedin.com/company/csedge/" target="_blank"><i
305+
class="clshover fab fa-linkedin fa-2x" style="color: #0085ff;"></i></a>
306+
<a class="link github" href="https://github.com/CSEdgeOfficial" target="_blank"><i
307+
class="clshover fab fa-github fa-2x" style="color: #0085ff;"></i></a>
308+
<a class="link instagram" href="https://www.instagram.com/csedgeofficial" target="_blank"><i
309+
class="clshover fab fa-instagram fa-2x" style="color: #0085ff;"></i></a>
310+
<a class="link youtube" href="https://youtube.com/@CSEdgeOfficial" target="_blank"><i
311+
class="clshover fab fa-youtube fa-2x" style="color: #0085ff;"></i></a>
312+
</div>
313+
314+
<div class="contact-content">
315+
<div class="col col-4 contact-image" data-aos="fade-up">
316+
<img src="./new/web-developer.251x256.png" alt="Contact Us">
311317
</div>
312-
</section>
318+
<div class="col col-8 contact">
319+
<form name="submitToGoogleSheet">
320+
<input type="text" name="NAME" placeholder="Name" required>
321+
<input type="email" name="EMAIL" placeholder="Email" required>
322+
<input type="text" name="SUBJECT" placeholder="Subject">
323+
<textarea name="MESSAGE" placeholder="Message"></textarea>
324+
<input type="submit" value="Send Message" class="submit">
325+
</form>
326+
<span id="msg"></span>
327+
</div>
328+
</div>
329+
</section>
313330
<!--FAQ Section-->
314331
<section id="faq" class="faq">
315332
<h1 class="section-heading" data-aos="fade-up">FAQ</h1>

‎new/web-developer.251x256.png

33.8 KB
Loading

0 commit comments

Comments
 (0)