Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
/* SVG Colors */ .sky-blue { fill: #d8e9e8; } .snow-white { fill: #fff; } .sun-yellow { fill: #fbb040; } .atlantic-blue { fill: #9cc5ca; } .sand-yellow { fill: #ffde2f; } .mountain-yellow { fill: #fbab18; } .fall-orange { fill: #f26522; } .tree-brown { fill: #7a4900; } .mountain-brown { fill: #a84d10; } .style9 { stroke: #7a4900; stroke-miterlimit: 10; fill: none; } .style10 { fill: #663700; } .style11 { fill: #d4ece3; } .style12 { fill: #b45014; } .style13 { fill-rule: evenodd; clip-rule: evenodd; fill: #fbab18; } .style14 { fill-rule: evenodd; clip-rule: evenodd; fill: #f26522; } .style15 { fill-rule: evenodd; clip-rule: evenodd; fill: #7a4900; } .style16 { fill: #a7c8ca; } .style17 { fill: #7a4900; clip-rule: evenodd; fill-rule: evenodd; } .style18 { fill: #df6420; } .style19 { fill-rule: evenodd; clip-rule: evenodd; fill: #663700; } .style20 { fill: #6d6e71; } .style21 { fill: #e86d1f; } .style22 { fill: #151c24; } .style23 { fill: #ffe23c; } .boat, .sand-bar { display: none; } /* Fonts */ @font-face { font-family: 'MuseoSans'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/179037/museosans_100_italic-webfont.woff") format('woff'); font-weight: 100; font-style: italic; } @font-face { font-family: 'MuseoSans'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-179037/museosans_100-webfont.woff") format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: 'MuseoSans'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-179037/museosans_700_italic-webfont.woff") format('woff'); font-weight: 700; font-style: italic; } @font-face { font-family: 'MuseoSans'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-179037/museosans_700-webfont.woff") format('woff'); font-weight: 700; font-style: normal; } /* Animations */ @media screen and (orientation: landscape) and (max-aspect-ratio: 2/1) { .mural { -webkit-animation: pan-mural-landscape 8s forwards ease; -ms-animation: pan-mural-landscape 8s forwards ease; animation: pan-mural-landscape 8s forwards ease; } } @media screen and (orientation: portrait) { .mural { -webkit-animation: pan-mural-portrait 8s forwards ease; -ms-animation: pan-mural-portrait 8s forwards ease; animation: pan-mural-portrait 8s forwards ease; } } .sky, body { -webkit-animation: darken-sky 2s 2s forwards; -ms-animation: darken-sky 2s 2s forwards; animation: darken-sky 2s 2s forwards; } .cloud { -webkit-animation: sunset-clouds 1s 3s forwards; -ms-animation: sunset-clouds 1s 3s forwards; animation: sunset-clouds 1s 3s forwards; } .sun { -webkit-animation: hide 1s 3s forwards; -ms-animation: hide 1s 3s forwards; animation: hide 1s 3s forwards; } .ocean, .spring { -webkit-animation: darken-ocean 2s 2s forwards; -ms-animation: darken-ocean 2s 2s forwards; animation: darken-ocean 2s 2s forwards; } .duke-energy, .duke-energy-outline { -webkit-animation: duke-energy-colors 4s 3s infinite forwards; -ms-animation: duke-energy-colors 4s 3s infinite forwards; animation: duke-energy-colors 4s 3s infinite forwards; } .building-lights rect:nth-child(even) { -webkit-animation: building-lights 1.5s 3s infinite alternate forwards; -ms-animation: building-lights 1.5s 3s infinite alternate forwards; animation: building-lights 1.5s 3s infinite alternate forwards; } .building-lights rect:nth-child(odd) { -webkit-animation: building-lights 1s 3s infinite alternate forwards; -ms-animation: building-lights 1s 3s infinite alternate forwards; animation: building-lights 1s 3s infinite alternate forwards; } .hearst.fall-orange:nth-child(3n+3) { -webkit-animation: hearst-lights 1s 3s infinite alternate; -ms-animation: hearst-lights 1s 3s infinite alternate; animation: hearst-lights 1s 3s infinite alternate; } .hearst.fall-orange:nth-child(3n+1) { -webkit-animation: hearst-lights 1s 3.5s infinite alternate; -ms-animation: hearst-lights 1s 3.5s infinite alternate; animation: hearst-lights 1s 3.5s infinite alternate; } .hearst.fall-orange:nth-child(3n+2) { -webkit-animation: hearst-lights 1s 4.5s infinite alternate; -ms-animation: hearst-lights 1s 4.5s infinite alternate; animation: hearst-lights 1s 4.5s infinite alternate; } .snow { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/179037/snowh.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/179037/snow3q.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-179037/snow2l.png"); -webkit-animation: show 0.25s 5s forwards, snowing 5s linear infinite; -ms-animation: show 0.25s 5s forwards, snowing 5s linear infinite; animation: show 0.25s 5s forwards, snowing 5s linear infinite; } .message { -webkit-animation: show 0.5s 6s forwards; -ms-animation: show 0.5s 6s forwards; animation: show 0.5s 6s forwards; } body { margin: 0; overflow: hidden; font-family: "Museo Sans", "MuseoSans", sans-serif; font-weight: 100; font-style: italic; font-size: 62.5%; background: #d8e9e8; } .credits { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .stage { position: relative; height: 100%; width: 100%; } .ocean { position: fixed; width: 100%; height: 32.3%; background-color: #9cc5ca; bottom: 0; } .mural { position: relative; left: 0; bottom: 0; display: block; height: 100%; z-index: 1; } .snow { position: absolute; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .message { width: 100%; padding-top: 2em; padding-top: 5vh; color: #ffde2f; text-shadow: 2px 2px 4px #000; text-transform: uppercase; font-size: 2.6em; line-height: 2.6em; position: absolute; top: 0; z-index: 35; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); text-align: center; } .message h1 { font-size: 10vh; margin: 0; font-weight: 700; line-height: 1em; margin-bottom: 0.25em; margin-bottom: 1vh; } .message h2 { font-size: 6vh; margin: 0; line-height: 1em; font-style: normal; font-weight: 100; } @media screen and (orientation: portrait) { .message h1 { font-size: 7vh; } .message h2 { font-size: 5vh; } } @-webkit-keyframes pan-mural-landscape { 0% { left: 0; } 100% { left: -50%; } } @keyframes pan-mural-landscape { 0% { left: 0; } 100% { left: -50%; } } @-webkit-keyframes pan-mural-portrait { 0% { left: 0; } 100% { left: -200%; } } @keyframes pan-mural-portrait { 0% { left: 0; } 100% { left: -200%; } } @-webkit-keyframes darken-sky { 0% { background-color: #d8e9e8; fill: #d8e9e8; } 70% { background-color: #b6420b; fill: #b6420b; } 100% { background-color: #203938; fill: #203938; } } @keyframes darken-sky { 0% { background-color: #d8e9e8; fill: #d8e9e8; } 70% { background-color: #b6420b; fill: #b6420b; } 100% { background-color: #203938; fill: #203938; } } @-webkit-keyframes sunset-clouds { 0% { opacity: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)"; filter: alpha(opacity=10000); fill: #fff; } 10% { fill: #fbab18; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes sunset-clouds { 0% { opacity: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)"; filter: alpha(opacity=10000); fill: #fff; } 10% { fill: #fbab18; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes hide { 0% { opacity: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)"; filter: alpha(opacity=10000); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes hide { 0% { opacity: 100; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)"; filter: alpha(opacity=10000); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes darken-ocean { 0% { background-color: #9cc5ca; fill: #9cc5ca; } 100% { background-color: #254246; fill: #254246; } } @keyframes darken-ocean { 0% { background-color: #9cc5ca; fill: #9cc5ca; } 100% { background-color: #254246; fill: #254246; } } @-webkit-keyframes duke-energy-colors { 0% { fill: #f26522; } 50% { fill: #ffde2f; } 60% { fill: #f26522; } 100% { fill: #ffde2f; } } @keyframes duke-energy-colors { 0% { fill: #f26522; } 50% { fill: #ffde2f; } 60% { fill: #f26522; } 100% { fill: #ffde2f; } } @-webkit-keyframes building-lights { 0% { fill: #ffde2f; } 100% { fill: #fff2ac; } } @keyframes building-lights { 0% { fill: #ffde2f; } 100% { fill: #fff2ac; } } @-webkit-keyframes hearst-lights { 0% { fill: #ffeb82; } 100% { fill: #ffde2f; } } @keyframes hearst-lights { 0% { fill: #ffeb82; } 100% { fill: #ffde2f; } } @-webkit-keyframes snowing { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @keyframes snowing { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-webkit-keyframes show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } } @keyframes show { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; } }
HTML
Happy Holidays!
from Skookum Digital Works
Illustration: Mel Shields
Concept & front-end development: Tessa Harmon
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email