Skip to content
Advanced Guide To Web Development
Advanced Guide To Web Development
More
Share
Explore
Advanced Guide To Web Development

Resource

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animals</title>
<style>
body {
background-color: rgb(217, 150, 255);
}
#head {
font-size: 60px;
background-color: rgb(108, 0, 74);
color: rgb(255, 127, 214);
font-family: Chalkduster, Arial;
text-align: center;
border: yellow 10px dotted;
margin-top: 25px;
margin: auto;
width: 1050px;
}
#introPara {
font-family: cursive;
font-size: 25px;
}
.list1 {
background-color: rgb(255, 0, 0);
width: 50px;
}
#firsttable {
background-color: aqua;
}
#firsthead {
background-color: rgb(0, 92, 15);
color: rgb(255, 205, 4)
}
#firstbody {
background-color: rgb(142, 78, 0);
color:rgb(255, 142, 255)
}
th {
padding: 10px;
}
td {
padding: 10px;
}
#bl {
color: red;
}
#contentPart {
background-color: rgb(213, 213, 213);
width: 750px;
height: 750px;
overflow: auto;
border: rgb(65, 65, 65) 7px double;
padding-top: 0.1px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
}
.animalColor2 {
background-color: rgb(166, 255, 251);
width: 150px;
}
.animalColor1 {
background-color: rgb(143, 255, 148);
width: 150px;
}
#marginOnly {
margin-left: 5px;
}
#catImg {
position: relative;
left: 260px;
}
#catsLink {
position: relative;
text-align: center;
left: 285px;
}
#dogImg {
float: left;
}
#dogPara {
margin-left: 165px;
}
#pigsLink {
margin-top: 70px;
}
.slist1 {
color: yellow;
}
h3.slist1 {
background-color: rgb(0, 0, 96);
font-size: 30px;
font-family: Arial;
width: 300px;
}
ul.TOC li {
line-height: 30px;
}
#BTTL:link {
background-color:rgb(0, 201, 17);
}
#BTTL:visited {
color: rgb(0, 0, 96);
}
#BTTL:hover {
background-color: aquamarine;
}
#BTTL:active {
background-color: blue;
color: yellowgreen;
}
#BTTL:focus {
background-color: blueviolet;
}
#contentPart:hover {
background-color: plum;
}
.c {
background-color: rgb(199, 199, 199);
width: 350px;
}
button {
background-color: rgb(0, 201, 17);
font-size: 50px;
}
button:hover {
background-color: aquamarine;
}
marquee {
background-color: rgb(255, 98, 0);
font-size: 25px;
}
marquee:hover {
font-family: chalkduster;
}
</style>
</head>
<body>
<marquee>Welcome to my animals webpage! Today is April 9th, 2022; it is a Saturday. Hope you have a great day!</marquee>

<h1 id = "head">The Animals On Planet Earth</h1>

<div id = "marginOnly">

<p id = "introPara">Welcome to this <span id = "bl">bootiful</span> animals webpage! Made by Jacob! Enjoy! :)</p>

<h3 class="TOCH">Table Of Contents:</h3>

<ul class="TOC">
<li><a href="#catsLink">Cats</a></li>
<li><a href="#dogsLink">Dogs</a></li>
<li><a href="#pigsLink">Pigs</a></li>
<li><a href="#cowsLink">Cows</a></li>
<li><a href="#rabsLink">Rabbites</a></li>
<li><a href="#chickenLink">Chicken</a></li>
<li><a href="#bufsLink">Butterflies</a></li>
<li><a href="#dolsLink">Dolphins</a></li>
<li><a href="#sharksInternal">Sharks</a></li>
</ul>

<hr>

<div class = "c">
<code>
int num = 2;
<br>
System.out.println("Hello" + num);
</code>
</div>

<hr>

<button>Press Me!!!!!</button>

<hr>

<table id = "firsttable">
<thead id = "firsthead">
<tr>
<th>Animal</th>
<th>Colors</th>
<th>Where Orininated?</th>
<th>More Info</th>
</tr>
</thead>
<tbody id = "firstbody">
<tr>
<td>Cats</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
<tr>
<td>Dogs</td>
<td>Orange & Gray</td>
<td>North America</td>
<td>2 meals a day</td>
</tr>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.