SheCodes Basics
β<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Irrawaddy_dolphin</title>
</head>
<style>
h1{
font-family:'Times New Roman', Times, serif;
font-size:30px;
text-align:center;
margin:10px 20px;
border: 30px;
padding: 40px;
color:white;
}
body{
margin:15px;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(234,249,249,0.67) 0.1%, rgba(239,249,251,0.63) 90.1% );
}
div{
max-width:450px;
text-align:center;
display:block;
margin: 0px auto;
border: 20px;
border-radius: 15px;
background-image: linear-gradient( 109.6deg, rgba(48,207,208,1) 20%, rgba(51,8,103,1) 95% );
}
h2{
padding:10px 5px;
color: white;
margin: 0 auto;
display: block;
text-align: center;
border: 2px solid #b5e4ff;
max-width: 200px;
font-size: 12px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
border-radius:5 px;
}
img{
margin: 0 auto;
padding: 20px 15px;
}
p{
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size: 12px;
font-weight: 100%;
line-height: 17px;
color:white;
padding: 15px;
margin: 5px 20px;
border: 15px;
}
a{
font-family:serif;
font-size:10px;
text-align:left;
color:white;
cursor: pointer;
text-decoration: underline;
}
button{
font-size:12px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
margin:10px auto;
display: block;
color: white;
background-color: #3b98b9;
border-radius: 20px;
padding: 10px;
border:1px solid white;
box-shadow: 2px 2px black;
}
button:hover{
font-size: 12px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
cursor:pointer;
background-color:purple;
color: white;
transition: 150ms ease-out;
box-shadow: 2px 2px #3b98b9;
}
.footer{
display: block;
text-align:center;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
color: #31a3b9;
margin: 0 auto;
padding: 5px;
}
a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
color: #31a3b9;
}
</style>
<body>
<div class="container">
<h1>Irrawaddy Dolphin</h1>
<h2>"I prevent fish from overpopulating"</h2>
<img src="https://welovedolphins.club/wp-content/uploads/2017/10/smiling-dolphin-2.jpg"
width="300px" alt="dolphin">
<p>
If you see a lot of <strong>irrawaddy dolphins</strong> in an area, then it generally means that the local ecosystem is healthy enough to support
them. They are apex predators that make sure that the populations of their prey remain healthy and do not grow too big,
which can disrupt the food chain. They help maintain their ecosystem by having a diet of fish, mollusks, and aquatic
crustaceans such as crab and shrimp.
Irrawaddy dolphins provide income for coastal communities through ecotourism. They are well recognized for their
<em> βsmilingβ </em>faces and are known for their ability to spit water which is thought to be used as a way to herd fish.
</p>
<a href="https://en.wikipedia.org/wiki/Irrawaddy_dolphin">
Learn more on Wikipedia
</a><br>
<button>
Donate for Sustainabilityπ
</button><br>
<p class= "footer">
This page is built by
<a href="https://www.linkedin.com/in/phu-thet-yi-paing-54452019b/?lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3BolFp1OmfRw224yGAwEIXbA%3D%3D" target="_blank">
<strong>Anchor</strong>
</a>
</p>
</div>
<script>
function donate() {
let name = prompt("What is your name?");
let email = prompt("What is your email address?");
let emoji = prompt("What is your favourite emoji?");
alert("Thank You," + name+
"! We will be in touch by email, warmly welcome to your donation!π" +
emoji);
}
let donationButton = document.querySelector("button");
donationButton.addEventListener("click",donate);
</script>
</body>
</html>β
Verified Certificate
Final Project
HTML
CSS
JavaScript
VSCode
API
Git
GitHub
Hosting
Bootstrap
SEO
Responsive
