<html>
<body>
<div class="box header">
<div class="text">
<h1>Wasted City</h1>
<p>Image by <a href="http://members.home.nl/jeroenderks/">Jeroen Derks</a>
</div>
</div>
<div class="content">
<p>This pen shows a method to produce window-height content without the <code>vh</code> units.</p>
<p>By setting both <code>html</code> and <code>body</code> to <code>100%</code> you can then set any individual containers to <code>100%</code> height as well, thus making it take up the full browser height.</p>
<p>It also shows the box-shadow inline padding technique that I'm very fond of.</p>
</div>
<div class="box yet-again">
<div class="text">
<h1>Vampires Empire</h1>
<p>Image from <a href="http://csdb.dk/release/?id=110216">a C64DTV demo of the same name.</a>
</div>
</div>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900);
body {
font-family: 'Source Sans Pro', sans-serif;
}
html,body,.box{
height:100%;
margin:0;
padding:0;
}
.box{position:relative;}
.header{
background:
linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0)),
url('http://i.imgur.com/uoFcP2O.jpg');
background-size:cover;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
h1 {
text-transform: uppercase;
margin: 0;
font-size: 3rem;
white-space: nowrap;
}
p {
margin: 0;
font-size: 1.3rem;
}
.content {
max-width: 500px;
margin: 20px auto;
}
.content p{
margin:15px;
}
.yet-again{
background:
linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0)),
url('http://i.imgur.com/0aHLxle.jpg');
background-size:cover;
}
a, a:visited{
color:white;
text-decoration:none;
background:rgba(255,255,255,0.7);
color:black;
box-shadow:-5px 0 0 rgba(255,255,255,0.7),5px 0 0 rgba(255,255,255,0.7);
margin:5px;
}
a:hover{
background:rgba(0,0,0,0.7);
color:white;
box-shadow:-5px 0 0 rgba(0,0,0,0.7),5px 0 0 rgba(0,0,0,0.7);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.