ColeTownsend/Dot-Copy.markdown

## Dot-Copy.markdown

      
    Raw
  

              Dot-Copy.markdown
            
          
    Dot Copy

A Pen by Cole Townsend on CodePen.
License.

  
## index.html
<!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>

## style.scss
@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;
}
	<!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>
	@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;
	}