Question

In: Computer Science

Build a web page using an external CSS file based on the following specifications : a)...

Build a web page using an external CSS file based on the following specifications :
a) The page must have a breaking point at 768px (desktop/mobile).
b) The three sections contents (header, main and footer) must be full-width and no larger than 960px (horizontally centered block).
Ma
c) Header must be 80px high, full width and fixed and will show your name on the left /5 side. The burger icon should appear when the browser’s window is 768px or lower.
Background must be black, and text white.
d) Footer must be 40px high, full width, and fixed. It should gradually change color from /5 red to blue when the mouse hovers it.

Solutions

Expert Solution

Here is the HTML code for the above requirements:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontally Center a Div Using CSS</title>
<style>
@media only screen and (min-width: 768px) {
    .header-container, .main-container, .footer-container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
    } 
    .header-container, .footer-container{
        background: #333;
        color: #fff;
        width: 80%;
        margin: 0 auto;
        padding: 20px;
    }
     .header-container{
        top:0;
        width:960px;
        height:80px;
    } 
    .main-container{
        width:960px;
        margin: 0 auto; 
        margin-bottom:358px;
     }
    .footer-container{
        bottom: 0;
        width:960px;
        height:80px;
        background-color:red;
        transition: background 0.5s ease-in-out;
    }
    .footer-container:hover{
        background-color:blue;
    }
    h1{
        color:white;
        }
        #burger{
                margin-right:20px;      
        }
}
</style>
</head>
<body>
    <div class="header-container">
        <img id="burger" src="https://image.freepik.com/free-vector/burger-icon-fast-food-collection-isolated-food-icon_194824-6.jpg" width="70px" height="70px" style="float:left";>
        <h1>Burger King</h1>
    </div>
   <div class="main-container">Your Order Is Ready!!!
    </div>
    <div class="footer-container">
    </div>
</body>
</html>

Output:

venereology answered 4 months ago
Next > < Previous

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...
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...
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...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a...
Use external CSS and Javascript files. Use the HTML5 elements to layout the page. In a sidebar include an advertisement that changes its image every three seconds. The can be created in paint and be very simple or more detailed.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT