Here is the full html code I devised for my Bach Video title:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>J. S. Bach</title>
<style>
body {
background-color: powderblue;
}
div {
overflow: visible;
position: absolute;
text-shadow:
0 0 10px white,
0 0 20px white,
0 0 30px white,
0 0 40px powderblue,
0 0 70px powderblue,
0 0 80px powderblue,
0 0 100px powderblue,
0 0 150px powderblue;
}
#container {
height: 1080px;
width: 1920px;
padding: 0;
top: 50%;
left:50%;
position: absolute;
margin: -540px 0 0 -960px;
background-color:#000567;
overflow:hidden;
opacity:1;
}
#top_title {
width: 100%;
position: absolute;
padding: 0;
top: 150px;
left:50%;
margin: 0 0 0 -50%;
font-family:arial;
font-size:90px;
color:white;
background-color:transparent;
border:1px solid transparent;
text-align:center;
text-shadow:none;
opacity:0;
z-index:2;
}
#Main_title_white {
height:400px;
line-height:400px;
width: 1000px;
position: absolute;
padding: 0;
top: 50%;
left:50%;
margin: -200px 0 0 -500px;
font-family:arial;
font-size:200px;
color:white;
background-color:transparent;
border:1px solid transparent;
text-align:center;
text-shadow:none;
opacity:0;
}
#Main_title_yellow {
height:400px;
line-height:400px;
width: 1000px;
position: absolute;
padding: 0;
top: 50%;
left:50%;
margin: -200px 0 0 -500px;
font-family:arial;
font-size:200px;
color:yellow;
background-color:transparent;
border:1px solid transparent;
text-align:center;
text-shadow:none;
opacity:0;
}
#title_glow {
height:400px;
line-height:400px;
width: 1000px;
position: absolute;
padding: 0;
top: 50%;
left:50%;
margin: -200px 0 0 -500px;
font-family:arial;
font-size:200px;
color:white;
background-color:transparent;
border:1px solid transparent;
text-align:center;
opacity:0;
}
#boundary_box_01 {
height: 400px;
width: 1000px;
margin: -200px 0 0 -500px;
text-align:center;
padding: 0;
top: 50%;
left:50%;
position: absolute;
background-color:transparent;
border:1px solid white;
opacity:0;
}
#boundary_box_02_wide {
height: 440px;
width: 1040px;
top:314px;
left:434px;
text-align:center;
padding: 0;
position: absolute;
background-color:transparent;
border:8px solid white;
opacity:0;
z-index:0;
}
#cover_box_left {
height: 800px;
width: 20px;
position: absolute;
background-color:#000567;
opacity:1;
}
#cover_box_top {
height: 20px;
width: 1000px;
position: absolute;
background-color:#000567;
opacity:1;
}
#cover_box_right {
height: 800px;
width: 20px;
position: absolute;
background-color:#000567;
opacity:1;
}
#cover_box_bottom {
height: 20px;
width: 1000px;
position: absolute;
background-color:#000567;
opacity:1;
}
#bottom_text {
width: 100%;
position: absolute;
padding: 0;
top: 850px;
left:50%;
margin: 0 0 0 -50%;
font-family:arial;
font-size:80px;
color:white;
background-color:transparent;
text-align:center;
text-shadow:none;
opacity:0;
}
</style>
</head>
<body>
<div id="container">
<div id="centered_box"></div>
<div id="top_title" class='webvfx' data-control="10:60"
data-animate='{start: 0.03, end: 0.2, ease: "linearTween",
0% : {opacity:0;},
100% : {opacity:1;}
}'>Composers of the Baroque period</div>
<div id="Main_title_white" class='webvfx' data-control="10:60"
data-animate='{start: 0.15, end: 0.3, ease: "linearTween",
0% : {opacity:0;},
100% : {opacity:1;}
}'>J. S. Bach</div>
<div id="title_glow" class='webvfx'
data-animate='{start: 0.2, end: 0.3, ease: "linearTween",
0% : {opacity:0;},
100% : {opacity:0.6;}
}'>J. S. Bach</div>
<div id="Main_title_yellow" class='webvfx' data-control="10:60"
data-animate='{start: 0.25, end: 0.4, ease: "linearTween",
0% : {opacity:0;},
100% : {opacity:1;}
}'>J. S. Bach</div>
<div id="boundary_box_01" class='webvfx' data-animate='{start: 0, end: 0.3, ease: "linearTween",
0% : {opacity:1; },
100% : {opacity:1;}
}'></div>
<div id="boundary_box_02_wide" class='webvfx'
data-animate='{start: 0.46, end: 0.52, ease: "linearTween",
0% : {opacity:0; },
100% : {opacity:1;}
}'></div>
<div id="cover_box_left" class='webvfx'
data-animate='{start: 0.0, end: 0.25, ease: "linearTween",
0% : {bottom: 336; left:452;},
100% : {bottom: 336; left:452;}
}'
data-animate2='{start: 0.25, end: 0.31, ease: "linearTween",
0% : {bottom: 336; left:452;},
100% : {bottom: 770; left:452;}
}'></div>
<div id="cover_box_top" class='webvfx'
data-animate='{start: 0, end: 0.31, ease: "linearTween",
0% : {bottom: 730; left:462;},
100% : {bottom: 730; left:462;}
}'
data-animate2='{start: 0.31, end: 0.36, ease: "linearTween",
0% : {bottom: 730; left:462;},
100% : {bottom: 730; left:1500;}
}'></div>
<div id="cover_box_right" class='webvfx'
data-animate='{start: 0, end: 0.36, ease: "linearTween",
0% : {top: 336; left:1450;},
100% : {top: 336; left:1450;} }'
data-animate2='{start: 0.36, end: 0.41, ease: "linearTween",
0% : {top: 336; left:1450;},
100% : {top: 775; left:1450;}
}'></div>
<div id="cover_box_bottom" class='webvfx'
data-animate='{start: 0, end: 0.41, ease: "linearTween",
0% : {bottom: 320; left:462;},
100% : {bottom: 320; left:462;} }'
data-animate2='{start: 0.41, end: 0.46, ease: "linearTween",
0% : {bottom: 320; left:462;},
100% : {bottom: 320; left:-580;}
}'></div>
<div id="bottom_text" class='webvfx'
data-animate='{start: 0, end: 0.52, ease: "linearTween",
0% : {opacity:0; },
100% : {opacity:0;}
}'
data-animate2='{start: 0.52, end: 0.6, ease: "linearTween",
0% : {opacity:0; webkitTransform: scale(0.9, 0.9); },
100% : {opacity:1; webkitTransform: scale(1, 1);}
}'>1685 - 1750</div>
</div>
<script src="WebVfx.js"></script>
</body>
</html>