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

Fixing Bug and Improving Design #435

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fixing Bug and Improving Design #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2fbd68c
Update index.html
ArchitSr313 Oct 27, 2024
709d26d
Update learning.html
ArchitSr313 Oct 27, 2024
b37e8c1
Update styles.css
ArchitSr313 Oct 27, 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
124 changes: 58 additions & 66 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,30 +105,17 @@
<a href="index.html" class="flex"><img src="images/logo.png" class="logo">
<span class="website-name tracking-tight ">Code Social</span></a>



<!-- Hamburger Menu -->
<div class="hamburger-menu">
<div class="toggle-button">
<img src="/images/hamburger.png" alt="open" id="hamburger-img">

</div>
</div>

<!-- Navbar Links -->
<ul class="navbar-links flex ">
<li class="ml-20">
<ul class="navbar-links flex ml-20">
<li>
<a href="maintenance.html">Live Events</a>
<ul class="dropdown ">
<li><a href="maintenance.html">Why don't you react?</a></li>

</ul>
</li>
<!-- blog section -->
<ul class="navbar-links flex ">
<li class="ml-20">
<li>
<a href="blog.html">Blogs</a>
</ul>
</li>
<li class="community">
<a href="maintenance.html">Join Our Community</a>
Expand All @@ -145,12 +132,9 @@
<li><a href="#">Peer-to-Peer Sessions</a></li>
</ul>
</li>
<li class="hamburger-menu">
<li>
<div class="toggle-button">
<span class="about-text">About us</span>
<button class="bar"></button>
<button class="bar"></button>
<button class="bar"></button>
</div>
<ul class="dropdown">
<li><a href="mentorship.html">Meet Our Team</a></li>
Expand All @@ -159,7 +143,6 @@
<li><a href="#">Follow Us</a></li>
</ul>
</li>

<li>
<a href="maintenance.html">Follow Us</a>
</li>
Expand Down Expand Up @@ -187,19 +170,21 @@ <h2>About Community</h2>
</p>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="images/whatsapp-icon.png" alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="images/discord-icon.png" alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="images/linkedin-icon.png" alt="LinkedIn">
</a>
<a href="https://github.com/Code-Social" target="_blank">
<img src="images/gitHub.png" alt="Github">
</a>

<h3 style="font-weight: bold; text-transform: uppercase; font-size: 1.5rem;">Reach Us</h3>
<div>
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="images/whatsapp-icon.png" alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="images/discord-icon.png" alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="images/linkedin-icon.png" alt="LinkedIn">
</a>
<a href="https://github.com/Code-Social" target="_blank">
<img src="images/gitHub.png" alt="Github">
</a>
</div>
</div>
</section>

Expand Down Expand Up @@ -232,45 +217,52 @@ <h3>Add Event</h3>
<div class="container">
<!-- Logo and About Section -->
<div class="footer-logo-about">
<a href="index.html" class="footer-logo-link">
<img src="/images/logo.png" alt="Code Social Logo" class="footer-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and opportunities to cultivate their skills, explore their interests, and <br>collaborate with like-minded peers.
</p>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png" alt="Discord"></a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank"><img src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</div>
<a href="index.html" class="footer-logo-link">
<img src="images/logo.png" alt="Code Social Logo" class="footer-logo">
<span class="website-name">Code Social</span>
</a>
<p class="footer-about-text">
Code Social Community is a vibrant and inclusive space for tech enthusiasts <br> to learn, grow, and connect. Founded in 2023, our mission is to empower individuals <br> with resources, mentorship, and opportunities to cultivate their skills, explore their interests, and collaborate with like-minded peers.
</p>
</div>

<!-- Links Section -->
<div class="footer-links">
<div class="footer-column">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="footer-column">
<div class="quick-links">
<p class="footer-title">Quick Links</p>
<ul class="footer-list">
<li><a href="#">About Us</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community Guidelines</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="social-icons">
<p class="footer-title">Social Links</p>
<div>
<a href="https://wa.me/your-whatsapp-number" target="_blank"><img src="./images/whatsapp-icon.png" alt="WhatsApp"></a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank"><img src="./images/discord-icon.png" alt="Discord"></a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank"><img src="./images/linkedin-icon.png" alt="LinkedIn"></a>
</div>
</div>
</div>
<div class="footer-column">
<p class="footer-title">Help</p>
<ul class="footer-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>

<!-- Footer Bottom -->
<hr class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
<!-- <hr> -->
<div class="footer-divider">
<p class="footer-bottom-text">© Copyright 2024, All Rights Reserved by Code Social</p>
</div>
</footer>


Expand Down Expand Up @@ -365,4 +357,4 @@ <h3>Add Event</h3>
</script>
</body>

</html>
</html>
82 changes: 55 additions & 27 deletions learning.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,25 +80,49 @@
color: #2196F3;
}

footer {
/* footer{
text-align: center;
padding: 20px;
background-color: #333;
color: white;
margin-top: 40px;
} */
a{
text-decoration: none;
color: black;
}
/* General Styles */
body.dark-mode {
background-color: #121212;
color: #f5f5f5;
}
/* Navbar Dark Mode */
body.dark-mode .navbar a,
body.dark-mode .navbar span,
body.dark-mode .navbar ul li a {
color: #f5f5f5;
}

/* Dropdown in Dark Mode */
body.dark-mode .dropdown {
background-color: #333;
}
/* Blockquote Style */
body.dark-mode blockquote {
border-left: 4px solid #888;
}
body.dark-mode .footer-divider {
background-color: #222;
color: #ddd;
}

body.dark-mode .learning-section{
color: black;
}
</style>
</head>

<body>
<!-- Header Section -->
<header>
<button id="theme-switch">
<img src="file:///C:/Users/Dell/Downloads/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="Dark Mode">
<img src="file:///C:/Users/Dell/Downloads/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="Light Mode">
</button>
</header>

<!-- Navbar Section -->
<nav class="navbar">
<a href="index.html"><img src="images/logo.png" class="logo" alt="Code Social logo"></a>
Expand All @@ -115,19 +139,24 @@
</li>
<li><a href="#">Live Events</a></li>
<li><a href="#">Join our Community</a></li>
<li class="hamburger-menu">
<a href="javascript:void(0);" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="dropdown">
<li><a href="#">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
<li>
<div class="hamburger-menu" style="display: list-item;">
<img src="images/hamburger.png" alt="hamburger">
<ul class="dropdown">
<li><a href="#">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</div>
</li>
<!-- Dark Mode Toggle -->
<li>
<button id="theme-toggle" class="theme-toggle-btn">
<img src="images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">
</button>
<!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
</li>
</ul>
</nav>

Expand Down Expand Up @@ -189,22 +218,21 @@ <h3>Peer-to-Peer Learning Sessions</h3>
</section>

<!-- Footer Section -->
<footer>
<p>&copy; 2024 Code Social. All rights reserved.</p>
<footer class="footer-divider">
<p class="footer-bottom-text">&copy; 2024 Code Social. All rights reserved.</p>
</footer>
<script>
window.embeddedChatbotConfig = {
chatbotId: "j2Uy2CrJfZueGX7wNtJT_",
domain: "www.chatbase.co"
}
</script>
<script
</script>
<script
src="https://www.chatbase.co/embed.min.js"
chatbotId="j2Uy2CrJfZueGX7wNtJT_"
domain="www.chatbase.co"
defer>
</script>

</script>
</body>

</html>
24 changes: 16 additions & 8 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,9 @@ body.dark-mode .calendar-day:hover {
color: white; /* Text color for dark mode */
}

.dark-mode a span{
color: white;
}
.content {
height: 2000px; /* Just for scrolling */
padding: 20px;
Expand All @@ -370,6 +373,7 @@ body.dark-mode .calendar-day:hover {
display: flex;
align-items: center;
cursor: pointer;
gap: 1rem;
}

/* Logo Styling */
Expand Down Expand Up @@ -464,7 +468,6 @@ body.dark-mode .calendar-day:hover {
.hamburger-menu .toggle-button {
display: flex;
position: relative;
flex-direction: column;
justify-content: space-between;
width: 40px;
height: 40px;
Expand Down Expand Up @@ -754,10 +757,14 @@ body.dark-mode #theme-switch {
/* Social Icons */
.social-icons {
margin-top: 30px; /* Increased margin for better spacing */
display: flex;
flex-direction: column;
}

/* .social-icons div{
display: block;
} */
.social-icons a {
margin: 0 15px;
margin-right: 16px;
display: inline-block;
}

Expand Down Expand Up @@ -801,8 +808,7 @@ body.dark-mode #theme-switch {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
justify-content: space-between;
}

.footer-logo-about {
Expand Down Expand Up @@ -855,13 +861,14 @@ body.dark-mode #theme-switch {
/* Footer Links Styling */
.footer-links {
display: flex;
justify-content: space-evenly;
justify-content: space-between;
gap: 2rem;
flex: 1;
min-width: 250px;
}

.footer-column {
flex-direction: column;
flex: 1;
}

Expand Down Expand Up @@ -892,8 +899,9 @@ body.dark-mode #theme-switch {

/* Footer Bottom Styling */
.footer-divider {
border-top: 1px solid #e5e7eb;
margin: 2rem 0;
border-top: 1px solid white;
margin-top: 2rem;
padding: 1rem;
}

.footer-bottom-text {
Expand Down