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

feat: Added FAQs section #159

Merged
merged 2 commits into from
Oct 7, 2024
Merged

feat: Added FAQs section #159

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9862392
feat: Added FAQs section
KusumPareek99 Oct 7, 2024
94921fc
Merge branch 'beRajeevKumar:main' into feature_faqs
KusumPareek99 Oct 7, 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
241 changes: 181 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,91 +5,212 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/jpg" href="/images/clipboard.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" />
<title>Fronten Projects | Rajeev</title>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-white">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="logo.png"alt="Logo" width="80" height="84" class="d-inline-block align-text-top"></a>
<nav class="navbar navbar-expand-lg bg-body-white">
<div class="container-fluid">
<a class="navbar-brand" href="/"
><img
src="logo.png"
alt="Logo"
width="80"
height="84"
class="d-inline-block align-text-top"
/></a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login-sginup.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Projects" >Challenges</a>
</li>
</ul>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login-sginup.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Projects">Challenges</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<section>
<h2 id="Projects" class="">Projects</h2>
<ul id="list" class="list"></ul>
</section>
</nav>
<section>
<h2 id="Projects" class="">Projects</h2>
<ul id="list" class="list"></ul>
</section>

<footer class="footer">
<!-- FAQs Section -->
<section class="faq-section">
<h2>FAQs</h2>
<div class="faq">
<button class="accordion">
Can I use these projects in my portfolio?
</button>
<div class="panel">
<p>
Definitely! Please do feel free to use whatever you build in your
portfolio. Frontend Mentor is an excellent platform for front-end
developers who want to improve their skills and build real-world
projects.
</p>
</div>
</div>

<div class="faq">
<button class="accordion">
Can I take the challenges as a beginner?
</button>
<div class="panel">
<p>
For sure! Our challenges have different levels of difficulty. We'd
recommend starting with the newbie ones. You might also want to
start with the HTML & CSS only challenges first. As you build up
your skills and confidence, you can take on more complex projects.
</p>
</div>
</div>
<div class="faq">
<button class="accordion">How do I start?</button>
<div class="panel">
<p>
To start a challenge, click the eye button on the challenge page.
This will take you to the Challenge, where you can go through the
design. We'd recommend starting with one of our newbie level
challenges. You can then work your way up from there.
</p>
</div>
</div>
<div class="faq">
<button class="accordion">
Can I use libraries/frameworks on these projects?
</button>
<div class="panel">
<p>
Yes! Our challenges provide professional designs but there are no
rules on what tools to use. So feel free to use anything you like to
build your projects.
</p>
</div>
</div>
<div class="faq">
<button class="accordion">Is it free?</button>
<div class="panel">
<p>
The majority of our challenges are free, yes. It will say on each
challenge whether they are free or premium, so it's easy to tell the
difference.
</p>
</div>
</div>
</section>

<div class="footer-section">
<h1>Contact Us</h1>
<ul class="footer-list">
<li><a href="mailto:[email protected]">[email protected]</a></li>
<footer class="footer">
<div class="footer-section">
<h1>Contact Us</h1>
<ul class="footer-list">
<li>
<a href="mailto:[email protected]"
>[email protected]</a
>
</li>
<li>2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</li>
<li><a href="tel:+91xxxxxxxx2020">+91 xxxxxx2020</a></li>
<li class="border-list"></li>
<li class="socials">
<a href="https://www.linkedin.com/in/berajeevkumar/" id="linkedin" target="_blank">
<a
href="https://www.linkedin.com/in/berajeevkumar/"
id="linkedin"
target="_blank"
>
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="https://github.com/beRajeevKumar/Frontend_Mentor" id="github" target="_blank">
</a>
<a
href="https://github.com/beRajeevKumar/Frontend_Mentor"
id="github"
target="_blank"
>
<i class="fa-brands fa-github"></i>
</a>
<a href="https://x.com/be_rajeevkumar" id="twitter" target="_blank">
</a>
<a href="https://x.com/be_rajeevkumar" id="twitter" target="_blank">
<i class="fa-brands fa-x-twitter"></i>
</a>
<a href="https://www.instagram.com/your_instagram" id="instagram" target="_blank">
</a>
<a
href="https://www.instagram.com/your_instagram"
id="instagram"
target="_blank"
>
<i class="fa-brands fa-instagram"></i>
</a>
</a>
</li>
</ul>
</div>
</ul>
</div>

<div class="footer-section">
<h1>Quick Links</h1>
<ul class="footer-list">
<div class="footer-section">
<h1>Quick Links</h1>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
<li><a href="/terms-conditions">Terms & Conditions</a></li>
<li><a href="/return-policy">Return Policy</a></li>
<li><a href="https://github.com/beRajeevKumar/Frontend_Mentor" target="_blank">Star Us</a></li>
<li>
<a
href="https://github.com/beRajeevKumar/Frontend_Mentor"
target="_blank"
>Star Us</a
>
</li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</ul>
</div>

<div class="footer-section">
<h1>Subscribe to Newsletter</h1>
<ul class="footer-list">
<li>Maxime quae inventore sunt odio perspiciatis vitae saepe officia dolorem.</li>
<div class="footer-section">
<h1>Subscribe to Newsletter</h1>
<ul class="footer-list">
<li>
Maxime quae inventore sunt odio perspiciatis vitae saepe officia
dolorem.
</li>
<li class="sub">
<input type="text" placeholder="Enter your email">
<button class="btn-sub">Subscribe</button>
<input type="text" placeholder="Enter your email" />
<button class="btn-sub">Subscribe</button>
</li>
</ul>
</div>
</footer>
</ul>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
16 changes: 16 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,19 @@ function formatProjectName(name) {
.map((word) => word[0].toUpperCase() + word.slice(1))
.join(" ");
}

// FAQs Section Script
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
58 changes: 58 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,4 +537,62 @@ input {
}
#copyright {
margin-bottom: 5px;
}

/* FAQs Section Styles */
.faq-section{
margin:20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.faq{
margin-bottom: 10px;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;

width: 100%;
text-align: left;
outline: none;
border: none;
font-size: 15px;
font-weight: 600;
transition: 0.4s;
}



.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0px 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

.panel p{
padding-top: 5px;
}