Question

In: Computer Science

Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...

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

Solutions

Expert Solution

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.


Related Solutions

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will...
Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...
write php code for buying and selling web using sql, javascript ,html ,css style
write php code for buying and selling web using sql, javascript ,html ,css style
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
Using HTML: Create a Book of the Month Club Web site. The home page should describe...
Using HTML: Create a Book of the Month Club Web site. The home page should describe the current month's selection, including book title, author, publisher, ISBN, and the number of pages. Create separate Web pages for book selections in each of the last three months. Add links to the home page that opens each of the three Web pages. Save the home page as BookClub.html, and save the Web Pages for previous months using the name of the month. BOOK:...
HTML Create a page of texts that uses inline elements. The page should contain a citation,...
HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT