A Pen by Einsteinder on CodePen.
Created
July 27, 2016 08:37
-
-
Save anonymous/fbaba82dd2e9a62b7f641b9691e657b1 to your computer and use it in GitHub Desktop.
Mario
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 lang="en"> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <title>Favorite App</title> | |
| </head> | |
| <body> | |
| <div class="title"> | |
| <h1> | |
| Mario | |
| </h1> | |
| </div> | |
| <div class="app"> | |
| <div class="image-container"> | |
| <img class="image" src="http://vignette4.wikia.nocookie.net/robber-penguin-agency/images/6/6e/Small-mario.png" alt="This is a screenshot"> | |
| </div> | |
| <div class="description"> | |
| <p class="description-text"> | |
| <br> <br> <br> | |
| Mario is a fictional character in the Mario video game franchise, created by Nintendo's Japanese video game designer, Shigeru Miyamoto. Serving as the company's mascot and the eponymous protagonist of the series, Mario has appeared in over 200 video games since his creation. Depicted as a short, pudgy, Italian plumber who resides in the Mushroom Kingdom, his adventures generally center upon rescuing Princess Peach from the Koopa villain Bowser. His younger brother is Luigi. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="title"> | |
| <ul> | |
| <li><a href="http://codepen.io/klepht/pen/jAKmyA">Source Code</a></li> | |
| <li><a href="https://en.wikipedia.org/wiki/Mario">About</a></li> | |
| </ul> | |
| </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
| li { | |
| display: inline; | |
| } | |
| .title{ | |
| font-size:33px; | |
| margin-top:30px; | |
| margin:30px; | |
| color:white; | |
| background-color:rgba(252,38,53,1); | |
| text-align:center; | |
| border-radius:10px; | |
| } | |
| .image{ | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| border-radius:425px; | |
| height:300px; | |
| margin:35px; | |
| } | |
| .app{ | |
| display: flex; | |
| } | |
| .screenshot{ | |
| max-width: 460px; | |
| } | |
| .description{ | |
| border-top:10px; | |
| } | |
| .description-text{ | |
| margin:30px; | |
| text-align:center; | |
| font-family: cursive, sans-serif; | |
| font-size: 1em; | |
| } | |
| ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /** { | |
| outline: 1px solid red ; | |
| }*/ | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| -ms-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment