jtpmcdevitt/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added footer

Browse source
This commit is contained in:
JSriwongsa 2023-07-25 17:04:06 -05:00
parent df6cb6a236
commit e8db22c696
2 changed files with 95 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
donation_website/index.html
View file

@ -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 &copy;Blood Bank 2023. All rights reserved.</p>
</div>
</div>
</footer>
<div class="overlay" data-overlay></div>

85
donation_website/style.css
View file

@ -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){