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="Bernhardier">
		<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>
<!-- ######Dalmatian###### -->  
	<div class="main">
		<h3>Dalmatian</h3>
		<img src="https://i.pinimg.com/564x/f2/42/ba/f242ba71e6a155857627424a161f8f25.jpg" alt="Dalmatian">
		<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>
<!-- #######Retrivier######-->
  	<div class="main">
		<h3>Retrivier</h3>
		<img src="https://i.pinimg.com/564x/49/41/b6/4941b691fd81dd939b535cd85aeaf369.jpg" alt="Retrivier">
		<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> Generally gun dogs are divided into three major classifications: retrievers, flushing spaniels, and pointing breeds. Retrievers were bred primarily to retrieve birds or other prey and return them to the hunter without damage; retrievers are distinguished in that nonslip retrieval is their primary function.
</p>
		</div>
	</div>
  
   	<div class="main">
		<h3>Siberian Husky</h3>
		<img src="https://i.pinimg.com/564x/d5/a8/34/d5a834e6a8d9ede51cedbed7ccd2fa01.jpg" alt="Siberian Husky">
		<div class="contain">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="fact">The Siberian Husky was originally developed by the Chukchi people of the Chukchi Peninsula in eastern Siberia.</p>
			<ul>
				<li><span>Origin</span>: Siberia, Russia</li>
				<li><span>Coat</span>: Thick double coat - thick undercoat and soft outer coat</li>
				<li><span>Color</span>: All colors from black to white along with a brown/red color</li>
				<li><span>Other names</span>: Chukcha, Chuksha</li>
			</ul>
			<!-- your favorite animal's description goes here -->
			<p>The Siberian Husky is a beautiful pet type with a thick coat that can be found in a wide variety of shades and also markings. Their blue or multi-colored eyes and also striking face masks just include in the charm of this breed, which originated in Siberia. 
</p>
		</div>
	</div>
</body>
</html>

/*Downloaded from https://www.codeseek.co/inelei/animal-trading-card-rYPKEW */
    body {
  background-color: #f0f0f0;
}
img {
	margin: 10px 0;
  width: 300px;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
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: #f7f9fa;
	border: 1px solid #cecece;
	padding: 10px;
	color: #6a6a6a;
}
.contain:hover {
  background-color: #ffffff;
}
.fact {
	font-style: italic;
}


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

Comments