Created
January 7, 2015 04:11
-
-
Save jessedhillon/5cdef6b3b473ff035f5b to your computer and use it in GitHub Desktop.
Images, icons and boxes
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> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="icon-box left-icon width-2"> | |
| <div class="icon"> | |
| <img src="http://placehold.it/48x48"> | |
| </div> | |
| <div class="label width-1"> | |
| Some text item | |
| </div> | |
| </div> | |
| <div class="icon-box right-icon width-2"> | |
| <div class="icon"> | |
| <img src="http://placehold.it/48x48"> | |
| </div> | |
| <div class="label width-1"> | |
| Some text item | |
| </div> | |
| </div> | |
| <div class="image-box"> | |
| <img src="http://placekitten.com/512/512"> | |
| <div class="description"> | |
| <h2>Some text here</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et lacus ex. Vestibulum vitae lacus non nisl semper pulvinar. Ut vitae purus enim. Cras non ligula at purus consequat commodo.</p> | |
| </div> | |
| </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
| .width-1 { | |
| width: 120px; | |
| } | |
| .width-2 { | |
| width: 240px; | |
| } | |
| .icon-box { | |
| clear: both; | |
| border: 1px dotted #aaa; | |
| min-height: 48px; | |
| } | |
| .icon-box .icon { | |
| width: 48px; | |
| } | |
| .icon-box .icon, .icon-box .label { | |
| float: left; | |
| } | |
| .icon-box.left-icon .icon { | |
| float: left; | |
| padding-right: 12px; | |
| } | |
| .icon-box.right-icon .icon { | |
| float: right; | |
| padding-left: 12px; | |
| } | |
| .image-box { | |
| position: relative; | |
| } | |
| .image-box .description { | |
| width: 512px; | |
| height: 200px; | |
| position: absolute; | |
| background: rgba(32, 32, 32, 0.7); | |
| color: #aaa; | |
| bottom: 0; | |
| } | |
| .image-box .description p { | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment