A973C A973C
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>Pure CSS Featured Image Slider · CodePen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css"> |
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>Expandable List · CodePen</title> | |
| <style> |
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
| <!-- From here: http://css-tricks.com/centering-in-the-unknown/ --> | |
| <div class="block"> | |
| <div class="centered"> | |
| <h1>This white box is vertically centered</h1> | |
| <p>This is a demonstration of a semantic vertical centering technique for elements of unknown size as posted by Chris Coyier at <a href="http://css-tricks.com/centering-in-the-unknown/" target="_blank">CSS Tricks</a> and pioneered by Michał Czernow. I take no credit for any of this, I merely documented the technique.</p> | |
| <p><a href="http://codepen.io/Elbone/full/HdqGh" target="_blank">Click here</a> to open in fullscreen mode (more realistic)</p> | |
| </div> | |
| </div> |
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
| <!-- https://codepen.io/A973C/pen/sohCG --> | |
| <canvas id="space"></canvas> |
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
| <a data-unread="3" href="#">✉</a> |
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
| <button id="test">Trigger notification</button> |
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
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> | |
| <stop offset="0%" style="stop-color:rgb(144,215,216);stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:rgb(96,187,218);stop-opacity:1" /> | |
| </radialGradient> | |
| </defs> | |
| <rect width="100%" height="100%" style="fill:url('#grad1')" /> | |
| </svg> |
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
| <ul class="slider"> | |
| <li> | |
| <input type="radio" id="slide1" name="slide" checked> | |
| <label for="slide1"></label> | |
| <img src="http://www.dessko.com/assets/images/116/116_size_400x300_wallpaper-25331.jpg?1265653882" alt="Panel 1"> | |
| </li> | |
| <li> | |
| <input type="radio" id="slide2" name="slide"> | |
| <label for="slide2"></label> | |
| <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/09/Beautiful-Landscape-400x300.jpg" alt="Panel 2"> |
A973C
/ index.html
Created
October 12, 2012 06:10
For my site I wanted to have a grid of thumbnails that scaleZ on hover, overlapping their siblings. The title of the thumbnail scales in the opposite direction to create a neat depth effect.
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
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> | |
| <a href="#" class="project-thumbnail"><span class="project-title">Thumb Title</span></a> |
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
| <div id="slideshow"> | |
| <ul> | |
| <li><a id="first" href="#one">< </a> | |
| <p id="one">We have hands-on experience in multiple areas within the real estate industry. This means that when you work with us, you are partnering with a team of professionals with the proven ability to execute, design and implement a full spectrum of real estate strategies. Because we understand the intricacies that surround raising capital and managing a project, our ability to effectively locate, negotiate and secure space for our clients is enhanced. With intimate knowledge in marketing, purchasing, selling and leasing both residential and commercial space, we are able to provide the most comprehensive and professional services available in the markets we serve.<p/></li> | |
| <li><a id="second" href="#two">></a> <p id="two">We are business owners and we understand business. We know the practical application of real estate and how it affects business. We have developed buildings and |
OlderNewer