A Pen by Einsteinder on CodePen.
-
-
Save Einsteinder/9671ae1142e55f861f0f07eb2953705f 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