CSS and HTML Improve my code to look exactly like the picture.
CSS and HTML
Improve my code to look exactly like the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Stuff Shop</title>
<meta charset="utf-8">
</head>
<body>
<style>
body { font-family:Verdana, Arial, sans-serif;
background-color: #800000;
text-align: center;
}
#wrapper { background-color: #000000;
color: #ffffff;
width: 80%;
margin: auto;
min-width: 960px;
max-width: 1200px;
}
nav { float: left;
width: 150px;
}
main {
margin-left: 0px;
padding: 200px;
background-color: #000000;
color: #fffff;
}
header {
color: #fffff;
font-size: 200%;
padding: 10px 10px 10px 155px;
}
h1 { margin-bottom: 20px; }
}
#floatright { margin: 10px;
float: right;
}
footer { font-size:70%;
text-align: center;
clear: right;
padding: 20px;
background-color: #869dc7;
}
nav ul { list-style-type: none;
background-color: #FF0000;
text-align:left;
margin-left: 0;
font-size:150%;
padding: 10px;
}
nav a { text-decoration: none;
padding: 10px;
font-weight: bold;
}
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { color: #000066; }
</style>
<div id="wrapper">
<header>
<h1>THE STUFF SHOP</h1>
</header>
<nav>
<ul>
<li><a href="antiques.html">Antiques</a></li>
<li><a href="Books.html">Books</a></li>
<li><a href="Clothes.html">Clothes</a></li>
<li><a href="Furniture.html">Furniture</a></li>
<li><a href="Jewelry.html">Jewelry</a></li>
<li><a href="Music and Videos.html">Music and Videos</a></li>
<li><a href="Sporting Goods.html">Sporting Goods</a></li>
</ul>
</nav>
<main>
<p> The Stuff Shop is your online home buying, selling, and trading of used merchandise and unique collectibles.<br><br>
Click a link on the left to browse the store.<br><br>
<img src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1635984388-download-3-1635984373.png" width="150" height="150" id =""></a>
<img src="https://thumbs.dreamstime.com/b/old-personal-computer-old-personal-computer-isolated-white-background-99563607.jpg" width="150" height="150"id ="">
<img src="https://www.flowtronix.com/assets/images/prodetails/5hp/HG-1301/HG-1301b.jpg" width="150" height="150"id ="">
</p>
</main>
</div>
</body>
</html>
Step by step
Solved in 3 steps with 1 images
