In: Computer Science
Create a footer for web page using HTML,CSS,Javascript. The footer should contain
1.Back to top button
2.Random logo
3.Copyright content
The code is given below,
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #f5f5ef ;
text-align:
center;
}
footer {
text-align:
center;
padding:
10px;
background-color: #ccccb3;
color:
black;
}
#myBtn {
float: right
;
padding: 8px
16px;
background-color: #80160e ;
}
.clearfix::after {
content:
"";
clear:
both;
display:
table;
}
img {
padding
:5px;
float: left
;
}
</style>
<script type="text/javascript">
//when user clicks on the button
the page will be scrolled upward.
function topFunction() {
document.body.scrollTop = 0; //for safari web browser
document.documentElement.scrollTop = 0; //for firefox,chrome
etc
}
</script>
</head>
<body>
<footer>
<div class="clearfix">
<img src="logo.jpg" width="70px"
height="70px">
<div class="foot">2020 © All
rights reserved.</div>
<button onclick="topFunction()"
id="myBtn" title="Go to top">Top</button>
</div>
</footer>
</body>
</html>
-- The code corresponding to logo section is
" <img src="logo.jpg" width="70px" height="70px"> "
The image logo.png should be placed within the folder of the code.
-- The javascript function " topFunction" is used to scroll the page upward on clicking the button "top".
-- The below code is used for the copyright section
" <div class="foot">2020 © All rights reserved.</div> "
-- to align all these elements correctly float and clearfix is used.
The screenshots for the code and output are also given below.
Please refer to the screenshot of the code to understand the indentation of the code.