2018-03-29 21:25:55 +00:00
|
|
|
<script src="{{ site.url }}/vendor/native.js"></script>
|
|
|
|
<script>
|
2018-03-29 21:41:06 +00:00
|
|
|
_native.init("CVAIKK3E", {
|
2018-03-29 21:25:55 +00:00
|
|
|
targetClass: 'native-js',
|
|
|
|
fallback: `<a href="https://jgthms.com/css-in-44-minutes-ebook" class="native-flex" target="_blank">
|
|
|
|
<style>
|
|
|
|
.native-js {
|
2018-03-29 21:30:43 +00:00
|
|
|
background: linear-gradient(-30deg, #4f38a4, #a244bc 45%, #4f38a4 45%) #4f38a4;
|
2018-03-29 21:25:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.native-details {
|
|
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-details:hover {
|
|
|
|
color: #FFFFFF !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-cta {
|
|
|
|
color: #FFFFFF;
|
2018-03-29 21:30:43 +00:00
|
|
|
background-color: #3bb76d;
|
2018-03-29 21:25:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.native-cta:hover {
|
|
|
|
color: #native_cta_color_hover;
|
2018-03-29 21:30:43 +00:00
|
|
|
background-color: #3bb76d;
|
2018-03-29 21:25:55 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="native-main">
|
|
|
|
<img class="native-img" src="/images/fortyfour-native.png">
|
|
|
|
<div class="native-details">
|
|
|
|
<span class="native-company">CSS in 44 minutes</span>
|
|
|
|
<span class="native-desc">Learn how to build your own webpage from scratch!</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span class="native-cta">Buy the book</span>
|
|
|
|
</a>`
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="native-js">
|
|
|
|
<a href="#native_link#" class="native-flex">
|
|
|
|
<style>
|
|
|
|
.native-js {
|
|
|
|
background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-details {
|
|
|
|
color: #native_color# !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-details:hover {
|
|
|
|
color: #native_color_hover# !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-cta {
|
|
|
|
color: #native_cta_color#;
|
|
|
|
background-color: #native_cta_bg_color#;
|
|
|
|
}
|
|
|
|
|
|
|
|
.native-cta:hover {
|
2018-04-10 22:10:59 +00:00
|
|
|
color: #native_cta_color_hover#;
|
2018-03-29 21:25:55 +00:00
|
|
|
background-color: #native_cta_bg_color_hover#;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="native-main">
|
|
|
|
<img class="native-img" src="#native_logo#">
|
|
|
|
<div class="native-details">
|
|
|
|
<span class="native-company">#native_company#</span>
|
|
|
|
<span class="native-desc">#native_desc#</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-04-10 22:10:59 +00:00
|
|
|
<span class="button is-medium native-cta">#native_cta#</span>
|
2018-03-29 21:25:55 +00:00
|
|
|
</a>
|
|
|
|
</div>
|