A step-by-step information on making a “Dot to Dot” sport on your emails (code samples included) — Stripo.e-mail
Do not forget that sport from youngsters’s magazines or the backs of cereal bins the place you need to join all of the dots to get an image? Everybody might be conversant in this intrigue while you draw a line from one dot to a different and have no idea what image you’ll get on the finish.
We convey again these nice recollections 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 will be supported with thematic drawings that recipients should draw with dots, rising total marketing campaign engagement;
- particular presents will be granted by way of competitors of this sport, making it each difficult and enjoyable;
- revealing or saying new merchandise by way of an intriguing sport like this may generate extra buzz round your model and future advertising and marketing strikes.
On this article, we are going to present you intimately learn how to create a full-fledged sport that can embrace the next:
- AMP model of the sport with 5 photos;
- interactive HTML model with the identical 5 photos;
- fallback model for e-mail shoppers that don’t help interactivity.
Let’s dive into our information.
How the sport works
First, it’s value discussing the precept of how the sport capabilities basically. 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 phase, and the dots are laid out individually (particularly, for every phase 1-2, 2-3, 3-4, and many others., a separate block is created that strikes and turns on the desired angle). Combining all of those permits recipients to finish the picture with strains, as they had been drawn by hand.
AMP model
Let’s begin by including an empty construction and deciding on “Embody in AMPHTML.”
<model amp-custom>
.dot-amp .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat prime middle;
background-size: include;
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 .energetic .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;
prime: 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;
prime: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-amp .dot-1 {
prime: -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);
prime: 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 screen and (max-width: 600px) {
.dot-amp .dot-container {
width: 250px;
top: 375px;
}
}
</model>
<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, energetic:3})" class="dot dot-3" [class]="energetic == 3 ? 'dot dot-3 energetic' : '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, energetic:1})" class="dot dot-1" [class]="energetic == 1 ? 'dot dot-1 energetic' : 'dot dot-1'">
<span class="quantity">1</span>
<span class="circle"></span>
</label>
<label position="button" tabindex="2" on="faucet:AMP.setState({dot2:1, energetic:2})" class="dot dot-2" [class]="energetic == 2 ? 'dot dot-2 energetic' : '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 model="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 couple of segments (later, extra will probably be added for the whole 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 probably 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 better have a look at one of many blocks.
The primary aspect is div; that is our line. It has attributes hidden [hidden]=”dot2!=1 || dot3!=1″, the place:
- hidden—hides the aspect;
- [hidden]—units the situation when to cover the aspect (in our instance, disguise 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, energetic:3})” [class]=”energetic == 3 ? ‘dot dot-3 energetic’ : ‘dot dot-3′”, the place:
- position=”button” is an attribute that’s added to the aspect 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 components utilizing the tab key;
- on=”faucet:AMP.setState({dot3:1, energetic: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 know which dots the consumer clicked on;
- energetic is a variable that’s wanted to focus on the dot when it’s energetic; we write the variety of the dot the consumer clicked on into it;
- [class]=”energetic == 3 ? ‘dot dot-3 energetic’ : ‘dot dot-3′” is an attribute by which the situation for displaying courses is written: if the worth of the variable energetic is 3, dot dot-3 energetic courses are added; in any other case, solely dot dot-3 courses are left.
The remaining segments (besides 1-2) will need to have the identical format; solely the numbers are modified in accordance with the dot numbers. The very first phase 1-2 differs in that it has 2 dots without delay (№1 and №2).
Endgame message
The following factor value 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 aspect when the situation is met. In our instance, the block will probably be hidden when at the least one of many variables, dot1, dot2, and dot3, has a null worth (it will likely 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 types
Now, let’s discuss how the sport seems to be, that means its model code. Beneath, you’ll be able to 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 need to change the hyperlink in a highlighter space to your {custom} picture hyperlink.
Essential observe: To exchange our picture with your individual, it’s good to put together it, as in our example. You additionally want to vary the block dimension in case your picture has completely 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 strains between the dots is outlined on this piece of code:
Place of strains through types and learn how to customise them
Now, essentially the most troublesome a part of the types—which is accountable for the angle at which the strains go and, in essence, helps to create a drawing:
This piece of code specifies the size, coordinates, and slopes of every phase. Since we rotate your complete block with (remodel: rotate(-23deg)), the numbers in it additionally rotate. To make them look even, we align every quantity again with the model remodel, particularly rotate(23deg).
All values are set in p.c in order that they don’t should be modified on cellular.
The best way to calculate values in percentages
You may 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 probably be a calculation method:
- 23*100/300 = 7.67%—this worth is written within the width of block 1-2.
The next method will probably be used for top:
- 90*100/450 = 20%—this worth is written within the top of block 1-2.
The values “left” and “prime” will be instantly set as a share or transformed from pixels utilizing the identical method—for left or proper, relative to the width of the container, and for prime or backside, relative to the peak of the container.
Thus, it’s good to 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” choice.
<model>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat prime middle;
background-size: include;
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 .energetic .circle {
background: blue;
}
.dot-html .quantity {
show: block;
place: absolute;
proper: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
top: 100%;
place: absolute;
prime: 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;
prime: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-html .dot-1 {
prime: -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);
prime: 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);
prime: 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);
prime: 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);
prime: 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;
prime: 38.17%;
proper: auto;
left: 20.80%;
remodel: rotate(4deg);
}
.dot-html .dot-7 {
prime: -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);
prime: 16.33%;
proper: auto;
left: 29.00%;
}
.dot-html .dot-8 {
prime: -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);
prime: 0.5%;
proper: auto;
left: 49.75%;
}
.dot-html .dot-9 {
prime: -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 screen 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;
}
</model>
<div class="dot-html">
<enter id="input-dot-1" title="input-dot-1" sort="radio" model="show:none">
<enter id="input-dot-2" title="input-dot-2" sort="radio" model="show:none">
<enter id="input-dot-3" title="input-dot-3" sort="radio" model="show:none">
<enter id="input-dot-4" title="input-dot-4" sort="radio" model="show:none">
<enter id="input-dot-5" title="input-dot-5" sort="radio" model="show:none">
<enter id="input-dot-6" title="input-dot-6" sort="radio" model="show:none">
<enter id="input-dot-7" title="input-dot-7" sort="radio" model="show:none">
<enter id="input-dot-8" title="input-dot-8" sort="radio" model="show:none">
<enter id="input-dot-9" title="input-dot-9" sort="radio" model="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 model="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 a substitute 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.
Essential observe: The variety of inputs corresponds to the variety of dots within the picture.
Understanding types
Kinds assist us regulate how sport components are displayed. Here’s what the types for displaying strains between dots appear like:
If the recipient clicks on dots 8 and 9, we present phase 8-9, if on dots 7 and eight, we present phase 7-8, and so forth. For example, we record all of the dots that exist in our sport.
The next types paint the dots blue when hovered over and within the energetic state, and the types beneath them return the dot to its authentic (black) colour if the phase to which it belongs is already displayed.
Final however not least, the types accountable for displaying the block with the message after all of the dots have been coloured:
Fallback model
For e-mail shoppers that don’t help HTML5 and CSS3, it’s good to create an extra block with code. It’ll have a format much 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 </model> tag and <div class=”dot-html”>:
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" model="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 model="show: block;" width="258" top="450"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" model="mso-hide:all;show:none;">
Moreover 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 internet model, as proven beneath.
Essential observe: You may learn extra about e-mail internet variations and learn how to get them in our particular article.
Understanding types
To outline how the fallback model seems to be, we additionally want so as to add types. Add this piece of code contained in the model tag (it could be simpler to stick it earlier than the closing tag </model>):
/* --- */
@media display screen 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 screen 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” model=”show:none !essential;mso-hide:all;” checked>
<!–<![endif]–>
This enter is required to indicate or disguise the fallback model through types. We wrapped it within the feedback <!–[if !mso]><!–> … <!–<![endif]–> to verify it’s hidden within the Outlook Desktop shopper.
In the meantime, <div id=”fallback” class=”fallback”></div> is a block containing your 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 may create your individual 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 types beneath are accountable for hiding and displaying the fallback model. Should you take away them or remark them out, the fallback model will probably be seen, and you’ll alter its design to the specified kind. Don’t overlook to return these types earlier than sending the e-mail.
These types don’t have clear guidelines for every e-mail shopper, however there are a set of hacks that can be utilized to regulate the show:
- types that begin with [owa] are used for Outlook;
- the [class~=”x_container”] types are wanted for Outlook In case [owa] doesn’t work;
- physique[data-outlook-cycle] types wanted for Outlook on iOS and Android cellular units;
- mso-hide:all; is used for Outlook.com.
The total 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:
<model>
.dot-html .dot-container {
background: url(https://zlnfb.stripocdn.e-mail/content material/guids/CABINET_c102d17d796d323a0ee84181252016915f4177c79c86a55019b0dccf636e6f33/photos/bg.png) no-repeat prime middle;
background-size: include;
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 .energetic .circle {
background: blue;
}
.dot-html .quantity {
show: block;
place: absolute;
proper: -10px;
}
.dot-html .line {
background: #000;
width: 3px;
top: 100%;
place: absolute;
prime: 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;
prime: 1.67%;
proper: 17.75%;
remodel: rotate(-23deg);
}
.dot-html .dot-1 {
prime: -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);
prime: 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);
prime: 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);
prime: 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);
prime: 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;
prime: 38.17%;
proper: auto;
left: 20.80%;
remodel: rotate(4deg);
}
.dot-html .dot-7 {
prime: -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);
prime: 16.33%;
proper: auto;
left: 29.00%;
}
.dot-html .dot-8 {
prime: -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);
prime: 0.5%;
proper: auto;
left: 49.75%;
}
.dot-html .dot-9 {
prime: -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 screen 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 screen 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 screen and (max-width: 600px) {
physique[data-outlook-cycle] #fallback {
show: block !essential;
}
physique[data-outlook-cycle] .container {
show: none !essential;
}
}
</model>
<!--[if !mso]><!--><enter sort="checkbox" id="fallback_ctrl" class="fallback_ctrl" model="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 model="show: block;" width="258" top="450"></a></td>
</tr>
</tbody>
</desk>
</div><!-- /FALLBACK -->
<!--[if !mso]><!-->
<!-- INTERACTIVE ELEMENT -->
<div class="container" model="mso-hide:all;show:none;">
<div class="dot-html"><enter id="input-dot-1" title="input-dot-1" sort="radio" model="show:none"><enter id="input-dot-2" title="input-dot-2" sort="radio" model="show:none"><enter id="input-dot-3" title="input-dot-3" sort="radio" model="show:none"><enter id="input-dot-4" title="input-dot-4" sort="radio" model="show:none"><enter id="input-dot-5" title="input-dot-5" sort="radio" model="show:none"><enter id="input-dot-6" title="input-dot-6" sort="radio" model="show:none"><enter id="input-dot-7" title="input-dot-7" sort="radio" model="show:none"><enter id="input-dot-8" title="input-dot-8" sort="radio" model="show:none"><enter id="input-dot-9" title="input-dot-9" sort="radio" model="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 model="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, examine 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 attraction is that you’re restricted solely by your creativeness of what sort of drawing you’ll be able to give you. The complexity and engagement of the sport relies upon solely on how a lot you wish to make it that manner, creating completely different variations of “Dot to Dot” video games.
We hope that this information will grow to be dependable help for upgrading your emails with interactivity and new mechanics.
Create distinctive emails with Stripo
/cdn.vox-cdn.com/uploads/chorus_asset/file/24992630/236828_Pixel_Watch_2_AKrales_0830.jpg "You’ll be able to slap a Pixel Watch 2 in your wrist for simply 4 proper now"){kind=tracking}