Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Improvement in Apply internship form #537

Merged
merged 3 commits into from
Oct 17, 2024
Merged

fix: Improvement in Apply internship form #537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
87dab21
Improved ui of internship form and included footer.
SubramanyaKS Oct 16, 2024
26d533d
added icon to apply button
SubramanyaKS Oct 16, 2024
a909262
removed unwanted css
SubramanyaKS Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions assets/css/career.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
* {
font-size: large;
}

body {
margin-top: 180px;
}

.application-form {
display: flex;
align-items: center;
justify-content: center;
margin-left: 500px;
}

.helpful-buttons {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}

.helpful-btn {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}

.helpful-btn:hover {
background-color: #0056b3;
}

.helpful-result {
margin-left: 10px;
font-weight: bold;
}
146 changes: 81 additions & 65 deletions careers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./assets/font/font.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/Faq.css">
<link rel="preload" as="image" href="./assets/images/faq.png">
<link rel="preload" as="image" href="./assets/images/hero-bg.png">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
Expand All @@ -31,34 +31,34 @@
display: flex;
align-items: center;
justify-content: center;
margin-left: 500px;
}

.helpful-buttons {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
#position {
font-size: 1.2rem;
padding: 10px;
}
.form-select {
border: 1px solid #ced4da;
border-radius: 0.3rem;
}

.helpful-btn {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
.form-select:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.submit-button{
background-color: hsl(357, 100%, 75%);
color:white;

.helpful-btn:hover {
background-color: #0056b3;
}
.submit-button:hover{
background-color: hsl(357, 72%, 67%);


.helpful-result {
margin-left: 10px;
font-weight: bold;
}
.form-group input{
background-color: #fff;
}

</style>
</head>

Expand Down Expand Up @@ -100,10 +100,11 @@
<div class="overlay" data-overlay data-nav-toggler></div>
</div>
</header>
<main>
<main class="main">
<section class="internship-info">
<div class="container">
<h1>Internship Opportunities: Gain Valuable Experience with Skillwise</h1>
<h1 class="headline-md mb-5 text-center" data-aos="zoom-in">Internship Opportunities at SkillWise</h1>
<h2>Gain Valuable Experience with Skillwise</h2>
<p>At Skillwise, we're committed to fostering the next generation of talent. We invite motivated individuals to
join our dynamic team and contribute to our ongoing success story. Our internship program offers a unique
opportunity to gain hands-on experience in a collaborative, innovative environment that prioritizes personal
Expand All @@ -128,51 +129,66 @@ <h2>What We're Looking For:</h2>
towards unprecedented success.</p>
</div>
</section>
<section class="application-form">
<div class="container">
<h2>Apply for Internship</h2>
<form id="internship-application-form" action="#" method="POST">
<div class="form-group">
<label for="first-name">First name</label>
<input type="text" id="first-name" name="first-name" maxlength="100" required>
</div>
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text" id="last-name" name="last-name" maxlength="100" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="250" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" maxlength="50" required>
</div>
<div style="margin: 20px 0px;" class="form-group">
<label for="position">Position</label>
<select id="position" name="position" class="form-group" style="font: large;" required>
<option value="" disabled selected>Select a position</option>
<option value="Frontend Developer">Frontend Developer</option>
<option value="Blockchain Enthusiast">Blockchain Enthusiast</option>
<option value="Digital Marketing">Digital Marketing</option>
<option value="Graphic Designer">Graphic Designer</option>
<option value="Researcher">Researcher</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="start-date">Start Date</label>
<input type="date" id="start-date" name="start-date" required>
</div>
<div class="form-group">
<label for="cv-linkedin">Link to CV/LinkedIn</label>
<input type="url" id="cv-linkedin" name="cv-linkedin">
</div>
<button style="font-size: 18px; margin-top: 5px;" type="submit" class="btn btn-primary w-100">Apply</button>
</form>
<p id="form-submission-message" style="display: none;">Thank you! We'll be in touch.</p>
<section class="application-form" data-aos="zoom-in">
<div class="internship-form rounded shadow-lg border p-5">
<div class="container">
<h2 class="text-center mb-5 fw-bold">Apply for Internship</h2>
<form id="internship-application-form" action="#" method="POST">
<div class="form-group mb-3">
<label class="fw-bold" for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name" maxlength="100" required>
</div>
<div class="form-group mb-3">
<label class="fw-bold" for="last-name">Last name:</label>
<input type="text" id="last-name" name="last-name" maxlength="100" required>
</div>
<div class="form-group mb-3">
<label class="fw-bold" for="email">Email:</label>
<input type="email" id="email" name="email" maxlength="250" required>
</div>
<div class="form-group mb-3">
<label class="fw-bold" for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" maxlength="50" required>
</div>
<div class="form-group mb-3 my-4">
<label for="position" class="fw-bold">Position:</label>
<select id="position" name="position" class="form-select form-control-lg" required>
<option value="" disabled selected>Select a position</option>
<option value="Frontend Developer">Frontend Developer</option>
<option value="Blockchain Enthusiast">Blockchain Enthusiast</option>
<option value="Digital Marketing">Digital Marketing</option>
<option value="Graphic Designer">Graphic Designer</option>
<option value="Researcher">Researcher</option>
<option value="Other">Other</option>
</select>
</div>

<div class="form-group mb-3">
<label class="fw-bold" for="start-date">Start Date: </label>
<input type="date" id="start-date" name="start-date" required>
</div>
<div class="form-group mb-3">
<label class="fw-bold" for="cv-linkedin">Link to CV/LinkedIn: </label>
<input type="url" id="cv-linkedin" name="cv-linkedin">
</div>
<div class="mt-5 mb-3">
<button style="font-size: 18px;" type="submit" class="btn submit-button w-100">Apply <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</form>
<p id="form-submission-message" style="display: none;">Thank you! We'll be in touch.</p>
</div>
</div>
</section>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
<a href="copy.html"> © Copyright Policy <time id="year"></time> </a> All Rights Reserved by Priya Ghosal
<br>
Made with ♥ by Priya Ghosal
</p>

</div>
</div>
</main>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" type="module"></script>
<script src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js" nomodule></script>
Expand Down