Last active
December 5, 2017 20:32
-
-
Save desinas/eebc04df5b0201400554f6f94e4a4ac9 to your computer and use it in GitHub Desktop.
Giant panda card Project solution for Udacity project for Animal trading card// https://codepen.io/desinas/pen/JOxWqG?editors=1100
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Giant panda</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="card-backgr"> | |
| <!-- your favorite animal's name goes here --> | |
| <h3 class="tab1">Giant panda</h3> | |
| <!-- your favorite animal's image goes here --> | |
| <img class="card-photo" src="https://i.ytimg.com/vi/IPXHnhJdpzE/hqdefault.jpg" alt="Panda Cub from Wolong, Sichuan, China"> | |
| <div class="info-place"> | |
| <!-- your favorite animal's interesting fact goes here --> | |
| <p class="fact-emphasize">It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body. </p> | |
| <ul class="list-unbullet"> | |
| <!-- your favorite animal's list items go here --> | |
| <li><span class="label-bold">Kingdom</span>: Animalia</li> | |
| <li><span class="label-bold">Order</span>: Carnivora</li> | |
| <li><span class="label-bold">Family</span>: Ursidae</li> | |
| <li><span class="label-bold">Genus</span>: Ailuropoda</li> | |
| </ul> | |
| <!-- your favorite animal's description goes here --> | |
| <p>The giant panda (Ailuropoda melanoleuca, literally "black and white cat-foot"; Chinese: 大熊猫; pinyin: dà xióng māo, literally "big bear cat"), also known as panda bear or simply panda, is a bear native to south central China. It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body. </p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* add your CSS here */ | |
| /*Uses border around and width should be fixed */ | |
| .card-backgr { | |
| width: 324px; | |
| height: 675px; | |
| background-color: #DDDDDD; | |
| border-style: solid; | |
| border-radius: 5px; | |
| border-width: 3px; | |
| border-color: #BBB; | |
| box-shadow: 0 12px 18px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .tab1 { | |
| padding-left: 12px; | |
| } | |
| .card-photo { | |
| width: 300px; | |
| display: block; | |
| margin: auto; | |
| } | |
| /*The dots are removed*/ | |
| .list-unbullet { | |
| padding: 0px; | |
| list-style-type: none; | |
| } | |
| /*The labels are bolded*/ | |
| .label-bold { | |
| font-weight: bold; | |
| } | |
| /*The text is italicized*/ | |
| .fact-emphasize { | |
| margin: 0; | |
| padding: 0; | |
| font-style: italic; | |
| } | |
| /*Uses border around*/ | |
| .info-place { | |
| margin: 12px; | |
| padding: 12px; | |
| border-style: solid; | |
| border-width: thin; | |
| border-color: #BBB; | |
| text-align: justify; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is my solution at Udacity project Animal trading card, with a card of Giant panda.