Luke Watts lukewatts
lukewatts
/ SassMeister-input-HTML.jade
Last active
December 23, 2015 23:25
Generated by SassMeister.com.
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
| .transform-me Transform Me! |
lukewatts
/ SassMeister-input-HTML.jade
Created
December 24, 2015 02:13
Generated by SassMeister.com.
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
| article | |
| h1 Background Animation | |
| p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida dignissim lectus ut scelerisque. Phasellus a luctus odio. Nullam maximus consectetur tortor vitae laoreet. Suspendisse nunc quam, gravida vel velit vitae, tempor congue sapien. Fusce pellentesque aliquam mauris vel hendrerit. Nam tristique ornare mi, finibus vulputate nisl porta at. Sed iaculis urna vel volutpat tincidunt. Proin eget vestibulum ligula, ac rhoncus ante. Aliquam aliquam condimentum porta. Suspendisse porttitor consequat orci iaculis scelerisque. | |
| p In consectetur ut diam in posuere. Vestibulum et laoreet eros, varius congue enim. Praesent pulvinar commodo volutpat. Aliquam nunc tortor, gravida in blandit id, dictum quis quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis quis orci nec nibh dapibus sollicitudin vel ultricies lectus. | |
| p Proin nibh li |
lukewatts
/ SassMeister-input-HTML.jade
Last active
December 24, 2015 03:35
Generated by SassMeister.com.
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
| h1 Compass |
lukewatts
/ SassMeister-input-HTML.jade
Last active
December 24, 2015 19:31
Generated by SassMeister.com.
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
| h1 COMPASS |
lukewatts
/ SassMeister-input-HTML.jade
Last active
December 27, 2015 12:38
Generated by SassMeister.com.
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
| header.main-header | |
| .branding | |
| | Compass Lists | |
| nav.main-menu | |
| ul.main-menu-list | |
| -var items = ['Home', 'Services', 'News', 'Contact'] | |
| each item in items | |
| if item == 'Home' | |
| li.main-menu-list-item.active | |
| a.main-menu-list-item-link( |
lukewatts
/ SassMeister-input-HTML.jade
Last active
December 27, 2015 14:58
Generated by SassMeister.com.
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
| div.tag-cloud-component | |
| ol.tag-cloud | |
| li.s Animation | |
| li. Breakpoints | |
| li.xs Clearfix | |
| li.xxs Columns | |
| li.xxl Compass | |
| li.l Console | |
| li.xl CSS | |
| li.xs Float |
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
| <div class="product"> | |
| <img src="http://placehold.it/150x150" alt="Image of Product" class="product-image"> | |
| <div class="product-details"> | |
| <h2 class="product-title"><a href=”#” class=”product-title-link”>Product Name</a></h2> | |
| <div class="product-price"> | |
| <span class="product-total">€55.00</span> | |
| <span class="product-sale"><del>€65.00</del></span> | |
| </div> | |
| <div class="product-description"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime labore placeat soluta rerum id, nemo minima repellendus at voluptatum quod odit nam, officia deserunt ut dolores eius, tempora molestiae cupiditate!</p> |
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
| <header class="header clearfix bg-banana-yellow"> | |
| <div class="header-logo float-left"> | |
| <img src="http://placehold.it/200x100" alt="Banana logo"> | |
| </div> | |
| <div class="header-search float-right"> | |
| <input type="text" class="header-search-input float-left"> | |
| <input class="header-search-submit-button float-left" type="submit" value="Search"> | |
| </div> | |
| </header> |
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
| <div class="product"> | |
| <img src="http://placehold.it/150x150" alt="Image of Product" class="product-image"> | |
| <div class="product-details"> | |
| <h2 class="product-title"><a href=”#” class=”product-title-link”>Product Name</a></h2> | |
| <div class="product-price"> | |
| <span class="product-total">€55.00</span> | |
| <span class="product-sale"><del>€65.00</del></span> | |
| </div> | |
| <div class="product-description"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus aut voluptatem minus harum et molestiae ex numquam possimus rem nisi qui, est provident, eos laborum itaque velit maiores dolores!</p> |
lukewatts
/ SassMeister-input-HTML.html
Created
January 18, 2016 13:55
Generated by SassMeister.com.
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
| <div class="product"> | |
| <img src="http://placehold.it/150x150" alt="Image of Product" class="product-image"> | |
| <div class="product-details"> | |
| <h2 class="product-title"><a href=”#” class=”product-title-link”>Product Name</a></h2> | |
| <div class="product-price"> | |
| <span class="product-total">€55.00</span> | |
| </div> | |
| <div class="product-description"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus aut voluptatem minus harum et molestiae ex numquam possimus rem nisi qui, est provident, eos laborum itaque velit maiores dolores!</p> | |
| </div> |