Animal Trading Card - true to mockup

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

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

  <meta charset="UTF-8">
  <title>Animal Trading Card - true to mockup</title>
      <link rel="stylesheet" href="css/style.css">



	<meta charset="utf-8">
	<title>Animal Trading Cards</title>
	<link href="styles.css" rel="stylesheet">
	<div class="card">
		<!-- your favorite animal's name goes here -->
		<h3 class="animal-name">Hercules Beetle</h3>
		<!-- your favorite animal's image goes here -->
		<img class="animal-picture" src="" alt="hercules beetle">
		<div class="animal-textbox">
			<!-- your favorite animal's interesting fact goes here -->
			<p class="animal-funfact">The larva of the Hercules beetle feeds on rotting wood during its two-year larval stage.</p>
			<ul class="animal-list">
				<!-- your favorite animal's list items go here -->
				<li><span class="bold">Scientific Name</span>: Dynastes hercules</li>
				<li><span class="bold">Average Lentgth</span>: 5 to 8 cm</li>
				<li><span class="bold">Average Lifespan</span>: 3 to 6 month</li>
				<li><span class="bold">Habitat</span>: Central to South America</li>
			<!-- your favorite animal's description goes here -->
			<p class="animal-description">D. hercules does not negatively affect human activities, either as an agricultural pest or disease vector. The beetles may be kept as pets.</p>



/*Downloaded from */
/* 1) & 2) This is where the border for the card is created */
.card {
	font-family: serif;
	width: 300px;
	margin: auto;
	border: 1px solid lightgrey;
	padding: 5px 15px 15px;
	box-shadow: 10px 5px 1px 0 lightgrey;

/* 3) This is the header. */
.animal-name {
	font-weight: bold;
	font-size: 26px;

/* 4) This is the picture of the animal. */
.animal-picture {
	width: 300px;
	margin: 0px auto 15px;

/* 5) This is where the box with text underneath the picture is created. */
.animal-textbox {
	border: 1px solid lightgrey;
	padding: 0px 15px;
	font-size: 16px;

/* 6) This is the tagline with a one-liner funfact. */
.animal-funfact {
	font-style: italic;

/* 7) & 8) This is a list with some general facts about the animal to make it more compareable */
.animal-list {
	list-style: none;
	padding: 0;

.bold {
	font-weight: bold;

/* 9) This is a short description of the animal, to add some personality. */
.animal-description {
  text-align: justify;