-
Notifications
You must be signed in to change notification settings - Fork 136
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #336 from Husan7/main
fix: FAQ Page #291 issue solved
- Loading branch information
Showing
4 changed files
with
276 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| @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; | ||
| } | ||
|
|
||
| body{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| background: #7d2ae8; | ||
| } | ||
|
|
||
|
|
||
| .acc{ | ||
| display: flex; | ||
| max-width: 1010px; | ||
| width: 100%; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| background: #fff; | ||
| border-radius: 25px; | ||
| 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: 18px; | ||
| 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: 15px; | ||
| font-weight: 50; | ||
| color: #928e8e; | ||
| display: none; | ||
| } | ||
| .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%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>FAQ</title> | ||
| <link rel="stylesheet" href="faq.css"> | ||
| <link rel="icon" type="image/x-icon" href="./assets/logo.png" /> | ||
| <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="acc"> | ||
| <div class="image-box"> | ||
| <img src="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 Virtuo Learn ?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>Virtuo Learn, a leading online education platform that offers quality education that is personalized, fun, interactive, and easy.</p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">What kind of content is tought in Virtuo Learn ? | ||
| </span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>Our platform offers a vast library of <br> | ||
| 1. Video Lectures <br> | ||
| 2. Interactive Simulations<br> | ||
| 3. 3D Visualizations<br> | ||
| 4. Quizzes <br> | ||
| </p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">How I stated leaning in Virto Learn ?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>Step 1 - Watch Videos<br> | ||
| Step 2 - Refer Simulations & 3D visualizations<br> | ||
| Step 3 - Resolve Doubts from Doubt Engine<br> | ||
| Step 4 - Give Quizzes<br> | ||
| Step 5 - Take feedback<br> | ||
| </p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">How can I register for Virtue Learn ? | ||
| </span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>You can view & register for Virtue Learn by clicking <a href="index.html">here</a> </p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">Cost for subscribing VirtuO Learn programs?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>Yes , there are 3 packs <br> | ||
| Skill Builder Elite - ₹499/mo<br> | ||
| Academic Edge Pro - ₹699/mo<br> | ||
| Career Launch Accelerator - ₹899/mo<br> | ||
| </p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">What subjects are covered in Virtuo Learn?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>Virtuo Learn contains Physics , Biology and Chemistry.</p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">What languages are available for learning programs?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p>All learning programs are available in English.</p> | ||
| <span class="line"></span> | ||
| </li> | ||
| <li> | ||
| <div class="question-arrow"> | ||
| <span class="question">Do you provide any feedback support for doubts ?</span> | ||
| <i class="bx bxs-chevron-down arrow"></i> | ||
| </div> | ||
| <p> Yes, we provide doubts feedback support by Doubt Engine . Complex doubts made simple with our powerful doubt engine.</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> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters