<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid</title> </head> <body> </body></html> Part 2-GridThe goal of this section isto create a simple grid layout for a webpage using grid:Add the following HTML Structure to grid.html:o BodyO Division element (w/ class "grid-container")• HeaderWelcome to Grid!• Division element (w/ class image-cell)• Image element• MainParagrapho Lorem Ipsum (1 paragraph)Footer02021Set the src attribute on the image element to this URL:https://loremipsum.io/assets/images/lorem-ipsum-generator-cicero-engraving.pngStyle RequirementsCreate selectors and blank rules for the following elements:• Body• div.grid-container• Header• div.image-cell• Main• FooterBody• Remove all default margins from this element• The text color of all content should be white Div-grid-container• Make this element a grid container• This grid should have six columns of equal sizeo Use fractional units (fr)• This grid should have six rows of equal sizeo Use fractional units (fr)this element should be 100% of its parent's widthset the background color to pinkНeader• this element spans six columnso it starts in the first columnthis element spans one rowo it starts in the first rowgive this element a dark background colorset the font size to 2.5x the default font sizemake this element a flex containercenter its content using flex propertiesDiv.image-cellgive this element a light background colormake this element a flex containercenter its content using flex propertiesthis element spans four columnso it starts in the first column• this element spans four rowso it starts in the second rowMain• set the background to a unique coloro pick a color that contrasts well with the white font color• add lem of padding to this elementset the font size to 2x the default font sizethis element spans two columnso it starts in the fifth column• this element spans four rowso it starts in the second rowFooter• this element spans 6 columnso it starts in the first columnthis element spans 1 rowo it starts in the sixth rowset the background color equal to the color used for the Headermake this a flex containercenter its content using flex properties

Given : - An html webpage layout Need to add the given html structure (mentioned in the above…

Answered: html | bartleby

Engineering

Computer Engineering

html

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Similar questions

Javascript Programming <!DOCTYPE html><html><head><meta charset="utf-8" /><meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>Tutorial 7</title><link rel="stylesheet" href="styles.css" /><script src="modernizr.custom.65897.js"></script></head> <body><header><h1>Using Associative Array</h1></header> <article><h2>Pizza Order Form</h2><div id="errorMessage"></div><form novalidate="novalidate"><fieldset id="deliveryinfo"><legend>Delivery Information</legend><label for="nameinput">Name</label><input type="text" id="nameinput" name="name" required="required" /><label for="addrinput">Street Address</label><input type="text" id="addrinput" name="address"…
What's the reason why page sizes are always a multiple of two?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="Enter name"> <title>Shape Up!</title> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="stylesheet" href="main_3_column.css"> </head> <body> <div class="container"> <header> <div class="headerImg"> <img src="images/shape_up_logo.png" alt="Shape Up logo"> </div> <div class="headerTxt"> <h2>Shape Up!</h2> <h3>Find the best fit for you</h3> </div> </header> <main> <div class="sidebar"> <aside> <h2>Additional resources</h2> <ul> <li><a href="https://www.cdc.gov/physicalactivity/basics/pa-health/index.htm">Physical activity and health</a></li> <li><a…
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 4 - Positions</title> <style> /* element selector */ replace-me { font-size: 10px; margin: 0; background-color:#414046; } /* class selector */ .replace-me { position: fixed; left: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 0; top: 0;…
<!DOCTYPE html><html><head><title>Home Page</title></head><body> <div class="topnav"> <a href="home.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </div> <div> <h1>Welcome to my (about me) site</h1> <picture> <source media="(min-width:650px)" srcset="me3-650.jpg"> <source media="(min-width:465px)" srcset="me3-465.jpg"> <img src="me3.JPG" alt="ME" style="width:auto;"> </picture> <h3>HI there this is one of my favorite songs down below.</h3> <iframe width="420" height="345"…
Write example to shows how to call a local stored image to set the background in html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 4 - Positions</title> <style> /* element selector */ replace-me { font-size: 10px; margin: 0; background-color:#414046; } /* class selector */ .replace-me { position: fixed; left: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 0; top: 0;…
What unique features does HTML have?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Part 4 - Positions</title> <style> /* element selector */ replace-me { font-size: 10px; margin: 0; background-color:#414046; } /* class selector */ .replace-me { position: fixed; left: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 4em; top: 0; background-color: white; width: 4em; height: 100vh; } /* class selector */ .replace-me { position: fixed; right: 0; top: 0;…
HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>Image Gallery</title> <meta charset="utf-8"> </head> <body> <h1>Image Gallery</h1> <div id = "gallery"> <li><a href="photo1.jpg"><img src="photo1.jpg" width="100" <span> <img src="photo1.jpg" width="150" height="150"> </li> <a href="#">Golden Gate Bridge</a> <li><a href="photo1thumb.jpg"><img src="photo1thumb.jpg" width="100" <span> <img src="photo1thumb.jpg" width="150" height="150"> </li> <a href="#">California Beach</a> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Shape Up!</title> <link rel="shortcut icon" href="images/favicon.ico"> </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>Get ready to Shape Up!</h1> <p>How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn about the exercises and diet that work best for you. We offer personalized programs as well as access to several health and dieting tools. So don't wait! Get started looking and feeling better today.</p> <p>As fitness expert Amanda Russell said:</p> <blockquote>Fitness is about so much more than exercise. It’s a catalyst for…
<DOCTYPE><html><heal><tite><meta>head><body> <p>Chapter 1, Analyze, Correct, Improve<dr> <P>HTML stands for Hyperlink Makes Learning fun.<p><p>You use presentation software to create HTML pages.</p<PHTML9 is the latest version of HTML.</p>HTML is rendered within the desktop of an operating system.</BODY>