Just fun phrases that have an appropriate number of characters.
A Pen by Brittany Storoz on CodePen.
Created
August 26, 2014 17:10
-
-
Save brittanydionigi/d3a81ca9b3cd93942e71 to your computer and use it in GitHub Desktop.
A Pen by Brittany Storoz.
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> | |
| <head> | |
| <title>phrase.length()</title> | |
| <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans:100,400,100italic' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,700' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <h1>phrase.length();</h1> | |
| <div class="length" id="high5"> | |
| <p class="phrase roboto">high</p> | |
| <p class="phrase roboto large">5</p> | |
| <ul class="numbers titt"><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li></ul> | |
| </div> | |
| <br /> | |
| <div class="length" id="fortnight"> | |
| <p class="phrase roboto">fortnight</p> | |
| <ul class="numbers titt"><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li><li class="five">5</li><li class="six">6</li><li class="seven">7</li><li class="eight str">*</li><li class="nine str">2</li></ul> | |
| </div> | |
| <br /> | |
| <div class="length" id="ninetofive"> | |
| <p class="phrase roboto">nine - five</p> | |
| <ul class="numbers titt"> | |
| <li class="one"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| <line x1="0" x2="6" y1="9" y2="9" style="stroke:#ddd;stroke-width:1.5"></line> | |
| </svg> | |
| </li> | |
| <li class="two"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| <line x1="1" x2="6" y1="7" y2="9" style="stroke:#ddd;stroke-width:1.5"></line> | |
| </svg> | |
| </li><li class="three"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| <line x1="2" x2="6" y1="5" y2="9" style="stroke:#ddd;stroke-width:1.5"></line> | |
| </svg> | |
| </li> | |
| <li class="four"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| <line x1="6" x2="6" y1="5" y2="9" style="stroke:#ddd;stroke-width:1.5"></line> | |
| </svg> | |
| </li> | |
| <li class="five"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| <line x1="6" x2="10" y1="9" y2="5" style="stroke:#ddd;stroke-width:1.5"></line> | |
| </svg></li> | |
| <li class="six"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="11" y1="9" y2="6" style="stroke:#ddd;stroke-width:1.5"></line> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| </svg></li> | |
| <li class="seven"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="12" y1="9" y2="9" style="stroke:#ddd;stroke-width:1.5"></line> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| </svg> | |
| </li><li class="eight str"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="11" y1="9" y2="11" style="stroke:#ddd;stroke-width:1.5"></line> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| </svg> | |
| </li><li class="nine str"> | |
| <svg id="number-line" height="20" width="20"> | |
| <line x1="6" x2="10" y1="9" y2="13" style="stroke:#ddd;stroke-width:1.5"></line> | |
| <line x1="6" x2="6" y1="1" y2="10" style="stroke:#aaa;stroke-width:0.75"></line> | |
| </svg></li></ul> | |
| </div> | |
| <br /> | |
| <div class="length" id="senses"> | |
| <p class="phrase roboto">sense<span class="gray-5">.</span><span class="gray-7">.</span><span class="gray-9">.</span><span class="gray">s</span></p> | |
| <ul class="numbers lato"><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li><li class="five">5</li><li class="six">6</li></ul> | |
| </div> | |
| <br /> | |
| <div class="length" id="baker"> | |
| <p class="phrase roboto">a baker's dozen</p> | |
| <ul class="numbers titt"><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li><li class="five">5</li><li class="six">6</li><li class="seven">7</li><li class="eight">8</li><li class="nine">9</li><li class="ten">10</li><li class="eleven">11</li><li class="twelve">12 </li><li class="thirteen">13</li></ul> | |
| </div> | |
| </body> | |
| </html> |
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
| body { | |
| width: 50%; | |
| margin: 100px auto; | |
| font-family: 'Alegreya Sans', sans-serif; | |
| } | |
| h1 { | |
| font-weight: 100; | |
| font-size: 62px; | |
| } | |
| .length { margin-bottom: 50px; position: relative; width: auto; display: inline-block; clear: both; } | |
| .length p { margin: 0px; } | |
| .roboto { font-family: 'Roboto Slab', serif; } | |
| .lato { font-family: 'Lato', sans-serif; } | |
| .raleway { font-family: 'Raleway', sans-serif; } | |
| .titt { font-family: 'Titillium Web', sans-serif; } | |
| .phrase { font-size: 36px; line-height: 40px; letter-spacing: 4px; } | |
| #high5 .phrase.large { float: right; | |
| position: absolute; | |
| right: -45px; | |
| top: 6px; | |
| font-size: 65px; | |
| } | |
| #oneinamill .phrase.large { float: left; | |
| font-size: 65px; | |
| } | |
| .numbers { font-size: 8px; color: #999; position: relative; } | |
| ul.numbers, ul li { margin: 0px; padding: 0px; } | |
| ul li { list-style-type: none; position: absolute; } | |
| .str { font-weight: 700; color: #888; } | |
| #senses ul li.one { top: 0px ; left: 7px; } | |
| #senses ul li.two { top: 0px ; left: 30px; } | |
| #senses ul li.three { top: 0px ; left: 53px; } | |
| #senses ul li.four { top: 0px ; left: 79px; } | |
| #senses ul li.five { top: 0px ; left: 102px; } | |
| #senses ul li.six { top: 0px ; left: 163px; } | |
| #high5 ul li.one { top: 0px ; left: 9px; } | |
| #high5 ul li.two { top: 0px ; left: 31px; } | |
| #high5 ul li.three { top: 6px ; left: 51px; } | |
| #high5 ul li.four { top: 0px ; left: 77px; } | |
| #ninetofive ul li.one { top: 0px ; left: 5px; } | |
| #ninetofive ul li.two { top: 0px ; left: 28px; } | |
| #ninetofive ul li.three { top: 0px ; left: 50px; } | |
| #ninetofive ul li.four { top: 0px ; left: 75px; } | |
| #ninetofive ul li.five { top: 0px ; left: 107px; } | |
| #ninetofive ul li.six { top: 0px ; left: 136px; } | |
| #ninetofive ul li.seven { top: 0px ; left: 153px; } | |
| #ninetofive ul li.eight { top: 0px ; left: 173px; } | |
| #ninetofive ul li.nine { top: 0px ; left: 197px; } | |
| #fortnight ul li.one { top: 0px ; left: 5px; } | |
| #fortnight ul li.two { top: 0px ; left: 25px; } | |
| #fortnight ul li.three { top: 0px ; left: 46px; } | |
| #fortnight ul li.four { top: 0px ; left: 66px; } | |
| #fortnight ul li.five { top: 0px ; left: 86px; } | |
| #fortnight ul li.six { top: 0px ; left: 108px; } | |
| #fortnight ul li.seven { top: 6px ; left: 128px; } | |
| #fortnight ul li.eight { top: 0px ; left: 154px; } | |
| #fortnight ul li.nine { top: 0px ; left: 177px; } | |
| #baker ul li.one { top: 0px ; left: 7px; } | |
| #baker ul li.two { top: 0px ; left: 45px; } | |
| #baker ul li.three { top: 0px ; left: 69px; } | |
| #baker ul li.four { top: 0px ; left: 96px; } | |
| #baker ul li.five { top: 0px ; left: 120px; } | |
| #baker ul li.six { top: 0px ; left: 140px; } | |
| #baker ul li.seven { top: -20px ; left: 155px; } | |
| #baker ul li.eight { top: 0px ; left: 173px; } | |
| #baker ul li.nine { top: 0px ; left: 209px; } | |
| #baker ul li.ten { top: 0px ; left: 232px; } | |
| #baker ul li.eleven { top: 0px ; left: 256px; } | |
| #baker ul li.twelve { top: 0px ; left: 280px; } | |
| #baker ul li.thirteen { top: 0px ; left: 304px; } | |
| .gray-5 { color: #555; } | |
| .gray-6 { color: #666; } | |
| .gray-7 { color: #777; } | |
| .gray-8 { color: #888; } | |
| .gray-9 { color: #999; } | |
| .gray-a { color: #aaa; } | |
| .gray-c { color: #ccc; } | |
| .gray { font-style: italic; color: #ccc; font-weight: 100; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment