Animal trading card

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

Thumbnail
This awesome code was written by inelei, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright inelei ©
  • HTML
  • CSS
  • JavaScript
    <html>
<head>
	<meta charset="utf-8">
	<title>Animal Trading Cards</title>
	<link href="styles.css" rel="stylesheet">
</head>
<body>
	<div class="main">
		<h3>Bernhardier</h3>
		<img src="https://i.pinimg.com/564x/9d/73/b9/9d73b9d10dbf701886bfaaf53028aa42.jpg" alt="beethoven">
		<div class="contain">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="fact">St. Bernard is a giant dog.</p>
			<ul>
				<!-- your favorite animal's list items go here -->
				<li><span>Origin</span>: Switzerland</li>
				<li><span>Record size</span>: 8 feet 6 inches</li>
				<li><span>Common nicknames</span>: Saint</li>
				<li><span>Other names</span>: Bernhardier</li>
			</ul>
			<!-- your favorite animal's description goes here -->
			<p>The St. Bernard is a giant dog. The average weight of the breed is between 65 and 120 kg (140 and 260 lb) or more, and the approximate height at the withers is 70 to 90 cm (28 to 35 in).
</p>
		</div>
	</div>
<!-- ###################### -->  
	<div class="main">
		<h3>Dalmatian</h3>
		<img src="https://i.pinimg.com/564x/f2/42/ba/f242ba71e6a155857627424a161f8f25.jpg" alt="beethoven">
		<div class="contain">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="fact">Dalmatians usually have litters of six to nine pups</p>
			<ul>
				<li><span>Origin</span>: Croatia</li>
				<li><span>Coat</span>: Short, smooth</li>
				<li><span>Color</span>: White background, black or liver spots</li>
				<li><span>Other names</span>: Carriage dog</li>
			</ul>
			<!-- your favorite animal's description goes here -->
			<p>The Dalmatian is a breed of medium sized dog, noted for its unique black or liver spotted coat and mainly used as a carriage dog in its early days. Despite its name, there is little to no evidence that the breed originated in the historical region of Dalmatia. Today, it is a popular family pet and many dog enthusiasts enter Dalmatians into kennel club competitions.
</p>
		</div>
	</div>
<!-- #######################-->
  	<div class="main">
		<h3>Retrivier</h3>
		<img src="https://i.pinimg.com/564x/49/41/b6/4941b691fd81dd939b535cd85aeaf369.jpg" alt="beethoven">
		<div class="contain">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="fact">A retriever is a type of gun dog that retrieves game for a hunter.</p>
			<ul>
				<li><span>Origin</span>: Croatia</li>
				<li><span>Coat</span>: Short, smooth</li>
				<li><span>Color</span>: White background, black or liver spots</li>
				<li><span>Other names</span>: Carriage dog</li>
			</ul>
			<!-- your favorite animal's description goes here -->
			<p>The Dalmatian is a breed of medium sized dog, noted for its unique black or liver spotted coat and mainly used as a carriage dog in its early days. Despite its name, there is little to no evidence that the breed originated in the historical region of Dalmatia. Today, it is a popular family pet and many dog enthusiasts enter Dalmatians into kennel club competitions.
</p>
		</div>
	</div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/inelei/animal-trading-card-dZEZzz */
    body {
  background-color: #f0f0f0;
}
img {
	margin: 10px 0;
  width: 300px;
}
ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
ul li span {
	font-weight: bold;
}
h3 {
	color: #fff;
	background-color: #36aefa;
	padding: 5px;
	border-radius: 10px;
	text-align: center;
	font-family: 'Tahoma', Arial;
}
.main {
	width: 300px;
  background-color: #fff;
	border: 1px solid #cecece;
	box-shadow: 5px 5px 5px 0 #e6e6e6;
	padding: 10px;
  margin: 5px;
  float: left;
}
.main:hover {
	border-color: #36aefa;
	cursor: pointer;
}
.contain {
  background-color: #F1F8E9;
	border: 1px solid #cecece;
	padding: 10px;
	color: #6a6a6a;
}
.fact {
	font-style: italic;
}


/*Downloaded from https://www.codeseek.co/inelei/animal-trading-card-dZEZzz */
    

Comments