You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.2 KiB
CSS
130 lines
2.2 KiB
CSS
@font-face {
|
|
font-family: 'NotCourierSans';
|
|
src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
@font-face {
|
|
font-family: 'PinyonScript';
|
|
src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
body{
|
|
font-family: NotCourierSans;
|
|
font-weight: normal;
|
|
background-color: white;
|
|
position: relative;
|
|
}
|
|
|
|
h1 {
|
|
font-family: PinyonScript;
|
|
font-weight: normal;
|
|
color: #003cb3;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 80px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
|
|
p {
|
|
font-family: NotCourierSans;
|
|
color: #003cb3;
|
|
font-size: 17px;
|
|
}
|
|
|
|
a {
|
|
color: #003cb3;
|
|
}
|
|
|
|
audio{
|
|
width: 400px;
|
|
|
|
}
|
|
|
|
.image{
|
|
width: 400px;
|
|
|
|
}
|
|
|
|
.image img{
|
|
width: 400px;
|
|
|
|
}
|
|
|
|
.seperator{
|
|
width:100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div.content{z-index:20;
|
|
width: 75%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background: #fffc;
|
|
margin-bottom: 50%;
|
|
padding: 0 1%;
|
|
}
|
|
|
|
/* child elements of div.content */
|
|
div.content * { width:100%;
|
|
background: white;
|
|
}
|
|
|
|
div.content h2 {color: #FFFFFF;
|
|
background-color: #000000;
|
|
}
|
|
|
|
div.content audio { width:75%; height:30px; }
|
|
|
|
|
|
|
|
/*imgs.background z-index<10*/
|
|
|
|
div.background{z-index:-1;
|
|
width:100%;}
|
|
|
|
img.background{ position: fixed;
|
|
z-index:-1;
|
|
animation: fadein 3s;
|
|
-moz-animation: fadein 3s;/* Firefox */
|
|
-webkit-animation: fadein 3s;/* Safari & Chrome */
|
|
-o-animation: fadein 3s; /* Opera */
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity:0;
|
|
}
|
|
to {
|
|
opacity:1;
|
|
}
|
|
}
|
|
@-moz-keyframes fadein { /* Firefox */
|
|
from {
|
|
opacity:0;
|
|
}
|
|
to {
|
|
opacity:1;
|
|
}
|
|
}
|
|
@-webkit-keyframes fadein { /* Safari and Chrome */
|
|
from {
|
|
opacity:0;
|
|
}
|
|
to {
|
|
opacity:1;
|
|
}
|
|
}
|
|
@-o-keyframes fadein { /* Opera */
|
|
from {
|
|
opacity:0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|