143 lines
3.5 KiB
HTML
143 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<link href="https://fonts.googleapis.com/css?family=Federo" rel="stylesheet">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.bg {
|
|
/*background-image:*/
|
|
/*linear-gradient(to bottom, #484848 0, #363636 100px, #363636 500px, #181818);*/
|
|
background-color: #363636;
|
|
width: 600px;
|
|
height: 600px;
|
|
position: relative;
|
|
|
|
}
|
|
.clouds {
|
|
background-image: url(./reflections-clouds2.png);
|
|
z-index: 68;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.inner {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
background-image:
|
|
linear-gradient(to bottom, rgba(103, 128, 87, 1), rgba(255, 255, 255, 0) 50%),
|
|
linear-gradient(to left, rgba(107, 113, 128, 1), rgba(255, 255, 255, 0) 50%),
|
|
linear-gradient(to top, rgba(128, 82, 77, 1), rgba(255, 255, 255, 0) 50%),
|
|
linear-gradient(to right, rgba(126, 87, 128, 1), rgba(255, 255, 255, 0) 50%);
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 200px;
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 2;
|
|
}
|
|
.circle {
|
|
z-index: 50;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background-color: #363636;
|
|
position: absolute;
|
|
}
|
|
|
|
.artist, .title {
|
|
z-index: 1000;
|
|
font-family: Federo;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 1px black,
|
|
2px 2px 1px rgba(255, 255, 255, 0.25);
|
|
}
|
|
.artist {
|
|
font-size: 40px;
|
|
top: 50px;
|
|
}
|
|
.title {
|
|
font-size: 28px;
|
|
bottom: 50px;
|
|
}
|
|
|
|
.circle-shadow {
|
|
position: absolute;
|
|
top: 300px;
|
|
left: 300px;
|
|
width: 200px;
|
|
height: 200px;
|
|
z-index: 60;
|
|
}
|
|
.circle-shadow .shadow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
z-index: 60;
|
|
/*border: 1px solid rgba(255, 255, 255, 0.4);*/
|
|
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.circle-shadow [class*="mask"] {
|
|
z-index: 61;
|
|
position: absolute;
|
|
background-color: #363636;
|
|
|
|
}
|
|
.circle-shadow .maskh {
|
|
width: calc(100% + 5px);
|
|
height: calc(50% + 5px);
|
|
}
|
|
|
|
.circle-shadow .maskv {
|
|
width: calc(50% + 5px);
|
|
height: calc(100% + 5px);
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="bg">
|
|
<div class="clouds"></div>
|
|
<div class="artist">Tommy Montgomery</div>
|
|
<div class="title">Reflections</div>
|
|
|
|
<div class="circle" style="top: 100px; left: 100px"></div>
|
|
<div class="circle" style="top: 100px; left: 300px"></div>
|
|
<div class="circle" style="top: 300px; left: 100px"></div>
|
|
<div class="circle" style="top: 300px; left: 300px"></div>
|
|
|
|
<div class="circle-shadow" style="top: 100px; left: 100px;">
|
|
<div class="shadow"></div>
|
|
<div class="maskv" style="left: -5px; top: -5px"></div>
|
|
<div class="maskh" style="left: -5px; top: -5px"></div>
|
|
</div>
|
|
<div class="circle-shadow" style="top: 100px; left: 300px;">
|
|
<div class="shadow"></div>
|
|
<div class="maskh" style="left: -5px; top: -5px"></div>
|
|
<div class="maskv" style="left: 50%; top: -5px"></div>
|
|
</div>
|
|
<div class="circle-shadow" style="top: 300px; left: 100px;">
|
|
<div class="shadow"></div>
|
|
<div class="maskh" style="left: -5px; top: 50%;"></div>
|
|
<div class="maskv" style="left: -5px; top: -5px;"></div>
|
|
</div>
|
|
<div class="circle-shadow" style="top: 300px; left: 300px;">
|
|
<div class="shadow"></div>
|
|
<div class="maskh" style="left: -5px; top: 50%"></div>
|
|
<div class="maskv" style="left: 50%; top: -5px"></div>
|
|
</div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|