Job Application | Spidroid Careers</titl> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/forms.css"> <script defer src="js/animations.js"></script> <script defer src="js/forms.js"></script> <script defer src="js/application.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body>  <header id="header"> <div class="container"> <nav class="navbar"> <a href="index.html" class="logo">SPIDROID<span>.</span></a> <ul class="nav-links"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="products.html">Products</a></li> <li><a href="careers.html">Careers</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </nav> </div> </header>  <section class="page-hero"> <div class="container"> <div class="hero-content fade-in"> <h1 id="positionTitle">Join Our Team</h1> <p id="positionSubtitle">Apply for a position at Spidroid Technologies</p> </div> </div> </section>  <section class="section application-form"> <div class="container"> <div class="application-progress fade-in"> <div class="progress-step active">1</div> <div class="progress-bar"></div> <div class="progress-step">2</div> <div class="progress-bar"></div> <div class="progress-step">3</div> </div> <form id="jobApplicationForm"> <div class="form-step active" id="step1"> <h2>Personal Information</h2> <div class="form-grid"> <div class="form-group"> <label for="firstName">First Name *</label> <input type="text" id="firstName" required> </div> <div class="form-group"> <label for="lastName">Last Name *</label> <input type="text" id="lastName" required> </div> <div class="form-group"> <label for="email">Email Address *</label> <input type="email" id="email" required> </div> <div class="form-group"> <label for="phone">Phone Number *</label> <input type="tel" id="phone" required> </div> <div class="form-group"> <label for="location">Location *</label> <input type="text" id="location" required> </div> <div class="form-group"> <label for="linkedin">LinkedIn Profile URL</label> <input type="url" id="linkedin"> </div> </div> <div class="form-buttons"> <button type="button" class="btn next-btn">Next</button> </div> </div> <div class="form-step" id="step2"> <h2>Professional Information</h2> <div class="form-group"> <label for="position">Position Applying For *</label> <input type="text" id="position" readonly> </div> <div class="form-group"> <label for="resume">Upload Resume/CV *</label> <div class="file-upload"> <input type="file" id="resume" accept=".pdf,.doc,.docx" required> <label for="resume" class="file-label"> <i class="fas fa-cloud-upload-alt"></i> <span>Choose file</span> </label> <span class="file-name">No file chosen</span> </div> </div> <div class="form-group"> <label for="coverLetter">Cover Letter</label> <textarea id="coverLetter" rows="6" placeholder="Why are you interested in this position?"></textarea> </div> <div class="form-group"> <label for="portfolio">Portfolio Link (GitHub, Behance, etc.)</label> <input type="url" id="portfolio"> </div> <div class="form-buttons"> <button type="button" class="btn prev-btn">Previous</button> <button type="button" class="btn next-btn">Next</button> </div> </div> <div class="form-step" id="step3"> <h2>Additional Information</h2> <div class="form-group"> <label>How did you hear about us? *</label> <select id="source" required> <option value="">Select an option</option> <option value="linkedin">LinkedIn</option> <option value="job-board">Job Board (Indeed, Glassdoor, etc.)</option> <option value="referral">Employee Referral</option> <option value="company-website">Company Website</option> <option value="event">Career Event</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <label>Are you legally authorized to work in the country where this position is located? *</label> <div class="radio-group"> <label> <input type="radio" name="workAuthorization" value="yes" required> Yes </label> <label> <input type="radio" name="workAuthorization" value="no" required> No </label> </div> </div> <div class="form-group"> <label>Will you now or in the future require sponsorship for employment visa status? *</label> <div class="radio-group"> <label> <input type="radio" name="visaSponsorship" value="yes" required> Yes </label> <label> <input type="radio" name="visaSponsorship" value="no" required> No </label> </div> </div> <div class="form-group"> <label class="checkbox"> <input type="checkbox" id="privacyAgree" required> <span>I agree to the processing of my data according to the <a href="privacy.html" target="_blank">Privacy Policy</a></span> </label> </div> <div class="form-group"> <label class="checkbox"> <input type="checkbox" id="eeoAgree" required> <span>I wish to be considered for employment without regard to race, color, religion, sex, sexual orientation, gender identity, national origin, age, disability, or any other protected status</span> </label> </div> <div class="form-buttons"> <button type="button" class="btn prev-btn">Previous</button> <button type="submit" class="btn">Submit Application</button> </div> </div> </form> </div> </section>  <footer>  </footer> <script src="js/main.js"></script> <script src="js/application.js"></script> </body> </html>