Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact - Pranit Chilbule</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Import existing theme variables */ | |
| :root { | |
| --bg-primary: #0d1117; | |
| --bg-secondary: #010409; | |
| --bg-card: #21262d; | |
| --text-primary: #c9d1d9; | |
| --text-secondary: rgba(201, 209, 217, 0.8); | |
| --accent-blue: #58a6ff; | |
| --accent-green: #10a37f; | |
| --header-bg: rgba(0, 0, 0, 0.6); | |
| --border-color: #30363d; | |
| } | |
| /* Base styles */ | |
| body { | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| } | |
| /* Contact Form Section */ | |
| .contact-section { | |
| max-width: 600px; | |
| margin: 100px auto 4rem; | |
| padding: 0 2rem; | |
| } | |
| .form-group { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 0.75rem; | |
| color: var(--text-secondary); | |
| transition: all 0.3s ease; | |
| pointer-events: none; | |
| font-size: 0.9rem; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--accent-blue); | |
| box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); | |
| } | |
| .form-input:focus + .form-label, | |
| .form-input:not(:placeholder-shown) + .form-label { | |
| transform: translateY(-1.5rem) scale(0.8); | |
| background: var(--bg-primary); | |
| padding: 0 0.5rem; | |
| color: var(--accent-blue); | |
| } | |
| textarea.form-input { | |
| min-height: 150px; | |
| resize: vertical; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background: var(--accent-blue); | |
| color: white; | |
| border: none; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-btn:hover { | |
| background: #4a8fd6; | |
| transform: translateY(-2px); | |
| } | |
| /* Direct Contact Section */ | |
| .direct-contact { | |
| margin-top: 3rem; | |
| text-align: center; | |
| padding: 2rem; | |
| background: var(--bg-card); | |
| border-radius: 1rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| .contact-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--accent-blue); | |
| text-decoration: none; | |
| margin: 0.5rem 0; | |
| transition: all 0.3s ease; | |
| } | |
| .contact-link:hover { | |
| color: var(--accent-green); | |
| } | |
| .resume-btn { | |
| display: inline-block; | |
| margin-top: 1.5rem; | |
| padding: 0.75rem 2rem; | |
| background: var(--accent-green); | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .resume-btn:hover { | |
| background: #0c8a6a; | |
| transform: translateY(-2px); | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: all 0.6s ease; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: var(--header-bg); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent-blue); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--accent-blue); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header from existing pages --> | |
| <header> | |
| <nav> | |
| <div class="logo">Pranit Chilbule</div> | |
| <ul class="nav-links"> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="about.html">About</a></li> | |
| <li><a href="projects.html">Projects</a></li> | |
| <li><a href="achievements.html">Achievements</a></li> | |
| <li><a href="contact.html">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <section class="contact-section"> | |
| <h2 class="fade-in">Get In Touch</h2> | |
| <form id="contactForm" class="fade-in" onsubmit="handleSubmit(event)"> | |
| <div class="form-group"> | |
| <input type="text" id="name" class="form-input" placeholder=" " required> | |
| <label for="name" class="form-label">Name</label> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" id="email" class="form-input" placeholder=" " required> | |
| <label for="email" class="form-label">Email</label> | |
| </div> | |
| <div class="form-group"> | |
| <textarea id="message" class="form-input" placeholder=" " required></textarea> | |
| <label for="message" class="form-label">Message</label> | |
| </div> | |
| <button type="submit" class="submit-btn">Send Message</button> | |
| </form> | |
| <div class="direct-contact fade-in"> | |
| <h3>Direct Contact</h3> | |
| <a href="tel:+919763059811" class="contact-link"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/> | |
| </svg> | |
| +91-9763059811 | |
| </a> | |
| <br> | |
| <a href="mailto:[email protected]" class="contact-link"> | |
| <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"> | |
| <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/> | |
| </svg> | |
| [email protected] | |
| </a> | |
| <br> | |
| <a href="/assets/Pranit_Chilbule_Resume.pdf" class="resume-btn" download> | |
| Download Résumé | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer from existing pages --> | |
| <footer>...</footer> | |
| <script> | |
| // Form submission handler | |
| function handleSubmit(event) { | |
| event.preventDefault(); | |
| const formData = { | |
| name: document.getElementById('name').value, | |
| email: document.getElementById('email').value, | |
| message: document.getElementById('message').value | |
| }; | |
| console.log('Form submitted:', formData); | |
| // Add your form submission logic here | |
| event.target.reset(); | |
| } | |
| // Animation observer | |
| const observer = new IntersectionObserver( | |
| (entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, | |
| { threshold: 0.1 } | |
| ); | |
| document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); | |
| </script> | |
| </body> | |
| </html> |