<main>
<div>
<span>A cat in a business suit sitting in a chair like a human at a table. He has a cup of coffee and has lowered a newspaper, looking thoughtfully into the distance.</span>
<p>
I should add
</p>
<p>
A fuck-ton of ARIA
</p>
</div>
</main>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");
body {
padding: 0;
margin: 0;
font-family: "Roboto Condensed", sans-serif;
font-size: 9vw;
line-height: 1.4;
background-color: #000;
color: #fff;
}
div {
width: 100vw;
height: 73.5vw;
margin: 0;
color: #fff;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
background-size: contain;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2729/thoughtful-cat.jpg);
}
span {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
p {
position: absolute;
font-weight: bold;
padding: 0;
box-sizing: border-box;
text-transform: uppercase;
line-height: 1.1;
font-weight: 700;
text-shadow: -0.01em -0.01em 0 #fff, 0.01em -0.01em 0 #fff,
-0.01em 0.01em 0 #fff, 0.01em 0.01em 0 #fff, -0.05em -0.05em 0.05em #000,
0.05em -0.05em 0.05em #000, -0.05em 0.05em 0.05em #000,
0.05em 0.05em 0.05em #000;
}
p:nth-child(2) {
top: 0.5vw;
left: 0;
right: 0;
margin: 0 1vw;
text-align: center;
}
p:nth-child(3) {
bottom: 0;
left: 0;
right: 0;
margin: 0 8vw;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.