Skip to content

Instantly share code, notes, and snippets.

@idkjs
Created October 23, 2016 14:34
Show Gist options
  • Save idkjs/c665cba568b89f9171f312218f093347 to your computer and use it in GitHub Desktop.
Save idkjs/c665cba568b89f9171f312218f093347 to your computer and use it in GitHub Desktop.
pEGvZO
<div class="square">
<h2>B</h2>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
a,
a:visited,
a:focus,
a:active,
a:link {
text-decoration: none;
outline: 0;
}
a {
color: currentColor;
transition: .2s ease-in-out;
}
h1, h2, h3, h4 {
margin: .3em 0;
}
ul {
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
height: auto;
width: 100%;
}
body {
background: linear-gradient(to right, #171717 50%, #F3B833 0);
position: relative;
display: flex;
}
.square {
margin: auto;
display: inline-block;
height: 30vw;
width: 30vw;
border: 5px solid #f3b833;
color: #f3b833;
text-transform: uppercase;
display: flex;
font-family: sans-serif;
font-size: 10vw;
padding: 1.2vw;
line-height: .75;
word-break: break-word;
text-align: center;
mix-blend-mode: difference;
/*box-shadow: 0 15px 35px rgba(50, 50, 90, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);*/
}
h2 {
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment