Question

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...

<!DOCTYPE html>


<html lang="en">


<head>
<meta charset="utf-8">
<title>All Pets Veterinary Hospital</title>

<style>
body {
font-family: arial, sans-serif;
font-size: 100%;
}
/* outer container */
  
#wrapper {
width: 960px;
margin: 50px auto;
padding: 0px;
background-color: rgb(255, 255, 255);
/* white */
border: 1px solid #000;
/* black */
}
  
header h1 {
text-align: center;
}
  
nav {
text-align: center;
background: rgb(175, 196, 206);
}
  
address figure {
text-align: center;
}


</style>
</head>

<body>

<div id="wrapper">
<!-- outer container -->

<header>
<h1>
All Pets Veterinary Hospital
<br>
<img src="images/logo.jpg" alt="All Pets Veterinary Hospital logo">
</h1>

<p>
<strong>All Pets Veterinary Hospital</strong> has been a leader in specialty veterinary care since 1990, fulfilling the need for specialty healthcare and emergency services for animals in San Diego County and Southern California.
</p>

<blockquote>
No matter how little money and how few possessions you own, having a dog makes you rich.
<br> -- Louis Sabin
</blockquote>
</header>

<nav>
<a href="#">Home</a> &nbsp; | &nbsp;
<a href="#">Services</a> &nbsp; | &nbsp;
<a href="#">Staff</a> &nbsp; | &nbsp;
<a href="#">Contact</a>
</nav>

<section>
<h2>About Us</h2>
<figure>
<img src="images/photo_about_us.jpg" alt="Photo of staff and dog">
</figure>
<p>
All Pets Veterinary Specialty Hospital is proud to provide the highest quality of specialty care to pets, and the best customer service to owners in the San Diego community. We have state-of-the-art facilities, with some of the most advanced equipment for pets found anywhere in the country. Simply put, we are committed to being leaders in providing the best specialty care for your pets.
</p>
</section>

<section>
<h2>Comprehensive Services</h2>
<figure>
<img src="images/photo_comprehensive_services.jpg" alt="Photo of Dog being examined">
</figure>
<p>
Our hospital utilizes the latest equipment, including MRI, CAT scan, radiation therapy, digital radiography, a state-of-the-art intensive care unit, ultra-modern surgical suites, endoscopy, ultrasound, and much more to provide comprehensive specialty care for pets of all ages. Furthermore, our staff of doctors, technicians and client service representatives has exceptional training, motivation, and compassion for the pets we treat.
</p>
</section>

<section>
<h2>Compassionate Care</h2>
<figure>
<img src="images/photo_compassionate_care.jpg" alt="Photo of staff and dog">
</figure>
<p>
In summary, as part of our mission to offer high-quality specialty care for pets in the San Diego area, our hospitals boast a level of sophistication that can only be found in the most advanced human medical facilities. We strive for exceptional client service and compassionate care for patients. Since most of us have pets of our own, we understand the strong bond that our clients have with their pets, and realize that they are part of the family.
</p>
</section>

<aside>
<h2>Testimonials</h2>

<p>
<q>Since I adopted my dogs they both have had significant health issues. In search of a vet that we like we tried several vet offices in San Diego. I was really impressed by this facility. Not only they have very reasonable prices, but they love animals, and they care a lot about all their patients. Unlike some other offices we have been to, they never prescribe any unnecessary treatments and they are always very clear about what treatment options we have for our budget. If something serious is going on they follow up with us after the visit, and just truly care about well being of our animals.</q>
<br> - J. Smith
</p>

<p>
<q>Recently one of my dogs passed away. Me and my husband are so heartbroken. The staff has been so compassionate and caring through this difficult time. We could not ask for a better doctors for our fur-babies! I highly recommend this veterinary hospital office for anyone looking for a new or better veterinary clinic for their pets. They treat and take good care of my dogs like they are one of their own furry family members!</q>
<br> - A. Lopez
</p>

</aside>

<footer>
<h2>Contact us</h2>
<p>
If you're looking for high-quality specialty care for your pets, call us at <strong>(858) 777-7700</strong> or you can schedule an appointment for your pet online.
</p>

<address>
We are located at:<br>
10400 Sorrento Valley Road<br>
San Diego, CA 92121<br>
<strong>(858) 777-7700</strong>
  
