Add this module to the top of your email. In email clients that can handle animations you will see snowflakes falling inside of your html email. Perfect for Holiday E-card emails or just when you need a bit of whimsy.
Created by: Jon McLaren
After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.
Please keep in mind, all entries are community created and may not be fully supported by HubSpot.
View on:
<style>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.snowcontainer{
position:relative;
width:100%;
overflow:visible;
}
.snowimage{
/* size of image */
height:18px;
width:18px;
/* absolute - relative to the container div */
position:absolute;
/* Where animation starts */
top:-20px;
/* image link */
background-image:url('https://arcdn.net/ActionRocket/css-snow/images/snowflake_1.png');
}
.snow{
border-radius: 9px;
height: 18px;
width: 18px;
position: absolute;
top: -20px;
background-color: #ffffff;
}
.snow1{
animation: snow1 5s linear 0s infinite;
}
/* animation: Name of animation / length of animation / timing function (linear= same speed from beginning to end) / delay (time between animation end and start) / number of times */
.snow2{
animation: snow2 6s linear 1s infinite;
}
.snow3{
animation: snow3 7s linear 2s infinite;
}
@keyframes snow1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
@keyframes snow2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
@keyframes snow3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
<div class="snowcontainer" style="height: 500px;">
<div class="snowimage snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
Because…. why not?
Add this module to the top of your email. In email clients that can handle animations you will see snowflakes falling inside of your html email.
Perfect for Holiday E-card emails.
2 possible things going on.
A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.
Lead developers: Jon McLaren
Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.
Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras
This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.
Lead developers: William Spiro
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield