Ayanchromium (Talk | contribs) |
Ayanchromium (Talk | contribs) |
||
(18 intermediate revisions by the same user not shown) | |||
Line 27: | Line 27: | ||
.calltoaction{ | .calltoaction{ | ||
− | |||
font-size: 40px; | font-size: 40px; | ||
+ | color: white; | ||
+ | |||
position: relative; | position: relative; | ||
top: -48px; | top: -48px; | ||
Line 62: | Line 63: | ||
} | } | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
.wrap:hover { | .wrap:hover { | ||
-webkit-animation: 0.5s draw linear infinite ; | -webkit-animation: 0.5s draw linear infinite ; | ||
Line 70: | Line 69: | ||
} | } | ||
.content { | .content { | ||
− | height: | + | height: 500px; |
− | + | ||
text-align: center; | text-align: center; | ||
background-color:#b31f13; | background-color:#b31f13; | ||
Line 81: | Line 79: | ||
100%, 0% { | 100%, 0% { | ||
− | background-color:#b31f13 | + | background-color:#b31f13; |
animation-timing-function: ease-in; | animation-timing-function: ease-in; | ||
} | } | ||
Line 90: | Line 88: | ||
100%, 100% { | 100%, 100% { | ||
− | background-color:#b31f13 | + | background-color:#b31f13; |
animation-timing-function: ease-in; | animation-timing-function: ease-in; | ||
} | } | ||
Line 98: | Line 96: | ||
100%, 0% { | 100%, 0% { | ||
− | background-color:#b31f13 | + | background-color:#b31f13; |
animation-timing-function: ease-in; | animation-timing-function: ease-in; | ||
} | } | ||
Line 107: | Line 105: | ||
100%, 100% { | 100%, 100% { | ||
− | background-color:#b31f13 | + | background-color:#b31f13; |
animation-timing-function: ease-in; | animation-timing-function: ease-in; | ||
} | } | ||
Line 115: | Line 113: | ||
font-size:100px; | font-size:100px; | ||
font-family:Monospace; | font-family:Monospace; | ||
− | |||
text-align: center; | text-align: center; | ||
− | |||
− | |||
position: relative; | position: relative; | ||
top: 50px; | top: 50px; | ||
Line 126: | Line 121: | ||
.tagline { | .tagline { | ||
color: #b31f13; | color: #b31f13; | ||
− | font-size: | + | font-size: 40px; |
− | + | ||
− | + | ||
text-align: center; | text-align: center; | ||
− | |||
position: relative; | position: relative; | ||
− | top: | + | top: 70px; |
} | } | ||
− | + | a:visited { | |
− | color: white; | + | color:white; |
text-decoration: none; | text-decoration: none; | ||
} | } |
Latest revision as of 18:00, 30 June 2016
body {
margin: 0; padding: 0;
}
.wrap {
height: 60px; width: 320px; margin: 0 auto; position: relative; top: 30%; /*transform: translateY(-50%);*/ text-align: center; display: block;
}
.shape {
fill: transparent; stroke-dasharray: 140 540; stroke dash-offset: -474; stroke-width:8px;
}
.calltoaction{
font-size: 40px; color: white; position: relative; top: -48px;
}
@keyframes draw {
0% {
stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke: #fff; stroke-width: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke: #fff ; stroke-width:2px; }
} @-webkit-keyframes draw {
0% {
stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke: 2px; }
}
.wrap:hover {
-webkit-animation: 0.5s draw linear infinite ; animation: 0.5s draw linear infinite ;
} .content {
height: 500px; text-align: center; background-color:#b31f13; animation: colorc 8s ease-in-out infinite;
-webkit-animation: colorc 8s ease-in-out infinite ;
} @keyframes colorc {
100%, 0% { background-color:#b31f13; animation-timing-function: ease-in; } 100%, 80% { background-color:white; animation-timing-function: ease-in; }
100%, 100% { background-color:#b31f13; animation-timing-function: ease-in; }
}
@-webkit-keyframes colorc {
100%, 0% { background-color:#b31f13; animation-timing-function: ease-in; } 100%, 80% { background-color:white; animation-timing-function: ease-in; }
100%, 100% { background-color:#b31f13; animation-timing-function: ease-in; }
} .cellfiefuge {
color: white; font-size:100px; font-family:Monospace; text-align: center; position: relative; top: 50px;
}
.tagline {
color: #b31f13; font-size: 40px; text-align: center; position: relative; top: 70px;
} a:visited {
color:white; text-decoration: none;
}