Related questions
<!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;
background-color: green;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
position: fixed;
left: 0;
top: 0;
background-color: green;
width: 4em;
height: 100vh;
}
/* class selector */
.replace-me {
background: url('./images/white-car.png');
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
position: sticky;
margin-top: 50em;
top: 0;
left: 20%;
width: 20em;
height: 40em;
float: left;
}
/* General sibling combinator */
.replace-me ~ .replace-me {
position: relative;
background: url('./images/red-car.png');
background-repeat: no-repeat;
background-size: cover;
margin-top: 5em;
top: 0;
right: 20%;
width: 20em;
height: 40em;
float: right;
}
/* General sibling combinator */
.replace-me ~ replace-me {
background-color: #EFB700;
border-radius: 2px;
margin: 4em auto;
width: 4em;
height: 10em;
}
</style>
</head>
<body>
<div class="left-grass"></div>
<div class="left-side"></div>
<div class="right-side"></div>
<div class="right-grass"></div>
<div class="car-left">
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div class="car-right">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Step by stepSolved in 2 steps
- <!DOCTYPE html><html><head><!--Pop up Tutorial--><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hands-on Project 5-2</title><link rel="stylesheet" href="styles.css" /><script src="modernizr.custom.05819.js"></script></head> <body><header><h1>Pop-Up Tutorial</h1></header> <article><h2>Change of address form</h2><form><fieldset id="contactinfo"><label for="addrinput">Street Address</label><input type="text" id="addrinput" name="Address" /><label for="cityinput">City</label><input type="text" id="cityinput" name="City" /><label for="stateinput">State/Province</label><input type="text" id="stateinput" name="State" /><label for="zipinput">Zip/Postal Code</label><input type="number" id="zipinput" name="Zip" /></fieldset><fieldset…arrow_forward<!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 2 - Relative</title> <style> /* Write your style rules here */ </style></head><body> <!-- Write your HTML here --></body></html>arrow_forward<!DOCTYPE html><html><head><title>Contact me</title></head><body><!--Added main tag--><main><!--Added nav tag--> <nav> <a href="home.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav> <h1>Contact ME</h1> <span>photo of me Joe Mc</span><br> <picture> <source media="(min-width:650px)" srcset="me1-650.jpg"> <source media="(min-width:465px)" srcset="me1-465.jpg"> <img src="me1.jpg" alt="lake" style="width:auto;"> </picture> <p>You can contact me through : </p><div> <ul> <li>Email - 332boyman@gmail.com</li> <li>Phone - (802)3730290</li></ul> <footer> <p>Author: Josiah McSweeney<br><!--Added footer tag--><footer> <p>Copyright Reserved</p>…arrow_forward
- <!DOCTYPE html><html><head><title>Contact me</title></head><body><!--Added main tag--><main><!--Added nav tag--> <nav> <a href="home.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav> <h1>Contact ME</h1> <span>photo of me Joe Mc</span><br> <picture> <source media="(min-width:650px)" srcset="me1-650.jpg"> <source media="(min-width:465px)" srcset="me1-465.jpg"> <img src="me1.jpg" alt="lake" style="width:auto;"> </picture> <p>You can contact me through : </p><div> <ul> <li>Email - 332boyman@gmail.com</li> <li>Phone - (802)3730290</li></ul> <footer> <p>Author: Josiah McSweeney<br><!--Added footer tag--><footer> <p>Copyright Reserved</p>…arrow_forwardthis html code looks like this <!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>Login</title> <style> form{ display: flex; flex-direction: column; width: 300px; justify-content: space-evenly; margin: auto; } h2{ position: fixed; width: 350px; height: 300px; top: 50%; left: 50%; margin-top: -150px; margin-left: -175px; background: #07A8C3; padding-top: 10px; } </style> <script type="application/javascript"> function validate() { {{!-- var data = new FormData(); --}} const data = new URLSearchParams(); data.append('name', document.getElementById("name").value); data.append("password", document.getElementById("password").value); var params = { name: document.getElementById("name").value, password:…arrow_forward<!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,…arrow_forward
- <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>arrow_forward<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>arrow_forward<!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;…arrow_forward
- My code is like this <!doctype html> <html> <head> <title>Books Data</title> <script src= "https://code.jquery.com/jquery-3.5.1.js"> </script> <style> table { width=100%; } th { background-color:grey; } td { background-color:cyan; } </style> </head> <body> <table id="myTableData"> <tr> <th>id</th> <th>Book name</th> <th>description</th> <th>price</th> <th>author</th> <th>type</th> <th>img</th>…arrow_forward<!DOCTYPE html><html><head><title>Contact me</title></head><body><!--Added main tag--><main><!--Added nav tag--> <nav> <a href="home.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav> <main><h1>Contact ME</h1></main> <picture> <source media="(min-width:650px)" srcset="me1-650.jpg"> <source media="(min-width:465px)" srcset="me1-465.jpg"> <img src="me1.jpg" alt="lake" style="width:auto;"> </picture> <p>You can contact me through : </p><div> <ul> <li>Email - 332boyman@gmail.com</li> <li>Phone - (802)3730290</li></ul> <footer> <p>Author: Josiah McSweeney<br><!--Added footer tag--><footer> <p>Copyright Reserved</p> </div>…arrow_forward<!DOCTYPE html><html><head><title>Home Page</title></head><body><!--Added main tag--><main><!--Added nav tag--> <nav> <a href="home.html">Home</a> <a href="contact.html">Contact</a> <a href="about.html">About</a> </nav><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"…arrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill Education
Starting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSON
Digital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON 
C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSON
Database Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage Learning
Programmable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education