esign the following webpage using a two-column layout using floating technique as shown below. All the regions should contain appropriate padding. use different background colors to distinguish parts.

esign the following webpage using a two-column layout using floating technique as shown below. All the regions should contain appropriate padding. use different background colors to distinguish parts.

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter7: Designing A Web Form: Creating A Survey Form

Section: Chapter Questions

Problem 3CP4

See similar textbooks

Design the following webpage using a two-column layout using floating technique as shown below.

All the regions should contain appropriate padding. use different background colors to distinguish parts.

Masthead
20% - any suitable color
Main Article
List of links
20% coral color
65% - aqua color
Footer
15% - any suitable color

Expert Solution

This question has been solved!

Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.

SEE SOLUTION Check out a sample Q&A here

Step 1

VIEW

Step 2

VIEW

Step 3

VIEW

Step by step

Solved in 3 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions

Imagine that an xhtml document contains the following hyperlink tag I am Seven. When the link text (Seven) is clicked, the servlet with the URL pattern /process is called. Rewrite the code to instead use a form that submits to the same servlet to produce the exact same response using hidden form elements for any form parameters. The form should contain a submit button with the button text Seven. The form method should be get (case sensitive answer).
<!DOCTYPE html> <html lang="en"> <head> <title>MASTER MIND</title> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <script type="text/javascript"> function MakeDot(colour) { var string = '<span class="dot" style="background-color:'; switch (colour) { case 'red': string += '#ff0000'; break; case 'green': string += '#00cc00'; break; case 'orange': string += '#ff9900'; break; default: string += '#bbb'; break; } string += ';"></span>'; return string; } </script> <body> <div class="nav" id="nav"> <h2>MASTER MIND</h2> <li><a id="game" href="index.html" target="_self">mastermind 1</a></li> </div> <div class="content" id="content"> <h1>Number Game</h1> <div id="info"> there are 4 need to guess ,numbers from 0 to 9.<br /> show result by colour green, orange, red. <br /> <script>…
<!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 5: Document Object Model - Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/c05.css"> </head> <body> <div id="page"> <h1 id="header">List</h1> <h2>Buy groceries</h2> <ul> <li id="one"><em>fresh</em> figs</li> <li id="two">pine nuts</li> <li id="three">honey</li> <li id="four">balsamic vinegar</li></ul> </div> <script src="js/example.js"></script> </body> </html> remove their list items and add your own for the following game consoles: Xbox Series X Xbox Series S Playstation 5 Playstation 5 DE Nintendo Switch Nintendo Switch Lite Use the javascript methods for removing nodes,…
Apply Boostrap to this code Source Code in HTML: <html><head><link rel="stylesheet" href="mystyle.css"></head><body><table align="center" bgcolor="skyblue"><form><tr><td colspan="2"><h1>Employee Registration Form</h1></td></tr><tr><td>Name:</td><td><input type="text" name="firstname" placeholder="firstname" size="15"/><input type="text" name="lastname" placeholder="lastname"size="15"/><br><br></td></tr><tr><td> Email Address:</td><td><input type="text" name="emailaddress" placeholder="myname@example.com" size="36"/><br><br></td></tr><tr><td> Contact Number:</td><td><input type="text" name="contact" size="36"/><br><br></td></tr><tr><td>Address:</td><td><input type="text" placeholder="Street Address"…
this is the "index page "code index .hbs<!DOCTYPE html><html><head><link rel="stylesheet" href="./data/l.css"></head><body><div class="flex"><div class="element-center"><div id="acctBalance"><span class="wrap"></span></a><h1>Total Balance</h1><label id="acctBalanceLbl"></label><input id="txtid" name="txtid" type="text" maxlength="10" placeholder="Accountnumber"><br><br></div><div id="inputs"><h2>Deposit</h2><input type="text" id="userDeposit" required><button id="btnDeposit">Deposit</button><h2>Withdraw</h2><input type="text" id="userWithdraw" required><button id="btnWithdraw">Withdraw</button><label id="usernameLb2"></label>// add label for displaying user name</div></div></div><script type="text/javascript" src="bank_account_script.js"></script><script…
this is the "index page "code index .hbs<!DOCTYPE html><html><head><link rel="stylesheet" href="./data/l.css"></head><body><div class="flex"><div class="element-center"><div id="acctBalance"><span class="wrap"></span></a><h1>Total Balance</h1><label id="acctBalanceLbl"></label><input id="txtid" name="txtid" type="text" maxlength="10" placeholder="Accountnumber"><br><br></div><div id="inputs"><h2>Deposit</h2><input type="text" id="userDeposit" required><button id="btnDeposit">Deposit</button><h2>Withdraw</h2><input type="text" id="userWithdraw" required><button id="btnWithdraw">Withdraw</button><label id="usernameLb2"></label>// add label for displaying user name</div></div></div><script type="text/javascript" src="bank_account_script.js"></script><script…
Correct the following code. <!DOCTYPEhtml><hTm><head><title>Page Title<title></head><body></h1>This is a Heading</h1><p>This is a paragraph.</p><body><html>
Make a timer that has 2 minutes limit, the game starts when you click the timer button. When times up the cards can't be clicked. Make the cards be able to be flipped. Write a function for matching the cards, if htey match keep them with the right side up if don't flip them back. Do this in javascript.html and css codes <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="start.css"> <title></title> </head> <body> <div class="whole"> <div class="images"><img src="1.png"></div> <div class="images" ><img src="final.jpg"></div> <div class="images"><img src="2.png"></div> <div class="images"><img src="final.jpg"></div> <div class="images"><img src="final.jpg"></div> <div class="images"><img src="4.png"></div> <div class="images"><img src="final.jpg"></div> <div…
How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be? HTML <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Flexbox Coding</title></head> <link rel="stylesheet" href="Style.css"> <body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div>An country…
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello OpenCV.js</title> </head> <body> <h2>Chess.js</h2> <p id="status">OpenCV.js is loading...</p> <div> <div class="inputoutput"> <img id="imageSrc" alt="No Image" , width="200" /> <div class="caption"> imageSrc <input type="file" id="fileInput" name="file" /> </div> </div> <div class="inputoutput"> <canvas id="canvasOutput"></canvas> <div class="caption">canvasOutput</div> </div> </div> <script type="text/javascript"> let imgElement = document.getElementById("imageSrc"); let inputElement = document.getElementById("fileInput"); inputElement.addEventListener( "change", (e) => { imgElement.src =…
In javascript, please validate this html <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <div style=" border: 1px solid; padding: 5px;"> <fieldset> <legend>Personal Information:</legend> <table boarder="1"> <tr> <td>First Name</td> <td><input type="text" /></td> <td>Gender</td> <td><input type="radio" value="Male" /> <label> Female</label><input type="radio" value="Male" /> <label> Male</label> </td> </tr> <tr> <td>Last Name</td>…
When a JavaScript event handler that calls thedoSomething()function in response to a click event is attached to an image on a web page, then that image can be referenced from within thedoSomething()function using thethisobject. Select one: True False