| require 'etsy' | |
| Etsy.api_key = '<api-key>' | |
| shop = Etsy::Shop.find '<shop-name>' | |
| out_dir = '<output-directory>' | |
| Etsy.environment = :production | |
| Dir.mkdir out_dir unless File.exists? out_dir | |
| listings = [] |
| <article class="wrapper"> | |
| <h1 class="fluid-type">Full bleed CSS Utility</h1> | |
| <p>You can break an element out of its container while maintaining its flow within that container using <code>margin</code> and <code>transform</code>. There’s two examples, both using the <code>.full-bleed</code> utility to achieve this affect.</p> | |
| <aside class="[ full-bleed ] [ promo ]"> | |
| <div class="wrapper"> | |
| <h2 class="fluid-type">Some aside content that is full bleed</h2> | |
| <p>This element contains the full bleed utility, so it's broken out of the article’s horizontal bounds.</p> | |
| </div> | |
| </aside> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.</p> |
Demo created for my CSS-Tricks article Background Patterns, Simplified by Conic Gradients. See all the other demos for the article in this collection.
If the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>photo show</title> | |
| <link rel="stylesheet" href="normalize.css" type="text/css"> | |
| <link rel="stylesheet" href="myStyles.css" type="text/css"> | |
| <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
| <div class="cont"> | |
| <div class="section section-1"> | |
| <div class="section__bg"></div> | |
| <h2 class="section__heading">Page 1</h2> | |
| </div> | |
| <div class="section section-2"> | |
| <svg viewBox="0 0 1900 970" preserveAspectRatio="xMidYMin slice" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="section__svg"> | |
| <defs> | |
| <clipPath id="clippath-2"> | |
| <path fill="none" class="section__svg-path" d="M1900,0 0,150 0,970 1900,970z"/> |
| <div class="grid"> | |
| <div class="column"> | |
| <img src="https://picsum.photos/500/700?random=1-1" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-2" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-3" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-4" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-5" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-6" alt=""> | |
| <img src="https://picsum.photos/500/700?random=1-7" alt=""> | |
| </div> |
Compilation of some fancy text shadows from around the web:
| <div class="container"> | |
| <h1 class="neon">Everything you want is<br>on the other side of fear</h1> | |
| </div> |
| <header> | |
| <nav> | |
| <ul class="collapsible-menu"> | |
| <li class="logo"><a href="#"><img src="#"></a></li> | |
| <li class="link"><a href="#">Page/Section 1</a></li> | |
| <li class="link"><a href="#">Page/Section 2</a></li> | |
| <li class="link"><a href="#">Page/Section 3</a></li> | |
| <li class="link"><a href="#">Page/Section 4</a></li> | |
| <li class="hamburger"></li> | |
| </ul> |