Asked
Viewed9 times
/*FOOTER*/
footer {
background: #D4988E;
color: white;
font-family: Arial;
position: fixed;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #707070;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
margin-left: -60px;
margin-right: -60px;
}
/*SOCİAL İCONS*/
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoFacebook:hover {
background-color: #3b5998;
}
.social-network a.icoLinkedin:hover {
background-color: #0e76a8;
}
.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #FFFFFF;
}
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #FFFFFF;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #D4988E;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
.footer{
position:relative;
height:100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://stackoverflow.com/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/Footer.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container1">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>CONTACT US</h4>
<ul class="list-unstyled">
<li><a href="#"></a></li>
<li><a href="#">+44 345 678 901</a></li>
<li><a href="#">flowerbee@gmail.com</a></li>
<li><a href="#">Find a store</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column2-->
<div class="footer-pad">
<h4>CUSTOMER SERVICE</h4>
<ul class="list-unstyled">
<li><a href="#">Cotact Us</a></li>
<li><a href="#">Ordering & Payment</a></li>
<li><a href="#">Shippig</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column3-->
<div class="footer-pad">
<h4>INFO</h4>
<ul class="list-unstyled">
<li><a href="#">Work With Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2018 - flowerbee. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>
how to add the same footer to multiple pages, just using html or javascript?
I would like to add the footer to all my web pages, I would like to link the html footer file to all the other html pages.
this is my footer file and I have to add it to all the pages of my site.
thank you very much to everyone who will help me!!!!
franchella is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
1
lang-html