Skip to content

Commit

Permalink
Add Responsive Footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@chow870
chow870 committed Oct 9, 2024
1 parent 32832d0 commit 694c318
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 39 deletions.
36 changes: 36 additions & 0 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,6 +385,42 @@ color: #e76668;
color: #fff;
text-decoration: none;
}
@media (max-width: 768px){
.mid768{
display: flex;
flex-direction: column;
align-items: center;
}
#rows {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.footer-links {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
}
.col-lg-3 {
flex: 0 0 100%;
margin-bottom: 10px;
}

.footer-links:nth-child(1),
.footer-links:nth-child(4) {
flex: 0 0 100%;
}

.footer-links:nth-child(2),
.footer-links:nth-child(3) {
flex: 0 0 48%;
margin: 0 1%;
}
}

/*--------------------------------------------------------------
# Pagination
Expand Down
82 changes: 43 additions & 39 deletions templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,59 +218,63 @@
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="row" id="rows">
<div class="col-lg-3 col-md-6 footer-links">
<ul>
<ul class="mid768">
<li>
<img class="mb-2 ml-3" src="{% static 'img\New MNNIT Logo.png' %}" alt="" width="89.57" height="120.85">
</li>
<li> <small class="text-muted">© Robotics Club MNNIT</small></li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<h4 class="first">Useful Links</h4>
<ul>
<li><a class="" href="{% url 'home:index' %}"><i class="fa fa-angle-right" aria-hidden="true"></i>
Home</a></li>
<li><a class="" href="{% url 'workshop:workshop_page' %}" target=""><i class="fa fa-angle-right"
aria-hidden="true"></i>
Workshops</a></li>
<li><a class="" href="{% url 'home:collaborate' %}" target=""><i class="fa fa-angle-right"
aria-hidden="true"></i>
Collaborate</a></li>
<li><a class="" href="http://aeroclub.mnnit.ac.in" target="_blank"><i class="fa fa-angle-right" aria-hidden="true"></i>
Aeroclub</a></li>
<li><a class="" href="http://astrowing.mnnit.ac.in" target="_blank"><i class="fa fa-angle-right" aria-hidden="true"></i>
AstroClub</a></li>
</ul>
<li><h4 class="first">Useful Links</h4></li>
<li><a class="" href="{% url 'home:index' %}"><i class="fa fa-angle-right" aria-hidden="true"></i>
Home</a></li>
<li><a class="" href="{% url 'workshop:workshop_page' %}" target=""><i class="fa fa-angle-right"
aria-hidden="true"></i>
Workshops</a></li>
<li><a class="" href="{% url 'home:collaborate' %}" target=""><i class="fa fa-angle-right"
aria-hidden="true"></i>
Collaborate</a></li>
<li><a class="" href="http://aeroclub.mnnit.ac.in" target="_blank"><i class="fa fa-angle-right" aria-hidden="true"></i>
Aeroclub</a></li>
<li><a class="" href="http://astrowing.mnnit.ac.in" target="_blank"><i class="fa fa-angle-right" aria-hidden="true"></i>
AstroClub</a></li>
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<ul>
<li>
<h4 class="second">Robotics Club</h4>
</li>
<li>Near Boys' SAC</li>
<li>MNNIT Allahabad</li>
<li>Prayagraj</li>
<li>Uttar Pradesh, India</li>
<!-- <li><strong>Email :</strong>[email protected] </li> -->
</ul>
<ul>
<li>
<h4 class="second">Robotics Club</h4>
</li>
<li>Near Boys' SAC</li>
<li>MNNIT Allahabad</li>
<li>Prayagraj</li>
<li>Uttar Pradesh, India</li>
<!-- <li><strong>Email :</strong>[email protected] </li> -->
</ul>
</div>

<div class="col-lg-3 col-md-6 footer-links">
<h4 class="third">Our Social Networks</h4>
<!-- <p class="text-white">Cras fermentum odio eu feugiat lide par naso tierra videa magna derita valies</p> -->
<div class="social-links mt-3">
<a href="https://www.facebook.com/avishkar.robotics" class="facebook" target="_blank"><i
class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/roboticsclubmnnit/" class="instagram" target="_blank"><i
class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/channel/UCsHbcNUhK5dMWgtsxNNfm7A" class="youtube" target="_blank"><i
class="fa fa-youtube"></i></a>
<a href="https://www.linkedin.com/in/robotics-club-mnnit-20634417a/" class="linkedin" target="_blank"><i
class="fa fa-linkedin"></i></a>
<a href="mailto:[email protected]" class="linkedin" target="_blank"><i
class="fa fa-envelope"></i></a>
<div class="mid768" >
<h4 class="third">Our Social Networks</h4>
<!-- <p class="text-white">Cras fermentum odio eu feugiat lide par naso tierra videa magna derita valies</p> -->
<div class="social-links mt-3">
<a href="https://www.facebook.com/avishkar.robotics" class="facebook" target="_blank"><i
class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/roboticsclubmnnit/" class="instagram" target="_blank"><i
class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/channel/UCsHbcNUhK5dMWgtsxNNfm7A" class="youtube" target="_blank"><i
class="fa fa-youtube"></i></a>
<a href="https://www.linkedin.com/in/robotics-club-mnnit-20634417a/" class="linkedin" target="_blank"><i
class="fa fa-linkedin"></i></a>
<a href="mailto:[email protected]" class="linkedin" target="_blank"><i
class="fa fa-envelope"></i></a>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 694c318

Please sign in to comment.