Difference between revisions of "Template:IISc Bangalore content/CSS"
Ayanchromium (Talk | contribs) |
Ayanchromium (Talk | contribs) |
||
| (16 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 71: | Line 70: | ||
.content { | .content { | ||
height: 500px; | 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;
}
