Skip to content

Commit

Permalink
Merge branch 'PriyaGhosal:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@sainKunal
sainKunal authored Oct 11, 2024
2 parents 958f1e7 + 2cfd781 commit a94fa77
Show file tree
Hide file tree
Showing 14 changed files with 515 additions and 112 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
142 changes: 105 additions & 37 deletions Faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,74 +7,84 @@
<title>SkillWise FAQ</title>
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

<!--
- custom font link
-->
<!-- Custom font link -->
<link rel="stylesheet" href="./assets/font/font.css">

<!--
- custom css link
-->
<!-- Custom CSS link -->
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/Faq.css">


<!--
- preload images
-->
<!-- Preload images -->
<link rel="preload" as="image" href="./assets/images/faq.png">
<link rel="preload" as="image" href="./assets/images/hero-bg.png">

<!-- Animation on Scroll -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

<style>
/* Styling for the "Was this helpful?" buttons */
.helpful-buttons {
margin-top: 10px;
display: flex;
align-items: center;
gap: 10px;
}

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

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

.helpful-result {
margin-left: 10px;
font-weight: bold;
}
</style>
</head>

<body style="background-image: url('./assets/images/hero-bg.png');">
<!-- Navbar -->
<header class="header" data-header>
<div class="container">

<a href="./index.html">
<img src="./assets/images/Skillwise_logo.jpg" width="50" height="10" alt="SkillWise home">
</a>

<nav class="navbar" data-navbar>

<div class="navbar-top">
<a>
<img src="./assets/images/Skillwise_logo.jpg" width="50" height="10" alt="SkillWise home">
</a>

<button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
<ion-icon name="close-outline" aria-hidden="true"></ion-icon>
</button>
</div>

<ul class="navbar-list">

<li class="navbar-item">
<a href="./index.html" class="navbar-link title-sm" data-nav-link>Home</a>
</li>

<li class="navbar-item">
<a href="./index.html#courses" class="navbar-link title-sm" data-nav-link>Courses</a>
</li>

<li class="navbar-item">
<a href="./index.html#blog" class="navbar-link title-sm" data-nav-link>Blog</a>
</li>

<li class="navbar-item">
<a href="./index.html#contact" class="navbar-link title-sm" data-nav-link>Contacts</a>
</li>

<li class="navbar-item">
<a href="Faq.html" class="navbar-link title-sm" data-nav-link>FAQ</a>
</li>

</ul>

</nav>

<a href="./signin.html" class="btn btn-secondary">Start Free Trial</a>
Expand All @@ -84,30 +94,26 @@
</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">
At SkillWise, we are dedicated to providing a seamless learning experience for all our users.
Whether you're curious about our course offerings, payment options, or certification details, you’ll
find the answers to your most common questions here. We aim to make your journey with us as smooth
and enjoyable as possible, empowering you to achieve your learning goals.
</p>

</div>

<figure class="hero-banner" data-aos="zoom-out-up">
<img src="./assets/images/faq.png" width="590" height="620" alt="hero banner" class="w-100">
</figure>

</div>
</section>

Expand All @@ -128,7 +134,15 @@ <h1 data-aos="zoom-in">
Design, Modern Physics, Music Production, Finances, and more. All courses are designed by
experts and provide practical knowledge for learners of all levels.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>

<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">2. What payment methods are accepted?</p>
Expand All @@ -138,6 +152,13 @@ <h1 data-aos="zoom-in">
<p>We accept a variety of payment methods including credit/debit cards, PayPal, and other online
payment gateways. For more details, please refer to our Payment Method section.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>

<div class="item" data-aos="fade-down">
Expand All @@ -149,6 +170,13 @@ <h1 data-aos="zoom-in">
<p>Yes! All courses provide a certificate of completion that can be downloaded and added to your
resume or LinkedIn profile.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>

<div class="item" data-aos="fade-down">
Expand All @@ -161,42 +189,82 @@ <h1 data-aos="zoom-in">
browser or checking your internet connection. You can also reach out to our support team for
further assistance.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>

<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">5. How long do I have access to a course after purchasing it?</p>
<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>
</div>
<div class="FAQ-content">
<p>Once you purchase a course, you get lifetime access, allowing you to learn at your own pace.</p>
<p>Yes, we have a refund policy in place. Please refer to our Refund Policy section for more details
on how to request a refund.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>

<div class="item" data-aos="fade-down">
<div class="FAQ-title">
<p class="faqQuestion">6. Do I need any prerequisites to enroll in a course?</p>
<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>
</div>
<div class="FAQ-content">
<p>Most beginner courses do not require any prerequisites, but intermediate and advanced courses
might need some prior knowledge. You can find any required prerequisites mentioned in the course
description.</p>
<p>Once you purchase a course, you get lifetime access, allowing you to learn at your own pace.</p>
</div>

<div class="helpful-buttons">
<p>Was this helpful?</p>
<button class="helpful-btn" onclick="handleHelpful(this, 'yes')">Yes</button>
<button class="helpful-btn" onclick="handleHelpful(this, 'no')">No</button>
<p class="helpful-result"></p>
</div>
</div>


<div class="FAQ-ShowMore">
<button id="showMoreBtn">Show More</button>
</div>

</div>
</div>
<!-- Animation on Scroll -->

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script src="./assets/js/scriptfaq.js"></script>

<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 => {
btn.disabled = true;
});

// Display feedback based on the user's choice
if (response === "yes") {
resultText.textContent = "Thank you for your feedback!";
resultText.style.color = "black";
} else {
resultText.textContent = "We're sorry to hear that. We'll work on improving!";
resultText.style.color = "black";
}
}
</script>
</body>

</html>
</html>
7 changes: 7 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -570,6 +570,13 @@ Thank you for your contributions to SkillWise!Every contribution, no matter the
<sub><b>Anirban Singha</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Adil-Khan-N">
<img src="https://avatars.githubusercontent.com/u/170500024?v=4" width="100;" alt="Adil-Khan-N"/>
<br />
<sub><b>Adil-Khan-N</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Aakansha-Chavan">
<img src="https://avatars.githubusercontent.com/u/181594189?v=4" width="100;" alt="Aakansha-Chavan"/>
Expand Down
Binary file modified assets/.DS_Store
View file
Binary file not shown.
36 changes: 33 additions & 3 deletions assets/css/darkmode.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ button {
cursor: pointer;
}


html {
font-family: var(--ff-gilroy);
font-size: 10px;
Expand Down Expand Up @@ -426,9 +427,38 @@ body.nav-active { overflow: hidden; }
gap: 12px;
}




.button-container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}

.btn-primary {
position: relative; /* Positioning for the arrows */
padding: 10px 50px; /* Add padding to make space for the arrows */
transition: color 0.3s ease; /* Smooth transition for text color */
font-size: 16px; /* Adjust font size as needed */
}

.btn-primary::after {
content: ' ⪢'; /* Two arrows as content */
position: absolute; /* Position it absolutely */
right: 5px; /* Position on the right side */
top: 50%; /* Center vertically */
transform: translateY(-55%); /* Adjust vertical position */
opacity: 0; /* Start with the arrows hidden */
transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.btn-primary:hover {
color: #ffffff; /* Change text color on hover (optional) */
}

.btn-primary:hover::after {
opacity: 1; /* Show the arrows on hover */
}

/*-----------------------------------*\
#CATEGORY
Expand Down
Loading

0 comments on commit a94fa77

Please sign in to comment.