Question

In: Computer Science

<!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.

Solutions

Expert Solution

<!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;
}

/* First level child elements of wrapper excluding nav */
/* To adjust space inside the element we have to use padding */
#wrapper > *:not(nav) {
    padding: 0px 20px;
}
 
/* To adjust space outside the element we have to use margin */
footer {
    margin: 30px 0;
}

/* To adjust space outside the element we have to use margin */
/* border bottom is used to apply the separator in bottom for section and aside */
section, aside {
    margin: 30px 0;
    border-bottom: 1px solid #C4C4C4;
}

/* Applying styles to all the img tag inside section */
section img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
    border: 1px solid #C4C4C4;
}

/* Applying styles to all the img tag inside footer */
/* using border radius to make the rounded corner */
footer img {
    border-radius:50px;
}

/* Adding background images to h2 elements inside aside, footer */
aside h2, footer h2 {
    background-image: url(https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: 0px;
    padding-left: 60px;
}

</style>
</head>

<body>

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

<header>
<h1>
All Pets Veterinary Hospital
<br>
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" >
</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="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" >
</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="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" >
</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="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" >
</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="https://image.freepik.com/free-vector/abstract-stylish-social-media-icons-set_1055-5090.jpg" >
</figure>
  
</address>
</footer>

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

</body>

</html>

Added comments for details. Please let me know in the comment section if you have any doubts

venereology answered 2 hours ago
Next > < Previous

Related Solutions

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="app-wrap"> <header> <input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." /> </header> <main> <section class= "location"> <div class="city">Hyderabad, IN</div> <div class="date">Thursday 23 July 2020</div> </section> <div class="current"> <div class="temp">25<span>°c</span></div> <div class="weather">Rainy</div> <div class="hi-low">20°c / 23°c</div> </div> </main> </div> <script src="main.js"></script> </body> </html> MAIN.js const api = { key="091ff564240e0e16c46ae680b188ca3e" base: "https://api.openweathermap.org/data/2.5" }; const searchbox = document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(evt) {...
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">    &n
HTML <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>Clock</title>     <link rel="stylesheet" href="clock.css">     <script src="clock.js"></script> </head> <body>     <main>         <h1>Digital clock</h1>         <fieldset>             <legend>Clock</legend>             <span id="hours">&nbsp;</span>:             <span id="minutes">&nbsp;</span>:             <span id="seconds">&nbsp;</span>&nbsp;             <span id="ampm">&nbsp;</span>         </fieldset>     </main> </body> </html> CSS: body {     font-family: Arial, Helvetica, sans-serif;     background-color: white;     margin: 0 auto;     width: 450px;     border: 3px solid blue;     padding: 0 2em 1em; } h1 {     color: blue; } label {     float: left;     width: 11em;     text-align: right;     padding-bottom: .5em; } input {     margin-left: 1em;     margin-bottom: .5em; } fieldset {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT