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

Added FAQ page to the website #1377

Merged
merged 2 commits into from
Aug 10, 2024
Merged

Added FAQ page to the website #1377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2b17d05
FAQ PAGE
Husan7 Aug 10, 2024
f30ab2d
FAQ
Husan7 Aug 10, 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
151 changes: 151 additions & 0 deletions assets/css_files/FAQ.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}

boy{

align-items: center;
justify-content: center;
min-height: 100vh;
}



.acc{
display: flex;
ax-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #efe3ec;
border-radius: 25px;
margin-top: 55px;
magin-bottom: -18px;
padding: 45px 90px 45px 60px;

}
.acc .image-box{
height: 360px;
width: 300px;
}

.acc .image-box .img{
height: 100%;
width: 100%;
object-fit: contain;
}
.acc .acc-text{
width: 60%;
}
.acc .acc-text .title{
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
}
.acc .acc-text .faq-text{
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar{
display: none;
}
.acc .acc-text li{
list-style: none;
cursor: pointer;
}
.acc-text li .question-arrow{
display: flex;
align-items: center;
justify-content: space-between;
}
.acc .acc-text li .question-arrow .question{
font-size: 22px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.acc .acc-text li .question-arrow .arrow{
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.acc-text li.showAnswer .question-arrow .arrow{
transform: rotate(-180deg);
}
.acc .acc-text li:hover .question-arrow .question,
.acc .acc-text li:hover .question-arrow .arrow{
color: #7d2ae8;

}
.acc .acc-text li.showAnswer .question-arrow .question,
.acc .acc-text li.showAnswer .question-arrow .arrow{
color: #7d2ae8;

}
.acc-text li .line{
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgb(0, 0, 0, 0.1);


}
.acc-text li p{
width: 92%;
font-size: 18px;
font-weight: 50;
color: #928e8e;
display: none;
margin-top: 18px;
}
.acc-text li.showAnswer p{
display: block;
}

@media (max-width: 994px) {
body{
padding: 40px 20px;
}
.acc{
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.acc .image-box{
height: 360px;
width: 220px;
}
.acc .acc-text{
width: 63%;
}
}
@media(max-width: 820px) {
.acc{
flex-direction: column;
}
.acc .image-box{
height: 360px;
width: 300px;
background: #7d2ae8;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.acc .acc-text{
width: 100%;
margin-top: 30px;
}
}
@media (max-width: 538px) {
.acc{
padding: 25px;
}
.acc-text li p{
width: 98%;
}
}
230 changes: 230 additions & 0 deletions assets/html_files/FAQ.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="../images/favicon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../../style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="../css_files/cursor.css">
<link rel="stylesheet" href="../css_files/FAQ.css">
<link rel="stylesheet" href="../css_files/progressbar.css">
<script src="../../script.js"></script>
<script src="../js_files/hamburgerMenu.js"></script>
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
<title>Beautiify | FAQ</title>
</head>


<div class="circle-container">
<div class="circle" style="background-color: #3A0088; left: 504px; top: 59px; scale: 1;"></div>
<div class="circle" style="background-color: rgb(253, 175, 105); left: 504px; top: 59px; scale: 0.95;"></div>
<div class="circle" style="background-color: rgb(248, 157, 99); left: 504px; top: 59px; scale: 0.9;"></div>
<div class="circle" style="background-color: rgb(245, 151, 97); left: 504px; top: 59px; scale: 0.85;"></div>
<div class="circle" style="background-color: rgb(239, 134, 94); left: 504px; top: 59px; scale: 0.8;"></div>
<div class="circle" style="background-color: rgb(236, 128, 93); left: 504px; top: 59px; scale: 0.75;"></div>
<div class="circle" style="background-color: rgb(227, 110, 92); left: 504px; top: 59px; scale: 0.7;"></div>
<div class="circle" style="background-color: rgb(223, 104, 92); left: 504px; top: 59px; scale: 0.65;"></div>
<div class="circle" style="background-color: rgb(213, 88, 92); left: 504px; top: 59px; scale: 0.6;"></div>
<div class="circle" style="background-color: rgb(209, 82, 92); left: 504px; top: 59px; scale: 0.55;"></div>
<div class="circle" style="background-color: rgb(197, 65, 93); left: 504px; top: 59px; scale: 0.5;"></div>
<div class="circle" style="background-color: rgb(192, 59, 93); left: 504px; top: 59px; scale: 0.45;"></div>
<div class="circle" style="background-color: rgb(178, 44, 94); left: 504px; top: 59px; scale: 0.4;"></div>
<div class="circle" style="background-color: rgb(172, 38, 94); left: 504px; top: 59px; scale: 0.35;"></div>
<div class="circle" style="background-color: rgb(156, 21, 95); left: 504px; top: 59px; scale: 0.3;"></div>
<div class="circle" style="background-color: rgb(149, 15, 95); left: 504px; top: 59px; scale: 0.25;"></div>
<div class="circle" style="background-color: rgb(131, 0, 96); left: 504px; top: 59px; scale: 0.2;"></div>
<div class="circle" style="background-color: rgb(124, 0, 96); left: 504px; top: 59px; scale: 0.15;"></div>
<div class="circle" style="background-color: rgb(104, 0, 96); left: 504px; top: 59px; scale: 0.1;"></div>
<div class="circle" style="background-color: rgb(96, 0, 95); left: 504px; top: 59px; scale: 0.05;"></div>
</div>

<header class="header2">
<nav class="navbar">
<a href="../../index.html">
<div class="flex-container">
<div class="flex-item-left"><img src="../images/logo.png" width="37px" height="37px"></div>
<div class="flex-item-right" class="logo">Beautiify</div>
</div>
</a>

<ul class="nav-menu">
<li class="nav-item">
<a href="../../index.html#home" class="nav-link"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item">
<a href="../../assets/html_files/about.html" class="nav-link"><i class="fa-solid fa-circle-info"></i> About</a>
</li>
<li class="nav-item">
<a href="../../index.html#components" class="nav-link"><i class="fa-solid fa-icons"></i> Components</a>
</li>
<li class="nav-item">
<a href="../html_files/contributor.html" class="nav-link"><i class="fa-solid fa-user"></i> Contributors</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
</li>
<li class="nav-item">
<a href="../html_files/FAQ.html" class="nav-link" style="color: red;"><i class="fa-solid fa-user"></i> FAQ</a>
</li>
</ul>
<button id="dark-mode-toggle"></button>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

<div class="acc">
<div class="image-box">
<img src="../images/oip1.png" alt="">
</div>
<div class="acc-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is Beautiify ?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Beautiify is your go-to website for finding beautiful and easy-to-use web components like buttons, forms, and animations. It's designed to help you make your website look amazing with minimal effort .</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What can I do with Beautiify ?
</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>You can browse and pick from a variety of stylish web elements that you can easily add to your website. Whether you need a cool button, a fancy loader, or a sleek navigation bar, Beautiify has got you covered.
</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Who created Beautiify ?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Beautiify was created by a developer named Rakesh Roshan, who loves making the web look better. It's an open-source project, so anyone can contribute to it!


</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> Is Beautiify free to use ?
</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Yes, everything on Beautiify is free! You can use the components on any website, whether it's a personal project or a business site. </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Why should I use Beautiify instead of other libraries?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Beautiify is all about making things easy and beautiful. The components are designed to be stylish, functional, and simple to integrate into any website. It's perfect if you want to enhance your site quickly without having to design everything from scratch.
</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How do I add a component to my website?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>It’s super simple! Just go to the Beautiify website, find the component you like, and copy the code provided. Then, paste it into your website’s code, and you’re good to go!</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> What makes Beautiify different from other component libraries ?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Beautiify focuses on providing a visually appealing and highly functional set of components that are easy to integrate and customize. The goal is to make it simple for developers to enhance their websites with minimal effort while achieving maximum impact.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Where can I ask questions or get help ?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p> If you need help or have questions, you can reach out through the contact form on the Beautiify website. You can also connect with the community on GitHub.</p>
<span class="line"></span>
</li>

</ul>
</div>
</div>

<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer")
});
}
</script>

<div class="footer" id="about">
<footer>
<ul class="social-icon">
<li>
<a href="https://rakesh9100.bio.link/" target="_blank"><i class="fas fa-link"></i></a>
</li>
<li>
<a href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fas fa-envelope"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i class="fab fa-linkedin"></i></a>
</li>
<li>
<a href="https://github.com/Rakesh9100" target="_blank"><i class="fab fa-github"></i></a>
</li>
<li>
<a href="https://www.instagram.com/rakesh250602/" target="_blank"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="https://www.twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
</li>
<li>
<a href="https://discord.com/users/944144134950748170" target="_blank"><i class="fab fa-discord"></i></a>
</li>
</ul>
<p>
Created By
<a href="https://rakeshroshan.netlify.app/" target="_blank">Rakesh Roshan ❤️</a> | ©
<script>
document.write(new Date().getFullYear());
</script>: All Rights Reserved
</p>
</footer>
</div>

<!-- Scroll To Top Button -->
<div id="progress">
<span id="progress-value" class="bi bi-arrow-up-short"></span>
</div>

<script src="../js_files/cursor.js"></script>
<script src="../js_files/dark-mode.js"></script>
<script src="../js_files/progressBar.js"></script>
<script src="../js_files/contributor.js"></script>
</body>

</html>
3 changes: 3 additions & 0 deletions assets/html_files/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@
<li class="nav-item">
<a href="contact.html" class="nav-link"><i class="fa-solid fa-phone"></i> Contact</a>
</li>
<li class="nav-item">
<a href="./assets/html_files/FAQ.html" class="nav-link"><i class="fa-solid fa-phone"></i> FAQ</a>
</li>
</ul>
<button id="dark-mode-toggle"></button>
<div class="hamburger">
Expand Down
Loading