ZuoTi.Pro
Question

Hi, i need with a basic html and css webpage that contains just 4 pages with...

Hi, i need with a basic html and css webpage that contains just 4 pages with Home, Contct, Services and about. I want to have two subpages under Services.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Create all of this file and place it under a same folder and image too.

index.html - Home page

<!DOCTYPE html>

<html>

<title>Pet Palace-</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">Pets</h2>

<div style="display: inline-flex;">

<div style="margin: 10px">

<img src="dog3.jpg">

</div>

<div style="margin: 10px">

<img src="cat3.jpg">

</div>

<div style="margin: 10px">

<img src="bird3.jpg">

</div>

</div>

<div>Ready to add a new love to your family? There are so many wonderful pets in your community waiting for loving

homes. Put your love into action by adopting today - and spread the word that adoption is the way to go. </div>

</div>

</body>

</html>

about.html -

<!DOCTYPE html>

<html>

<title>Pet Palace</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">Pets</h2>

<div>

A pet or companion animal is an animal kept primarily for a person's company, protection, or entertainment

rather

than as a working animal, livestock, or laboratory animal. Popular pets are often noted for their

attractive

appearances, intelligence, and relatable personalities.

</div><br><br><br>

<div>

A pet or companion animal is an animal kept primarily for a person's company, protection, or entertainment

rather than as a working animal, livestock, or laboratory animal. Popular pets are often noted for their

attractive appearances, intelligence, and relatable personalities.

Two of the most popular pets are dogs and cats. A cat lover is known as an ailurophile and a dog lover is

known as cynophile. Other animals commonly kept include: rabbits, ferrets, pigs; rodents, such as gerbils,

hamsters, chinchillas, rats, and guinea pigs; avian pets, such as parrots, passerines, and fowl; reptile

pets, such as turtles, lizards and snakes; aquatic pets, such as fish, freshwater and saltwater snails, and

frogs; and arthropod pets, such as tarantulas and hermit crabs. Small pets may be grouped together as

pocket pets, while the equine and bovine group include the largest companion animals.

</div>

</div>

</body>

</html>

contact.html -

<!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">CONTACT</h2>

<div class="w3-row w3-padding-32">

<div class="w3-col m6 w3-large w3-margin-bottom">

<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>

<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>

<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>

</div>

<div class="w3-col m6">

<form action="/action_page.php" target="_blank">

<div class="w3-row-padding" style="margin:0 -16px 8px -16px">

<div class="w3-half">

<input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">

</div>

<div class="w3-half">

<input class="w3-input w3-border" type="text" placeholder="Email" required name="Email">

</div>

</div>

<input class="w3-input w3-border" type="text" placeholder="Message" required name="Message">

<button class="w3-button w3-black w3-section w3-right" type="submit">SEND</button>

</form>

</div>

</div>

</div>

</body>

</html>

service.html -

<!DOCTYPE html>

<html>

<title>Pet Palace-</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">Cat</h2>

<div style="display: inline-flex;">

<div style="margin: 10px">

<h4><a href="service1.html"> Service 1</a></h4>

</div>

<div style="margin: 10px">

<h4><a href="service2.html"> Service 2</a></h4>

</div>

</div>

</div>

</body>

</html>

service1.html - service subpage -

<!DOCTYPE html>

<html>

<title>Pet Palace-</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">Cat</h2>

<div style="display: inline-flex;">

<div style="margin: 10px">

<div style="margin: 10px">

<img src="cat2.jpg">

<table>

<tr>

<td>

Name

</td>

<td>

Russian cat

</td>

</tr>

<tr>

<td>

Colors:

</td>

<td>

Black, Black ,WHites

</td>

</tr>

<tr>

<td>

From

</td>

<td>

Russian

</td>

</tr>


</table>

</div>

</div>

</div>

</body>

</html>

service2.html - subpage service

<!DOCTYPE html>

<html>

<title>Pet Palace-</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: "Lato", sans-serif

}

.mySlides {

display: none

}

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-black w3-card">

<a href="index.html" class="w3-bar-item w3-button w3-padding-large">HOME</a>

<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT</a>

<a href="service.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">SERVICE</a>

<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>

</div>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px" id="contact">

<h2 class="w3-wide w3-center">Cat</h2>

<div style="display: inline-flex;">

<div style="margin: 10px">

