<div class="square">
<h1>Squ<br>are</h1>
</div>
<p>You get a square. And you get a square. And you get a square. Everyone gets a square.</p>
<p>Built using vmin for height and width.</p>
body {
min-height: 100vh;
padding: 4vmin 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.square {
color: white;
height: 90vmin;
width: 90vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgb(100,50,50);
}
@media all and (min-width: 600px) {
.square {
height: 80vmin;
width: 80vmin;
}
}
@media all and (min-width: 900px) {
.square {
height: 70vmin;
width: 70vmin;
}
}
h1 {
text-transform: uppercase;
font-family: Inconsolata, monospace;
font-weight: 700;
font-size: 6vmin;
letter-spacing: .6vmin;
line-height: 1.25;
font-weight: 300;
}
p {
color: rgb(130,110,110);
max-width: 30em;
line-height: 1.4;
text-align: center;
margin-top: 2em;
margin-bottom: .5em;
}
p:last-of-type {
font-family: Inconsolata;
font-size: .7em;
color: rgb(150,150,150);
margin-top: 0;
}
View Compiled
This Pen doesn't use any external JavaScript resources.