Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * The first commented line is your dabblet’s title
- */
- @keyframes logoMove{
- 0%{
- transform: scale(10.0);
- }
- 100%{
- transform: scale(1.0);
- }
- }
- @keyframes fadeIn{
- 0%{
- opacity:0;
- }
- 100%{
- opacity:1;
- }
- }
- body{
- margin: auto;
- padding-top: 30px;
- max-width: 1000px;
- min-width: 900px;
- min-height: 100%;
- }
- #branding {
- padding-bottom: 10px;
- padding-top: 15px;
- position: relative;
- z-index: 9999;
- }
- #banderol {
- position: relative;
- background-color: #454746;
- -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5), 0px 10px 10px 0px rgba(255, 255, 255, 0.2) inset;
- -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5), 0px 10px 10px 0px rgba(255, 255, 255, 0.2) inset;
- -o-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5), 0px 10px 10px 0px rgba(255, 255, 255, 0.2) inset;
- box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5), 0px 5px 5px 0px rgba(255, 255, 255, 0.2) inset;
- border-top: 2px ridge #15A4A8;
- border-left: 2px ridge #15A4A8;
- margin: 0 7.6%;
- width: auto;
- height: 140px;
- }
- #branding hgroup {
- margin: 0 4%;
- }
- #site-title {
- margin-right: 270px;
- padding: 1em 0 0;
- }
- h1, h2, h3, h4, h5, h6 {clear: both;
- }
- #site-description {
- color: #7A7A7A;
- font-size: 14px;
- margin: 0 270px 3.65625em 0;
- }
- #site-title a {
- color: white;
- font-size: 30px;
- line-height: 36px;
- text-decoration: none;
- font-family: "Comic Sans MS","Palatino Linotype","Times New Roman",Arial,sans-serif;
- text-transform: uppercase;
- -webkit-transition: text-shadow 0.5s ease-in-out;
- -moz-transition: text-shadow 0.5s ease-in-out;
- -o-transition: text-shadow 0.5s ease-in-out;
- transition: text-shadow 0.5s ease-in-out;
- }
- #site-info {
- position: absolute;
- width: 180px;
- top: 30px;
- right: 60px;
- color: white;
- font-size: 24px;
- font-family: "Comic Sans MS","Palatino Linotype","Times New Roman",Arial,sans-serif;
- text-align: center;
- text-transform: uppercase;
- }
- #branding img {
- height: auto;
- margin-bottom: -7px;
- width: 100%;
- }
- #banderol img {
- position: absolute;
- width: 260px;
- height: 188px;
- top: -30px;
- left: 300px;
- animation: logoMove 1s ease-in forwards,fadeIn 0.5s linear forwards;;
- }
- hgroup h1 a span{
- margin:-6px;
- opacity: 0;
- animation: fadeIn 0.5s ease-out forwards;
- }
- hgroup h1 a span:nth-child(1){
- animation-delay: 0.0s;
- }
- hgroup h1 a span:nth-child(2){
- animation-delay:0.2s;
- }
- hgroup h1 a span:nth-child(3){
- animation-delay:0.4s;
- }
- hgroup h1 a span:nth-child(4){
- animation-delay:0.6s;
- }
- hgroup h1 a span:nth-child(5){
- animation-delay:0.8s;
- }
- hgroup h1 a span:nth-child(6){
- animation-delay:1.0s;
- }
- hgroup h1 a span:nth-child(7){
- animation-delay:1.2s;
- }
- hgroup h1 a span:nth-child(8){
- animation-delay:1.4s;
- }
- hgroup h1 a span:nth-child(9){
- animation-delay:1.6s;
- }
- hgroup h1 a span:nth-child(10){
- animation-delay:1.8s;
- }
- hgroup h1 a span:nth-child(11){
- animation-delay:2.0s;
- }
- hgroup h1 a span:nth-child(12){
- animation-delay:2.2s;
- }
Add Comment
Please, Sign In to add comment