A CodePen by ganshoot.

A-Pen-by-ganshoot.markdown

A Pen by ganshoot

A Pen by ganshoot on CodePen.

License.

index.html

<div class="bubble">
  <p class="bubble__description">
        <span class="bubble__description__leadtext shadow">NEED A BREAK?</span>
        <span class="bubble__description__subtext shadow">BOOK EARLY AND SAVE UP TO </span>
        <span class="bubble__description__percentage shadow">25%</span>
        <span class="bubble__description__subtext shadow">FOR HOTELS IN MALAYSIA & BALI </span>

  </p>
    </div>
  <!-- <div class="marketing-feature-control marketing-feature-control--next js-feature-control js-feature-next" data-direction="next">
        <div class="marketing-feature-control__circle js-feature-control-circle" style=""></div>
        <div class="marketing-feature-control__inner marketing-feature-control__inner--next js-feature-control-arrow" style="opacity: 1;">
          next
        </div>
      </div> -->

style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}

body {
line-height:1
}



/*ol,ul {
list-style:none
}

blockquote,q {
quotes:none
}

blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}

table {
border-collapse:collapse;
border-spacing:0
}

button {
width:auto;
border:none;
background:none;
text-align:inherit
}

.marketing-feature-brief__graphic__inner,.marketing-feature-control__inner,.marketing-pricing-stripe__logo,.desktime-logo,.nav-toggle,.social-bubble,.nav-map__search__submit {
text-indent:-9999em
}

.marketing-feature-nav,.marketing-ipad,.nav-account,.nav-account__dropdown__desktime-links,.nav-map,.member,.l-marketing-feature-briefs,.l-marketing-feature__frame,.l-marketing-intro-header,.l-marketing-signup__main,.l-app-header,.l-app-footer {
*zoom:1
}

.marketing-feature-nav:before,.marketing-ipad:before,.nav-account:before,.nav-account__dropdown__desktime-links:before,.nav-map:before,.member:before,.l-marketing-feature-briefs:before,.l-marketing-feature__frame:before,.l-marketing-intro-header:before,.l-marketing-signup__main:before,.l-app-header:before,.l-app-footer:before,.marketing-feature-nav:after,.marketing-ipad:after,.nav-account:after,.nav-account__dropdown__desktime-links:after,.nav-map:after,.member:after,.l-marketing-feature-briefs:after,.l-marketing-feature__frame:after,.l-marketing-intro-header:after,.l-marketing-signup__main:after,.l-app-header:after,.l-app-footer:after {
content:"";
display:table
}

.marketing-feature-nav:after,.marketing-ipad:after,.nav-account:after,.nav-account__dropdown__desktime-links:after,.nav-map:after,.member:after,.l-marketing-feature-briefs:after,.l-marketing-feature__frame:after,.l-marketing-intro-header:after,.l-marketing-signup__main:after,.l-app-header:after,.l-app-footer:after {
clear:both
}*/

* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}

body,.bubble__description__percentage,.bubble__description__subtext,{
font-style:normal;
font-weight:400
}

html {
font-size:62.5%
}

body {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#333;
font-size:13px;
font-size:1.3rem;
line-height:1.6
}

::-moz-selection {
background:#b3d4fc;
color:#fff;
text-shadow:none
}

::selection {
background:#b3d4fc;
color:#fff;
text-shadow:none
}

.is-not-displayed {
display:none
}

.is-visually-hidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px
}


.marketing-audience-intro--directory {
background-color:rgba(0,200,215,0.88)

}
/*
.marketing-button-large {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#00c8d7;
font-size:18px;
font-size:1.8rem;
line-height:1.2;
-webkit-font-smoothing:antialiased;
display:block;
width:10.278em;
background-color:#fff;
text-align:center;
line-height:2.556em;
border:2px solid #fff;
-webkit-transition:.2s;
-moz-transition:.2s;
transition:.2s
}

.marketing-button-large:hover {
background-color:transparent;
color:#fff
}

.marketing-button-large:active {
border-color:rgba(31,50,63,0.5);
color:rgba(31,50,63,0.8)
}

.marketing-button-large--outlined {
background-color:transparent;
color:#fff
}

.marketing-button-large--outlined:hover {
background-color:#fff;
color:#78848b
}

.marketing-desktop {
width:498px;
height:282px
}

.marketing-desktop__slide {
width:498px;
height:282px;
position:relative!important
}

.marketing-desktop__slide__browser {
position:absolute;
box-shadow:0 2px 12px rgba(31,50,63,0.12)
}

.marketing-desktop__slide__browser--01 {
-webkit-transform-origin:150% 100%;
-moz-transform-origin:150% 100%;
-ms-transform-origin:150% 100%;
-o-transform-origin:150% 100%;
transform-origin:150% 100%;
top:61px;
left:82px;
width:130px;
height:111px;
opacity:.85
}

.marketing-desktop__slide__browser--02 {
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
top:108px;
left:162px;
width:172px;
height:142px
}

.marketing-desktop__slide__browser--03 {
-webkit-transform-origin:0 80%;
-moz-transform-origin:0 80%;
-ms-transform-origin:0 80%;
-o-transform-origin:0 80%;
transform-origin:0 80%;
top:32px;
left:230px;
width:198px;
height:194px;
opacity:.8
}

.marketing-desktop__slide__browser--screenshot {
top:50%;
left:50%;
margin-top:-116px;
margin-left:-157px;
width:315px;
height:232px
}

.marketing-desktop__slide__browser--screenshot figure {
margin:28px 1px 0;
width:100%
}

.marketing-desktop__slide__browser--screenshot img {
max-width:100%
}

.marketing-directory-reticles {
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
background-position:center center;
background-size:contain
}

.marketing-directory-reticles__them,.marketing-directory-reticles__you {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
font-size:1.3rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
position:absolute;
right:0;
left:0;
margin:0 auto;
max-width:61.1em;
text-align:center
}

.marketing-directory-reticles__them {
color:#00c8d7;
top:-2.5em;
text-align:left
}*/
/*
.marketing-directory-reticles__you {
color:#0ad1b3;
bottom:-2.5em;
text-align:right
}

@media screen and (max-width: 52em) {
.marketing-directory-reticles__them,.marketing-directory-reticles__you {
left:-.5em;
right:-.5em
}

.marketing-directory-reticles__them {
top:0
}

.marketing-directory-reticles__you {
bottom:0
}
}

.marketing-feature-brief {
position:relative;
padding:7em 0;
padding-left:10.615em
}

.marketing-feature-brief__graphic {
background:-webkit-linear-gradient(top,#1f323f,rgba(31,50,63,0.2));
background:linear-gradient(to bottom,#1f323f,rgba(31,50,63,0.2));
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-ms-transform:translateY(0);
-o-transform:translateY(0);
transform:translateY(0);
position:absolute;
z-index:200;
top:5.8em;
left:-1.2em;
width:132px;
height:132px
}

.marketing-feature-brief__graphic:after {
position:absolute;
top:0;
left:0;
display:block;
width:132px;
height:132px;
content:""
}

.marketing-feature-brief__graphic__inner {
-webkit-transition:.2s;
-moz-transition:.2s;
transition:.2s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
width:132px;
height:132px;
display:block
}

.marketing-feature-brief__graphic__inner:active {
opacity:.7
}

.marketing-feature-brief__graphic:hover .marketing-feature-brief__graphic__inner {
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-transform:scale(0.85,0.85);
-moz-transform:scale(0.85,0.85);
-ms-transform:scale(0.85,0.85);
-o-transform:scale(0.85,0.85);
transform:scale(0.85,0.85);
opacity:.7
}

.marketing-feature-brief__heading {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#00c8d7;
font-size:18px;
font-size:1.8rem;
line-height:1.2;
-webkit-font-smoothing:antialiased;
margin-bottom:.833em
}

.marketing-feature-brief__heading a:hover {
opacity:.6
}

.marketing-feature-brief__heading a:active {
color:#8f989f
}

.marketing-feature-brief__description {
font-family:"Adelle W01 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.3;
-webkit-font-smoothing:antialiased;
font-size:14px;
font-size:1.4rem;
line-height:1.5;
color:#78848b
}

@media screen and (max-width: 52em) {
.marketing-feature-brief {
position:relative;
padding:5em 1em
}

.marketing-feature-brief__graphic {
position:relative;
top:auto;
left:auto;
display:block;
margin:0 auto;
margin-bottom:1.6em
}
}*/
/*
.marketing-feature-bubble {
position:relative;
width:25em;
height:25em;
border-radius:200em;
background-color:#fff;
z-index:500
}

.marketing-feature-bubble:before {
display:inline-block;
margin-right:-4px;
width:1%;
height:100%;
content:"";
vertical-align:middle
}

.marketing-feature-bubble__contents {
vertical-align:middle;
display:inline-block;
width:99%;
margin-right:-4px
}

.marketing-feature-bubble__contents__heading {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#00c8d7;
font-size:18px;
font-size:1.8rem;
line-height:1.2;
-webkit-font-smoothing:antialiased;
position:relative;
margin-top:-.7em;
margin-bottom:1.222em;
padding:0 2em;
padding-bottom:1.222em;
text-align:center
}

.marketing-feature-bubble__contents__heading:after {
position:absolute;
right:7.2em;
bottom:0;
left:7.2em;
display:block;
border-bottom:1px solid #00c8d7;
content:""
}

.marketing-feature-bubble__contents__description {
font-family:"Adelle W01 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.3;
-webkit-font-smoothing:antialiased;
font-size:13px;
font-size:1.3rem;
line-height:1.7;
color:#40505b;
padding-right:2.5em;
padding-left:3.8em;
text-align:left
}

.marketing-feature-bubble__contents__description a {
color:#00c8d7;
text-decoration:none;
background-position:right center;
padding-right:19px;
padding-left:2px
}

.marketing-feature-bubble__contents__description a:hover {
text-decoration:underline
}

.marketing-feature-bubble .marketing-feature-control {
position:absolute;
top:45%
}

.marketing-feature-bubble .marketing-feature-control--prev {
left:-22px
}

.marketing-feature-bubble .marketing-feature-control--next {
right:-22px
}

.marketing-feature-bubble--dark {
background-color:#1f323f
}

.marketing-feature-bubble--dark .marketing-feature-bubble__contents__description {
color:#fff
}

.marketing-feature-bubble--big {
width:350px;
height:350px
}

.marketing-feature-bubble--big .marketing-feature-bubble__contents {
width:99%
}

.marketing-feature-bubble--big .marketing-feature-bubble__contents__description {
padding-right:4em;
padding-left:4em
}

@media screen and (max-width: 40em) {
.marketing-feature-bubble .marketing-feature-control {
display:none!important
}
}

.marketing-feature-control {
width:40px;
height:40px;
cursor:pointer
}

.no-js .marketing-feature-control {
display:none!important
}

.marketing-feature-control__circle {
background-color:#00c8d7;
border-radius:20em;
width:40px;
height:40px;
position:absolute
}

.marketing-feature-control__inner {
width:40px;
height:40px;
background-position:center center;
position:absolute
}

.marketing-feature-control__circle,.marketing-feature-control__inner {
-webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);
-webkit-transition:.2s cubic-bezier(0.25,0.46,0.45,0.94);
-moz-transition:.2s cubic-bezier(0.25,0.46,0.45,0.94);
transition:.2s cubic-bezier(0.25,0.46,0.45,0.94);
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden
}

.marketing-feature-control:hover .marketing-feature-control__circle {
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
background-color:#40505b
}

.marketing-feature-control:hover .marketing-feature-control__inner {
-webkit-transform:scale(0.8,0.8);
-moz-transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8);
-o-transform:scale(0.8,0.8);
transform:scale(0.8,0.8)
}

.marketing-feature-control:active .marketing-feature-control__circle {
background-color:#1f323f
}

.marketing-feature-control:active .marketing-feature-control__inner {
-webkit-transform:scale(0.6,0.6);
-moz-transform:scale(0.6,0.6);
-ms-transform:scale(0.6,0.6);
-o-transform:scale(0.6,0.6);
transform:scale(0.6,0.6)
}

.marketing-feature-control.is-disabled {
display:none
}

.marketing-feature-heading {
font-family:"Adelle W01 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:18px;
font-size:1.8rem;
line-height:1.3;
-webkit-font-smoothing:antialiased;
font-size:23px;
font-size:2.3rem;
line-height:1.4;
display:inline-block;
padding-bottom:.3em;
border-bottom:1px solid #a5adb2;
color:#626f78
}

.marketing-feature-heading--white {
color:#fff;
border-bottom-color:#fff
}

.marketing-feature-heading--large {
font-size:26px;
font-size:2.6rem;
line-height:1.3
}

@media screen and (max-width: 40em) {
.marketing-feature-heading {
font-size:20px;
font-size:2rem;
line-height:1.3
}
}

.marketing-feature-nav__item {
position:relative;
display:block;
float:left;
clear:left;
padding:.4em 0;
padding-left:28px;
background-position:left center;
color:#fff;
text-decoration:none
}

.marketing-feature-nav__item__inner {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
display:block;
min-width:5.7em;
padding:0 11px;
border:1px solid transparent;
border-radius:10em;
line-height:27px
}

.marketing-feature-nav--dark .marketing-feature-nav__item {
color:#00c8d7
}

@media screen and (max-width: 52em) {
.marketing-feature-nav {
display:none
}
}

.marketing-feature-nav__item:hover .marketing-feature-nav__item__inner {
background-color:rgba(255,255,255,0.15)
}

.marketing-feature-nav__item:active .marketing-feature-nav__item__inner {
background-color:rgba(31,50,63,0.1)!important
}

.marketing-feature-nav__item.is-current:before {
position:absolute;
top:19px;
left:18px;
display:block;
width:10px;
height:1px;
background-color:#fff;
content:""
}

.marketing-feature-nav__item.is-current .marketing-feature-nav__item__inner {
border-color:#fff
}

.marketing-feature-nav--dark .marketing-feature-nav__item:hover .marketing-feature-nav__item__inner {
background-color:#fff
}

.marketing-feature-nav--dark .marketing-feature-nav__item.is-current:before {
background-color:#00c8d7
}

.marketing-feature-nav--dark .marketing-feature-nav__item.is-current .marketing-feature-nav__item__inner {
border-color:#00c8d7
}

.marketing-heading-strong {
font-family:"NHaasGroteskDSW01-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#40505b;
font-size:24px;
font-size:2.4rem;
line-height:1.1;
-webkit-font-smoothing:antialiased;
color:#00c8d7
}

.marketing-ipad {
position:relative
}

.marketing-ipad__contents {
top:13.49%;
right:15.1%;
bottom:13.7%;
left:15.1%;
position:absolute;
overflow:hidden;
background-color:#fff
}

.marketing-ipad__contents .flex-viewport img {
max-width:100%
}

.marketing-ipad__chrome {
width:593px;
position:relative
}

@media screen and (max-width: 52em) {
.marketing-ipad__chrome {
width:510px
}
}*/
.price {
margin: 0 auto;
padding: 1.5em 3em 0;
width: 100%;
height: 385px;
max-width: 385px;
border-radius: 100em;
background-color: rgba(231, 25, 41, 0.92);
text-align: center;
border: 12px solid #fff;

}
/*bubble red*/
.bubble {
margin:0 auto;
padding:1.0em 3em 0;
width:100%;
height:385px;
max-width:385px;
border-radius:100em;
background-color: rgba(231, 25, 41, 0.92);
text-align:center;
border:12px solid #fff
}

