Keep in mind that sport from youngsters’s magazines or the backs of cereal packing containers the place you must join all of the dots to get an image? Everybody might be aware of this intrigue once you draw a line from one dot to a different and have no idea what image you’re going to get on the finish.
We carry again these nice reminiscences in our new interactive mechanic for emails referred to as the “Dot to Dot” sport. This interactivity piece can discover many makes use of in e-mail advertising and marketing:
- seasonal campaigns could be supported with thematic drawings that recipients should draw with dots, growing total marketing campaign engagement;
- particular provides could be granted by competitors of this sport, making it each difficult and enjoyable;
- revealing or asserting new merchandise by an intriguing sport like this may generate extra buzz round your model and future advertising and marketing strikes.
On this article, we’ll present you intimately learn how to create a full-fledged sport that may embrace the next:
- AMP model of the sport with 5 photos;
- interactive HTML model with the identical 5 photos;
- fallback model for e-mail purchasers that don’t help interactivity.
Let’s dive into our information.
How the sport works
First, it’s price discussing the precept of how the sport features generally. In our instance, the recipient wants to attract a rocket. The drawing itself is split into a number of segments, between which there are dots. Subsequent, we want every section, and the dots are laid out individually (particularly, for every section 1-2, 2-3, 3-4, and so forth., a separate block is created that strikes and turns on the desired angle). Combining all of those permits recipients to finish the picture with traces, as they had been drawn by hand.
AMP model
Let’s begin by including an empty construction and deciding on “Embody in AMPHTML.”
<type amp-custom>
.dot-amp .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat high middle;
background-size: comprise;
width: 300px;
top: 450px;
margin: 0 auto;
place: relative;
}
.dot-amp .circle {
show: inline-block;
width: 10px;
top: 10px;
background: #000;
border-radius: 50%;
}
.dot-amp .lively .circle,
.dot-amp .dot:hover .circle {
background: blue;
}
.dot-amp .quantity {
show: block;
place: absolute;
proper: -10px;
line-height: 10px;
}
.dot-amp .line {
background: #000;
width: 3px;
top: 100%;
place: absolute;
high: 50%;
left: 50%;
remodel: translate(-50%, -50%);
}
.dot-amp .dot {
show: block;
cursor: pointer;
padding: 10px;
place: absolute;
backside: -18px;
left: 50%;
remodel: translate(-50%, 0);
line-height: 10px;
}
.dot-amp .block-1-2 {
width: 7.50%;
top: 20.17%;
place: absolute;
high: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-amp .dot-1 {
high: -14px;
backside: auto;
}
.dot-amp .dot-1 .quantity {
remodel: rotate(23deg);
}
.dot-amp .dot-2 .quantity {
remodel: rotate(23deg);
}
.dot-amp .block-2-3 {
width: 7.50%;
top: 16.83%;
place: absolute;
remodel: rotate(-5deg);
high: 21.83%;
proper: 10.50%;
}
.dot-amp .dot-3 .quantity {
remodel: rotate(5deg);
}
.dot-amp .consequence {
padding: 20px 0;
text-align: middle;
}
@media solely display and (max-width: 600px) {
.dot-amp .dot-container {
width: 250px;
top: 375px;
}
}
</type>
<div class="dot-amp">
<div class="dot-container">
<div class="block-2-3">
<div class="line line-2-3" hidden [hidden]="dot2!=1 || dot3!=1"></div>
<label position="button" tabindex="3" on="faucet:AMP.setState({dot3:1, lively:3})" class="dot dot-3" [class]="lively == 3 ? 'dot dot-3 lively' : 'dot dot-3'">
<span class="quantity">3</span>
<span class="circle"></span>
</label>
</div>
<div class="block-1-2">
<div class="line line-1-2" hidden [hidden]="dot1!=1 || dot2!=1"></div>
<label position="button" tabindex="1" on="faucet:AMP.setState({dot1:1, lively:1})" class="dot dot-1" [class]="lively == 1 ? 'dot dot-1 lively' : 'dot dot-1'">
<span class="quantity">1</span>
<span class="circle"></span>
</label>
<label position="button" tabindex="2" on="faucet:AMP.setState({dot2:1, lively:2})" class="dot dot-2" [class]="lively == 2 ? 'dot dot-2 lively' : 'dot dot-2'">
<span class="quantity">2</span>
<span class="circle"></span>
</label>
</div>
</div>
<div class="consequence" hidden [hidden]="[dot1,dot2,dot3].indexOf(null) != -1">
<h2 type="padding-bottom:15px">Congratulations!</h2>
<p>Here is your private promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>In the intervening time, the code has 3 dots and a pair of segments (later, extra will likely be added for the entire look of the sport, as was proven within the demonstration GIF). Within the format, the blocks are named by segments block-1-2, block-2-3, and so forth. The primary block 1-2 consists of a line and two dots 1 and №2. In all different blocks, there will likely be a line and one dot (in block 2-3 dot №3, in block 3-4 dot №4, and so forth).
Let’s take a more in-depth have a look at one of many blocks.
The primary factor is div; that is our line. It has attributes hidden [hidden]=”dot2!=1 || dot3!=1″, the place:
- hidden—hides the factor;
- [hidden]—units the situation when to cover the factor (in our instance, cover till dot2 and dot3 are equal to 1).
Subsequent is the label tag, which is dot 3. It has the next attributes: position=”button” tabindex=”3″ on=”faucet:AMP.setState({dot3:1, lively:3})” [class]=”lively == 3 ? ‘dot dot-3 lively’ : ‘dot dot-3′”, the place:
- position=”button” is an attribute that’s added to the factor and acts as a button;
- tabindex=”3″ is a required attribute if position=”button” is current, because it units the sequence of receiving focus when switching between parts utilizing the tab key;
- on=”faucet:AMP.setState({dot3:1, lively:3})” is the “click on” occasion handler (on=”faucet:”);
- dot3 is a variable that originally has a null worth, however when the recipient clicks on this dot, the worth 1 is written to the variable, which helps to grasp which dots the consumer clicked on;
- lively is a variable that’s wanted to spotlight the dot when it’s lively; we write the variety of the dot the consumer clicked on into it;
- [class]=”lively == 3 ? ‘dot dot-3 lively’ : ‘dot dot-3′” is an attribute during which the situation for displaying lessons is written: if the worth of the variable lively is 3, dot dot-3 lively lessons are added; in any other case, solely dot dot-3 lessons are left.
The remaining segments (besides 1-2) should have the identical format; solely the numbers are modified in accordance with the dot numbers. The very first section 1-2 differs in that it has 2 dots directly (№1 and №2).
Endgame message
The following factor price speaking about is a message that seems as soon as the sport is completed. So as to add your {custom} textual content, change our instance within the marked space along with your copy.
It has [hidden]=”[dot1,dot2,dot3].indexOf(null) != -1″ attribute that hides the factor when the situation is met. In our instance, the block will likely be hidden when not less than one of many variables, dot1, dot2, and dot3, has a null worth (it is going to be if the dot was not clicked). To make it seem in a {custom} sport with a {custom} variety of dots, they need to all be listed right here.
Understanding kinds
Now, let’s speak about how the sport appears to be like, that means its type code. Under, you possibly can see the code that specifies the background picture of the rocket and the block dimension for the desktop model. Because of this, to set your {custom} background picture for the sport, you could change the hyperlink in a highlighter space to your {custom} picture hyperlink.
Necessary notice: To exchange our picture with your personal, that you must put together it, as in our instance. You additionally want to alter the block dimension in case your picture has totally different proportions.
The desktop model of the sport in our instance has the next dimensions:
The cellular dimension of our sport is designated with this code half:
In the meantime, the colours for dots by default and for dots on hover are set on this code half:
The colour of the traces between the dots is outlined on this piece of code:
Place of traces by way of kinds and learn how to customise them
Now, probably the most troublesome a part of the kinds—which is answerable for the angle at which the traces go and, in essence, helps to create a drawing:
This piece of code specifies the size, coordinates, and slopes of every section. Since we rotate the complete block with (remodel: rotate(-23deg)), the numbers in it additionally rotate. To make them look even, we align every quantity again with the type remodel, particularly rotate(23deg).
All values are set in p.c in order that they don’t must be modified on cellular.
The right way to calculate values in percentages
You possibly can instantly specify the sizes in p.c, or choose the sizes in pixels, after which convert them to p.c. Percentages are calculated relative to the container with the sport (dot-container). In our instance, its dimensions are 300 px width and 450 px top.
Let’s take the size of block 1-2, for instance, as its dimensions are 23 px width and 90 px top.
We calculate the width of the block relative to the width of the container with the sport and the peak relative to the peak.
For width, there will likely be a calculation system:
- 23*100/300 = 7.67%—this worth is written within the width of block 1-2.
The next system will likely be used for top:
- 90*100/450 = 20%—this worth is written within the top of block 1-2.
The values “left” and “high” could be instantly set as a proportion or transformed from pixels utilizing the identical system—for left or proper, relative to the width of the container, and for high or backside, relative to the peak of the container.
Thus, that you must add all the required blocks with dots.
Interactive HTML model
The following step of our information is the interactive HTML model, constructed with HTML5& CSS3. Proceed to work on the identical template the place we created the AMP model. Add one other empty construction. Choose it, and choose an “Embody in HTML solely” possibility.
<type>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat high middle;
background-size: comprise;
width: 300px;
top: 450px;
margin: 0 auto;
place: relative;
}
.dot-html .circle {
show: inline-block;
width: 10px;
top: 10px;
background: #000;
border-radius: 50%;
}
.dot-html .lively .circle {
background: blue;
}
.dot-html .quantity {
show: block;
place: absolute;
proper: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
top: 100%;
place: absolute;
high: 50%;
left: 50%;
remodel: translate(-50%, -50%);
show: none;
}
.dot-html .dot {
show: block;
cursor: pointer;
padding: 10px;
place: absolute;
backside: -18px;
left: 50%;
remodel: translate(-50%, 0);
}
.dot-html .block-1-2 {
width: 7.50%;
top: 20.17%;
place: absolute;
high: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-html .dot-1 {
high: -14px;
backside: auto;
}
.dot-html .dot-1 .quantity {
remodel: rotate(23deg);
}
.dot-html .dot-2 .quantity {
remodel: rotate(23deg);
}
.dot-html .block-2-3 {
width: 7.50%;
top: 16.83%;
place: absolute;
remodel: rotate(-5deg);
high: 21.83%;
proper: 10.50%;
}
.dot-html .dot-3 .quantity {
remodel: rotate(5deg);
}
.dot-html .block-3-4 {
width: 7.50%;
top: 26.00%;
place: absolute;
remodel: rotate(16deg);
high: 39.00%;
proper: 14.50%;
}
.dot-html .dot-4 .quantity {
remodel: rotate(-16deg);
}
.dot-html .block-4-5 {
width: 7.50%;
top: 17.50%;
place: absolute;
remodel: rotate(91deg);
high: 56.83%;
proper: 33.75%;
}
.dot-html .dot-5 .quantity {
remodel: rotate(-91deg);
}
.dot-html .block-5-6 {
width: 7.50%;
top: 16.50%;
place: absolute;
remodel: rotate(113deg);
high: 53.67%;
proper: auto;
left: 32.00%;
}
.dot-html .dot-6 .quantity {
remodel: rotate(-113deg);
}
.dot-html .block-6-7 {
width: 7.50%;
top: 20.00%;
place: absolute;
high: 38.17%;
proper: auto;
left: 20.80%;
remodel: rotate(4deg);
}
.dot-html .dot-7 {
high: -16px;
backside: auto;
}
.dot-html .dot-7 .quantity {
remodel: rotate(-2deg);
}
.dot-html .block-7-8 {
width: 7.50%;
top: 23.33%;
place: absolute;
remodel: rotate(25deg);
high: 16.33%;
proper: auto;
left: 29.00%;
}
.dot-html .dot-8 {
high: -16px;
backside: auto;
}
.dot-html .dot-8 .quantity {
remodel: rotate(-27deg);
}
.dot-html .block-8-9 {
width: 7.50%;
top: 20.83%;
place: absolute;
remodel: rotate(54deg);
high: 0.5%;
proper: auto;
left: 49.75%;
}
.dot-html .dot-9 {
high: -16px;
backside: auto;
}
.dot-html .dot-9 .quantity {
remodel: rotate(-54deg);
}
.dot-html .consequence {
padding: 20px 0;
text-align: middle;
show: none;
}
@media solely display and (max-width: 600px) {
.dot-html .dot-container {
width: 250px;
top: 375px;
}
}
#input-dot-8:checked~#input-dot-9:checked~div .line-8-9,
#input-dot-7:checked~#input-dot-8:checked~div .line-7-8,
#input-dot-6:checked~#input-dot-7:checked~div .line-6-7,
#input-dot-5:checked~#input-dot-6:checked~div .line-5-6,
#input-dot-4:checked~#input-dot-5:checked~div .line-4-5,
#input-dot-3:checked~#input-dot-4:checked~div .line-3-4,
#input-dot-2:checked~#input-dot-3:checked~div .line-2-3,
#input-dot-1:checked~#input-dot-2:checked~div .line-1-2 {
show: block;
}
#input-dot-9:checked~div .dot-9 .circle,
#input-dot-8:checked~div .dot-8 .circle,
#input-dot-7:checked~div .dot-7 .circle,
#input-dot-6:checked~div .dot-6 .circle,
#input-dot-5:checked~div .dot-5 .circle,
#input-dot-4:checked~div .dot-4 .circle,
#input-dot-3:checked~div .dot-3 .circle,
#input-dot-2:checked~div .dot-2 .circle,
#input-dot-1:checked~div .dot-1 .circle,
.dot-html .dot:hover .circle {
background: blue;
}
#input-dot-1:checked~#input-dot-2:checked~div .dot-1 .circle,
#input-dot-2:checked~#input-dot-3:checked~div .dot-2 .circle,
#input-dot-3:checked~#input-dot-4:checked~div .dot-3 .circle,
#input-dot-4:checked~#input-dot-5:checked~div .dot-4 .circle,
#input-dot-5:checked~#input-dot-6:checked~div .dot-5 .circle,
#input-dot-6:checked~#input-dot-7:checked~div .dot-6 .circle,
#input-dot-7:checked~#input-dot-8:checked~div .dot-7 .circle,
#input-dot-8:checked~#input-dot-9:checked~div .dot-8 .circle {
background: #000;
}
#input-dot-1:checked~#input-dot-2:checked~#input-dot-3:checked~#input-dot-4:checked~#input-dot-5:checked~#input-dot-6:checked~#input-dot-7:checked~#input-dot-8:checked~#input-dot-9:checked~.consequence {
show: block;
}
</type>
<div class="dot-html">
<enter id="input-dot-1" identify="input-dot-1" sort="radio" type="show:none">
<enter id="input-dot-2" identify="input-dot-2" sort="radio" type="show:none">
<enter id="input-dot-3" identify="input-dot-3" sort="radio" type="show:none">
<enter id="input-dot-4" identify="input-dot-4" sort="radio" type="show:none">
<enter id="input-dot-5" identify="input-dot-5" sort="radio" type="show:none">
<enter id="input-dot-6" identify="input-dot-6" sort="radio" type="show:none">
<enter id="input-dot-7" identify="input-dot-7" sort="radio" type="show:none">
<enter id="input-dot-8" identify="input-dot-8" sort="radio" type="show:none">
<enter id="input-dot-9" identify="input-dot-9" sort="radio" type="show:none">
<div class="dot-container">
<div class="block-8-9">
<div class="line line-8-9"></div>
<label for="input-dot-9" class="dot dot-9"><span class="circle"></span><span class="quantity">9</span></label>
</div>
<div class="block-7-8">
<div class="line line-7-8"></div>
<label for="input-dot-8" class="dot dot-8"><span class="circle"></span><span class="quantity">8</span></label>
</div>
<div class="block-6-7">
<div class="line line-6-7"></div>
<label for="input-dot-7" class="dot dot-7"><span class="circle"></span><span class="quantity">7</span></label>
</div>
<div class="block-5-6">
<div class="line line-5-6"></div>
<label for="input-dot-6" class="dot dot-6"><span class="quantity">6</span><span class="circle"></span></label>
</div>
<div class="block-4-5">
<div class="line line-4-5"></div>
<label for="input-dot-5" class="dot dot-5"><span class="quantity">5</span><span class="circle"></span></label>
</div>
<div class="block-3-4">
<div class="line line-3-4"></div>
<label for="input-dot-4" class="dot dot-4"><span class="quantity">4</span><span class="circle"></span></label>
</div>
<div class="block-2-3">
<div class="line line-2-3"></div>
<label for="input-dot-3" class="dot dot-3"><span class="quantity">3</span><span class="circle"></span></label>
</div>
<div class="block-1-2">
<div class="line line-1-2"></div>
<label for="input-dot-1" class="dot dot-1"><span class="quantity">1</span><span class="circle"></span></label>
<label for="input-dot-2" class="dot dot-2"><span class="quantity">2</span><span class="circle"></span></label>
</div>
</div>
<div class="consequence">
<h2 type="padding-bottom:15px">Congratulations!</h2>
<p>Here is your private promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>Right here, the general format is identical as within the AMP model, however as an alternative of AMP attributes, we use tags binding label tags to enter tags utilizing the attribute “for.” On this attribute, we specify the id of the corresponding enter.
Necessary notice: The variety of inputs corresponds to the variety of dots within the picture.
Understanding kinds
Types assist us regulate how sport parts are displayed. Here’s what the kinds for displaying traces between dots seem like:
If the recipient clicks on dots 8 and 9, we present section 8-9, if on dots 7 and eight, we present section 7-8, and so forth. For example, we listing all of the dots that exist in our sport.
The next kinds paint the dots blue when hovered over and within the lively state, and the kinds under them return the dot to its authentic (black) shade if the section to which it belongs is already displayed.
Final however not least, the kinds answerable for displaying the block with the message after all of the dots have been coloured:
Fallback model
For e-mail purchasers that don’t help HTML5 and CSS3, that you must create an extra block with code. It should have a format just like our mechanics however with out interactivity. Clicking on the weather will result in the online model of the e-mail.
We proceed to work within the block with interactive HTML, which we made above. Paste the next code between the </type> tag and <div class=”dot-html”>:
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" type="show:none !essential;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="middle">
<td><a goal="_blank" href="https://viewstripo.e-mail/41a57244-a78a-40d8-88ee-f18848aba63b1711958538852?sort=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png" alt type="show: block;" width="258" top="450"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" type="mso-hide:all;show:none;">
Apart from that, paste this code on the finish of the code:
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->
The fallback code has a particular half, with a hyperlink to an internet model of the e-mail. Simply paste the hyperlink to your net model, as proven under.
Necessary notice: You possibly can learn extra about e-mail net variations and learn how to get them in our particular article.
Understanding kinds
To outline how the fallback model appears to be like, we additionally want so as to add kinds. Add this piece of code contained in the type tag (it could be simpler to stick it earlier than the closing tag </type>):
/* --- */
@media display and (-webkit-min-device-pixel-ratio: 0) {
enter.fallback_ctrl:checked~.container {
show: block !essential;
}
enter.fallback_ctrl:checked~#fallback {
show: none !essential;
}
}
[owa] .container {
show: none !essential;
}
[class~="x_container"] {
show: none !essential;
}
[id~="x_fallback"] {
show: block !essential;
}
@media display and (max-width: 600px) {
physique[data-outlook-cycle] #fallback {
show: block !essential;
}
physique[data-outlook-cycle] .container {
show: none !essential;
}
}
Let’s have a look at the code in additional element.
<!–[if !mso]><!–><enter sort=”checkbox” id=”fallback_ctrl” class=”fallback_ctrl” type=”show:none !essential;mso-hide:all;” checked>
<!–<![endif]–>
This enter is required to indicate or cover the fallback model by way of kinds. We wrapped it within the feedback <!–[if !mso]><!–> … <!–<![endif]–> to verify it’s hidden within the Outlook Desktop consumer.
In the meantime, <div id=”fallback” class=”fallback”></div> is a block containing the complete format of our fallback. It ought to have a easy desk format appropriate for Outlook. In our instance, this can be a desk within the type of tabs with hyperlinks that result in the online model. You possibly can create your personal model, for instance, in order that the contents of the tabs are displayed one underneath the opposite with out going to the online model. The principle factor is to make use of a format that’s comprehensible for Outlook.
The kinds under are answerable for hiding and displaying the fallback model. In case you take away them or remark them out, the fallback model will likely be seen, and you may regulate its design to the specified type. Don’t overlook to return these kinds earlier than sending the e-mail.
These kinds don’t have clear guidelines for every e-mail consumer, however there are a set of hacks that can be utilized to manage the show:
- kinds that begin with [owa] are used for Outlook;
- the [class~=”x_container”] kinds are wanted for Outlook In case [owa] doesn’t work;
- physique[data-outlook-cycle] kinds wanted for Outlook on iOS and Android cellular gadgets;
- mso-hide:all; is used for Outlook.com.
The complete code for interactive and fallback model
Right here is the fallback code of the sport, together with the interactive HTML half and the fallback model:
<type>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat high middle;
background-size: comprise;
width: 300px;
top: 450px;
margin: 0 auto;
place: relative;
}
.dot-html .circle {
show: inline-block;
width: 10px;
top: 10px;
background: #000;
border-radius: 50%;
}
.dot-html .lively .circle {
background: blue;
}
.dot-html .quantity {
show: block;
place: absolute;
proper: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
top: 100%;
place: absolute;
high: 50%;
left: 50%;
remodel: translate(-50%, -50%);
show: none;
}
.dot-html .dot {
show: block;
cursor: pointer;
padding: 10px;
place: absolute;
backside: -18px;
left: 50%;
remodel: translate(-50%, 0);
}
.dot-html .block-1-2 {
width: 7.50%;
top: 20.17%;
place: absolute;
high: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-html .dot-1 {
high: -14px;
backside: auto;
}
.dot-html .dot-1 .quantity {
remodel: rotate(23deg);
}
.dot-html .dot-2 .quantity {
remodel: rotate(23deg);
}
.dot-html .block-2-3 {
width: 7.50%;
top: 16.83%;
place: absolute;
remodel: rotate(-5deg);
high: 21.83%;
proper: 10.50%;
}
.dot-html .dot-3 .quantity {
remodel: rotate(5deg);
}
.dot-html .block-3-4 {
width: 7.50%;
top: 26.00%;
place: absolute;
remodel: rotate(16deg);
high: 39.00%;
proper: 14.50%;
}
.dot-html .dot-4 .quantity {
remodel: rotate(-16deg);
}
.dot-html .block-4-5 {
width: 7.50%;
top: 17.50%;
place: absolute;
remodel: rotate(91deg);
high: 56.83%;
proper: 33.75%;
}
.dot-html .dot-5 .quantity {
remodel: rotate(-91deg);
}
.dot-html .block-5-6 {
width: 7.50%;
top: 16.50%;
place: absolute;
remodel: rotate(113deg);
high: 53.67%;
proper: auto;
left: 32.00%;
}
.dot-html .dot-6 .quantity {
remodel: rotate(-113deg);
}
.dot-html .block-6-7 {
width: 7.50%;
top: 20.00%;
place: absolute;
high: 38.17%;
proper: auto;
left: 20.80%;
remodel: rotate(4deg);
}
.dot-html .dot-7 {
high: -16px;
backside: auto;
}
.dot-html .dot-7 .quantity {
remodel: rotate(-2deg);
}
.dot-html .block-7-8 {
width: 7.50%;
top: 23.33%;
place: absolute;
remodel: rotate(25deg);
high: 16.33%;
proper: auto;
left: 29.00%;
}
.dot-html .dot-8 {
high: -16px;
backside: auto;
}
.dot-html .dot-8 .quantity {
remodel: rotate(-27deg);
}
.dot-html .block-8-9 {
width: 7.50%;
top: 20.83%;
place: absolute;
remodel: rotate(54deg);
high: 0.5%;
proper: auto;
left: 49.75%;
}
.dot-html .dot-9 {
high: -16px;
backside: auto;
}
.dot-html .dot-9 .quantity {
remodel: rotate(-54deg);
}
.dot-html .consequence {
padding: 20px 0;
text-align: middle;
show: none;
}
@media solely display and (max-width: 600px) {
.dot-html .dot-container {
width: 250px;
top: 375px;
}
}
#input-dot-8:checked~#input-dot-9:checked~div .line-8-9,
#input-dot-7:checked~#input-dot-8:checked~div .line-7-8,
#input-dot-6:checked~#input-dot-7:checked~div .line-6-7,
#input-dot-5:checked~#input-dot-6:checked~div .line-5-6,
#input-dot-4:checked~#input-dot-5:checked~div .line-4-5,
#input-dot-3:checked~#input-dot-4:checked~div .line-3-4,
#input-dot-2:checked~#input-dot-3:checked~div .line-2-3,
#input-dot-1:checked~#input-dot-2:checked~div .line-1-2 {
show: block;
}
#input-dot-9:checked~div .dot-9 .circle,
#input-dot-8:checked~div .dot-8 .circle,
#input-dot-7:checked~div .dot-7 .circle,
#input-dot-6:checked~div .dot-6 .circle,
#input-dot-5:checked~div .dot-5 .circle,
#input-dot-4:checked~div .dot-4 .circle,
#input-dot-3:checked~div .dot-3 .circle,
#input-dot-2:checked~div .dot-2 .circle,
#input-dot-1:checked~div .dot-1 .circle,
.dot-html .dot:hover .circle {
background: blue;
}
#input-dot-1:checked~#input-dot-2:checked~div .dot-1 .circle,
#input-dot-2:checked~#input-dot-3:checked~div .dot-2 .circle,
#input-dot-3:checked~#input-dot-4:checked~div .dot-3 .circle,
#input-dot-4:checked~#input-dot-5:checked~div .dot-4 .circle,
#input-dot-5:checked~#input-dot-6:checked~div .dot-5 .circle,
#input-dot-6:checked~#input-dot-7:checked~div .dot-6 .circle,
#input-dot-7:checked~#input-dot-8:checked~div .dot-7 .circle,
#input-dot-8:checked~#input-dot-9:checked~div .dot-8 .circle {
background: #000;
}
#input-dot-1:checked~#input-dot-2:checked~#input-dot-3:checked~#input-dot-4:checked~#input-dot-5:checked~#input-dot-6:checked~#input-dot-7:checked~#input-dot-8:checked~#input-dot-9:checked~.consequence {
show: block;
}
/* --- */
@media display and (-webkit-min-device-pixel-ratio: 0) {
enter.fallback_ctrl:checked~.container {
show: block !essential;
}
enter.fallback_ctrl:checked~#fallback {
show: none !essential;
}
}
[owa] .container {
show: none !essential;
}
[class~="x_container"] {
show: none !essential;
}
[id~="x_fallback"] {
show: block !essential;
}
@media display and (max-width: 600px) {
physique[data-outlook-cycle] #fallback {
show: block !essential;
}
physique[data-outlook-cycle] .container {
show: none !essential;
}
}
</type>
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" type="show:none !essential;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<div id="fallback" class="fallback">
<desk width="100%">
<tbody>
<tr align="middle">
<td><a goal="_blank" href="https://viewstripo.e-mail/c29e42f1-be3f-4496-baae-104fe5d89bb51719820023314?sort=amphtml"><img src="https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png" alt type="show: block;" width="258" top="450"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" type="mso-hide:all;show:none;">
<div class="dot-html"><enter id="input-dot-1" identify="input-dot-1" sort="radio" type="show:none"><enter id="input-dot-2" identify="input-dot-2" sort="radio" type="show:none"><enter id="input-dot-3" identify="input-dot-3" sort="radio" type="show:none"><enter id="input-dot-4" identify="input-dot-4" sort="radio" type="show:none"><enter id="input-dot-5" identify="input-dot-5" sort="radio" type="show:none"><enter id="input-dot-6" identify="input-dot-6" sort="radio" type="show:none"><enter id="input-dot-7" identify="input-dot-7" sort="radio" type="show:none"><enter id="input-dot-8" identify="input-dot-8" sort="radio" type="show:none"><enter id="input-dot-9" identify="input-dot-9" sort="radio" type="show:none">
<div class="dot-container">
<div class="block-8-9">
<div class="line line-8-9"></div><label for="input-dot-9" class="dot dot-9"><span class="circle"></span><span class="quantity">9</span></label>
</div>
<div class="block-7-8">
<div class="line line-7-8"></div><label for="input-dot-8" class="dot dot-8"><span class="circle"></span><span class="quantity">8</span></label>
</div>
<div class="block-6-7">
<div class="line line-6-7"></div><label for="input-dot-7" class="dot dot-7"><span class="circle"></span><span class="quantity">7</span></label>
</div>
<div class="block-5-6">
<div class="line line-5-6"></div><label for="input-dot-6" class="dot dot-6"><span class="quantity">6</span><span class="circle"></span></label>
</div>
<div class="block-4-5">
<div class="line line-4-5"></div><label for="input-dot-5" class="dot dot-5"><span class="quantity">5</span><span class="circle"></span></label>
</div>
<div class="block-3-4">
<div class="line line-3-4"></div><label for="input-dot-4" class="dot dot-4"><span class="quantity">4</span><span class="circle"></span></label>
</div>
<div class="block-2-3">
<div class="line line-2-3"></div><label for="input-dot-3" class="dot dot-3"><span class="quantity">3</span><span class="circle"></span></label>
</div>
<div class="block-1-2">
<div class="line line-1-2"></div><label for="input-dot-1" class="dot dot-1"><span class="quantity">1</span><span class="circle"></span></label><label for="input-dot-2" class="dot dot-2"><span class="quantity">2</span><span class="circle"></span></label>
</div>
</div>
<div class="consequence">
<h2 type="padding-bottom:15px">Congratulations!</h2>
<p>Here is your private promo code GAMIFICATION for 15% OFF sitewide.</p>
</div>
</div>
</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->This code half is only for checking solely, and to just be sure you’ve made no errors on the earlier steps of our information. If one thing doesn’t work as supposed, evaluate your code to this full pattern to see if one thing is mistaken.
Wrapping up
At first look, the sport could appear fairly easy, however its allure is that you’re restricted solely by your creativeness of what sort of drawing you possibly can provide you with. The complexity and engagement of the sport relies upon solely on how a lot you need to make it that method, creating totally different variations of “Dot to Dot” video games.
We hope that this information will turn out to be dependable help for upgrading your emails with interactivity and new mechanics.
Create distinctive emails with Stripo
