Hello, I'm trying to edit my code properly so it looks like the picture below, I usually am able to figure it out on my own. But I'm already behind and need to get this correct so I can move forward with the rest of these chapters. Thanks in advance for your time. Fish Creek Animal Clinic - Home Fish Creek Animal Clinic Home Services Ask the Vet Contact Professional, Compassionate Care for your Pet The caring doctors and staff at Fish Creek Animal Clinic understand the special bond you share with your cherished pet. Years of Experience Fish Creek Veterinarians have provided personalized and compassionate care since 1984. Open Door Policy We welcome owners to stay with their pets during any medical procedure. Always Available Our professionals are on duty 24 hours a day, 7 days a week. Fish Creek Animal Clinic 800-555-5555 1242 Grassy Lane Fish Creek, WI 55534 Copyright © 2023 Fish Creek Animal Clinic Brandon@Tupa.com CSS Code * { box-sizing: border-box; } #wrapper { min-width: 700px; margin-right: auto; margin-left: auto; background-color: #f0f0f0; } body { background-color: #5280c5; background-image: url(gradientblue.jpg); color: #003366; font-family: Verdana, Arial, sans-serif; } header { text-align: center; color: #f0f0f0; background-color: #000066; background-image: url(bigfish.gif); background-repeat: no-repeat; background-size: 100%; padding: 1em; font-family: Georgia, "Times New Roman", serif; } h1 { font-size: 3em; padding: 0.2em; text-shadow: 0 1px 0 #cccccc; } h2 { text-shadow: 1px 1px 1px #777; font-size: 1.2em; } main { margin-left: 180px; background-color: white; border: 1px solid #AEC3E3; overflow: auto; display: block; } nav { float: left; width: 180px; padding: 0.5em; font-weight: bold; } 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; } dt { color: #5280c5; font-size: 1.1em; font-weight: bold; font-family: Georgia, "Times New Roman", serif; } .category { font-weight: bold; color: #5380c5; font-family: Georgia, "Times New Roman", serif; } footer { text-align: center; background-color: #aec3e3; font-size: 0.7em; font-style: italic; padding: 1em; margin-left: 180px; } .address { clear: left; } .floatright { float: right; padding: 1em 0 1em 1em; } section { float: left; width: 30%; margin-right: 1em; margin-bottom: 1em; padding: 0; background-color: #EAEAEA; min-height: 200px; } section h3 { padding: .25em; margin-top: 0; margin-bottom: 0; font-size: 110%; background-color: #AEC3E3; } section p { padding-top: 0; padding-left: .25em; padding-right: .25em; padding-bottom: .25em; } header a { text-decoration: none; color: #F0F0F0; } header a:hover { color: #AEC3E3; }
Hello, I'm trying to edit my code properly so it looks like the picture below, I usually am able to figure it out on my own. But I'm already behind and need to get this correct so I can move forward with the rest of these chapters. Thanks in advance for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fish Creek Animal Clinic - Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="fishcreek.css">
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="index.html">Fish Creek Animal Clinic</a></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>
<h2>Professional, Compassionate Care for your Pet</h2>
<p>The caring doctors and staff at Fish Creek Animal Clinic understand the special bond you share with your
cherished pet.</p>
<dl>
<dt>Years of Experience</dt>
<dd>Fish Creek Veterinarians have provided personalized and compassionate care since 1984.</dd>
<dt>Open Door Policy</dt>
<dd>We welcome owners to stay with their pets during any medical procedure.</dd>
<dt>Always Available</dt>
<dd>Our professionals are on duty 24 hours a day, 7 days a week.</dd>
</dl>
<div>
<address>
Fish Creek Animal Clinic<br>
800-555-5555<br>
1242 Grassy Lane<br>
Fish Creek, WI 55534<br><br>
</address>
</div>
</main>
<footer>
<div class="address">
Copyright © 2023 Fish Creek Animal Clinic
<br>
<a href="btupa@hgtc.edu">Brandon@Tupa.com</a>
</div>
</footer>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
#wrapper {
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #f0f0f0;
}
body {
background-color: #5280c5;
background-image: url(gradientblue.jpg);
color: #003366;
font-family: Verdana, Arial, sans-serif;
}
header {
text-align: center;
color: #f0f0f0;
background-color: #000066;
background-image: url(bigfish.gif);
background-repeat: no-repeat;
background-size: 100%;
padding: 1em;
font-family: Georgia, "Times New Roman", serif;
}
h1 {
font-size: 3em;
padding: 0.2em;
text-shadow: 0 1px 0 #cccccc;
}
h2 {
text-shadow: 1px 1px 1px #777;
font-size: 1.2em;
}
main {
margin-left: 180px;
background-color: white;
border: 1px solid #AEC3E3;
overflow: auto;
display: block;
}
nav {
float: left;
width: 180px;
padding: 0.5em;
font-weight: bold;
}
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;
}
dt {
color: #5280c5;
font-size: 1.1em;
font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
}
.category {
font-weight: bold;
color: #5380c5;
font-family: Georgia, "Times New Roman", serif;
}
footer {
text-align: center;
background-color: #aec3e3;
font-size: 0.7em;
font-style: italic;
padding: 1em;
margin-left: 180px;
}
.address {
clear: left;
}
.floatright {
float: right;
padding: 1em 0 1em 1em;
}
section {
float: left;
width: 30%;
margin-right: 1em;
margin-bottom: 1em;
padding: 0;
background-color: #EAEAEA;
min-height: 200px;
}
section h3 {
padding: .25em;
margin-top: 0;
margin-bottom: 0;
font-size: 110%;
background-color: #AEC3E3;
}
section p {
padding-top: 0;
padding-left: .25em;
padding-right: .25em;
padding-bottom: .25em;
}
header a {
text-decoration: none;
color: #F0F0F0;
}
header a:hover {
color: #AEC3E3;
}
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 1 images
