<!doctype html>
<html>
<head>
<title>Countdown Banner - RJM Programming - December, 2017 ... thanks to https://developer.mozilla.org/en-US/docs/Web/CSS/:root and https://developer.mozilla.org/en-US/docs/Web/CSS/calc and https://codepen.io/robinrendle/embed/MaVPbo?height=300&theme-id=1&embed-version=2&slug-hash=MaVPbo&default-tab=result&user=robinrendle and https://www.google.com.au/search?q=lyrics+to+twelve+days+of+christmas&ie=utf-8&oe=utf-8&client=firefox-b-ab&gfe_rd=cr&dcr=0&ei=Z0U8WpLKEobp8wfejKjQDg and https://stackoverflow.com/questions/35669563/changing-the-opacity-of-background-image-in-css and https://www.woodwardenglish.com/wp-content/uploads/2013/12/12-days-of-christmas.jpg</title>
<style>
:root {
--main-12-colour: hotpink;
--main-11-colour: aqua;
--main-10-colour: darkblue;
--main-9-colour: lime;
--main-8-colour: olive;
--main-7-colour: red;
--main-6-colour: green;
--main-5-colour: magenta;
--main-4-colour: purple;
--main-3-colour: brown;
--main-2-colour: blue;
--main-1-colour: orange;
}
@keyframes shrink {
100% {
left: calc(150px);
width: calc(100% - 300px);
top: calc(100px);
height: calc(100% - 200px);
color: var(--main-1-colour);
content: "first day of Christmas my true love sent to me: 1 partridge in a pear tree";
font-size: 90px;
}
91% {
left: calc(140px);
width: calc(100% - 280px);
top: calc(90px);
height: calc(100% - 180px);
color: var(--main-2-colour);
content: "second day of Christmas my true love sent to me: 2 turtle doves ... and a partridge in a pear tree";
font-size: 85px;
}
82% {
left: calc(130px);
width: calc(100% - 260px);
top: calc(80px);
height: calc(100% - 160px);
color: var(--main-3-colour);
content: "third day of Christmas my true love sent to me: 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
font-size: 80px;
}
74% {
left: calc(120px);
width: calc(100% - 240px);
top: calc(70px);
height: calc(100% - 140px);
color: var(--main-4-colour);
content: "fourth day of Christmas my true love sent to me: 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
font-size: 75px;
}
66% {
left: calc(110px);
width: calc(100% - 220px);
top: calc(60px);
height: calc(100% - 120px);
color: var(--main-5-colour);
content: "fifth day of Christmas my true love sent to me: 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
font-size: 70px;
}
58% {
left: calc(100px);
width: calc(100% - 200px);
top: calc(50px);
height: calc(100% - 100px);
content: "sixth day of Christmas my true love sent to me: 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-6-colour);
font-size: 65px;
}
50% {
left: calc(90px);
width: calc(100% - 180px);
top: calc(60px);
height: calc(100% - 120px);
content: "seventh day of Christmas my true love sent to me: 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-7-colour);
font-size: 60px;
}
41% {
left: calc(80px);
width: calc(100% - 160px);
top: calc(50px);
height: calc(100% - 100px);
content: "eighth day of Christmas my true love sent to me: 8 maids a milking, 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-8-colour);
font-size: 55px;
}
32% {
left: calc(70px);
width: calc(100% - 140px);
top: calc(40px);
height: calc(100% - 80px);
content: "ninth day of Christmas my true love sent to me: 9 ladies dancing, 8 maids a milking, 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-9-colour);
font-size: 50px;
}
24% {
left: calc(66px);
width: calc(100% - 132px);
top: calc(36px);
height: calc(100% - 72px);
content: "tenth day of Christmas my true love sent to me: 10 lords a leaping, 9 ladies dancing, 8 maids a milking, 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-10-colour);
font-size: 45px;
}
16% {
left: calc(63px);
width: calc(100% - 126px);
top: calc(33px);
height: calc(100% - 66px);
content: "eleventh day of Christmas my true love sent to me: 11 pipers piping, 10 lords a leaping, 9 ladies dancing, 8 maids a milking, 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-11-colour);
font-size: 40px;
}
8% {
left: calc(60px);
width: calc(100% - 120px);
top: calc(30px);
height: calc(100% - 60px);
content: "twelfth day of Christmas my true love sent to me: 12 drummers drumming, 11 pipers piping, 10 lords a leaping, 9 ladies dancing, 8 maids a milking, 7 swans a swimming, 6 geese a laying, 5 golden rings, 4 calling birds, 3 french hens, 2 turtle doves ... and a partridge in a pear tree";
color: var(--main-12-colour);
font-size: 35px;
}
}
body {
background: URL(https://www.woodwardenglish.com/wp-content/uploads/2013/12/12-days-of-christmas.jpg) no-repeat center center fixed;
background-size: contain;
//background-clip:content-box;
//background-origin:content-box;
}
.banner {
position: absolute;
left: calc(60px);
width: calc(100% - 120px);
top: calc(30px);
height: calc(100% - 60px);
border: solid 2px blue;
box-shadow: 1px 2px;
//background-color: yellow;
padding: 6px;
padding-top: calc(12%);
font-size: 50px;
text-align: center;
box-sizing: border-box;
background: rgba(220,220,255,0.8);
color: black;
}
.banner:after {
font-size: 100px;
content: "You Wanted More?!";
color: red;
text-align: center;
animation: shrink 36s linear infinite reverse;
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
.banner:before {
content: "This is a countup banner! ";
color: red;
}
.tbanner {
position: absolute;
left: calc(0px);
top: calc(0px);
width: 100%;
height: 60px;
background-color: blue;
}
.bbanner {
position: absolute;
left: calc(0px);
top: calc(100% - 30px);
width: 100%;
height: 30px;
background-color: blue;
}
</style>
</head>
<body>
<div class="tbanner"></div><div class="bbanner"></div>
<div class="banner"><br>On the </div>
</body>
</html>