"Animal Trading Cards"
Bootstrap 4.1.1 Snippet by mamineofficial

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Building the Prototype</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="container"> <h1>Leopard</h1> <!-- photo credit: wikipedia.org, image taken by Ritik --> <img src="https://www.dhresource.com/600x600/f2/albu/g5/M00/57/F7/rBVaI1jTrbeAZSiHAAIVo4kNWQE912.jpg" alt="leopard"> <div id="card" class="animal-info"> <p id="interesting-fact">Learn about different types of Tiger, how big they are, how fast they run, how they hunt and more..</p> <ul id="facts"> <li> <span>Scientific Name</span>: Average Length </li> <li> <span>Average Length</span>: 60 – 70 cm </li> <li> <span>Average Lifespan</span>: 12 – 17 years </li> <li> <span>Habitat</span>: the savannahs </li> </ul> <p id="summary">The leopard has a long and muscular body, well proportioned, with wide legs. The pectoral muscles are developed to allow it to climb trees. The tail is long, curved upward when walking and serves as a pendulum when moving in trees2. The leopard weighs on average 58 kg for the male and 37 kg for the female3. The largest specimens can reach 90 kg and are mainly found in Central Asia and Iran, in some Indian forests where the tiger is absent, as well as in parts of Africa including South Africa, Kenya's mountain valleys. , West African tropical forests (Congo, Gabon, Cameroon) and formerly Algeria4. The size of the female is about two-thirds that of the male5. The length of the body is 1 to 1.6 meters for males and 0.95 to 1.24 meters for females, with a tail of 52 to 90 cm. The height at the withers ranges from 45 to 78 cm3. </p> </div> </div> </body> </html>
/* add your CSS here */ body { padding: 20px; } #container{ border : 2px solid grey; padding: 20px; } img { width: 300px; } .animal-info { font-style: italic ; border : 2px solid grey; padding: 1px; } li { list-style: none; } span { font-weight:bold; }

Related: See More


Questions / Comments: