Skip to content

Commit

Permalink
rtl bubble
Browse files Browse the repository at this point in the history
  • Loading branch information
Gyula Németh committed Sep 30, 2022
1 parent af6bd8e commit cf84e78
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 13 deletions.
Binary file added assets/bubble2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 27 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,20 @@
background-repeat: no-repeat;
}

.bubble2 {
height: 222px;
margin: 10px;
padding: 15px 33px;
color: #333333;
text-align: left;
border-radius: 20px;
font-weight: bold;

background-image: url('assets/bubble2.png');
background-size: 100%;
background-repeat: no-repeat;
}

.instruction {
font-weight: bold;
text-align: center;
Expand Down Expand Up @@ -473,7 +487,7 @@ <h1>A new hero is coming to town!</h1>

<input id="reset" type="reset" value="reset" />

<p class="selector instruction">Find the pairs!</p>
<p class="selector instruction">FIND THE PAIRS!</p>
<p class="found-1 instruction">That's a good one! Click anywhere!</p>
<p class="found-2 instruction">Whohoo, nice! Click to continue.</p>
<p class="found-3 instruction">You ROCK! Now, click!</p>
Expand Down Expand Up @@ -554,11 +568,11 @@ <h1>A new hero is coming to town!</h1>
</table>
</label>
<label class="reset-1" for="reset">
<p class="bubble" style="padding-top: 22px; padding-bottom: 8px;">EMAIL HERO CAN HELP YOU BUILD NEWSLETTERS FROM A MODULAR DESIGN SYSTEM IN A BLINK OF AN EYE AND APPLY CHANGES IN BULK OVER THOUSANDS OF TEMPLATES WITHIN THE SNAP OF A FINGER.</p>
<p class="bubble2" style="padding-top: 22px; padding-bottom: 8px;">EMAIL HERO CAN HELP YOU BUILD NEWSLETTERS FROM A MODULAR DESIGN SYSTEM IN A BLINK OF AN EYE AND APPLY CHANGES IN BULK OVER THOUSANDS OF TEMPLATES WITHIN THE SNAP OF A FINGER.</p>

<img width="150" valign="top" src="./assets/hero-1.png" />
<img width="150"src="./assets/card-design-system.png"/>
<div class="button">Continue</div>
<img width="150" valign="top" src="./assets/hero-1.png" />
<div class="button">CONTINUE</div>
</label>

<label class="found-2 m" for="found-2">
Expand Down Expand Up @@ -586,11 +600,11 @@ <h1>A new hero is coming to town!</h1>
</table>
</label>
<label class="reset-2" for="reset">
<p class="bubble" style="padding-top: 32px; padding-bottom: 0px;">IF YOU RELY ON EMAIL HERO, HUMAN ERRORS ARE ALMOST IMPOSSIBLE. EMAIL HERO'S BRAIN IS WIRED TO PREVENT EMAIL HTML ERRORS, SO BAD LOOKING NEWSLETTERS ARE THE PAST.</p>
<p class="bubble2" style="padding-top: 32px; padding-bottom: 0px;">IF YOU RELY ON EMAIL HERO, HUMAN ERRORS ARE ALMOST IMPOSSIBLE. EMAIL HERO'S BRAIN IS WIRED TO PREVENT EMAIL HTML ERRORS, SO BAD LOOKING NEWSLETTERS ARE THE PAST.</p>

<img width="150" valign="top" src="./assets/hero-2.png" />
<img width="150" valign="top" src="./assets/card-human-risk.png"/>
<div class="button">Continue</div>
<img width="150" valign="top" src="./assets/hero-2.png" />
<div class="button">CONTINUE</div>
</label>


Expand Down Expand Up @@ -623,7 +637,7 @@ <h1>A new hero is coming to town!</h1>

<img width="150" valign="top" src="./assets/hero-3.png" />
<img width="150" valign="top" src="./assets/card-cloud.png"/>
<div class="button">Continue</div>
<div class="button">CONTINUE</div>
</label>

<label class="found-4 m" for="found-4">
Expand Down Expand Up @@ -655,7 +669,7 @@ <h1>A new hero is coming to town!</h1>

<img width="150" valign="top" src="./assets/hero-4.png" />
<img width="150" valign="top" src="./assets/card-ads.png"/>
<div class="button">Continue</div>
<div class="button">CONTINUE</div>
</label>


Expand Down Expand Up @@ -684,10 +698,10 @@ <h1>A new hero is coming to town!</h1>
</table>
</label>
<label class="reset-5" for="reset">
<p class="bubble" style="padding-top: 34px; padding-bottom: 0;">EMAIL HERO LEARNED TO BLEND AMONG US. THEY GOT USED TO ENTERPRISES. KNOWS ISO ROUTINES AND CAN AUTHENTICATE SAML SSO, WITHOUT WEARING THE GLASSES.</p>
<img width="150" valign="top" src="./assets/hero-5.png" />
<p class="bubble2" style="padding-top: 34px; padding-bottom: 0;">EMAIL HERO LEARNED TO BLEND AMONG US. THEY GOT USED TO ENTERPRISES. KNOWS ISO ROUTINES AND CAN AUTHENTICATE SAML SSO, WITHOUT WEARING THE GLASSES.</p>
<img width="150" valign="top" src="./assets/card-enterprise.png"/>
<div class="button">Continue</div>
<img width="150" valign="top" src="./assets/hero-5.png" />
<div class="button">CONTINUE</div>
</label>

<label class="found-6 m" for="found-6">
Expand Down Expand Up @@ -719,7 +733,7 @@ <h1>A new hero is coming to town!</h1>

<img width="150" valign="top" src="./assets/hero-6.png" />
<img width="150" valign="top" src="./assets/card-news.png"/>
<div class="button">Continue</div>
<div class="button">CONTINUE</div>
</label>

<div id="win">
Expand Down

0 comments on commit cf84e78

Please sign in to comment.