Font Cards

<div> <p id="welcome"> This is just the template of a project I'm working on.<br/> Hover over the buttons; that's the best part! </p> </div> <div class="font-card" id="mrsEaves"> <h1>Mrs Eaves XL</h1> <h2>Mrs Eaves XL</h2> <h3>Mrs Eaves XL</h3> <h4>Mrs Eaves XL</h4> <h5>Mrs Eaves XL</h5> <p>Mrs Eaves XL</p> <a class="button" href="" target="_blank"> Use this font</a> </div class="font-card"> <div class="font-card" id="adobeText"> <h1>Adobe Text</h1> <h2>Adobe Text</h2> <h3>Adobe Text</h3> <h4>Adobe Text</h4> <h5>Adobe Text</h5> <p>Adobe Text</p> <a href="" target="_blank"> Use this font</a> </div> <div class="font-card" id="omnes-pro"> <h1>Omnes Pro</h1> <h2>Omnes Pro</h2> <h3>Omnes Pro</h3> <h4>Omnes Pro</h4> <h5>Omnes Pro</h5> <p>Omnes Pro</p> <a href="" target="_blank"> Use this font</a> </div>
$font-family: "mrs-eaves-xl-serif"; $button-color: #000; //----------------------------------------------------------------- body { color: #333; font-size: 15px; font-family: "myriad-pro", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; margin: 5em 10em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga'; } #welcome { font-size: 1.5em; text-align: center; margin-bottom: 5em; line-height: 1.5em; } //---------------------------------------------------------- .font-card { padding: 5em; box-shadow: 0px 0px 50px rgba(0,0,0,0.06); border-radius: 3px; margin-bottom: 5em; a { color: #222; font-size: 1.3em; text-decoration: none; max-width: 106px; display: block; transition-property: background, box-shadow, padding; transition-duration: 0.5s, 0.5s, 0.5s; transition-delay: 0s, 0s, 0s; padding: .8em 1em; background: transparent; border: 1px solid rgba(0,0,0,0.1); border-radius: .2em; &:hover { color: #fff; text-decoration: none; background-color: $button-color; border: 1px solid $button-color; padding-right: 4em; box-shadow: 0 0 0 5px #f68f8f, 0 0 20px rgba(0,0,0,0.5); &:after { color: #fff; content: ' \02192'; padding-left: 1.5em; position: absolute; transition: all ease 0.9s; transition-delay: 0.9s; } } } h1, h2, h3, h4, h5, p, a { line-height: .7em; } h1 { font-size: 4em; margin-top: 0; } h2 { font-size: 3.5em; } h3 { font-size: 3em; } h4 { font-size: 2.5em; } h5 { font-size: 2em; } p { font-size: 1.5em; margin-bottom: 2.5em; } } .font-card#mrsEaves { h1, h2, h3, h4, h5, p { font-family: "mrs-eaves-xl-serif", serif; font-weight: 400; } } .font-card#adobeText { h1, h2, h3, h4, h5, p { font-family: "adobe-text-pro", serif; font-weight: 400; } } .font-card#omnesPro { h1, h2, h3, h4, h5, p { font-family: "omnes-pro", sans-serif; font-weight: 300; } }
try{Typekit.load({ async: true });}catch(e){}
Expand for more options Login