added footer
This commit is contained in:
parent
df6cb6a236
commit
e8db22c696
2 changed files with 95 additions and 16 deletions
|
@ -554,7 +554,31 @@
|
|||
|
||||
</main>
|
||||
|
||||
<footer></footer>
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="social-icon">
|
||||
<a href=""><i class='bx bxl-facebook'></i></a>
|
||||
<a href=""><i class='bx bxl-instagram' ></i></a>
|
||||
<a href=""><i class='bx bxl-twitter' ></i></a>
|
||||
<a href=""><i class='bx bxl-youtube' ></i></a>
|
||||
<a href=""><i class='bx bxl-gmail' ></i></a>
|
||||
</div>
|
||||
<div class="footernav">
|
||||
<ul>
|
||||
<li><a href="">News</a></li>
|
||||
<li><a href="">About</a></li>
|
||||
<li><a href="">Contact Us</a></li>
|
||||
<li><a href="">Our Team</a></li>
|
||||
<li><a href="">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<p>Copyright ©Blood Bank 2023. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
|
|
|
@ -939,20 +939,57 @@ form.search i{
|
|||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*----- footer -----*/
|
||||
.footer{
|
||||
width: 100%;
|
||||
padding: 50px 30px 20px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.social-icon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.social-icon a{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #FA8072;
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
}
|
||||
.social-icon a:hover{
|
||||
background-color: #E34234;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.social-icon a i{
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
}
|
||||
.footernav{
|
||||
margin: 30px 0;
|
||||
}
|
||||
.footernav ul{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.footernav ul li a{
|
||||
margin: 20px;
|
||||
font-size: 14px;
|
||||
color: #FA8072;
|
||||
transition: 0.5s;
|
||||
font-weight: 600;
|
||||
}
|
||||
.footernav ul li a:hover{
|
||||
color: #D22B2B;
|
||||
}
|
||||
.copyright{
|
||||
background-color: whitesmoke;
|
||||
color:#625a71;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width:1500px){
|
||||
|
@ -1060,10 +1097,28 @@ form.search i{
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
.footernav ul{
|
||||
flex-direction: column;
|
||||
}
|
||||
.footernav ul li{
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.social-icon a i{
|
||||
font-size: 18px;
|
||||
}
|
||||
.social-icon a{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:768px){
|
||||
.guide{
|
||||
padding: 1rem 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:490px){
|
||||
|
|
Loading…
Add table
Reference in a new issue