Question

In: Computer Science

Create a website with html about raccons, just a simple html model to build off of...

Create a website with html about raccons, just a simple html model to build off of including multiple pages including a home, about us, and learn more page. Text filler not needed. Just the html structure.

Solutions

Expert Solution

JUST copy the below code , and save in the same folder with given extension.

for image just download any image, and name it "5.jpg" save in same folder.

i have made a signup page too.

ill add a screenshot

signup.html

<!DOCTYPE html>
<html>
<head>
<title>Raccon </title>
<link rel="stylesheet" typer="text/css" href="test.css">
<style>
<title>raccon</title>
</style>
</head>
<header>
<div>
<h1 class="alli">Raccoons</h1>
<h3 class="alli">Animal</h3>
   </header>
<body style="background-color:powderblue;">
<h1 style="color:blue;font-family:courier;text-align:center;background-color:DodgerBlue;";>Raccoons Adoption</h1>
<body>

<form action="TT.html" style="border:1px solid #ccc;margin:auto;">
<div class="container">
  
<p class="whi">Please fill in this form to create an account.</p>
<hr>

<label for="email"><b class="whi">Email</b></label>
<br>
<input type="text" placeholder="Enter Email" name="email" required>
   <br>
<br>
<label for="psw"><b class="whi">Password</b></label>
<br>
<input type="password" placeholder="Enter Password" name="psw" required>
   <br>
<br>
<label for="psw-repeat"><b class="whi">Repeat Password</b></label>
<br>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
   <br>
   <label for="Sex"><b class="whi">Sex</b></label>
<br>
   <input type="radio" name="gender" value="male" ><b class="whi">Male</b><br>
<input type="radio" name="gender" value="female" class="whi"><b class="whi">Female</b>
<br>
<input type="radio" name="gender" value="other" class="whi"> <b class="whi">Others</b>
<br>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>

</body>
</html>

about.html

