A Pen by Devin Papp on CodePen.
Last active
June 7, 2016 17:02
-
-
Save Dpappy/9cdd50f4f0abcd19b2eb05a4971e1e6e to your computer and use it in GitHub Desktop.
On Click Key Bind
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
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"> | |
| <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="css-3-gallery/css/styles.css" /> | |
| </head> | |
| <body> | |
| <header class="main-header"> | |
| <nav role='navigation'> | |
| <ul> | |
| <li><a href="index.html">Home</a></li> | |
| <li><a href="about.html">About/Contact</a></li> | |
| <li><a href="Portfolio.html">Portfolio</a></li> | |
| <li><a href="Resume.html">Resume</a></li> | |
| <li><a href="/vcd/index.html">VCD Doodle</a></li> | |
| <li><a href="/weatherPage/index.html">Weather Page</a></li> | |
| </ul> | |
| </nav> | |
| <h1>Portfolio</h1> | |
| </header> | |
| <h2></h2> | |
| <h3></h3> | |
| <div class="thumbs"> | |
| <ul> | |
| <li> | |
| <a href="#fullsize-1"> | |
| <img src="../img/Banana Split Brain.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-2"> | |
| <img src="../img/Asuka.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-3"> | |
| <img src="../img/Ugg.jpg" alt="" /> | |
| </a> | |
| </li> | |
| </ul> | |
| <ul> | |
| <li> | |
| <a href="#fullsize-4"> | |
| <img src="../img/deerintheForest.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-5"> | |
| <img src="../img/zoom2.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-6"> | |
| <img src="../img/3creatures5.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-7"> | |
| <img src="../img/DogsPlayingPoker2.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-8"> | |
| <img src="../img/eagleSilverDollarPappD.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-9"> | |
| <img src="../img/eagleSilverDollarPappD2.jpg" alt="" /> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#fullsize-10"> | |
| <img src="../img/personaPic.jpg" alt="" /> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <h3></h3> | |
| <div class="fullsize"> | |
| <ul> | |
| <li> | |
| <img src="../img/Banana Split Brain.jpg" id="fullsize-1"/> | |
| </li> | |
| <li> | |
| <img src="../img/Asuka.jpg" id="fullsize-2" /> | |
| </li> | |
| <li> | |
| <img src="../img/Ugg.jpg" id="fullsize-3" /> | |
| </li> | |
| <li> | |
| <img src="../img/deerintheForest.jpg" id="fullsize-4" /> | |
| </li> | |
| <li> | |
| <img src="../img/zoom2.jpg" id="fullsize-5" /> | |
| </li> | |
| <li> | |
| <img src="../img/3creatures5.jpg" id="fullsize-6" /> | |
| </li> | |
| <li> | |
| <img src="../img/DogsPlayingPoker2.jpg" id="fullsize-7" /> | |
| </li> | |
| <li> | |
| <img src="../img/eagleSilverDollarPappD.jpg" id="fullsize-8" /> | |
| </li> | |
| <li> | |
| <img src="../img/eagleSilverDollarPappD2.jpg" id="fullsize-9" /> | |
| </li> | |
| <li> | |
| <img src="../img/personaPic.jpg" id="fullsize-10" /> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> |
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
| // Change Selector if necessary | |
| $('html').keypress(function(e){ | |
| if (e.keyCode === 32) { | |
| //Where the magic happens | |
| console.log(e.keyCode); | |
| } | |
| }); |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| /* Gallery Styling */ | |
| /* Included CSS | |
| * Including TreeHouse Grid System | |
| * URL: | |
| Inheriting Ben Schwarz's CSS Gallery */ | |
| /* Customize the dimensions of your gallery & thumbnails */ | |
| /* Override Inherited Size from Grid System */ | |
| body { | |
| background-color:azure; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: fixed; | |
| } | |
| div {background-color:black;} | |
| a:hover { | |
| border-radius: 10px; | |
| color: darkred; | |
| transition: all .5s; | |
| background: -webkit: | |
| } | |
| li { | |
| color:white; | |
| float: left; | |
| list-style: none; | |
| margin: 5px; | |
| } | |
| a:link { | |
| font-color: white; | |
| border: 50px; | |
| display: inline; | |
| line-height: 50px; | |
| text-align: center; | |
| text-decoration: none; | |
| margin: 3em; | |
| height: 50px; | |
| width: 100px; | |
| background: none; | |
| align-content:top; | |
| } | |
| img { | |
| margin-top: 100px; | |
| width: 90px } | |
| h3 { | |
| clear: left; | |
| } | |
| .fullsize { | |
| position: relative; | |
| } | |
| .fullsize img { | |
| position: absolute; | |
| top: 40px; | |
| left: 40px; | |
| } | |
| /* Use :nth-child to add borders to 1st, 2nd, 3rd */ | |
| li:nth-child(1) a { | |
| display: inline; | |
| border: none;} | |
| li:nth-child(2) a { | |
| display: inline; | |
| border: none;} | |
| li:nth-child(3) a { | |
| display: inline; | |
| border: none;} | |
| /* Change Borders of Full Size Images */ | |
| #fullsize-1:target { | |
| border: 20px solid black; | |
| z-index: 1; | |
| } | |
| #fullsize-2:target { | |
| border: 20px solid black; | |
| z-index: 2; | |
| } | |
| #fullsize-3:target { | |
| border: 20px solid black; | |
| z-index: 3; | |
| } | |
| /*Fancify */ | |
| .fullsize img { | |
| opacity: 0; | |
| transition: opacity 1s; | |
| } | |
| .fullsize img:target { | |
| opacity: 1; | |
| width: 60%; | |
| top-margin:120px; | |
| left-margin:100px; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment