diff --git a/index.html b/index.html index 9af9f82d..a783509d 100644 --- a/index.html +++ b/index.html @@ -5,91 +5,212 @@ - - - + + + Fronten Projects | Rajeev - +
+

Projects

+ +
- + + + diff --git a/script.js b/script.js index 51c78eb5..5366eb12 100644 --- a/script.js +++ b/script.js @@ -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"; + } + }); +} diff --git a/style.css b/style.css index 48d7264f..e94d4a50 100644 --- a/style.css +++ b/style.css @@ -397,4 +397,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; } \ No newline at end of file