Skip to content

Commit

Permalink
feat: Added FAQs section
Browse files Browse the repository at this point in the history
  • Loading branch information
@KusumPareek99
KusumPareek99 committed Oct 7, 2024
1 parent c793964 commit 9862392
Show file tree
Hide file tree
Showing 3 changed files with 255 additions and 60 deletions.
241 changes: 181 additions & 60 deletions index.html
View file
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
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
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;
}

0 comments on commit 9862392

Please sign in to comment.