Skip to content

Instantly share code, notes, and snippets.

@veeven

veeven/index.html

Last active May 9, 2018 10:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veeven/ad189912e0e6cc176d1d5ac16f0bc199 to your computer and use it in GitHub Desktop.
Save veeven/ad189912e0e6cc176d1d5ac16f0bc199 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Square
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
#square {
width: 100vmin;
height: 100vmin;
position: relative;
font-size: calc(4 * 6vmin);
background: #ccc;
text-align: center;
line-height: 1;
margin: auto;
}
.text {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.weight {
position: absolute;
right: 0;
font-size: 9vmin;
padding: 10% 13%;
background: #999;
text-align: center;
}
</style>
<div id="square">
<span class="weight">6</span>
<span class="text">క</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment