Skip to content

Instantly share code, notes, and snippets.

@therealshabi

therealshabi/index.html

Last active February 25, 2018 18:24
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 therealshabi/4e8d2c0bd1197397c2e21c8d4b3fc8ca to your computer and use it in GitHub Desktop.
Save therealshabi/4e8d2c0bd1197397c2e21c8d4b3fc8ca to your computer and use it in GitHub Desktop.
Download ZIP
Udacity Animal Trading Card
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<title>Animal Trading Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container-div">
<!-- your favorite animal's name goes here -->
<h3>The Royal Bengal Tiger</h3>
<!-- your favorite animal's image goes here -->
<img id="animal-image" src="http://4.bp.blogspot.com/-4WeLOP4KODA/UAWufnCHZAI/AAAAAAAAGMQ/qHmQh8R43lw/s640/HDhut.blogspot.com+%2815%29.jpg" alt="The Royal Bengal Tiger">
<div id="content-div">
<!-- your favorite animal's interesting fact goes here -->
<p id="interesting-fact-paragraph">
Bengal tigers have white spots, called “flashes” on the back of their ears.
These may be used to signal aggression, when the tiger swivels and flattens his ears in a confrontation.
</p>
<ul id="animal-list">
<!-- your favorite animal's list items go here -->
<li><span class="animal-facts-list">Population</span>: Less than 2,000</li>
<li><span class="animal-facts-list">Habitat</span>: Grasslands,
subtropical and tropical rainforests, scrub forests,
wet and dry deciduous forests and mangroves</li>
<li><span class="animal-facts-list"> Diet</span>: Mainly Ambar deer, wild pigs,
water buffalo and antelope</li>
<li><span class="animal-facts-list">Mating Season</span>: November to April</li>
</ul>
<!-- your favorite animal's description goes here -->
<p>
The Bengal tiger (Panthera tigris tigris) is the most numerous tiger subspecies in Asia.
The Bengal tiger ranks among the biggest wild cats alive today.
It is therefore considered to belong to the world's charismatic megafauna.
It is the national animal of both India and Bangladesh.
</p>
</div>
</div>
</body>
</html>
Raw
style.css
#container-div {
width: 360px;
border: 1px solid #A9A9AB;
margin: auto;
text-align: center;
box-shadow: 5px 10px #A9A9AB;
}
#animal-image {
display: block;
width: 330px;
height: 200px;
margin: auto;
text-align: center;
}
h3 {
text-align: left;
margin-left: 12px;
padding-bottom: 4px;
}
#content-div {
border: 1px solid #A9A9AB;
margin: 12px;
/*
Justify text alignment manages the text spacing and width such that it matches the width of the parent container
*/
text-align: justify;
padding-left: 8px;
padding-right: 8px;
}
#interesting-fact-paragraph {
font-style: italic;
}
#animal-list {
list-style: none;
margin: 0;
padding: 0;
line-height: 1.4;
}
.animal-facts-list {
font-weight: bold;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment