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

Updating Footer Section #30

Closed
wants to merge 1 commit into from
Closed

Updating Footer Section #30

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
170 changes: 168 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,125 @@
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}


/*footer section*/

footer {
background: linear-gradient(135deg, #f0f4f8, #d9e8fc); /* Light gradient for modern UI */
color: #333; /* Dark grey for text */
padding: 40px 20px;
font-family: Arial, sans-serif;
}

.footer-container {
display: flex;
justify-content: space-between;
align-items: flex-start; /* Ensures vertical alignment starts at the top */
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}

.footer-column {
flex: 1;
margin: 10px 15px;
min-width: 220px; /* Slightly wider columns for better spacing */
}

.logo-section h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #2a4d69; /* Soft blue for logo */
text-align: center; /* Centers the logo heading */
}

.logo-section p {
font-size: 14px;
line-height: 1.5;
text-align: center; /* Centers the logo description */
}

.footer-column h4 {
font-size: 16px;
margin-bottom: 15px;
color: #4a90e2; /* Bright blue for section headings */
text-align: center; /* Centers section headings */
}

.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-column ul li {
margin-bottom: 10px;
}

.footer-column ul li a {
text-decoration: none;
color: #333; /* Dark grey for links */
transition: color 0.3s ease;
display: flex;
align-items: center; /* Align icons and text */
justify-content: center; /* Center-align links in their column */
}

.footer-column ul li a:hover {
color: #4a90e2; /* Bright blue for hover effect */
}

.footer-column ul li a i {
margin-right: 8px; /* Add space between icon and text */
font-size: 18px;
}

.footer-column .social-icons {
display: flex;
justify-content: center; /* Center-aligns social icons */
gap: 15px; /* Space between icons */
margin-top: 15px;
}

.footer-column .social-icons a {
color: #333; /* Dark grey for social icons */
font-size: 20px;
transition: color 0.3s ease, transform 0.2s ease;
}

.footer-column .social-icons a:hover {
color: #4a90e2; /* Bright blue for hover effect */
transform: scale(1.1); /* Slight zoom effect on hover */
}

.footer-bottom {
text-align: center;
margin-top: 30px;
font-size: 14px;
color: #777; /* Soft grey for copyright text */
}

@media (max-width: 768px) {
.footer-container {
flex-direction: column; /* Stacks the columns vertically on smaller screens */
align-items: center;
}

.footer-column {
text-align: center;
margin: 20px 0;
}

.footer-column ul li a {
justify-content: center; /* Centers the links for smaller screens */
}
}




</style>
</head>
<body>
Expand Down Expand Up @@ -694,8 +813,55 @@ <h2 style="color: black;">What are

<!-- Footer -->
<footer>
<p style="color: #d6a52b;">&copy; 2024 Ajivika™. All rights reserved.</p>
</footer>
<div class="footer-container">
<!-- Logo Section -->
<div class="footer-column logo-section">
<h2>Ajivika</h2>
<p>
Ajivika is a user-friendly website designed to help you create professional resumes effortlessly. With customizable templates and an intuitive interface, it simplifies the process of showcasing your skills, education, and achievements in a polished format.
</p>
</div>

<!-- Services Section -->
<div class="footer-column">
<h4>Our Service</h4>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Help Center</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>

<!-- Company Section -->
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<!-- Social Media Section -->
<div class="footer-column">
<h4>Follow Us</h4>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i>Facebook</a></li>
<li><a href="#"><i class="fab fa-linkedin"></i>LinkedIn</a></li>
<li><a href="#"><i class="fab fa-instagram"></i>Instagram</a></li>
<li><a href="#"><i class="fab fa-youtube"></i>YouTube</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Ajivika - All Rights Reserved</p>
</div>
</footer>

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>


<!-- Floating Chat Button -->
<button class="chat-button" onclick="window.location.href='./chatbot.html'">
Expand Down
Loading