Skip to content

Commit

Permalink
Merge pull request #612 from SubramanyaKS/bugcareer
Browse files Browse the repository at this point in the history
fix: navbar non functionality and alignment in career page
  • Loading branch information
anuragverma108 authored Oct 19, 2024
2 parents f66c7e9 + dc746a9 commit d0de4b6
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 119 deletions.
62 changes: 45 additions & 17 deletions Faq.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<!-- Animation on Scroll -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- menu icon link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />

<style>
/* Styling for the "Was this helpful?" buttons */
Expand Down Expand Up @@ -86,31 +86,40 @@
<li class="navbar-item">
<a href="Faq.html" class="navbar-link title-sm" data-nav-link>FAQ</a>
</li>
<li class="navbar-item">
<a href="/careers.html" class="navbar-link title-sm" data-nav-link>Careers</a>
</li>
</ul>
</nav>

<a href="./signin.html" class="btn btn-secondary">Start Free Trial</a>

<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<i class="fa-solid fa-bars"></i>
</button>
</button>

<div class="overlay" data-overlay data-nav-toggler></div>
</div>
</header>

<section class="section hero has-bg-image" aria-labelledby="hero-label" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<section class="section hero has-bg-image" aria-labelledby="hero-label"
style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div class="container" style="margin: 10rem auto 0; width:80%">
<div class="hero-content" style="max-width: 600px;">
<h1 class="headline-lg" id="hero-label" data-aos="zoom-in">
Frequently <span class="span">Asked</span> Questions
</h1>
<p class="title-md has-before" data-aos="fade-right">

<p> <b>Welcome to SkillWise’s Learning Hub!</b></p>

<p> At SkillWise, we’re committed to delivering an exceptional learning experience tailored to your goals. Whether you’re exploring new courses, seeking flexible payment options, or curious about certifications, our FAQ section has you covered. We’ve crafted it to ensure you find clear, helpful answers that guide you every step of the way. Your success is our priority, and we’re here to make your journey enriching, seamless, and empowering—so you can focus on what truly matters: achieving your full potential.
</p>

<p> <b>Welcome to SkillWise’s Learning Hub!</b></p>

<p> At SkillWise, we’re committed to delivering an exceptional learning experience tailored to your
goals. Whether you’re exploring new courses, seeking flexible payment options, or curious about
certifications, our FAQ section has you covered. We’ve crafted it to ensure you find clear, helpful
answers that guide you every step of the way. Your success is our priority, and we’re here to make
your journey enriching, seamless, and empowering—so you can focus on what truly matters: achieving
your full potential.
</p>
</p>
</div>

Expand All @@ -126,15 +135,19 @@ <h1 data-aos="zoom-in">
</h1>
<br>
<div class="search-box" style="text-align: center; margin-bottom: 20px;">
<input type="text" id="searchInput" placeholder="Search FAQs..." onkeyup="filterFAQs()" style="width: 80%; padding: 10px; font-size: 16px;">
<input type="text" id="searchInput" placeholder="Search FAQs..." onkeyup="filterFAQs()"
style="width: 80%; padding: 10px; font-size: 16px;">
</div>

<div class="accordian">

<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">1. What type of courses does SkillWise offer?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>SkillWise offers a wide range of courses across various categories, including Data Science, UI/UX
Expand All @@ -153,7 +166,10 @@ <h1 data-aos="zoom-in">
<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">2. What payment methods are accepted?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>We accept a variety of payment methods including credit/debit cards, PayPal, and other online
Expand All @@ -171,7 +187,10 @@ <h1 data-aos="zoom-in">
<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">3. Will I receive a certificate after completing a course?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>Yes! All courses provide a certificate of completion that can be downloaded and added to your
Expand All @@ -189,7 +208,10 @@ <h1 data-aos="zoom-in">
<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">4. What should I do if I encounter issues with the course videos?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>If you're experiencing problems with video playback or course content, try refreshing your
Expand All @@ -208,7 +230,10 @@ <h1 data-aos="zoom-in">
<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">5. Can I get a refund if I'm not satisfied with a course?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>Yes, we have a refund policy in place. Please refer to our Refund Policy section for more details
Expand All @@ -226,7 +251,10 @@ <h1 data-aos="zoom-in">
<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">6. How long do I have access to a course after purchasing it?</p>
<span class="expandToggle"><p class="expand">+</p><p class="revert">-</p></span>
<span class="expandToggle">
<p class="expand">+</p>
<p class="revert">-</p>
</span>
</div>
<div class="FAQ-content">
<p>Once you purchase a course, you get lifetime access, allowing you to learn at your own pace.</p>
Expand Down Expand Up @@ -256,7 +284,7 @@ <h1 data-aos="zoom-in">
<script>
function handleHelpful(button, response) {
const resultText = button.parentElement.querySelector(".helpful-result");

// Disable the buttons after one selection
const buttons = button.parentElement.querySelectorAll("button");
buttons.forEach(btn => {
Expand All @@ -275,4 +303,4 @@ <h1 data-aos="zoom-in">
</script>
</body>

</html>
</html>
94 changes: 72 additions & 22 deletions assets/css/career.css
Original file line number Diff line number Diff line change
@@ -1,40 +1,90 @@
* {
font-size: large;
.section {
color: black;
margin: 0;
}

body {
margin-top: 180px;
#position {
font-size: 1.2rem;
padding: 10px;
}

.text-center {
text-align: center !important;
}

.my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}

.mb-3 {
margin-bottom: 1rem !important;
}

.mt-3 {
margin-top: 1rem !important;
}

.mb-4 {
margin-bottom: 1.5rem !important;
}

.mb-5 {
margin-bottom: 3rem !important;
}

.p-5 {
padding: 3rem;
}

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

.helpful-buttons {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
.fw-bold {
font-weight: bold !important;
}

.form-select {
border: 1px solid #ced4da;
border-radius: 0.3rem;
}

.form-select:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.helpful-btn {
padding: 5px 10px;
border: none;
background-color: #007bff;
.submit-button {
background-color: hsl(357, 100%, 75%);
color: white;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
text-align: center !important;
display: inline-block;
font-weight: 400;
vertical-align: middle;
border: 1px solid transparent;
padding: 1rem;
border-radius: 0.25rem;

}

.w-100 {
width: 100% !important;
}

.submit-button:hover {
background-color: hsl(357, 72%, 67%);

}

.helpful-btn:hover {
background-color: #0056b3;
.form-group input {
background-color: #fff;
}

.helpful-result {
margin-left: 10px;
font-weight: bold;
.internship-form {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
border-radius: 45px;
padding: 2%;
}
Loading

0 comments on commit d0de4b6

Please sign in to comment.