<figure>
<img src="images/icons_social.jpg" alt="social icons">
</figure>
  
</address>
</footer>

</div>
<!-- end outer container -->

</body>

</html>

1.Add the needed CSS property, using the selectors of your choice so that the text is not so close to the edge of the outer border of the main “wrapper”. You want to adjust the space inside the element.

2.Add the needed CSS property, using the selector(s) of your choice so that the <section> <aside> and <footer>

elements are not so close to each other from the top/bottom. You want to adjust the space outside the element.

3.Add the needed CSS property, using the selector(s) of your choice to create a visual separator effect along the bottom of the <section> and <aside>

elements – do not use an element. This is done using the border property! Use any style of your choice

4. Add the needed CSS property or properties, using the selector(s) of your choice to apply at least a shadow to the three photos. You may add additional or alternate effect(s) if desired, as long as the three photos have a style around them. You must use either box-shadow or border-radius but you can use a combination, and can also include the border property. These three images will all have the same style so use the appropriate selector

5.Add the needed CSS property/properties using the selector of your choice to apply rounded corners to the social icon image

6.Add the needed CSS property/properties using the selectors of your choice to add a background image to the two <h2>

elements. You will need to use a text property to move the text away from the edge of the

element so it does not overlap with the background image.

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Since you didn't provide any images , i have put some sample images also my social icon image is little large thats why the social icon is big in example,also make sure you have a proper image named background.jpg inside your images folder to get a background image for h2

<!DOCTYPE html>


<html lang="en">


<head>
<meta charset="utf-8">
<title>All Pets Veterinary Hospital</title>

<style>
body {
font-family: arial, sans-serif;
font-size: 100%;
}
/* outer container */
  
#wrapper {
width: 960px;
margin: 50px auto;
padding: 0px;
background-color: rgb(255, 255, 255);
/* white */
border: 1px solid #000;
/* black */

}
  
header h1 {
text-align: center;
}
  
nav {
text-align: center;
background: rgb(175, 196, 206);
}
  
address figure {
text-align: center;
}

/* 1.Add the needed CSS property, using the selectors of your choice so that the text is not so close to the edge of the outer border of the main “wrapper”. You want to adjust the space inside the element. */

#wrapper{
    /* adds a 10px padding inside wrapper div */
    padding: 10px;
}

/* 2.Add the needed CSS property, using the selector(s) of your choice so that the <section> <aside> and <footer>
elements are not so close to each other from the top/bottom. You want to adjust the space outside the element. */
section,aside,footer{
    /* adds 10px top margin */
    margin-top: 10px;

    /* adds 10px bottom margin */
    margin-bottom: 10px;
}

/* 3.Add the needed CSS property, using the selector(s) of your choice to create a visual separator effect along the bottom of the <section> and <aside>
elements – do not use an element. This is done using the border property! Use any style of your choice */
section,aside{
    /* adds a bottom border of 5px thick and black colour */
    border-bottom: 5px solid black;
}

/* 4. Add the needed CSS property or properties, using the selector(s) of your choice to apply at least a shadow to the three photos. You may add additional or alternate effect(s) if desired, as long as the three photos have a style around them. You must use either box-shadow or border-radius but you can use a combination, and can also include the border property. These three images will all have the same style so use the appropriate selector */
section figure img{
    /* adds a box shadow with 2px,2px x y and 10px blur with grey colour */
    box-shadow: 2px 2px 10px grey;
    /* creates a rounded border */
    border-radius: 30px;
}

/* 5.Add the needed CSS property/properties using the selector of your choice to apply rounded corners to the social icon image */
footer address figure img{ 
    /* makes the borderes rounded */
    border-radius: 100px;
}

/* 6.Add the needed CSS property/properties using the selectors of your choice to add a background image to the two <h2>
elements. You will need to use a text property to move the text away from the edge of the
element so it does not overlap with the background image. */
h2{
    /* Sets the background image*/
    background-image: url('images/background.jpeg');
    /* moves text to center */ 
    text-align: center;
}
</style>
</head>

<body>

<div id="wrapper">
<!-- outer container -->

<header>
<h1>
All Pets Veterinary Hospital
<br>
<img src="images/logo.jpg" >
</h1>

<p>
<strong>All Pets Veterinary Hospital</strong> has been a leader in specialty veterinary care since 1990, fulfilling the need for specialty healthcare and emergency services for animals in San Diego County and Southern California.
</p>

