teethnclaws/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Font Stuff</title>
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <section id="black">
        <div>
            <span class="caps">Try to keep your</span>
            <h1>Mind Open</h1>
            <span class="caps possibilities">to possibilities</span>
        </div>
    </section>
    <section id="white">
        <div>
            <p class="amp">&amp;</p>
            <span class="caps your">your</span>
            <h1>Mouth Closed</h1>
            <span class="small matters">on matters that <br/>you don't know <br/>about.</span>
        </div>
    </section>
</body>
</html>

## style.css
#black, #white {
  height: 330px;
}

#black {
  color: black;
}

#white {
  color: white;
  background: black;
}

#black div,
#white div {
  padding: 100px;
}

h1, span, .amp {
  font-family: 'Abril Fatface', cursive;
  font-weight: 100;
}

h1 {
  font-size: 90px;
  line-height: 63px;
  margin: 0;
}

p.amp {
  background: -webkit-linear-gradient(top, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
  font-size: 100px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: -167px 0 30px;
}

.caps {
  font-size: 23px;
  text-transform: uppercase;
}

.possibilities {
  margin-left: 90px;
}

.your {
  display: block;
}

#white h1,
.matters {
  display: inline-block;
  float: left;
}

.matters {
  font-size: 21px;
  line-height: 26px;
  margin-top: -10px;
  margin-left: 10px;
}

## xrbagw.markdown

      
        

                Raw

        
        
          
            
          
          
            
              xrbagw.markdown
            
          
        
      
      
    xrBaGW
A Pen by Jennifer Coyle on CodePen.
License.
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Font Stuff</title>
	<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
	<section id="black">
	<div>
	<span class="caps">Try to keep your</span>
	<h1>Mind Open</h1>
	<span class="caps possibilities">to possibilities</span>
	</div>
	</section>
	<section id="white">
	<div>
	<p class="amp">&</p>
	<span class="caps your">your</span>
	<h1>Mouth Closed</h1>
	<span class="small matters">on matters that <br/>you don't know <br/>about.</span>
	</div>
	</section>
	</body>
	</html>
	#black, #white {
	height: 330px;
	}

	#black {
	color: black;
	}

	#white {
	color: white;
	background: black;
	}

	#black div,
	#white div {
	padding: 100px;
	}

	h1, span, .amp {
	font-family: 'Abril Fatface', cursive;
	font-weight: 100;
	}

	h1 {
	font-size: 90px;
	line-height: 63px;
	margin: 0;
	}

	p.amp {
	background: -webkit-linear-gradient(top, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
	font-size: 100px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: -167px 0 30px;
	}

	.caps {
	font-size: 23px;
	text-transform: uppercase;
	}

	.possibilities {
	margin-left: 90px;
	}

	.your {
	display: block;
	}

	#white h1,
	.matters {
	display: inline-block;
	float: left;
	}

	.matters {
	font-size: 21px;
	line-height: 26px;
	margin-top: -10px;
	margin-left: 10px;
	}