fix this html and css code to look like this picture html code: <!doctype html>
ID: 3919645 • Letter: F
Question
fix this html and css code to look like this picture
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link href="css/home1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="logo"><img src="image/logo.png" alt="logo1"></div>
<div class="header">
<div class="nav_bar">
<ul>
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">Bath and Body</a></li>
<li><a href="#">Health and wellness</a></li>
</ul>
</div>
</div> <!-- end .header -->
<div class="sidebar1">
<!-- end .sidebar1 --></div>
<div class="content">
<h1 class="top">home</h1>
<p> this websit well induouet to the wordferul world of becoming more healy uising naulte prodcuts. this site will also give you a chnane to buy the produtes that i have delvboed. </p>
<a href="bathandbody.html"><img src="asets/bomb_finished.jpg" width="100" height="100" alt=""/></a>
<a href="bathandbody.html"><img src="asets/bomb_finished.jpg" width="100" height="100" alt=""/></a>
<a href="healthandwellness.html"><img src="asets/bomb_finished.jpg" width="100" height="100" alt=""/></a>
<a href="healthandwellness.html"><img src="asets/bomb_finished.jpg" width="100" height="100" alt=""/></a>
<!-- end .content --></div>
<div class="sidebar2">
<h4> </h4>
<!-- end .sidebar2 --></div>
<div class="footer">
<p>Copyright © 2018 abs naturals contetus site</p>
</div>
</div>
</body>
</html>
css code:
@charset "utf-8";
/* CSS Document */
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl{
padding: 0;
margin: 0;
}
.top {
font: 600 normal xx-large/normal "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #35BBF0;
background: #6F7D94 fixed;
letter-spacing: normal;
text-align: center;
word-spacing: normal;
white-space: normal;
height: auto;
width: auto;
clear: both;
text-decoration: overline;
text-transform: uppercase;
overflow:visible;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container{
max-width: 2000px;
min-width: 1000px;
height: 768px;
background: #4e5869;
margin: 0 auto;
}
.header{
width:100%;
height:100px;
background-color:#6f7d94;
border-bottom:5px solid #000;}
.logo{
float:left;
width:40px;
height:40px;
margin:15px;}
.sidebar1 {
width: 217px;
height: 505px;
background: #93a5c4;
padding-bottom: 10px;
color: #35B1C3;
overflow: auto;
position: relative;
}
.sidebar2 {
width: 217px;
height: 505px;
background: #93A5C4;
padding: 10px 0;
position: relative;
}
.content {
padding: 10px;
width:920px;
height: 505px;
border-left:5px solid #000;
border-right:5px solid #000;
position:relative;
left: auto;
}
/*navigation bar*/
.nav_bar{
margin-left: 300px;
height: 40px;}
.nav_bar ul{
color: #fff;
float: left;
margin-top: 20px;
overflow: hidden;
margin-left: 70px;
}
.nav_bar ul li{
float:left;
overflow:hidden;}
.nav_bar ul li a{
color: #000;
display: block;
float: left;
font-size: 17px;
margin-top:10px;
padding: 10px;
text-decoration: none}
.nav_bar ul li a:hover{
background-color:#fff;
color:#000;}
.selected{
background-color: #fff;
}
.footer{
width:100%;
height:123px;
background:#6f7d94;
border-top:5px solid #000;
padding: 10px 0;
position: relative;
clear: both;
}
ogo HOME Bahth and body Heath and wellness HOME imag links links links links links Copyright 2018 abs naturals contetussitemapExplanation / Answer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link href="css/home1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="logo"><img src="image/logo.png" alt="logo1"></div>
<div class="header">
<div class="nav_bar">
<ul>
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">Bath and Body</a></li>
<li><a href="#">Health and wellness</a></li>
</ul>
</div>
</div> <!-- end .header -->
<div id="container">
<div id="left"></div>
<div id="middle">
<h1 class="top">home</h1>
<br>
<center>
<div class="block">
Image Links
</div>
</center>
<br>
<center>
<div id="inner">
<div class="block">
Links
</div>
<div class="block">
Links
</div>
<div class="block">
Links
</div>
</div>
</center>
<br>
<center>
<div class="block">
Links
</div>
</center>
</div>
<div id="right"></div>
</div>
<div class="footer">
<p>Copyright © 2018 abs naturals contetus sitemap</p>
</div>
</div>
</body>
</html>
css::::::::::::::::::::::
@charset "utf-8";
/* CSS Document */
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl{
padding: 0;
margin: 0;
}
.top {
font: 600 normal xx-large/normal "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #35BBF0;
letter-spacing: normal;
text-align: center;
word-spacing: normal;
white-space: normal;
height: auto;
width: auto;
clear: both;
text-transform: uppercase;
overflow:visible;
}
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container{
max-width: 2000px;
min-width: 1000px;
height: 768px;
background: #4e5869;
margin: 0 auto;
}
.header{
width:100%;
height:100px;
background-color:#6f7d94;
border-bottom:5px solid #000;
}
.logo{
float:left;
width:40px;
height:40px;
margin:15px;}
.sidebar1 {
width: 217px;
height: 505px;
background: #93a5c4;
padding-bottom: 10px;
color: #35B1C3;
overflow: auto;
position: relative;
}
.sidebar2 {
width: 217px;
height: 505px;
background: #93A5C4;
padding: 10px 0;
position: relative;
}
.content {
padding: 10px;
width:920px;
height: 505px;
border-left:5px solid #000;
border-right:5px solid #000;
position:relative;
left: auto;
}
/*navigation bar*/
.nav_bar{
margin-left: 300px;
height: 40px;}
.nav_bar ul{
color: #fff;
float: left;
margin-top: 20px;
overflow: hidden;
margin-left: 70px;
}
.nav_bar ul li{
float:left;
overflow:hidden;}
.nav_bar ul li a{
color: #000;
display: block;
float: left;
font-size: 17px;
margin-top:10px;
padding: 10px;
text-decoration: none}
.nav_bar ul li a.selected{
background-color: #fff;
color:#e242f4;
}
.nav_bar ul li a:hover{
background-color:#fff;
color:#e242f4;}
.footer{
width:100%;
height:123px;
background:#6f7d94;
border-top:5px solid #000;
padding: 10px 0;
position: relative;
clear: both;
color:#fff;
text-align: center;
}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px; height: 100%}
#left {width: 20%; background: #93A5C4; border-right: 5px solid #000; box-sizing: border-box;}
#middle {width: 60%;}
#right {width: 20%; background: #93A5C4; border-left: 5px solid #000; box-sizing: border-box;}
#inner {
overflow: hidden;
width:100%;
}
.block {
height: 100px;
width: 80px;
background: #b9bbbf ;
text-align: center;
color: #6c8496;
display: inline-block;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.