161 lines
2.7 KiB
CSS
161 lines
2.7 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
|
|
|
|
a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;}
|
|
|
|
h1 {
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
margin: 0;
|
|
padding: 0 0 15px 0;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
margin: 0;
|
|
padding: 0 0 15px 0;
|
|
text-align: center;
|
|
text-decoration: bold;
|
|
}
|
|
|
|
@media (min-width: 350px) {
|
|
h1 {font-size: 3.25em;}
|
|
img{height: 40px;}
|
|
p{font-size: 10px;}
|
|
h2{font-size: 17px;}
|
|
}
|
|
|
|
@media (min-width: 400px) {
|
|
h1 {font-size: 3.25em;}
|
|
img{height: 45px;}
|
|
p{font-size: 15px;}
|
|
h2{font-size: 17px;}
|
|
}
|
|
@media (min-width: 440px) {
|
|
h1 {font-size: 3.5em;}
|
|
img {height: 100px;}
|
|
p{font-size: 16px;}
|
|
h2{font-size: 18px;}
|
|
}
|
|
@media (min-width: 500px) {
|
|
h1 {font-size: 3.75em;}
|
|
img{height: 125px;}
|
|
p{font-size: 16px;}
|
|
h2{font-size: 19px;}
|
|
}
|
|
@media (min-width: 630px) {
|
|
h1 {font-size: 5em;}
|
|
img{height: 150px;}
|
|
p{font-size: 20px;}
|
|
h2{font-size: 24px;}
|
|
}
|
|
@media (min-width: 768px) {
|
|
h1 {
|
|
font-size: 5em;
|
|
padding-bottom: 30px;
|
|
}
|
|
img{height: 175px;}
|
|
p{font-size: 22px;}
|
|
h2{font-size: 26px;}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
h1 {font-size: 8em;}
|
|
img{height: 250px;}
|
|
p{font-size: 24px;}
|
|
h2{font-size: 28px;}
|
|
}
|
|
|
|
p{
|
|
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
}
|
|
|
|
h3{
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
}
|
|
|
|
footer{
|
|
padding: 20px;
|
|
background-color: #e0e0e0;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
}
|
|
|
|
@keyframes dimImg{
|
|
from {opacity: 1;
|
|
filter: alpha(opacity=100);}
|
|
to {opacity: 0.4;
|
|
filter: alpha(opacity=50);}
|
|
}
|
|
|
|
@keyframes revealText{
|
|
from {opacity: 0.4;
|
|
filter: alpha(opacity=50);}
|
|
to {opacity: 1;
|
|
filter: alpha(opacity=100);}
|
|
}
|
|
|
|
.pictureContainer{
|
|
float: right;
|
|
position: relative;
|
|
}
|
|
|
|
.pictureContainer a{
|
|
opacity: 0;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
|
|
.pictureContainer:hover img{
|
|
|
|
animation-name: dimImg;
|
|
animation-duration: 1s;
|
|
opacity: 0.4;
|
|
filter: alpha(opacity=50);
|
|
}
|
|
|
|
.pictureContainer:hover a{
|
|
animation-name: revealText;
|
|
animation-duration: 1s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.canvasText{
|
|
margin: 0px;
|
|
display: inline-block;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
#c1, #c2, #c3{
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.button{
|
|
padding: 16px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
-webkit-transition-duration: 0.4s; /* Safari */
|
|
transition-duration: 0.4s;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
color: black;
|
|
border: 2px solid #555555;
|
|
float: right;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: #555555;
|
|
color: white;
|
|
}
|
|
|
|
|