<blockquote>
No matter how little money and how few possessions you own, having a dog makes you rich.
<br> -- Louis Sabin
</blockquote>
</header>

<nav>
<a href="#">Home</a> &nbsp; | &nbsp;
<a href="#">Services</a> &nbsp; | &nbsp;
<a href="#">Staff</a> &nbsp; | &nbsp;
<a href="#">Contact</a>
</nav>

<section>
<h2>About Us</h2>
<figure>
<img src="images/photo_about_us.jpg" >
</figure>
<p>
All Pets Veterinary Specialty Hospital is proud to provide the highest quality of specialty care to pets, and the best customer service to owners in the San Diego community. We have state-of-the-art facilities, with some of the most advanced equipment for pets found anywhere in the country. Simply put, we are committed to being leaders in providing the best specialty care for your pets.
</p>
</section>

<section>
<h2>Comprehensive Services</h2>
<figure>
<img src="images/photo_comprehensive_services.jpg" >
</figure>
<p>
Our hospital utilizes the latest equipment, including MRI, CAT scan, radiation therapy, digital radiography, a state-of-the-art intensive care unit, ultra-modern surgical suites, endoscopy, ultrasound, and much more to provide comprehensive specialty care for pets of all ages. Furthermore, our staff of doctors, technicians and client service representatives has exceptional training, motivation, and compassion for the pets we treat.
</p>
</section>

<section>
<h2>Compassionate Care</h2>
<figure>
<img src="images/photo_compassionate_care.jpg" >
</figure>
<p>
In summary, as part of our mission to offer high-quality specialty care for pets in the San Diego area, our hospitals boast a level of sophistication that can only be found in the most advanced human medical facilities. We strive for exceptional client service and compassionate care for patients. Since most of us have pets of our own, we understand the strong bond that our clients have with their pets, and realize that they are part of the family.
</p>
</section>

<aside>
<h2>Testimonials</h2>

<p>
<q>Since I adopted my dogs they both have had significant health issues. In search of a vet that we like we tried several vet offices in San Diego. I was really impressed by this facility. Not only they have very reasonable prices, but they love animals, and they care a lot about all their patients. Unlike some other offices we have been to, they never prescribe any unnecessary treatments and they are always very clear about what treatment options we have for our budget. If something serious is going on they follow up with us after the visit, and just truly care about well being of our animals.</q>
<br> - J. Smith
</p>

<p>
<q>Recently one of my dogs passed away. Me and my husband are so heartbroken. The staff has been so compassionate and caring through this difficult time. We could not ask for a better doctors for our fur-babies! I highly recommend this veterinary hospital office for anyone looking for a new or better veterinary clinic for their pets. They treat and take good care of my dogs like they are one of their own furry family members!</q>
<br> - A. Lopez
</p>

</aside>

<footer>
<h2>Contact us</h2>
<p>
If you're looking for high-quality specialty care for your pets, call us at <strong>(858) 777-7700</strong> or you can schedule an appointment for your pet online.
</p>

<address>
We are located at:<br>
10400 Sorrento Valley Road<br>
San Diego, CA 92121<br>
<strong>(858) 777-7700</strong>
  
<figure>
<img src="images/icons_social.jpg" >
</figure>
  
</address>
</footer>

</div>
<!-- end outer container -->

</body>

</html>

Code Screenshot:

Output:

PS : If you have any doubts/problems please comment below.Thank You

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>         
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>                   <script src="code.js"></script>   </head>      <body onload="setFocus();">     <div class="container">                                       <div class="main">                                                                                <form action="#" method="post" name="form_name" id="form_id" class="form_class" >                                                                           <h2>--Principal Loan Form--</h2>                                                                                                                                                      <h5>Disclaimer: This software by no mean will precisely predict your mortgage through your lender company.  This Software will only assume the four items below in order to make an educated guess or prediction to your exact mortgage interests amount and the duration of your loan from your lender. <img...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...
Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today I built my fourth website using HTML5 and CSS3. This time I wanted to try using CSS float layout options on a website dedicated to my favorite topic: robotics. I wanted my website to look like what is shown in Figure 1 (see below). However, after giving it my best effort, things once again didn’t turn out the way I wanted (see the code...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT