Animal Trade Card

In this example below you will see how to do a Animal Trade Card with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by bestw01, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bestw01 ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animal Trade Card</title>
  
  
  
  
  
</head>

<body>

  <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Animal Trading Cards</title>
  <style>
    /* add your CSS here */
/** {
	box-sizing: border-box;
}
*/
.card {
	height: 630px;
	width: 350px;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	background-color: #e0e0e0;
	color:#2a2a2a;
}

.title {
	font-weight: bolder;
	margin-left: 20px
}

.image {
	width: 300px;
	border-radius: 5px;
	margin-left:20px;
	cursor: pointer;
}

.fact {
	font-style: italic;
	margin:20px;
}

span {
	font-weight: bold;
}

.list {
	list-style: none;
	margin-left: -20px;
}

.description {
	margin: 20px;
}

/*
.details {
	background-color: #ededed;
	color:#2a2a2a;
	padding: 0;
}

*/
  </style>
</head>
<body>
	<div class="card">
		<!-- your favorite animal's name goes here -->
		<h2 class="title">Parrot</h2>
		<!-- your favorite animal's image goes here -->
		<a href="https://www.nationalgeographic.com/animals/birds/group/parrots/" target="_blank"><img src="https://cdn.patchcdn.com/users/1896723/2013/03/T800x600/43823668cefd74c1194724a3787eae83.jpg" alt="flying-parrot" class="image"></a>
		<div class="details">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="fact">The parrots are a broad order of more than 350 birds. Parrot learn tp vocalize by listing and then repeating it back.</p>
			<ul class="list">
				<!-- your favorite animal's list items go here -->
				<li><span>Scientific Name</span>: Psittaciformes</li>
				<li><span>Average Length</span>: 100 cm</li>
				<li><span>Average Lifespan</span>: 50-95 years</li>
				<li><span>Habitat</span>: tropical</li>
			</ul>
			<!-- your favorite animal's description goes here -->
			<p class="description">Though there is great diversity among these birds, there are similarities as well. All parrots have curved beaks and all are zygodactyls, meaning they have four toes on each foot, two pointing forward and two projecting backward. Most parrots eat fruit, flowers, buds, nuts, seeds, and some small creatures such as insects.</p>
		</div>
	</div>
</body>
</html>
  
  

</body>

</html>

Comments