Skip to content

Enhanced the footer of the main (blog) page #546

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

Enhanced the footer of the main (blog) page #546

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
119 changes: 114 additions & 5 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1282,11 +1282,6 @@ progress {
width: 91.66666667%;
}

.col-md-12 {
flex: 0 0 auto;
width: 100%;
}

.offset-md-0 {
margin-left: 0;
}
Expand Down Expand Up @@ -12673,3 +12668,117 @@ fieldset:disabled .btn {
margin-top: 20px;
transform: rotate(0deg);
}

.site_footer{
padding: 3rem 1rem;
background-color:#262121;
position: relative;
min-height: 350px;
width: 100%;
text-align: center;
color:white;
}
.footer-links{
list-style-type: none;
color:white;
}
.social{
font-size:35px;
padding:20px;
}
ul li a{
color:white;
text-decoration:none;
}
ul li a:hover{
color:white;
text-decoration:none;
}
.col-md-12{
background-color: #5c636a;
position:relative;
bottom: 0px;
width:100%;
height:100px;
color:white;
text-align: center;
padding:40px;
font-weight:700;
}
.fa-brands{
color:white;
padding:20px;
}
.follow_us{
font-size: medium;
}
@media (min-width:750px) {
footer{
max-height: 850px;
}
}
@media (min-width:850px) {
footer{
max-height: 510px;
}
}
@media (min-width:1000px) {
footer{
max-height: 410px;
}
.col-sm-12{
width:300px;
position:absolute;
left:0%;
}
.col-md-3{
position:absolute;
left:24%;
top:2%;
}
.Quick_links_footer{
position:absolute;
top:10%;
left:39%;
}
.social{
position:absolute;
top:35%;
left:58%;
}
.follow_us{
position:absolute;
top:15%;
left:65%;
}
}
@media (min-width:1200px) {
footer{
max-height: 300px;
}
.col-sm-12{
width:380px;
position:absolute;
left:0%;
}
.col-md-3{
position:absolute;
left:24%;
top:2%;
}
.Quick_links_footer{
position:absolute;
top:10%;
left:39%;
}
.social{
position:absolute;
top:35%;
left:65%;
}
.follow_us{
position:absolute;
top:15%;
left:70%;
}
}
62 changes: 33 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,24 +271,25 @@ <h2 class="card-title">How to Create a GitHub Account</h2>
</div>

<!-- Site footer -->
<footer class="site-footer">
<footer class="site_footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About Us</h6>
<h6><strong>About Us</strong></h6>
<p class="text-justify">
This website offers straightforward guides and tutorials for
interns, providing clear directions to complete tasks effectively.
Simplify your internship experience with our easy-to-follow
articles and docs.
</p>
<a class="libutton"
<center><a class="libutton"
href="https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7202959273855713280"
target="_blank">Subscribe on LinkedIn</a>
target="_blank">Subscribe on LinkedIn</a></center>
</div>

<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<br><br>
<h6><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Categories</strong></h6>
<ul class="footer-links">
<li><a href="#">Web Design</a></li>
<li><a href="#">JavaScript</a></li>
Expand All @@ -298,26 +299,34 @@ <h6>Categories</h6>
<li><a href="#">Tutorials</a></li>
</ul>
</div>

<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>

<div class="col-xs-6 col-md-3 Quick_links_footer">
<br>
<h6><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quick Links</strong></h6>
<ul class="footer-links">
<li><a href="https://csedge.courses/about">About Us</a></li>
<li><a href="https://csedge.courses/#contact">Contact Us</a></li>
<li><a href="https://github.com/CSEdgeOfficial/learn.csedge.courses">Contribute</a></li>
<li><a href="./csedge.courses/privacypolicy.html">Privacy Policy</a></li>
</ul>
<ul class="social-icons">
<li><a href="https://youtube.com/@CSEdgeOfficial"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/CSEdgeOfficial"><i class="fab fa-github" aria-hidden="true"></i></a></li>

<li><a href="https://www.linkedin.com/company/csedge/"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/csedgeofficial"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<hr />
</div>
</div>
</div>
</div>
<br>
<p class="follow_us"> <strong>Contact Us </strong>
<br>Email : internship@csedge.courses<br><br>
<strong>Follow Us</strong></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>

<style>
.libutton {
display: flex;
Expand Down Expand Up @@ -372,20 +381,15 @@ <h6>Quick Links</h6>
color: #007bff;
}
</style>
<hr style="border-top: 1px solid black;">
<!-- Copyright Section -->
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="copyright-text">
Copyright &copy;
<script>document.write(new Date().getFullYear())</script> All Rights Reserved by CSEdge Learn
</p>
</div>
</div>
</div>


</footer>

<div class="col-md-12">
<p class="copyright-text">
Copyright &copy;
<script>document.write(new Date().getFullYear())</script> All Rights Reserved by CSEdge Learn
</p>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="./ScrollToTop.js"></script>
Expand Down