cthulhu/test/html/cloud-nightmare.html

84 lines
5.9 KiB
HTML
Raw Permalink Normal View History

<html>
<head>
<style>
.container {
border: 1px solid #3b599e;
overflow: hidden;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#315d8c', endColorstr='#84aace');
background: -moz-linear-gradient(top, #315d8c, #84aace);
}
.cloud {
color: #fff;
position: relative;
font: 100%"Times New Roman", Times, serif;
text-shadow: 0px 0px 10px #fff;
line-height: 0;
}
</style>
</head>
<body>
<div class="container" style="width: 450px; height: 100px;">
<div style="position: relative; top: -80px; left: -10px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 400px; left: -10px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: -80px; left: 150px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 80px; left: 150px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 240px; left: 150px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 400px; left: 150px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: -80px; left: 310px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 80px; left: 310px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 240px; left: 310px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
<div style="position: relative; top: 400px; left: 310px;">
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 34px; left: 28px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left: 10px;">.</div>
<div class="cloud" style="font-size:300px; width: 300px; height: 300px; position: absolute; top: 46px; left:50px;">.</div>
<div class="cloud" style="font-size:400px; width: 400px; height: 400px; position: absolute; top: 24px; left:20px;">.</div>
</div>
</div>
</body>
</html>