Skip to content

improved footer for its better readibility and added some animations #570

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

Closed
wants to merge 1 commit into from
Closed

improved footer for its better readibility and added some animations #570

Show file tree
Hide file tree
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
150 changes: 147 additions & 3 deletions home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -795,7 +795,7 @@ body.dark-mode .faq{
/* Tomato red color */
}

/* Styles for Footer */
/* Styles for Footer
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

.f1{
Expand Down Expand Up @@ -917,7 +917,7 @@ body.dark-mode .faq{
margin-top: 4rem;
margin-left: 4rem;
}

*/
/* Media Queries */
@media screen and (max-width: 1000px) {
.hero {
Expand Down Expand Up @@ -1086,4 +1086,148 @@ body.dark-mode .faq{
align-items: center;
font-size: medium;
}
}
}

/* General footer styling */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

.f1 {
padding: 3rem 1rem;
background: #000; /* Changed background color to black */
position: relative;
min-height: 350px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 20px; /* Added curved border */
}

.social_media:hover {
color: yellow;
}

.container1 {
max-width: 1140px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.social {
font-size: x-large;
}

.row1 {
display: flex;
justify-content: space-between;
align-items: center;
}

.col1 {
min-width: 250px;
color: #fff; /* Changed text color to white */
font-family: 'Poppins', sans-serif;
padding: 0 2rem;
text-align: center;
}

.col1 .h11 {
color: yellow;
}

.col1 .logo {
width: 100px;
margin-bottom: 25px;
}

.col1 h3 {
font-weight: 800;
color: yellow;
margin-bottom: 20px;
position: relative;
cursor: pointer;
}

.col1 h3::after {
content: '';
height: 2px;
width: 35px; /* Adjusted width for underline */
background-color: rgb(208, 255, 0);
position: absolute;
bottom: -5px; /* Adjusted position for underline */
left: 50%;
transform: translateX(-50%);
transition: width 0.3s ease;
}

.col1 h3:hover::after {
width: 70px; /* Adjusted width on hover */
}

.col1 .social a i {
color: #fff; /* Changed icon color to white */
margin-top: 2rem;
margin-right: 5px;
transition: 0.3s ease;
font-size: 1.8rem;
}

.col1 .social a i:hover {
transform: scale(1.5);
color: yellow;
}

.col1 .links a {
font-weight: 200;
display: block;
text-decoration: none;
color: #fff; /* Changed link text color to white */
margin-bottom: 5px;
position: relative;
transition: transform 0.3s ease;
}

.col1 .links a::before {
content: '';
height: 16px;
width: 3px;
position: absolute;
top: 50%;
left: -10px;
background-color: rgb(255, 255, 0);
transition: opacity 0.5s ease, height 0.3s ease;
opacity: 0;
transform: translateY(-50%);
}

.col1 .links a:hover::before {
opacity: 1;
height: 100%;
}

.col1 .links a:hover {
transform: translateX(-8px);
color: yellow;
}

.col1 .contact-details {
display: inline-flex;
justify-content: space-between;
}

.col1 .contact-details i {
margin: 10px;
}

.copyright {
color: #a9a9a9; /* Adjusted copyright text color */
justify-content: center;
display: flex;
align-items: center;
margin-top: 4rem;
margin-left: 4rem;
}
113 changes: 55 additions & 58 deletions home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -447,66 +447,63 @@ <h3>How will my performance be evaluated?</h3>
<!--Footer Section-->
<footer class="f1">
<div class="container1">
<div class="row1">
<div class="col1" id="Company">
<h1 class="h11">About Us</h1>
<p>
CSEdge is an online internship platform that provides students with the opportunity to gain practical experience in the field of software development.
</p>
<div class="social">
<a href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#"><i class="fa-brands fa-square-instagram"></i><a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i><a>
<a href="#"><i class="fa-brands fa-square-github"></i></a>
</div>
<div class="row1">
<div class="col1" id="Company">
<h1 class="h11">About Us</h1>
<p>
CSEdge is an online internship platform that provides students with the opportunity to gain practical experience in the field of software development.
</p>
<div class="social">
<a href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#"><i class="fa-brands fa-square-instagram"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-square-github"></i></a>
</div>
</div>
<div class="col1" id="Serv">
<h3>Need Help ?</h3>
<div class="links">
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Cancellation & Refund Policy</a>
<a href="#">Shipping and Delivery Policy</a>
</div>
</div>
<div class="col1" id="useful-links">
<h3>Learn More</h3>
<div class="links">
<a href="#">FAQ</a>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Internships</a>
<a href="#">Verify Certificate</a>
</div>
</div>
<div class="col1" id="cont">
<h3>Contact</h3>
<div class="contact-details">
<i class="fa fa-message"></i>
<p>Internship@csedge.courses</p>
</div>
<div class="contact-details">
<i class="fa fa-phone"></i>
<p>+1-9876543210</p>
</div>
</div>
</div>
<div class="col1" id="Serv">
<h3>Need Help ?</h3>
<div class="links">
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Cancellation & Refund Policy</a>
<a href="#">Shipping and Delivery Policy</a>
</div>
</div>

<div class="col1" id="useful-links">
<h3>Learn More</h3>
<div class="links">
<a href="#">FAQ</a>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Internships</a>
<a href="#">Verify Certificate</a>
</div>
</div>

<div class="col1" id="cont">
<h3>Contact</h3>
<div class="contact-details">
<i class="fa fa-message"></i>
<p>Internship@csedge.courses <br></p>
</div>
<div class="contact-details">
<i class="fa fa-phone"></i>
<p>+1-9876543210</p>
</div>
</div>
</div>
</div>
<p class="copyright">
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
CSEdge. All Right Reserved Designed by Team CSEdge.
</p>
</div>

</div>
<p class="copyright">
Copyright ©
<script>
document.write(new Date().getFullYear());
</script>
CSEdge. All Right Reserved Designed by Team CSEdge.
</p>
</footer>

<!-- Footer End here -->

<script>
Expand Down