<!DOCTYPE html>
<html>

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.alli{
text-align: center;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
body {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("5.JPG");
background-size:100%;
background-attachment:scroll;
background-position:50%;

}
.para
{
color:white;
background-color:black;
}
.whi{
color:white;
}
</style>
<head>
<title>Raccoon About</title>
</head>
<header>
<div>
<h1 class="alli">Raccoon</h1>
<h3 class="alli">Animals</h3>
   </header>
<body>
<h1 style="color:blue;font-family:courier;text-align:center;background-color:DodgerBlue;";>About Page</h1>


<ul style="list-style-type:disc;">
<li><a href="TT.html">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Select</a>
<div class="dropdown-content">
<a href="about.html">About</a>
<li><a href="comp.html">Learn More</a></li>

</div>
</li>
</ul>
<p class="para">

Write Your Content here
<title>Raccoon</title>

</p>
<footer>
<p class="whi">Website made by:Name</p>
<p class="whi">Contact information:Email</p>
</footer>
</body>
</html>

comp.html


<!DOCTYPE html>
<html>
<head>
<title>Learnmore</title>
<link rel="stylesheet" typer="text/css" href="test.css">
<style>
<title>Learnmore</title>
</style>
</head>
<body style="background-color:peachpuff;">
<body>
<header>
<div>
<h1 class="alli">Raccoon</h1>
<h3 class="alli">Animal</h3>
</header>
<h1 style="color:blue;font-family:courier;text-align:center;background-color:DodgerBlue;";>Raccoon LearnMore Page</h1>
<ul style="list-style-type:disc;">
<li><a href="TT.html">Home</a></li>

<div class="dropdown-content">
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Select</a>
<div class="dropdown-content">
<a href="about.html">About</a>
<li><a href="comp.html">Learn More</a></li>
</div>
</li>
</ul>
<br>

Add your Content Here
  
</table>

</body>
</html>

TT.html

<!DOCTYPE html>
<html>

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.alli{
text-align: center;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
body {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("5.JPG");
background-size:100%;
background-attachment:scroll;
background-position:50%;

}
.para
{
color:white;
background-color:black;
}
.whi{
color:white;
}
</style>
<head>
<title>Raccoon HomePage</title>
</head>
<header>
<div>
<h1 class="alli">Raccoon</h1>
<h3 class="alli">Animals</h3>
   </header>
<body>
<h1 style="color:blue;font-family:courier;text-align:center;background-color:DodgerBlue;";>Home Page</h1>


<ul style="list-style-type:disc;">
<li><a href="TT.html">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Select</a>
<div class="dropdown-content">
<a href="about.html">About</a>
<li><a href="comp.html">Learn More</a></li>

</div>
</li>
</ul>
<p class="para">

The raccoon sometimes spelled racoon,[3] also known as the common raccoon,[4] North American raccoon,[5] northern raccoon,[6] or coon, is a medium-sized mammal native to North America. The raccoon is the largest of the procyonid family, having a body length of 40 to 70 cm (16 to 28 in) and a body weight of 5 to 26 kg (11 to 57 lb).[7] Its grayish coat mostly consists of dense underfur which insulates it against cold weather. Three of the raccoon's most distinctive features are its extremely dexterous front paws, its facial mask, and its ringed tail, which are themes in the mythologies of the indigenous peoples of the Americas. Raccoons are noted for their intelligence, with studies showing that they are able to remember the solution to tasks for at least three years.[8] They are usually nocturnal and omnivorous, eating about 40% invertebrates, 33% plants, and 27% vertebrates.

The original habitats of the raccoon are deciduous and mixed forests, but due to their adaptability they have extended their range to mountainous areas, coastal marshes, and urban areas, where some homeowners consider them to be pests. As a result of escapes and deliberate introductions in the mid-20th century, raccoons are now also distributed across much of mainland Europe, Caucasus, and Japan.
<title>Raccoon</title>

</p>
<footer>
<p class="whi">Website made by:Name</p>
<p class="whi">Contact information:Email</p>
</footer>
</body>
</html>

header.css


body
{
   font-family: verdana;
   background-color: default;
   color: darkred;
}
ul.header
{
   margin: 0;
   padding: 0;
   list-style-type: none;
   overflow: hidden;
   background-color: lightblue;
}
li.headerli
{ float: left; }
li.headerli a
{
   display :block;
   color: black;
   text-align: center;
   padding: 15px;
   text-decoration: none;
}
li.headerli a:hover
{
   background-color: #363636;
}
button
{
   display: inline-block;
   background-color: darkred;
   color: white;
   padding: 10px 30px;
}

body {font-family: Arial, Helvetica, sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("5.JPG");
background-size:100%;
background-attachment:scroll;
background-position:50%;

}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 50%;
padding: 15px;
margin: 150px 700 150px 700;
display: inline-block;
border: none;
background: #f1f1f1;
}
.alli{
text-align: center;
color:white;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 20%;
}

/* Add padding to container elements */
.container {
padding: 46px;
}

/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #000;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
tr:nth-child(odd) {
background-color: #dddddd;
}
.para
{
color:black;
}
.whi{
color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.alli{
text-align: center;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}

venereology answered 4 months ago
Next > < Previous

Related Solutions

HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a...
HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email...
HTML WEBSITE WITH CSS LAYOUT 1. Create a studentregistration form with the following fields: > Email Address (Email) > Desired Username (Text box) > Password (Password) > Family name (Text box) > Middle Name/Initial (Text box) > First name (Text box) > Gender (Radio Button - Male or Female only!) > ID Number (Text box) > Mobile Number (Text box) > Landline Number (Text box) > Permanent Home Address (Text box) > Degree/Course (Text box) > Year Level (Drop down...
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
Create a website for an online movie rental store, using HTML (and any other client technologies)...
Create a website for an online movie rental store, using HTML (and any other client technologies) and PHP. The website should include: - A front/home page containing a list of movies available for rent (list at least 10 movies). o Each movie should have a listed rental price. o Additional information provided: § name of actors in the movie (list at least 2) - The home page should link to a form for renting a movie o Selecting and submitting...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Please no JavaScript or Bootstrap. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to...
Create an ASP.Net Website using Visual Studio with C#: Create a simple calculator that has 3...
Create an ASP.Net Website using Visual Studio with C#: Create a simple calculator that has 3 text boxes: 2 of them to enter numbers, the 3rd one displays the results Create 4 buttons to add, subtract, multiply, and divide Prevent the user from entering text in the number fields Display a message indicating “cannot divide by” when the user click “/” and there is a zero the in the second box Create two additional buttons: - One to store data...
Create an ASP.Net Website using Visual Studio with Visual Basic.Net: Create a simple calculator that has...
Create an ASP.Net Website using Visual Studio with Visual Basic.Net: Create a simple calculator that has 3 text boxes: 2 of them to enter numbers, the 3rd one displays the results Create 4 buttons to add, subtract, multiply, and divide Prevent the user from entering text in the number fields Display a message indicating “cannot divide by” when the user click “/” and there is a zero the in the second box Create two additional buttons: - One to store...
HTML I would like you to create a three paged website, where you can navigate to...
HTML I would like you to create a three paged website, where you can navigate to any page using a navigation bar. One page must include an ordered list, one page must include an unordered list. One page must include a picture. (please keep it appropriate.) Each page much include a header and a footer, please have your name on each footer with the copyright symbol next to it. Each page must be styled using CSS, and I would like...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT