You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
6.2 KiB
113 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact - Sasha Lorenc's Portfolio</title>
|
|
<link rel="stylesheet" href="../css/contacts_css.css">
|
|
<link rel="stylesheet" href="../css/global.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<h1>Sasha Lorenc</h1>
|
|
<ul>
|
|
<li><a href="accueil.html" data-translate="nav-home">Home</a></li>
|
|
<li><a href="about.html" data-translate="nav-about">About</a></li>
|
|
<li><a href="projet.html" data-translate="nav-projects">Projects</a></li>
|
|
<li><a href="skills.html" data-translate="nav-skills">Skills</a></li>
|
|
<li><a href="contacts.html" data-translate="nav-contact">Contact</a></li>
|
|
</ul>
|
|
<div class="nav-controls">
|
|
<div class="language-selector-container">
|
|
<select id="language-selector" aria-label="Change language">
|
|
<option value="fr">FR</option>
|
|
<option value="en">EN</option>
|
|
<option value="esp">ESP</option>
|
|
</select>
|
|
</div>
|
|
<button id="settings-icon" aria-label="Settings">⚙️</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="color-picker" class="color-picker" style="display: none;" role="dialog" aria-labelledby="color-picker-title">
|
|
<span id="color-picker-title" data-translate="accent-color">Accent color:</span>
|
|
<label><input type="radio" name="accent-color" value="#1abc9c" checked> <span data-translate="default">défaut</span></label>
|
|
<label><input type="radio" name="accent-color" value="#e74c3c"> <span data-translate="red">rouge</span></label>
|
|
<label><input type="radio" name="accent-color" value="#f39c12"> <span data-translate="orange">orange</span></label>
|
|
<label><input type="radio" name="accent-color" value="#2ecc71"> <span data-translate="green">vert</span></label>
|
|
<label><input type="radio" name="accent-color" value="#e84393"> <span data-translate="pink">rose</span></label>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<section class="contact">
|
|
<h2 data-translate="contact-title">Contact Me</h2>
|
|
<p data-translate="contact-desc">Don't hesitate to contact me for any questions or collaboration. I would be happy to discuss with you!</p>
|
|
|
|
<form id="contactForm">
|
|
<div class="form-group">
|
|
<label class="form-label" for="name" data-translate="name">Name <span class="required">*</span></label>
|
|
<input type="text" id="name" name="name" required minlength="2" maxlength="50"
|
|
data-translate="name-placeholder" placeholder="Your full name"
|
|
pattern="[A-Za-zÀ-ÿ\s]+" title="Please enter a valid name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="email">Email <span class="required">*</span></label>
|
|
<input type="email" id="email" name="email" required
|
|
data-translate="email-placeholder" placeholder="example@email.com"
|
|
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="subject" data-translate="subject">Subject <span class="required">*</span></label>
|
|
<select id="subject" name="subject" required>
|
|
<option value="" data-translate="select-subject">Select a subject</option>
|
|
<option value="collaboration" data-translate="collaboration">Collaboration proposal</option>
|
|
<option value="question" data-translate="general-question">General question</option>
|
|
<option value="projet" data-translate="project-discussion">Project discussion</option>
|
|
<option value="autre" data-translate="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="message" data-translate="message">Message <span class="required">*</span></label>
|
|
<textarea id="message" name="message" rows="5" required minlength="10" maxlength="1000"
|
|
data-translate="message-placeholder" placeholder="Your message here (10-1000 characters)"></textarea>
|
|
<div class="character-count"><span id="charCount">0</span>/1000</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-container">
|
|
<input type="checkbox" required name="privacy">
|
|
<span class="checkmark"></span>
|
|
<span data-translate="privacy-policy">I agree that my data will be used to be contacted</span>
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn">
|
|
<span class="btn-text" data-translate="send">Send</span>
|
|
<span class="btn-icon">📨</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="contact-info">
|
|
<p><strong>Email:</strong> sasha.LORENC@etu.uca.fr</p>
|
|
<p><strong data-translate="follow-me">Follow me:</strong>
|
|
<a href="https://www.linkedin.com/in/sasha-lorenc-9a073b278/" target="_blank" rel="noopener noreferrer">LinkedIn</a> |
|
|
<a href="https://codefirst.iut.uca.fr/git/sasha.lorenc" target="_blank" rel="noopener noreferrer">GitHub</a> |
|
|
<a href="#" target="_blank" rel="noopener noreferrer">Twitter</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p><span data-translate="copyright">© 2024 Sasha Lorenc. All rights reserved.</span></p>
|
|
</footer>
|
|
<button id="scroll-to-top" title="Scroll to top">↑</button>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
|
|
<script src="../js/translations.js"></script>
|
|
<script src="../js/common.js"></script>
|
|
<script src="../js/contact.js"></script>
|
|
</body>
|
|
</html>
|