Winter Tidings

index.html

<div class="portrait">
        <div id="world"></div>
        <div id="container" class="start"></div>
        <audio id="audio" preload loop>
            <source src="https://s3.amazonaws.com/winter-tidings/assets/audio/forest-lullaby-soundtrack.mp3" type="audio/mpeg">
        </audio>
        <audio id="soundeffects" preload src="https://s3.amazonaws.com/winter-tidings/assets/audio/sound-effects.mp3"></audio>
    </div>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-6600215-50"></script>
    <script>
        function gtag() {
            dataLayer.push(arguments)
        }
        window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "UA-6600215-50")
    </script>

scripts

<script src="https://winter-tidings.s3.amazonaws.com/codepen/app.js"></script>

style.css

body.running {
  background: #102132 !important;
}
#container {
	width: 376px;
	height: 667px;

	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin: auto;
}

body.start {
  background: url('https://s3.amazonaws.com/winter-tidings/assets/images/holder-bg.jpg');
  background-position: center center;
  background-size: cover;
}


canvas {
	width: 375px;
	height: 667px;

	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin: auto;
}

styles

<link href="https://www.wintertidings.com/static/styles/main.css" rel="stylesheet" />

winter-tidings.markdown

Winter Tidings

Staak presents Winter Tidings, a magical message sending service. Enter the enchanted forest, summon the woodland spirits and form a one-of-a-kind snowflake to carry your festive message anywhere in the world.

A Pen by Staak on CodePen.

License.