I need to recreate the entire image shipping label with the HTML and CSS. The label must look like the following image. Thanks in advance HSN SKU NUMBER: P.O. NUMBER: 498872 267615 Expiration Date: FROM: VENDOR ID: 424615 BAR CODES TALK LLC 924 Hale Avenue Brooksville, FL 34601 07/25/20 CARTON SHIP TO: 4 QUANTITY BAR CODES TALK LLC 924 Hale Avenue Brooksville, FL. 34601 33715 VENDOR ITEM NO. SHORT QTY CODE: 709311876815 DESCRIPTION SHIP DATE: 123123123 SHORT M SSonic Eraser Pro COUNTRY OF ORIGIN: CARTON USA 99 OF 100 Serialized Shipping Container Code (00) 0 6009887119 000570 5

I need to recreate the entire image shipping label with the HTML and CSS. The label must look like the following image. Thanks in advance HSN SKU NUMBER: P.O. NUMBER: 498872 267615 Expiration Date: FROM: VENDOR ID: 424615 BAR CODES TALK LLC 924 Hale Avenue Brooksville, FL 34601 07/25/20 CARTON SHIP TO: 4 QUANTITY BAR CODES TALK LLC 924 Hale Avenue Brooksville, FL. 34601 33715 VENDOR ITEM NO. SHORT QTY CODE: 709311876815 DESCRIPTION SHIP DATE: 123123123 SHORT M SSonic Eraser Pro COUNTRY OF ORIGIN: CARTON USA 99 OF 100 Serialized Shipping Container Code (00) 0 6009887119 000570 5

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

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 +…
Add embedded CSS code to this html file so that the display changes as the following picture : <html><head><title>Centered Fixed 3-Column Layout</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style> </style> </head><body><div id="wrapper"> <header><h1>Using CSS for Page Layouts</h1></header><nav><h2>Learn More</h2><p><a href="url">Topics</a></p><p><a href="url">Authors</a></p><p><a href="url">Videos</a></p><p><a href="url">Gallery</a></p><p><a href="url">Explore</a></p></nav> <article><h2 class="title">Article Title</h2><p class="copy">Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a…
Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include: a table that includes the same content as in the image below. Note that the heading is a part of the table, so that screen readers will know that the heading is associated with the table. Add internal/embedded CSS (and extra HTML if you need to) so that your page looks like the image below. DON'T include more CSS than you need to. Tip: You will need to use pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes
I need to change this code so that there is no button, and the jackhammer animation starts as soon as the page loads. <!DOCTYPE html><html><head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Unit 3 Graded Exercise 1</title></head><body> <h1>Michael Porter, JackhammerMan Exercise</h1> <img id="imgJackhammer" src="jackhammer0.gif" width="113" height="100" alt="Image of a man with a jackhammer."><br> <button onclick="startBouncing()">Start Bouncing</button> <script> var jackhammers = ["jackhammer0.gif", "jackhammer1.gif", "jackhammer2.gif", "jackhammer3.gif", "jackhammer4.gif", "jackhammer5.gif", "jackhammer6.gif", "jackhammer7.gif", "jackhammer8.gif", "jackhammer9.gif",…
i need help with this html and css, i tried to create the design in the attachment below but the layout wasn't showing as it should. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> <title>Restaurant Menu</title> </head> <body> <header> <h1>Delicious Restaurant</h1> </header> <div class="container"> <div class="menu-item"> <div class="item-left"> <img src="Image/burger.png" alt="Burger"> <div class="price-circle">$10.99</div> </div> <div class="item-right"> <h2>Classic Burger</h2> <p>A juicy beef patty topped with fresh lettuce, tomatoes, and cheese.</p> </div> </div> <!-- Add more menu items here…
Add embedded CSS code to this html file so that the display changes as following picture <!DOCTYPE html><html><head><title>Centered Fixed 3-Column Layout</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><style></style></head><body><div id="wrapper"><header><h1>Using CSS for Page Layouts</h1></header><nav><h2>Learn More</h2><p><a href="url">Topics</a></p><p><a href="url">Authors</a></p><p><a href="url">Videos</a></p><p><a href="url">Gallery</a></p><p><a href="url">Explore</a></p></nav><article><h2 class="title">Article Title</h2><p class="copy">Video provides a powerful way to help you prove your point. When you click Online Video,you can paste in the embed code for the video you want to add.You can also…
Add an id attributes for each product and make the id property of both of the buttons the id of the product. Existing code: <!DOCTYPE html><html><head> <div class="card"><img src="img/clorox.jpg"><h1>Clorox</h1><p class="price">$20.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/oxiclean.jpg"><h1>Oxiclean</h1><p class="price">$8.00</p><p>Household Cleaner</p><p><button>Add to Cart</button></p><p><button>Remove from Cart</button></p></div> <div class="card"><img src="img/pinesol.jpg"><h1>PineSol</h1><p class="price">$11.00</p><p>Household Cleaner</p><p><button>Add to…
in the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element. Add a class attribute with the value corner to the image element. Remove the height and width attributes from the image element. <body> <div id="container">  <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Resources</a></li> <li><a href="#">W3C</a></li> </ul> </nav>  <header> <h1>Responsive Design</h1> </header>  <main>…
I need to make this html look like this form <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shape Up! | Meal Plan</title> <link rel="shortcut icon" href="../images/favicon.ico"> <link rel="stylesheet" href="../styles/normalize.css"> <link rel="stylesheet" href="../styles/meals.css"> </head> <body> <header> <img src="../images/shape_up_logo.png" alt="Shape Up logo"> <h2>Shape Up!</h2> <h3>Find the best fit for you</h3> </header>  <main> <section> <h1>Meal plan order form</h1> <p>Fill out the form as completely as possible and we will email you a weekly meal plan, customized for you--<em>your</em> lifestyle, <em>your</em> goals, and…
I forgot to attach the orignial code. Here it is, I just need to make this code look like the image provided. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Employee table</title> <style> body { width: 750px; margin: 0 auto; } table { border-collapse: collapse; border: 1px solid black; margin: 20px; } thead { background-color: yellow; } th, td { border: 1px solid black; padding: .2em 1em .2em .5em; text-align: left; vertical-align: middle; } .right { text-align: right; } tbody tr:nth-child(even) td { background-color: yellow; } </style> </head> <body> <table> <thead> <tr> <th>Name</th>…
There are a few errors in this code: - You must add a style to change all img tags' width to 70px - You must add a style to change all img tags' height to 70px Here is the code below: <!DOCTYPE html><html> <head> <title>Product Suggestions</title>  <style> img{ width:70px; height:70px; } </style> </head> <body> <h1>Top Selling Coffee Makers</h1> <img src="https://codehs.com/uploads/3e5b0c8de83e7fbedf5e16dfe8960502" alt="Coffee Maker"> <img src="https://codehs.com/uploads/b6a1e499fa8e709b3591dde48f0219d9" alt="Coffee Maker"> <img src="https://codehs.com/uploads/56156cc6e4a7f53c00a31d2cb8f6a0c3" alt="Coffee Maker"> <img src="https://codehs.com/uploads/b826326ca109ce618474876309cf0772"…
PLEASE HELP ME TO FIX THIS. THIS HAS TO BE THE SAME TO THE IMAGE UPLOADED. I CHANGE THE COLORS <!doctype html><html><head><meta charset="UTF-8"><title>"The Bean Counter"</title> <style type="text/css"> body { background-color : blue; color : silver; font-family : helvetica; text-align : center} hr {width: 25%; color: blue;} h1 {color : white;} section {margin-left: auto; margin-right : auto; text-align : center; background-color: #4169E1; border-style : solid; border-color : MidnightBlue; border-width: medium; padding : 8px;} .drinkBtn {width 110px;} .otherBtn {width: 60px;} .total {border: solid black;} </style></head><body><h1>"The Bean Counter"</h1> <hr/> <p><b>Figuring the price of espresso drinks<br/> so baristas can have time to chat!</b></p> <br/><section…