Create a webpage applying the new HTML 5 semantic elements and design using CSS based on the instructions given. :"Qatar Airport" Navigation text : QatarAirways, FlyDubai, Heading text : National airline of Qatar, Copy Right © Qatar Airways 2021 Footer text a) Create Main with the following styles Set Border style to Double Set Border width to 15px Set Border color as Green b) Create Header and footer with the following styles Set background color as Pink Set the text color as Red, Set the text alignment as center Set the font-size as 30px c) Create the navigation with the following styles Set background color as cyan, Set the font-size as 30px, Set the text alignment as right Set "Qatar Airways.html" as the target,when the text "Qatar Airways" is clicked Set "FlyDubai.html" as the target ,when the text "FlyDubai" is clicked

Create a webpage applying the new HTML 5 semantic elements and design using CSS based on the instructions given. :"Qatar Airport" Navigation text : QatarAirways, FlyDubai, Heading text : National airline of Qatar, Copy Right © Qatar Airways 2021 Footer text a) Create Main with the following styles Set Border style to Double Set Border width to 15px Set Border color as Green b) Create Header and footer with the following styles Set background color as Pink Set the text color as Red, Set the text alignment as center Set the font-size as 30px c) Create the navigation with the following styles Set background color as cyan, Set the font-size as 30px, Set the text alignment as right Set "Qatar Airways.html" as the target,when the text "Qatar Airways" is clicked Set "FlyDubai.html" as the target ,when the text "FlyDubai" is clicked

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter4: Graphic Design With Css: Creating A Graphic Design For A Genealogy website

Section: Chapter Questions

Problem 4CP4

See similar textbooks

Similar questions

13- Create a webpage applying the new HTML 5 semantic elements and design using CSS based on the instructions given. Heading text : “Places to Visit in Oman” Navigation text : Opera House, National Museum Footer text : Best places to visit in Muscat Governorate a) Create Main with the following styles Set Border style to double Set Border width to 10px Set Border color as lime b) Create Header and footer with the following styles · Set background color as red · Set the text color as yellow · Set the font-size as 30px c) Create the navigation with the following styles · Set background color as blue · Set “opera.html” as the target ,when the text “Opera House” is clicked · Set “national.html” as the target ,when the text “National Museum” is clicked
1. Copy the act15.html and act15.css codes. Download the logo.2. Modify the HTML document and place an internal JavaScript to validate the input of the user. See the attached image for further instructions. <html> <head> <title>WEBDEV INC. LOG-IN PAGE</title> <link rel="stylesheet" href="act15.css"> <script> <!--Place your JavaScript codes here, and remove this comment! --!> </script> </head> <body> <header>Welcome!</header> <div class="bg1"></div> <div class="bg2"></div> <div class="main"> <center class="logoGroup"> <img class="logo" src="logo.png"> <br>WEBDEV INC. </center> <center class="login"> <form> <table> <tr> <td>Name: </td>…
Using HTML5 code, create cart_checkout.html as shown in the below given picture. Fill the checkout form with all necessary details and add a screenshot to your answer. I attached file The CVV should be obscured so that it cannot be read.
it should look like this, IN HTML AND CSS please Create the page layout where we call the top, bottom, left, and right portions of the page "header", "footer", "content", and "menu", respectively. Note that the content part of the page is further divided into three blocks: the top block has a heading and a paragraph, and is followed by two blocks - one on the left with two images, and one on the right with three "announcements". The header should use large, white, center-aligned text on a red background with a thick black border. There should be some space between the text and the border. The footer should use green, centered-aligned text on a gray background. The menu has an unordered list on a black background but the actual background of the list is red. so its a black block with a red block inside that has the list. Each item in the list is hyperlinked except for one called "Home". The unlinked text should be black, and the linked text should be white. When a user hovers over a…
1) use the tag selector to select all of the elements with an h1 tag and turn them green 2) use the class method to change all of the paragraph text to italicized 3) in the line item list, change the fourth element to be highlighted pink 4) create an event handler on the DOM element so that when a link is clicked, things return to the way they were at the start I have pasted the Code below. Thank you <!DOCTYPE html> <html> <head> <title>Assignment Week 2</title> </head> <body> <h1>jQuery is Exciting</h1> <p>We are learning jQuery this week, and it's been an exciting language to learn. We've talked about all aspects of the library, and really explored what it can do.</p> <h1>jQuery is Irritating</h1> <p>Even though jQuery can be fun, it an also be very confusing! We've learned that there are a vast array of opportunities within the libraries, but the syntax is important and a small mistake can break all…
Open index.html in your browser to view the file. Add the text, CH 5 Extend Your Knowledge, to the title element. Open the styles.css file and locate the "sticky” comment and create a style rule for the sticky class selector with the following rules: Add a declaration for the position property with a value of -webkit-sticky. Add a declaration for the position property with a value of sticky. Add a declaration for the top property and specify a 0 value. Refresh your page, and scroll down to view the changes. In the index.html file, use the empty paragraph element within the sticky div element to briefly explain how to use the sticky position. In the styles.css file, locate the “relative” comment and create a style rule for the relative class selector with the following declarations: Add a declaration for the position property with a value of relative. Add another declaration for the top property and specify a value of 90px. Add another declaration for the left property…
Assume you have the set of HTML code below and you are linking to an external CSS style sheet. Write a style rule that will set the text color of all elements with the class football, to teal. <body> <h1>This is a heading</h1> <p>This is a paragraph</p> <p class="football">This is a paragraph</p> <p class="football">This is a paragraph</p> </body>
Write the semantically correct HTML code for the navigation area of a website that lists 3 navigation items: products, services, and contact us. You don't need to include all the HTML for the page, only include the navigation itself. Each of the 3 items link to products.html, services.html, and contact-us.html. Write one inline CSS rule to remove the bullet from in front of the list items and horizontally center the navigation items on the screen. Write inline CSS that uses the display property to display the list items side-by-side.
Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include: A header element with the heading: "I love kitty cats" A navigation element including links to "Cat 1" and "Cat 2" which link to cat1.html and cat2.html respectively. A main element containing: a heading; a paragraph of lorem ipsum text; a 300px wide editorial image using this url: https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpegAnd this caption: "Cute kitty cat"; A footer element with the following content: "semantic html example with a cute kitty". Add internal CSS (and extra HTML if you need to) so that your page looks like the image below and: Use flexbox to make the nav items sit side-by-side; Make the image take up the whole width of its parent container, on all screen sizes; On screens wider than 820px only, use flexbox to make the image of the cat sit next to the written content in the main element; On screens wider than 1200px only, give…
web development: Write full HTML code to create the following heading and unordered list with required syntax. Create h2 element for header Create the unordered list Add internal CSS to style the header h2 with background-color as rgb(20,220,20) and border-radius as 15px. Add internal CSS to style unordered list bullet as an image –choose any image name
Create a button by using the HTML button element with the following criteria: With an ID of "btn" Show the caption "Reset" on the button Resets all the webpage controls when clicked The third control on the webpage that receives focus when using the tab key on the keyboard
Add a form on the checkout.html page that takes your name, email, phone number, and a credit card number. Use a regular expression to validate the email, phone number, and credit card. Existing code: checkout.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 80px; height: auto; } </style> </head> <body> <div id="productsFromCart"> </div> <script> let items = localStorage.getItem("myItems") ? JSON.parse(localStorage.getItem("myItems")) : []; items.forEach((element,index) => { let products = ""; products += "<div id='product" + element.id + "' class='card'>"; products += "<img src='" + element.image + "' />"; products += "<h1>" + element.name + "</h1>"; products += "<p class='price'>" + element.price + "</p>"; products += "<p>" + element.category +…