Skip to content

Commit db25da9

Browse files
CtoicCtoic
authored
Merge pull request #180 from My-Mation/contact-page-improvement
Improve contact page with hero section and enhanced features
2 parents e22ad29 + 4aff832 commit db25da9

1 file changed

Lines changed: 124 additions & 81 deletions

File tree

‎contact.html‎

Lines changed: 124 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,36 @@
252252
</a>
253253
</div>
254254

255+
<!-- Language-selector Toggle -->
256+
<div class="language-selector">
257+
<select
258+
id="language"
259+
onchange="changeLanguage()"
260+
style="background-color: #1db954; color: #fff"
261+
>
262+
<option value="en">English</option>
263+
<option value="fr">Français</option>
264+
<option value="es">Español</option>
265+
<option value="zh">简体中文</option>
266+
<!-- Ajoutez d'autres langues ici -->
267+
</select>
268+
</div>
269+
270+
<!-- Ensure language sync in iframe-->
271+
<script>
272+
function changeLanguage() {
273+
const language = document.getElementById('language').value;
274+
const iframe = document.getElementById('gd-iframe');
275+
if (iframe && iframe.contentWindow) {
276+
//set up postMessage to send the selected language to iframe
277+
iframe.contentWindow.postMessage({ type: 'changeLanguage', language: language }, '*');
278+
}
279+
}
280+
281+
// Add event listener for dropdown change to trigger the function
282+
document.getElementById('language').addEventListener('change', changeLanguage);
283+
</script>
284+
255285
<!-- Mobile Menu Toggle Button -->
256286
<div
257287
id="menu-toggle"
@@ -276,87 +306,100 @@
276306
</div>
277307
</nav>
278308
</header>
279-
<body class="dark-theme bg-gray-900 text-gray-300 d-flex flex-column min-vh-100">
280-
<div class="container my-5">
281-
<h2 class="display-5 fw-semibold mb-3 text-center">Contact Us</h2>
282-
<p class="text-center mb-5">Our friendly team would love to hear from you!</p>
283-
284-
<!-- Contact Form -->
285-
<form id="contact-form" class="space-y-4">
286-
<!-- First and Last Name in Two Columns -->
287-
<div class="row mb-3">
288-
<div class="col-md-6">
289-
<label for="first-name" class="block text-sm font-medium">First name:</label>
290-
<input type="text" id="first-name" name="first-name" placeholder="john" class="w-full p-2 rounded-lg bg-gray-700 text-gray-900 dark:text-white mt-2" required />
291-
</div>
292-
<div class="col-md-6">
293-
<label for="last-name" class="block text-sm font-medium">Last name:</label>
294-
<input type="text" id="last-name" name="last-name" placeholder="dre" class="w-full p-2 rounded-lg bg-gray-700 text-gray-900 dark:text-white mt-2" required />
295-
</div>
296-
</div>
297-
298-
<!-- Email -->
299-
<div class="mb-3">
300-
<label for="email" class="block text-sm font-medium">Email:</label>
301-
<input type="email" id="email" name="email" placeholder="contact-us@gmail.com" class="w-full p-2 rounded-lg bg-gray-700 text-gray-900 dark:text-white mt-2" required />
302-
</div>
303-
304-
<!-- Phone -->
305-
<div class="mb-3">
306-
<label for="phone" class="block text-sm font-medium">Phone number:</label>
307-
<input type="tel" id="phone" name="phone" placeholder="IN +91 000-000-0000" class="w-full p-2 rounded-lg bg-gray-700 text-gray-900 dark:text-white mt-2" pattern="[0-9]{10}" required />
308-
</div>
309-
310-
<!-- Message -->
311-
<div class="mb-3">
312-
<label for="message" class="block text-sm font-medium">Message:</label>
313-
<textarea id="message" name="message" rows="4" class="w-full p-2 rounded-lg bg-gray-700 text-gray-900 dark:text-white mt-2" required></textarea>
314-
</div>
315-
316-
<!-- Submit Button -->
317-
<div class="text-center mt-5">
318-
<button type="submit" class="bg-green-500 text-white py-2 px-6 rounded-full hover:bg-green-600">Send Message</button>
319-
</div>
320-
321-
<!-- Success Message -->
322-
<p id="success-msg" class="text-green-500 mt-4 hidden">Message sent successfully!</p>
323-
</form>
324-
325-
</div>
326-
</body>
327-
328-
329-
<!-- Map Section -->
330-
<div class="map-container mt-5">
331-
<iframe
332-
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.491339599082!2d77.59456291440737!3d12.971598616057055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1687391781db%3A0x5ef3b46e7aa569b6!2sBangalore%2C%20Karnataka%2C%20India!5e0!3m2!1sen!2sin!4v1638827560011"
333-
width="100%"
334-
height="350"
335-
style="border: 0"
336-
allowfullscreen=""
337-
loading="lazy"
338-
></iframe>
339-
</div>
340-
341-
342-
<!-- Social Media Icons -->
343-
<div class="social-icons text-center mt-5">
344-
<a href="https://www.instagram.com/dev_with_ctoic" class="text-gray-300 hover:text-green-500" target="_blank">
345-
<i class="bi bi-instagram me-2"></i>
346-
</a>
347-
<a href="https://x.com/Ct0ic" class="text-gray-300 hover:text-green-500 mx-4" target="_blank">
348-
<i class="bi bi-twitter-x me-2"></i>
349-
</a>
350-
<a href="https://www.linkedin.com/in/ctoic/" class="text-gray-300 hover:text-green-500" target="_blank">
351-
<i class="bi bi-linkedin me-2"></i>
352-
</a>
353-
<a href="https://github.com/Ctoic" class="text-gray-300 hover:text-green-500 mx-4" target="_blank">
354-
<i class="bi bi-github me-2"></i>
355-
</a>
356-
</div>
357-
358-
359-
</div>
309+
310+
<!-- Hero Section -->
311+
<section class="hero-section bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-center py-20 px-4">
312+
<div class="container mx-auto max-w-4xl">
313+
<h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
314+
Get in <span class="text-green-400">Touch</span>
315+
</h1>
316+
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
317+
Have questions or feedback? We'd love to hear from you. Reach out and let's connect!
318+
</p>
319+
</div>
320+
</section>
321+
322+
<!-- Contact Section -->
323+
<section class="rounded-5 p-5 my-5">
324+
<h2 class="display-5 page-title fw-semibold mb-3 text-center">Contact Us</h2>
325+
<p class="text-center mb-5">Our friendly team would love to hear from you!</p>
326+
327+
<!-- Contact Form -->
328+
<form id="contact-form" class="space-y-4 max-w-2xl mx-auto">
329+
<!-- First and Last Name in Two Columns -->
330+
<div class="row mb-3">
331+
<div class="col-md-6">
332+
<label for="first-name" class="block text-sm font-medium mb-2">First name:</label>
333+
<input type="text" id="first-name" name="first-name" placeholder="John" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-green-500 focus:outline-none" required />
334+
</div>
335+
<div class="col-md-6">
336+
<label for="last-name" class="block text-sm font-medium mb-2">Last name:</label>
337+
<input type="text" id="last-name" name="last-name" placeholder="Doe" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-green-500 focus:outline-none" required />
338+
</div>
339+
</div>
340+
341+
<!-- Email -->
342+
<div class="mb-3">
343+
<label for="email" class="block text-sm font-medium mb-2">Email:</label>
344+
<input type="email" id="email" name="email" placeholder="contact-us@example.com" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-green-500 focus:outline-none" required />
345+
</div>
346+
347+
<!-- Phone -->
348+
<div class="mb-3">
349+
<label for="phone" class="block text-sm font-medium mb-2">Phone number:</label>
350+
<input type="tel" id="phone" name="phone" placeholder="IN +91 000-000-0000" class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-green-500 focus:outline-none" pattern="[0-9+\-\s]+" required />
351+
</div>
352+
353+
<!-- Message -->
354+
<div class="mb-3">
355+
<label for="message" class="block text-sm font-medium mb-2">Message:</label>
356+
<textarea id="message" name="message" rows="5" placeholder="Your message here..." class="w-full p-3 rounded-lg bg-gray-700 text-white border border-gray-600 focus:border-green-500 focus:outline-none resize-vertical" required></textarea>
357+
</div>
358+
359+
<!-- Submit Button -->
360+
<div class="text-center mt-5">
361+
<button type="submit" class="bg-green-500 text-white py-3 px-8 rounded-full hover:bg-green-600 transition duration-300 focus:outline-none focus:ring-4 focus:ring-green-300">Send Message</button>
362+
</div>
363+
364+
<!-- Success Message -->
365+
<p id="success-msg" class="text-green-500 mt-4 text-center hidden">Message sent successfully!</p>
366+
</form>
367+
</section>
368+
369+
<!-- Map Section -->
370+
<section class="rounded-5 p-5 my-5">
371+
<div class="map-container">
372+
<iframe
373+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3916.491339599082!2d77.59456291440737!3d12.971598616057055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1687391781db%3A0x5ef3b46e7aa569b6!2sBangalore%2C%20Karnataka%2C%20India!5e0!3m2!1sen!2sin!4v1638827560011"
374+
width="100%"
375+
height="350"
376+
style="border: 0; border-radius: 12px;"
377+
allowfullscreen=""
378+
loading="lazy"
379+
title="Location Map"
380+
></iframe>
381+
</div>
382+
</section>
383+
384+
<!-- Social Media Icons -->
385+
<section class="text-center my-5">
386+
<h3 class="text-2xl font-semibold mb-4">Follow Us</h3>
387+
<div class="social-icons">
388+
<a href="https://www.instagram.com/dev_with_ctoic" class="text-gray-300 hover:text-green-500 mx-3 transition duration-300" target="_blank" aria-label="Instagram">
389+
<i class="bi bi-instagram text-3xl"></i>
390+
</a>
391+
<a href="https://x.com/Ct0ic" class="text-gray-300 hover:text-green-500 mx-3 transition duration-300" target="_blank" aria-label="Twitter">
392+
<i class="bi bi-twitter-x text-3xl"></i>
393+
</a>
394+
<a href="https://www.linkedin.com/in/ctoic/" class="text-gray-300 hover:text-green-500 mx-3 transition duration-300" target="_blank" aria-label="LinkedIn">
395+
<i class="bi bi-linkedin text-3xl"></i>
396+
</a>
397+
<a href="https://github.com/Ctoic" class="text-gray-300 hover:text-green-500 mx-3 transition duration-300" target="_blank" aria-label="GitHub">
398+
<i class="bi bi-github text-3xl"></i>
399+
</a>
400+
</div>
401+
</section>
402+
</main>
360403
<!-- Footer -->
361404
<div id="footer-placeholder" class="mt-auto"></div>
362405
<!-- auto-type script -->

0 commit comments

Comments
 (0)