Question

In: Computer Science

Apply following to header and footer sections of page in css center text background color rgb(254,198,179)...

Apply following to header and footer sections of page in css

center text

background color rgb(254,198,179)

padding should be 20px

Solutions

Expert Solution

<html>
<head>
<title>Header</title>
<style>
        /* Body css sets the color, padding, text align */
    body{        
        padding-top: 60px;
        padding-bottom: 40px;
                vertical-align: middle; 
                text-align: center; 
                background-color: rgb(254,198,179);
    }
        /* Sets footer width, color, position, padding */
    .fixed-header, .fixed-footer{
        width: 100%;
        color: #000;
        position: fixed;        
        background: #FFF;
        padding: 10px 0;
    }
        /* sets header at top */
    .fixed-header{
        top: 0;
    }
        /* sets footer at bottom */
    .fixed-footer{
        bottom: 0;
    }
        /* below class text at center*/
        .centertext{
                width:100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
        }
    nav a{
        color: #000;
        text-decoration: none;
        padding: 7px 20px;
        display: inline-block;
    }
        /* Sets the padding at 20px */
    .container p{
        line-height: 20px;
                padding:20px;
    }
</style>
</head>
<body>
        
        <header>
                
                <div class="fixed-header">
                        <div class="container">
                                <nav>
                                        <a href="#">Home</a>
                                        <a href="#">About</a>
                                        <a href="#">Products</a>
                                        <a href="#">Services</a>
                                        <a href="#">Contact Us</a>
                                </nav>
                        </div>
                </div>
                
        </header>
        
        <center>
                <div class="container centertext">
                        
                        <p>We may not know about your favourite coffee, but we surely know what you need right now. 
                        And that is to learn your favourite programming language with us, that can optimise
                        the best results for the future. the programming language with us, that can optimise
                        the best results for the future. </p>
                        
                        <p>We may not know about your favourite coffee, but we surely know what you need right now. 
                        And that is to learn your favourite programming language with us, that can optimise
                        the best results for the future.</p>
                        
                </div>  
        </center> 
        
        <footer>
                <div class="fixed-footer">
                        <div class="container">Copyright &copy; 2020 Your Company</div>        
                </div>
        </footer>
        
</body>
</html>


Related Solutions

Apply following to header and footer sections of page: center text background color rgb(254,198,179) padding should...
Apply following to header and footer sections of page: center text background color rgb(254,198,179) padding should be 20px
apply following to body of the page in css format 1. background color of rgb(145,215,170) 2....
apply following to body of the page in css format 1. background color of rgb(145,215,170) 2. width to 65% of the page 3. center the body using the margin property 4. assign a font family of Georgia, Times, serif
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
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
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....
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All...
Create 6 tags with text inside them (in a valid HTML page,) color each differently. All show up on the page at this point... it's better to try to have everything upfront and in the open 1st and later have them hide, hover, or whatever interaction they will do. See the video for the text, don't bother matching the colors in the video. Validate the HTML. Bugs multiply as you make the page more complex; a CSS problem could actually...
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...
In one-page, create a memo on a policy that contains the following: Background of the issue...
In one-page, create a memo on a policy that contains the following: Background of the issue A discussion about other alternatives for the issue A financial analysis Evidence-based recommendations for action.
- Supply and Demand Assignment The paper should consist the following sections: the title page, main...
- Supply and Demand Assignment The paper should consist the following sections: the title page, main body, and references. Select a market that is of interest. Use what you know about this industry and knowledge from this course to answer the questions below. Markets that might be of interest (or select your own market of interest): Housing market (or housing rental market) in Toronto/Ontario/Canada or any other location Market for mobile phone service Market for tablets (i.e. iPad, Samsung Galaxy...
Read carefully the below problem text and write the following proposal sections in paragraph format: Analysis...
Read carefully the below problem text and write the following proposal sections in paragraph format: Analysis of the problem The reasons Proposed solutions Risk to the organisation if the proposed changes are not made Hunter Co.: The Hunter Company is a chain of restaurants that are widely distributed across the Kingdom of Saudi Arabia. The business started in 1995 with one branch in Jeddah. It was very successful as it was always crowded and widely complimented by customers in terms...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT