A Pen by Cole Townsend on CodePen.
Created
October 7, 2013 01:11
-
-
Save ColeTownsend/6861165 to your computer and use it in GitHub Desktop.
A Pen by Cole Townsend.
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Dot Copy</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="logo"><img src="https://i.cloudup.com/wlibLZ60uj-3000x3000.png" alt="" /></div> | |
| <section class="cta"> | |
| <h1>Find copies of your site.</h1> | |
| </section> | |
| <aside class="formField"> | |
| <form class="" action="#"> | |
| <input type="text" name="name" id="name" placeholder="John Smith" /> | |
| <input id="search" type="submit" value="SEARCH" /> | |
| </form> | |
| </aside> | |
| <section class="about"> | |
| <p> | |
| You spent a lot of time on your website. Hours on wireframing. Hundreds of lines of code. Dozens of double shot lattes. | |
| <br></br> | |
| Make sure it's unique. | |
| <br></br> | |
| Find replicas of your work online with Dot Copy. Type in the URL and we'll find matches across the web. | |
| </p> | |
| </section> | |
| </div> | |
| <div class="push"></div> | |
| <footer> | |
| <div class="wrap"> | |
| <p class="who">A project by <a href="http://twnsnd.co">TWNSND Co</a></p> | |
| <p class="share"><a href="http://twitter.com/home?status=Make%20sure%20nobody%20is%20copying%20you.%20Find%20copies%20of%20your%20website%20online%20with%20Dot%20Copy%20%E2%80%94%20http://copy.twnsnd.co/">Share</a></p> | |
| </div> | |
| </footer> | |
| </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
| @import "compass"; | |
| $yellow: #F5D466; | |
| $black: #4f4545; | |
| $blue: #7fb7e1; | |
| html { | |
| min-height: 100%; | |
| height: 100%; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| background: #F5D466; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .logo { | |
| width: 70px; | |
| height: auto; | |
| opacity: .75; | |
| display: block; | |
| margin: 50px auto; | |
| padding-top: 10px; | |
| } | |
| .logo img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .cta { | |
| display: block; | |
| margin: 50px auto; | |
| margin-top: 80px; | |
| } | |
| .cta h1 { | |
| font-family: "Domus Titling"; | |
| color: white; | |
| letter-spacing: 2px; | |
| text-align: center; | |
| font-size: 42px; | |
| } | |
| .formField { | |
| display: block; | |
| margin: 0 auto; | |
| text-align: center; | |
| -webkit-transition: .2s all ease-in-out; | |
| } | |
| input[type=text] { | |
| border: none; | |
| border-radius: 2px 0 0 2px; | |
| height: 44px; | |
| padding: 4px 16px; | |
| outline: none; | |
| color: #4f4545; | |
| margin: 0; | |
| width: 332px; | |
| position: relative; | |
| left: 2px; | |
| } | |
| input[type=submit] { | |
| outline: none; | |
| border: none; | |
| background: #4f4545; | |
| color: white; | |
| height: 50px; | |
| padding: 12px 32px; | |
| border-radius: 0 2px 2px 0; | |
| margin: 0; | |
| position: relative; | |
| right: 1px; | |
| -webkit-transition: .2s all ease-in-out; | |
| } | |
| input[type=submit]:hover { | |
| background: #5C5252; | |
| box-shadow: 0 4px 0 0 #423838; | |
| height: 50px; | |
| positioN: relative; | |
| top: -4px; | |
| } | |
| input[type=submit]:active { | |
| background: #423838; | |
| box-shadow: inset 0 2px 2px 0 rgba(0,0,0,.1); | |
| top: 1px; | |
| } | |
| .about { | |
| font-family: "Facit"; | |
| font-size: 16px; | |
| letterspacing: 1px; | |
| color: white; | |
| -webkit-text-rendering: optimizeLegibility; | |
| -moz-font-feature-settings: "liga=1, dlig=1"; | |
| -ms-font-feature-settings: "liga", "dlig"; | |
| -webkit-font-feature-settings: "liga", "dlig"; | |
| -o-font-feature-settings: "liga", "dlig"; | |
| font-feature-settings: "liga", "dlig"; | |
| display: block; | |
| margin: 40px auto; | |
| margin-top: 80px; | |
| max-width: 480px; | |
| } | |
| .wrapper { | |
| min-height: 100%; | |
| height: auto !important; | |
| height: 100%; | |
| margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */ | |
| } | |
| footer, .push { | |
| height: 60px; /* '.push' must be the same height as 'footer' */ | |
| } | |
| footer { | |
| height: 60px; | |
| background: #f3f0f0; | |
| position: relative; | |
| z-index: 100; | |
| display: block; | |
| box-shadow: inset 0 1px 0 0 transparentize($black, .8); | |
| } | |
| footer .wrap { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 480px; | |
| min-width: 320px; | |
| position: relative; | |
| padding: 22px 0; | |
| } | |
| footer p { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| position: relative; | |
| font-weight: bold; | |
| display: inline-block; | |
| max-width: 220px; | |
| margin: 0; | |
| } | |
| .who { | |
| float: left; | |
| color: transparentize($black, .75); | |
| a { | |
| padding-bottom: 1px; | |
| text-decoration: none; | |
| color: transparentize($black, .75); | |
| border-bottom: 2px solid transparentize($black, .75); | |
| -webkit-transition: .2s all ease-in-out; | |
| &:hover { | |
| color: $blue; | |
| border-bottom: 2px solid $blue; | |
| -webkit-transition: .2s all ease-in-out; | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| .share { | |
| float: right; | |
| } | |
| footer .share a { | |
| background: #7fb7e1; | |
| padding: 4px 6px; | |
| text-align: center; | |
| color: white; | |
| text-decoration: none; | |
| position: relative; | |
| z-index: 100; | |
| opacity: 1; | |
| border-radius: 2px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment