-
-
Save brendaMan/e59721d7eaa79d817b7bc056a8b01eff to your computer and use it in GitHub Desktop.
Gandalf css
This file contains hidden or 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
| .picture { | |
| opacity: 0.6; | |
| } | |
| .reward { | |
| text-align: center; | |
| font-size: 3em; | |
| font-family: 'Arial Narrow Bold', sans-serif; | |
| background-color: antiquewhite; | |
| opacity: 0.6; | |
| position: absolute; | |
| top: 20px; left: 40px; | |
| border-radius: 35px 35px 35px 35px; | |
| width: 380px; | |
| height: 130px; | |
| padding: 12px 25px; | |
| } | |
| .name { | |
| margin: auto; | |
| padding: 275px 110px; | |
| position: absolute; | |
| bottom: 30px; | |
| font-family: 'Arial Narrow Bold', sans-serif; | |
| font-size: 4em; | |
| color: white; | |
| } | |
| .price { | |
| color: orangered; | |
| } | |
| /* hover effect*/ | |
| .picture:hover .reward { | |
| opacity: 0; | |
| } | |
| .picture:hover { | |
| opacity: 1; | |
| } | |
| .picture:hover .name { | |
| padding: 450px 150px; | |
| font-size: 2em; | |
| bottom: -290px; left: 40px; | |
| } |
This file contains hidden or 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> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="index2.css" type="text/css"> | |
| <title>Gandalf</title> | |
| </head> | |
| <body> | |
| <div class="picture"> | |
| <img src="images\integration_gandalf.png" alt="Gandalf"/> | |
| <div class="reward">reward<span class="price"> 1000</span><br/>gold coins</div> | |
| <div class="name">Gandalf</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment