Skip to content

Commit

Permalink
Merge pull request #2171 from Riyachauhan11/main
Browse files Browse the repository at this point in the history 
fixed dark mode appearance and ui
  • Loading branch information
@iamrahulmahato
iamrahulmahato authored Nov 7, 2024
2 parents e4febef + 8395416 commit aa50de8
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 187 deletions.
38 changes: 37 additions & 1 deletion footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ footer {
background-color: black;
}


.footer-content {
display: flex;
justify-content: space-between; /* Use space-between for horizontal alignment */
Expand Down Expand Up @@ -74,11 +75,24 @@ footer {
transition: color 0.3s ease;
}

/* Hover effect on links */
[data-theme="dark"] .footer-section ul li a:hover {
color: #f8c5c5;
}

[data-theme="dark"] .footer-section ul li a {
text-decoration: none;
color: white;
font-size: 14px;
transition: color 0.3s ease;
}

/* Hover effect on links */
.footer-section ul li a:hover {
color: #f8c5c5;
}


/* Subscribe form */
.newsletter form {
display: flex;
Expand Down Expand Up @@ -140,7 +154,6 @@ footer {
padding-bottom: 10px; /* Add some bottom padding */
background-color: #eaeaea; /* Background color for the footer bottom */
text-align: center; /* Center the text */
margin-top: 20px; /* Add margin to prevent overlap */
}

.footer-bottom .social-icons {
Expand All @@ -155,6 +168,11 @@ footer {
border-radius: 50%;
}

[data-theme="dark"] .footer-bottom{
background-color: #000327;
color:white;
}

/* Hover effect on social icons */
.footer-bottom .social-icons a:hover {
color: #f8c5c5;
Expand All @@ -164,6 +182,24 @@ footer {
animation-timing-function: linear;
}

.social-media {
display: flex;
justify-content: center; /* Center the icons horizontally */
gap: 15px; /* Adds space between each icon */
padding: 20px 0; /* Adds some padding above and below the icons */
}

.spaced-item {
font-size: 24px; /* Adjust icon size if necessary */
color: #333; /* Icon color */
transition: color 0.3s ease; /* Smooth color transition on hover */
}

.spaced-item:hover {
color: #007bff; /* Change color on hover */
}


@keyframes spin {
from {
transform: rotate(0deg) scale(1.3);
Expand Down
158 changes: 55 additions & 103 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,14 +587,7 @@ <h3><span>Open</span> Projects</h3>
</div> -->


<div class="search-container">
<input type="text" id="search-input" placeholder="Search games by Title/Description..."
oninput="filterCards()" style="margin-bottom: 10px;">
<button class="search-btn" onclick="filterCards()">
<span class="search-icon"></span>
Search
</button>
</div>

</div>


Expand Down Expand Up @@ -742,7 +735,14 @@ <h3><span>Organize</span> Projects</h3>
<br />
</div>


<div class="search-container">
<input type="text" id="search-input" placeholder="Search games by Title/Description..."
oninput="filterCards()" style="margin-bottom: 10px;">
<button class="search-btn" onclick="filterCards()">
<span class="search-icon"></span>
Search
</button>
</div>


<div class="projects-container">
Expand Down Expand Up @@ -5199,15 +5199,26 @@ <h2>We Value Your Feedback!</h2>
[data-theme="dark"] .feedback-form textarea,
[data-theme="dark"] .form-group textarea
[data-theme="dark"] .form-group #feedback-content{
background-color:black;
background-color:#000327;
color:white;
}

[data-theme="dark"] #feedback{
background:#000000;
background:#000327;
border-top:1px solid #333;
}

[data-theme="dark"] .dark-change{
color:white !important;;
background-color: #000327;
}

[data-theme="dark"] .quickLinks{
color:white !important;;
background-color: #000327;
}




#feedback h2 {
Expand Down Expand Up @@ -5363,7 +5374,7 @@ <h3 class="faq-question">Where can I find the source code?</h3>
/*Dark Mode theme styling adjustments*/
[data-theme="dark"] #faq,
[data-theme="dark"] #faq h2{
background-color:black;
background-color:#000327;
color:white;
}

Expand Down Expand Up @@ -5437,10 +5448,10 @@ <h3 class="faq-question">Where can I find the source code?</h3>

<!-- Footer -->
<footer id="footer1">
<div class="footer-content" id="footer-content">
<div class="footer-content">
<!-- Quick Links Section -->
<div class="footer-section quick-links" id="footer-section">
<h3>Quick Links</h3>
<div class="footer-section quick-links">
Quick Links
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="chatbot.html">ChatBot</a></li>
Expand All @@ -5451,28 +5462,24 @@ <h3>Quick Links</h3>
</div>

<!-- About Us Section -->
<div class="footer-section about-us" id="footer-section">
<h3>About Us</h3>
<div class="footer-section about-us">
About Us
<p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
</div>

<!-- Newsletter Section -->
<div class="footer-section newsletter" id="footer-section">
<h3>Subscribe to Our Newsletter</h3>
<div class="footer-section newsletter">
Subscribe to Our Newsletter
<form>
<input type="email" placeholder="Enter your email" required>
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>

</div>

<!-- <div class="share-section">
<button id="shareBtn">Share Us</button>
</div> -->

<!-- Bottom Links Section -->
<!-- <ul class="gridbox">
<ul class="gridbox">
<li><a href="#">Help Centre</a></li>
<li><a href="./welcometestimonials.html">Testimonials</a></li>
<li><a href="#">Account</a></li>
Expand All @@ -5481,10 +5488,13 @@ <h3>Subscribe to Our Newsletter</h3>
<li><a href="./privacy.html">Privacy</a></li>
<li><a href="#">Cookie Preferences</a></li>
<li><a href="./contact.html">Contact Us</a></li>
</ul> -->

</ul>
<!-- Share Section -->
<div class="share-section">
<button id="shareBtn">Share Us</button>
</div>
<!-- Social Media Icons -->
<!-- <div class="social-media">
<div class="social-media">
<a class="spaced-item" href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="spaced-item" href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="spaced-item" href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
Expand All @@ -5493,13 +5503,26 @@ <h3>Subscribe to Our Newsletter</h3>
<a class="spaced-item" href="https://www.snapchat.com" target="_blank"><i class="fab fa-snapchat-ghost"></i></a>
<a class="spaced-item" href="https://www.github.com" target="_blank"><i class="fab fa-github"></i></a>
</div>
-->

<!-- Footer Bottom -->
<!-- <div class="footer-bottom">
<div class="footer-bottom">
<p>© 2024 Open Projects. All Rights Reserved.</p>
</div>
</footer> -->

<link rel="stylesheet" href="visi.css">
<!-- ############### Footer ############### -->
<!-- Footer Visitor Counter -->
<div class="visitor-counter-container">
<div class="visitor-counter">
<div>Visitor Counter: </div>
<div class="website-counter">12345</div>
</div>
</div>

<script src="visi.js"></script>
</footer>



<script>
document.getElementById('shareBtn').addEventListener('click', function () {
Expand All @@ -5518,25 +5541,10 @@ <h3>Subscribe to Our Newsletter</h3>
}
});
</script>
<!-- <div class="footer-section follow-us" id="footer-section">
<DIV>
<h3>Follow Us</h3>
<a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
<img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn Logo" />
</a>
<a href="https://x.com/be_rajeevkumar" target="_blank">
<img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter Logo" />
</a>
<a href="https://github.com/beRajeevKumar" target="_blank">
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" />
</a>
</DIV>
</div> -->

<style>
.share-section {
text-align: center;
margin-top: 20px;
}
#shareBtn {
background-color: #f71257;
Expand All @@ -5548,57 +5556,7 @@ <h3>Follow Us</h3>

}
</style>
<a href="">
<div class="share-section">
<button id="shareBtn">Share Us</button>
</div>
</a>
<script>
document.getElementById('shareBtn').addEventListener('click', function() {
if (navigator.share) {
navigator.share({
title: 'Contact Us',
text: 'Check out this Contact Us page!',
url: window.location.href
}).then(() => {
console.log('Thanks for sharing!');
}).catch((error) => {
console.error('Error sharing:', error);
});
} else {
alert('Web Share API is not supported in your browser.');
}
});
</script>

<!-- Bottom Links Section -->
<ul class="gridbox">
<li><a href="#">Help Centre</a></li>
<li><a href="./welcometestimonials.html">Testimonials</a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="./terms.html">Terms of Use</a></li>
<li><a href="./privacy.html">Privacy</a></li>

<li><a href="#">Cookie Preferences</a></li>
<li><a href="./contact.html">Contact Us</a></li>

</ul>

<!-- Footer Bottom -->
<div class="footer-bottom" id="footer-bottom">
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a> <!-- LinkedIn -->
<a href="#"><i class="fab fa-youtube"></i></a> <!-- YouTube -->
<a href="#"><i class="fab fa-pinterest"></i></a> <!-- Pinterest -->
<a href="#"><i class="fab fa-snapchat-ghost"></i></a>
</div>
<p>© 2024 Open Projects. All Rights Reserved. </p>
</div>
</footer>



<button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
Expand Down Expand Up @@ -5629,13 +5587,7 @@ <h3>Follow Us</h3>


<br /><br />
<link rel="stylesheet" href="visi.css">
<!-- ############### Footer ############### -->
<div class="visitor-counter">
<div>Visitors Count:</div>
<div class="website-counter"></div>
</div>
<script src="visi.js"></script>




Expand Down
Loading

0 comments on commit aa50de8

Please sign in to comment.