A Pen by Jennifer Coyle on CodePen.
Created
July 22, 2017 01:44
-
-
Save teethnclaws/d435cb61a8557014ed3b98247e000457 to your computer and use it in GitHub Desktop.
xrBaGW
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> | |
<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> |
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
#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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment