Skip to content

add FAQ #100 #211

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

add FAQ #100 #211

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
0866238
FAQ.html
Sahoobarsharani Oct 19, 2024
c0deb1c
Update index.html
Sahoobarsharani Oct 19, 2024
05a88b0
Update styles.css
Sahoobarsharani Oct 19, 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
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<li><a href="./pages/about.html">About</a></li>
<li><a href="./pages/contact.html">Contact</a></li>
<li><a href="./pages/badges.html">Badges</a></li>
<li><a href="./pages/FAQ.html">FAQ</a></li>
</ul>
</nav>
</div>
Expand Down
104 changes: 104 additions & 0 deletions pages/FAQ.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badges</title>

<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="../Favicon/favicon-32x32.png" alt="Logo" />
<a href="/"><h1>Badge Website</h1></a>

</div>
<nav class="nav-links">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contact.html">Contact</a></li>
<li><a href="./FAQ.html">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<div class="faq">
<h2>Frequently Asked Questions</h2>
<ul class="accordion">
<li>
<input type="radio" name="accordion" id="first">
<label for="first">1.What is this badge website?</label>
<div class="content">
<p>Our badge website is a cutting-edge platform designed to recognize and reward individuals for their achievements, skills,
and accomplishments, providing a unique opportunity to showcase expertise and enhance professional profiles.</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="second">
<label for="second">2.How do I earn badges?</label>
<div class="content">
<p>Badges are earned by completing specific challenges, courses,
or achieving predetermined milestones, which demonstrate mastery over particular skills
or knowledge areas, and are typically awarded upon successful completion of these requirements..</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="third">
<label for="third"> 3.What types of badges are available?</label>
<div class="content">
<p> Our platform offers a comprehensive range of badges for programming languages, including Python, Java, JavaScript
, C++,web devlopment,cloud and many others, allowing developers to demonstrate their expertise and proficiency in specific coding skills.</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="four">
<label for="four">4.How do I know which badges I'm eligible for?
</label>
<div class="content">
<p> Eligibility for badges is determined by reviewing the specific requirements and criteria listed on each badge
page, and users can also contact our support team for personalized guidance and recommendations.
.</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="fifth">
<label for="fifth">5.How do I claim a badge?</label>
<div class="content">
<p>To claim a badge, simply click the "Claim Badge" button on the badge page, verify your eligibility, and follow the prompts to complete the claim process,
which typically involves providing evidence or confirmation of achievement.</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="sixth">
<label for="sixth"> 6.if I'm experiencing issues claiming a badge.</label>
<div class="content">
<p> If you encounter any issues claiming a badge, please contact our dedicated support team at
[email protected], providing detailed information about the problem, and we will promptly assist in resolving the matter.
</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="seven">
<label for="seven">7.Can I display badges on other platforms?</label>
<div class="content">
<p>Yes, our platform allows users to embed badges on other websites, social media profiles,
or blogs, using our customizable embed code, enabling seamless showcase of achievements..</p>
</div>
</li>
</ul>
</div>
<footer>
<div class="footer-text">
<p>
Follow us on
<a href="https://github.com/rajatuiwebdev/badge-website">Github</a> |
<a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a>
</p>
<p>&copy; 2024 Rajat Rajput | All rights reserved</p>
</div>
</footer>
</body>
</html>
67 changes: 66 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -584,4 +584,69 @@ footer a {
}


}
}
<!--------FAQ------->

.faq{
padding: 10px 12%;
text-align: center;
font-size: 18px;

}



.faq h2{
font-weight: 500;
font-size: 40px;
text-align: center;
}
.accordion{
margin: 60px auto;
width: 100%;
max-width: 750px;
}
.accordion li{
list-style: none;
width: 100%;
padding: 5px;
}
.accordion li label{
display: flex;
align-items: center;
padding: 20px;
font-size: 18px;
font-weight: 500;
background: linear-gradient(300deg ,#00435f,#2786cf ,rgb(157, 48, 153));
/*background: #303030;*/
margin-bottom: 2px;
cursor: pointer;
position: relative;
}
label::after{
content: '+';
font-size: 34px;
position: absolute;
right: 20px;
transition: transform 0.5s;

}
input[type="radio"]{
display: none;
}
.accordion .content{
background: linear-gradient(300deg ,#00435f,#369ae6 ,rgb(164, 53, 161));
/* background: #303030;*/
text-align: left;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s,padding 0.5s;
}
.accordion input[type="radio"]:checked + label + .content{
max-height: 600px;
padding: 30px 20px;
}
.accordion input[type="radio"]:checked + label::after{
transform: rotate(135deg);
}