<!-- DOCTYPE declaration -->
<!DOCTYPE html>
<!-- HTML boilerplate code -->
<html lang="en">
<!-- head tag -->
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>Social</title>
</head>
<!-- body tag -->
<body>
<style>
.sidenav {
height:
100%;
width:
160px;
position:
fixed;
z-index:
1;
top:
0;
left: 0;
background-color: #111;
overflow-x:
hidden;
padding-top:
20px;
}
.sidenav a {
padding: 6px 8px
6px 16px;
text-decoration:
none;
font-size:
25px;
color:
#818181;
display:
block;
}
.sidenav a:hover {
color:
#f1f1f1;
}
.centerImage {
text-align:center;
display:block;
}
.main {
margin-left: 160px; /*
Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px
10px;
}
</style>
<div class="sidenav">
<a
href="index.html">Home</a>
<a
href="resume.html">Resume</a>
<a
href="projects.html">Projects</a>
<a
href="contact.html">Contact</a>
<a
href="social.html">Social</a>
</div>
<div class="main">
<img
src="./images/social_media_icons.jpg"
usemap="#social_media_iconsmap">
<map
name="social_media_iconsmap">
<area target="" alt="Facebook" title="Facebook" href="Dont worry
about the address" coords="8,4,107,106" shape="rect">
<area
target="" alt="Twitter" title="Twitter" href="Dont worry about the
address_" coords="279,105,178,5" shape="rect">
<area
target="" alt="Youtube" title="Youtube" href="Dont worry about the
address" coords="279,443,177,343" shape="rect">
</div>
</body>
</html>
Please help me to fix the problem in W3C Markup Validator
PLEASE GIVE IT A THUMBS UP
<!-- DOCTYPE declaration -->
<!DOCTYPE html>
<!-- HTML boilerplate code -->
<html lang="en">
<!-- head tag -->
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<title>Social</title>
<style>
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.centerImage {
text-align:center;
display:block;
}
.main {
margin-left: 160px; /* Same as the width of the
sidenav */
font-size: 28px; /* Increased text to enable
scrolling */
padding: 0px 10px;
}
</style>
</head>
<!-- body tag -->
<body>
<div class="sidenav">
<a
href="index.html">Home</a>
<a
href="resume.html">Resume</a>
<a
href="projects.html">Projects</a>
<a
href="contact.html">Contact</a>
<a
href="social.html">Social</a>
</div>
<div class="main">
<img
src="./images/social_media_icons.jpg"
usemap="#social_media_iconsmap">
<map
name="social_media_iconsmap">
<area
target="_self" title="Facebook"
href="#" coords="8,4,107,106"
shape="rect">
<area
target="_self" title="Twitter"
href="#" coords="178,5,279,105"
shape="rect">
<area
target="_self" title="Youtube"
href="#" coords="177,343,279,443"
shape="rect">
</map>
</div>
</body>
</html>
As, you can see above output, that the W3C has validated this file with no error or warning.
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head tag --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title> </head> <!-- body tag --> <body> <style> .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; ...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
<!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...
Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="Godaddy Webpage original" /> <link rel = "stylesheet" href="GoDaddy_assignment_1.css"> <body> <img src= "GoDaddy.png"/> <p>Welcome to:<strong>webhamster.com</strong></br> This web page is parked<strong>Free</strong>courtesy of <a class="aclass1" href ="https://www.godaddy.com">GoDaddy.com</a></p> <h1>Want to buy<span class ="span2">webmaster.com ?</span></h1> <div class ="div1"> <a class ="aclass2" href="https://www.godaddy.com">Learn How</a> </div> </hr> <button>Search Ads</button> </body> </html> “ QUESTION continued Given the corresponding css file .aclass1{color:purple;}...
Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.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"> <title>Untitled Document</title> <!-- Bootstrap --> <link href="css/bootstrap-4.0.0.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...
use the sample html file below with a submit button to modify the style of the paragraph text through JavaScript code. By clicking on the button, the font, the font size, and the color of the paragraph text will be changed. <!DOCTYPE html> · <html> · <head> · <meta charset=utf-8 /> · <title>Change Paragraph Text</title> · </head> · <body> · <p id ='text'>I’m going to change this text, I hope.</p> · <div> · <button id="jschange" · onclick="js_style()">Style</button> · </div> · </body> · </html>
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...