<img src="cat1.jpg">

<table>

<tr>

<td>

Name

</td>

<td>

Tabby

</td>

</tr>

<tr>

<td>

Colors:

</td>

<td>

Brown, Black and Grey

</td>

</tr>

<tr>

<td>

From

</td>

<td>

Asia

</td>

</tr>


</table>

</div>

</div>

</div>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
Hi, i need with a basic html and css webpage that contains just 4 pages with...
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. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Using Basic HTML CSS for a webpage content does not matter. Week 3: Assignment <nav> and...

    Using Basic HTML CSS for a webpage content does not matter. Week 3: Assignment <nav> and pseudo-classes for links Submit Assignment Due Sunday by 11:59pm Points 100 Submitting a text entry box This assignment you will upload to Coton. You will submit only your URLs to Canvas. Use the rubric as a checklist to make sure you complete everything. DO NOT copy and paste code from any source including templates, websites or examples in this class. Create your navigation as...

  • Given below are Html files then css file i need the javascript according to that see...

    Given below are Html files then css file i need the javascript according to that see the last photos for the detailed description of what you have to do...i need solution for this! Javascript

  • Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following:...

    Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following: The project should include the following pages: home page form page 4 or more additional pages to render complete coverage a site map – three levels or more (not included in the page count) The pages should contain: a two- or three-column layout CSS must be used for layout one external CSS file will contain formatting for the site (the bulk of css goes...

  • I want to know about a few web applications with HTML and CSS for year 1...

    I want to know about a few web applications with HTML and CSS for year 1 students which my team could develop a prototype in around 4 weeks

  • In my HTML and CSS pages I want to make this aside output in 2 even...

    In my HTML and CSS pages I want to make this aside output in 2 even columns rather than the way it is (do I need a column layout?), below is my code for the html AND the CSS: HTML: <aside>        <h3>Surfer Slang</h3>     <dl>        <dt>barney</dt>        <dd>A new and inexperienced surfer</dd>        <dt>boost</dt>        <dd>To take off from a wave into an aerial</dd>        <dt>cutback</dt>        <dd>To change direction when streaking ahead of the curl</dd>        <dt>gandalf</dt>...

  • Create a webpage (the last picture has three potential offers not just 2). Use html, JavaScript...

    Create a webpage (the last picture has three potential offers not just 2). Use html, JavaScript and CSS where needed. All information needed is supplied by the picture. Summary Create a dynamic web page that allows users to compare different financing offers for an automobile loan. Purchasers are often presented with different financing offers, and determining the best offer can be difficult. In particular, dealers often have promotions that offer either a lower interest rate or a cash incentive (sometimes...

  •    Can I get the html code and the css code for the above pictures. The...

       Can I get the html code and the css code for the above pictures. The first picture is for the Home , second for the services tab and the third one is for the contact part. ​ sh Creek home page, as shown in Figure 6.54. UrCUIum tindex.html, services.html, and ew Fi n page layout, as shown in Figure 6.53. See the Fish Creek Animal Hospital Fish Creek Animal Hospital Full Service Facility Home Services Ask the Vet Contact...

  • I need html and CSS code to create an Ice Cream Shop website . Thank you

    I need html and CSS code to create an Ice Cream Shop website . Thank you

  • make a interactive website from scratch. using code. html, css. I want it to be about...

    make a interactive website from scratch. using code. html, css. I want it to be about people on   Dialysis, and how we can help to make them more comfortable. Thank you for your help.

  • THIS IS SAMPLE. HELP ME CREATE CSS FOR THIS. I HAVE SOME HREF PAGES TOO WHICH...

    THIS IS SAMPLE. HELP ME CREATE CSS FOR THIS. I HAVE SOME HREF PAGES TOO WHICH NEED TO BE LOOK GOOD WITH CSS INCLUDING PICTURES. thank you _>>> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Welcome || Miami</title> </head> <body> <!--Heading 1--> <h1>MIAMI</h1> <br> <h3>Some More Places :</h3> <ol type="1"> <!--Links to other web pages--> <li><a href="keywest.html">KeyWest</a></li> <li><a href="boca.html">Boca</a></li> <li><a href="summerkey.html">Summer Key</a></li> </ol> <br> <!--Image link and Javascript ( onMouseOver="alert('Text to Alert'); return true;" ) to get alert on...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT