Skip to content

Instantly share code, notes, and snippets.

@sayantanHack

sayantanHack/card.html

Created April 6, 2018 23:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sayantanHack/86313cc68e9e49151b1c3fab709f73cd to your computer and use it in GitHub Desktop.
Save sayantanHack/86313cc68e9e49151b1c3fab709f73cd to your computer and use it in GitHub Desktop.
Download ZIP
Udacity Animal Card
Raw
card.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Animal Trading Cards</title>
</head>
<body>
<div class="Cards">
<!-- your favorite animal's name goes here -->
<h3> Elephant</h3>
<!-- your favorite animal's image goes here -->
<img src="https://ssl.c.photoshelter.com/img-get/I0000LN762CPvHq8/s/600/600/African-elephant-picture-photos-3Me494.jpg" alt="Elephant">
<div class="Cards2">
<!-- your favorite animal's interesting fact goes here -->
<p>Elephant is very quite animal.Elephants are the largest land animals in the world. <br>The largest elephant on record was an adult male African elephant. It weighed about 24,000<br> pounds and was 13 feet tall at the shoulder! Elephants can live to be over 70 years old.</p>
<!-- your favorite animal's list items go here -->
<span>Scientific Name</span>: Loxodonta<br>
<span>Food</span>: Vegeterian <br>
<span>Weight</span>: 5000-6000 KG <br>
<span>Height</span>: 2.7-3.3 Meter
<!-- your favorite animal's description goes here -->
<p>Elephants are the largest land animals on Earth. They have<br> characteristic long noses, or trunks; large, floppy ears; and wide, thick legs.<br> There are two species of elephant. The Asian elephant and the African elephant live on separate continents and have many unique features.</p>
</div>
</div>
</body>
</html>
Raw
styles.css
.Cards{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
border: 6px solid grey transparent ;
}
.Cards2{
border-left: 5px solid #084d1ccc;
background-color: #b3cf26;
border-radius: 5px;
}
h3{
font-style: italic;
border-left: 7px solid blue;
background-color: #afdff3;
border-radius: 6px;
}
img{
width: 300px;
border-radius: 5px;
border-image: url("https://ssl.c.photoshelter.com/img-get/I0000LN762CPvHq8/s/600/600/African-elephant-picture-photos-3Me494.jpg") 20% round;
}
span{
font-weight: bold;
}
@sayantanHack
Copy link
Author

This is the animal card proect

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment