Skip to content

Commit

Permalink
Merge pull request #456 from ananyag309/fixes
Browse files Browse the repository at this point in the history 
add popup faq modal at footer
  • Loading branch information
@sakeel-103
sakeel-103 authored Oct 29, 2024
2 parents 0823a54 + 883ff8d commit 2f28319
Showing 1 changed file with 147 additions and 44 deletions.
191 changes: 147 additions & 44 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,33 +126,33 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
background-color: #2a2a2a;
margin: 10% auto;
padding: 30px;
border: 2px solid #FF1493; /* Dark pink border */
outline: 1px solid #FF69B4; /* Lighter pink outline */
padding: 40px;
border: 2px solid #FF1493;
outline: 1px solid #FF69B4;
width: 90%;
max-width: 500px;
max-width: 600px;
color: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3); /* Dark pink shadow */
border-radius: 12px;
box-shadow: 0 4px 30px rgba(255, 20, 147, 0.5);
}

.close {
color: #FF1493; /* Dark pink close button */
color: #FF1493;
float: right;
font-size: 28px;
font-size: 32px;
font-weight: bold;
transition: color 0.3s ease;
}

.close:hover,
.close:focus {
color: #FF69B4; /* Lighter pink on hover */
color: #FF69B4;
text-decoration: none;
cursor: pointer;
}
Expand All @@ -162,7 +162,7 @@
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #FF1493; /* Dark pink border */
border: 1px solid #FF1493;
border-radius: 4px;
box-sizing: border-box;
background-color: #333;
Expand All @@ -172,15 +172,15 @@

.modal-form input:focus,
.modal-form textarea:focus {
border-color: #FF69B4; /* Lighter pink on focus */
border-color: #FF69B4;
box-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
outline: none;
}

.modal-form button {
width: 100%;
padding: 12px;
background-color: #FF1493; /* Dark pink button */
background-color: #FF1493;
color: white;
border: none;
border-radius: 4px;
Expand All @@ -190,12 +190,12 @@
}

.modal-form button:hover {
background-color: #FF69B4; /* Lighter pink on hover */
background-color: #FF69B4;
box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
}

.modal h2 {
color: #FF1493; /* Dark pink title */
color: #FF1493;
margin-bottom: 20px;
text-align: center;

Expand Down Expand Up @@ -446,39 +446,142 @@ <h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
&copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
</p>

<div class="footer">
<div class="footer-content">
<!-- Platform Links Section -->
<div class="footer-links">
<a href="#about">About DFS-BFS</a>
<a href="#courses">Courses</a>
<a href="#blogs">Blogs</a>
<a href="#contact">Contact Us</a>
</div>

<!-- Newsletter Section -->
<div class="newsletter-container">
<h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
<p>Subscribe to our newsletter for the latest on algorithms, tips, and coding challenges.</p>
<form onsubmit="handleSubmit(event)">
<input type="email" placeholder="Enter your email" id="emailInput" required name="email" />
<button type="submit">Subscribe</button>
</form>
</div>

<!-- Social Media Section -->
<div class="footer-links">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://x.com/dfs-bfs" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/company/dfs-bfs" target="_blank" title="LinkedIn"><i
class="fab fa-linkedin"></i></a>
<a href="../contributor/contributor.html" title="Contributors">Our Contributors</a>
<div class="footer">
<div class="footer-content">
<!-- Platform Links Section -->
<div class="footer-links">
<a href="#about">About DFS-BFS</a>
<a href="#courses">Courses</a>
<a href="#blogs">Blogs</a>
<a href="#contact">Contact Us</a>
</div>

<!-- Newsletter Section -->
<div class="newsletter-container">
<h2 class="newsletter-title">Stay Updated with DFS-BFS</h2>
<p>Subscribe to our newsletter for the latest on algorithms, tips, and coding challenges.</p>
<form onsubmit="handleSubmit(event)">
<input type="email" placeholder="Enter your email" id="emailInput" required name="email" />
<button type="submit">Subscribe</button>
</form>
</div>

<!-- Social Media Section -->
<div class="footer-links">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://x.com/dfs-bfs" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/company/dfs-bfs" target="_blank" title="LinkedIn"><i
class="fab fa-linkedin"></i></a>
<a href="../contributor/contributor.html" title="Contributors">Our Contributors</a>

<!-- FAQ Modal -->
<div id="faqModal" class="modal">
<div class="modal-content">
<span class="close" id="faqClose">&times;</span>
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<h3>What is DFS-BFS?</h3>
<p>DFS-BFS is a learning platform focused on Data Structures and Algorithms, providing interactive courses and real-time collaboration features.</p>
</div>
<div class="faq-item">
<h3>How can I subscribe to the newsletter?</h3>
<p>You can subscribe to our newsletter by entering your email address in the subscription form located in the footer.</p>
</div>
<div class="faq-item">
<h3>What types of courses are available?</h3>
<p>We offer a variety of courses covering fundamental and advanced topics in algorithms, data structures, and coding challenges.</p>
</div>
<div class="faq-item">
<h3>How can I contact support?</h3>
<p>If you have any questions or need assistance, you can contact us using the 'Contact Us' link in the footer.</p>
</div>
<div class="faq-item">
<h3>Can I contribute to the platform?</h3>
<p>Yes! We welcome contributions. Please visit the 'Our Contributors' link for more information on how to get involved.</p>
</div>
<!-- Add more FAQ items as needed -->
</div>
</div>

<!-- Add a button to open the FAQ modal -->
<button id="faqLink">FAQ</button>

<script>
// FAQ Modal Logic
const faqModal = document.getElementById("faqModal");
const faqLink = document.getElementById("faqLink");
const faqClose = document.getElementById("faqClose");

// Open the modal
faqLink.onclick = function() {
faqModal.style.display = "block";
}

// Close the modal when the close button is clicked
faqClose.onclick = function() {
faqModal.style.display = "none";
}

// Close the modal when clicking outside of the modal content
window.onclick = function(event) {
if (event.target === faqModal) {
faqModal.style.display = "none";
}
}
</script>

<style>
/* FAQ Modal Styles */
.modal {
display: none; /* Ensure modal is hidden by default */
position: fixed;
z-index: 1001;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
background-color: #2a2a2a;
margin: 10% auto;
padding: 40px;
border: 2px solid #FF1493;
outline: 1px solid #FF69B4;
width: 90%;
max-width: 600px;
color: white;
border-radius: 12px;
box-shadow: 0 4px 30px rgba(255, 20, 147, 0.5);
}

.close {
color: #FF1493;
float: right;
font-size: 32px;
font-weight: bold;
transition: color 0.3s ease;
}

.close:hover,
.close:focus {
color: #FF69B4;
text-decoration: none;
cursor: pointer;
}

.faq-item {
margin-bottom: 20px;
}
</style>
</div>
</div>
</div>



<!-- Copyright Section -->
<p class="copyright">
&copy; 2024 DFS-BFS Learning Platform. Empowering coders with mastery over Data Structures and Algorithms.
Expand Down

0 comments on commit 2f28319

Please sign in to comment.