<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Work: Red Panda</title>
<style>
body {
background-color: rgb(220 117 20);
background: linear-gradient(rgb(220 117 20), rgb(185, 72, 37));
}
h1 {
text-align: center;
color: black;
border: 1px;
border-radius: 5px;
font-size: 35px;
padding: 1px;
}
h2 {
text-align: center;
color: black;
font-size: 25px;
}
img {
border-radius: 10px;
display: block;
margin: 0 auto;
max-width: 80%;
}
p {
line-height: 2;
margin: 40px 30px 40px 30px;
text-align: justify;
}
h3 {
line-height: 32px;
margin: 40px 300px 40px 300px;
text-align: justify;
font-weight: normal;
}
button {
display: block;
margin: 30px auto;
background: rgb(77, 37, 4);
color: rgb(220, 117, 20);
font-size: 17px;
padding: 15px 20px;
border: none;
border-radius: 15px;
box-shadow: 8px 8px 8px rgb(150, 98, 31);
transition: all 200ms ease-in-out;
}
hr {
border: 0.1px solid black;
width: 60%;
margin: 0 auto;
}
button:hover {
opacity: 0.9;
cursor: pointer;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.learn-more {
display: block;
margin-top: 20px;
text-decoration: none;
}
.learn-more:hover {
text-decoration: underline;
}
.footer {
text-align: center;
}
.art {
color: rgb(85, 26, 139);
}
</style>
</head>
<body>
<div class="container">
<h1>Red Panda</h1>
<h2><em>(Ailurus fulgens)</em></h2>
<img
src="https://i.pinimg.com/originals/21/28/6c/21286c1501d6e9465119eef86da7b5a1.jpg"
alt="Yawning Red Panda"
width="400"
/>
<p>
'The red panda is slightly larger than a
<span class="art">domestic cat</span> with a bear-like body and thick
russet fur. The belly and limbs are black, and there are white markings
on the side of the head and above its small eyes. Red pandas are very
skillful and acrobatic animals that predominantly stay in trees. Almost
50% of the red panda’s habitat is in the
<span class="art">Eastern Himalayas</span>. They use their long, bushy
tails for balance and to cover themselves in winter, presumably for
warmth. Primarily an herbivore, the name panda is said to come from the
Nepali word ‘ponya,’ which means bamboo or plant eating animal.' (WWF)
<br />
<a
href="https://www.worldwildlife.org/species/red-panda"
target="_blank"
class="learn-more"
>
Learn more on the WWF website
</a>
</p>
<p>
<strong> Did you know?</strong>
<br />
According to the WWF, their wild population is estimated at less than
10,000 individuals, which means that the red panda is listed as
<span class="art">Endangered</span>. If you want to know more about
their life and how you can help to protect them, please get in contact
here:
<button class="click-button">Click here⭐✨💫</button>
</p>
<hr />
<p class="footer">This page was built with 💖 by Valery Myslovskaya</p>
</div>
<script>
function click() {
let name = prompt("What is your name?");
let contact = prompt(
"Would you like us to contact you via call or email?"
);
contact = contact.trim();
if (contact === "call") {
alert(
"Dear " +
name +
"💖, thank you for your interest! We'll call you shortly!👋 "
);
} else {
alert(
"Dear " +
name +
"💖, thank you for your interest! We'll email you shortly!👋 "
);
}
}
click();
let clickButton = document.querySelector(".click-button");
clickButton.addEventListener("click", click);
</script>
</body>