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

Thumbnail
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 Codepen.io
Copyright elBanauso ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <html>
<head>
	<meta charset="utf-8">
	<title>Animal Trading Cards</title>
	<link href="styles.css" rel="stylesheet">
</head>
<body>
	<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="https://www.oldbookillustrations.com/wp-content/uploads/2017/08/hercules-beetle.jpg" 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>
			</ul>
			<!-- 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>
		</div>
	</div>
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elBanauso/animal-trading-card-true-to-mockup-jawGwL */
/* 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;
}

Comments