.bubble:before {
display:inline-block;
width:1%;
height:100%;
content:"";
vertical-align:middle
}

.bubble__description {
display:inline-block;
width:96%;
vertical-align:middle;
color:#fff
}

.bubble__description__leadtext {
/*font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;*/
font-family: "Helvetica",Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.4;
-webkit-font-smoothing:antialiased;
font-size:28px;
font-size:2.8rem;
line-height:12px;
display:block;
font-weight: 900;
margin-bottom:16px;
padding-left:.2em
}

.bubble__description__percentage {
font-family:"arial-black","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
font-size:96px;
font-size:9.6rem;
line-height:1.12;
display:block;
margin-bottom:10px;
padding-left:.2em
}

.bubble__description__subtext {
font-family: "Helvetica Neue",Arial,sans-serif;
font-size: 18px;
font-size: 1.8rem;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
font-size: 1px;
font-size: 1.4rem;
line-height: 1.6;
}


.shadow {
text-shadow: horizontal-offset vertical-offset blur color;
text-shadow: 1px 3px 2px rgba(0,0,0,0.5);
}

/*
@media screen and (max-width: 40em) {
.bubble {
height:270px;
max-width:270px;
padding-top:1em
}

.bubble__description__percentage {
font-size:62px;
font-size:6.2rem;
line-height:auto;
margin-bottom:16px
}

.bubble__description__subtext {
font-family:"NHaasGroteskTXW01-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
font-size:1.3rem;
line-height:1.4;
-webkit-font-smoothing:antialiased

}

.marketing-pricing-explanation {
font-family:"NHaasGroteskTXW01-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:12px;
font-size:1.2rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
color:#8f989f;
line-height:1.7
}

.marketing-pricing-explanation strong {
font-family:"NHaasGroteskDSW01-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#40505b;
font-size:16px;
font-size:1.6rem;
line-height:1.2;
-webkit-font-smoothing:antialiased;
font-size:14px;
font-size:1.4rem;
line-height:auto;
color:#606a70
}

.marketing-pricing-explanation--left {
text-align:right
}

.marketing-pricing-explanation--right {
text-align:left
}

.marketing-pricing-stripe {
width:100%;
max-width:69em;
margin:0 auto
}

.marketing-pricing-stripe p {
font-family:"Trade Gothic W01 Roman","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
font-size:1.4rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
line-height:1.6;
color:#78848b;
display:inline-block
}

.marketing-pricing-stripe p a {
color:inherit
}

.marketing-pricing-stripe__logo {
position:relative;
top:-5px;
display:inline-block;
margin-right:.8em;
width:63px;
height:26px
}

.marketing-signup-form {
background-color:#edeeef
}

.marketing-signup-form__inputset {
padding:9px 18px;
padding-right:10px;
border-radius:4px;
background-color:#fff;
margin-bottom:1.8em
}

.marketing-signup-form__inputset label {
font-family:"NHaasGroteskDSW01-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#40505b;
font-size:16px;
font-size:1.6rem;
line-height:1.2;
-webkit-font-smoothing:antialiased;
font-size:15px;
font-size:1.5rem;
line-height:auto;
display:inline-block;
width:33%;
max-width:7em;
color:#00c8d7
}

}
*/