ML and CSS: Follow exactly the second picture. 1st picture: My output (I point out where the mistake is with a red circle) 2nd picture is what the output should look like. Note: JUST USE RANDOM PICTURES FOR THE IMAGE LINKS. Fix something in my code: fishcreek.css body { background-color: #528
HTML and CSS: Follow exactly the second picture.
1st picture: My output (I point out where the mistake is with a red circle)
2nd picture is what the output should look like.
Note: JUST USE RANDOM PICTURES FOR THE IMAGE LINKS.
Fix something in my code:
fishcreek.css
body {
background-color: #5280C5;
color: #003366;
font-family: Arial, Verdana, sans-serif;
background-image: url(gradientblue.jpg);
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #F0F0F0;
min-width: 700px;
}
header {
background-color: #000066;
color: #F0F0F0;
background-image: url(bigfish.gif);
background-repeat: no-repeat;
background-position: center;
text-align:center;
}
h1 {
line-height: 250%;
text-indent: 1em;
margin-bottom: 0;
font-size: 3em;
padding: 0.2em;
text-shadow: 3px 3px 5px #CCCCCC;
}
nav {
float: left;
width: 180px;
color: #f0f0f0;
font-weight: bold;
font-size: 1.25em;
padding: 5px;
}
main {
margin-left: 180px;
padding-left: 2em;
padding-right: 2em;
background-color: #FFFFFF;
border-color: #AEC3E3;
border-width: 1px;
}
dt {
color: #5280c5;
font-size: 1.1em;
font-family:Times New Roman, serif;
}
.category {
font-weight: bold;
font-family:Times New Roman, serif;
color: #5380C5;
text-shadow: 1px 1px 1px #667;
}
footer {
background-color: #AEC3E3;
color: #003366;
font-size: .70em;
font-style: italic;
text-align:center;
margin-left:180px;
padding-bottom: 1em;
padding-top: 1em;
}
img {
border-style: none;
}
* {
box-sizing: border-box;
}
nav ul {
list-style-type: none;
}
nav a {
text-decoration: none;
}
nav a:link { color: #000066; }
nav a:visited { color: ##5280C5; }
nav a:hover { color: #3262A3; }
header, nav, main, footer { display: block; }
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fish Creek Animal Clinic</title>
<meta charset="utf-8">
<link href="fishcreek.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>Fish Creek Animal Clinic</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="askvet.html">Ask the Vet</a> </li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<dl>
<dt><span class="category">Full Service Facility</span></dt>
<dd>Doctors and staff are on duty 24 hours a day, 7 days a week.
<dt><span class="category">Years of Experience</span></dt>
<dd>Fish Creek Veterinarians have provided quality, dependable care for your beloved animals since 1984.
<dt><span class="category">Open Door Policy</span></dt>
<dd>Our professionals welcome owners to stay with their pets during any medical procedure.</dd>
</dl>
800-555-5555<br>
1242 Grassy Lane<br>
Fish Creek, WI 55534<br><br>
</main>
<footer>
Copyright © 2018 Fish Creek Animal Clinic<br>
<a href="mailto:esfs@sfdf.com">sffsf@sff.com</a>
</footer>
</div>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
