e74916ebab13cecf420353a9a59ffe80424f48cf45d47a579906b2457ad7e23b
Source Code:
<!DOCTYPE html>
<html amp>
<head><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300" rel="stylesheet" type="text/css">
<style amp-custom>#branch-sdk{position:fixed;bottom:0;left:0;right:0;}
body {
margin: 0;
word-wrap: break-word;
font-family: "Open Sans", Helvetica, serif;
}
/* ============ Portrait ============ */
.main-image {
width: 100%;
height: 250px;
height: 75vw;
background-size: cover;
background-position: top center;
}
#content-container {
box-sizing: border-box;
padding: 24px;
margin: 0 24px;
background-color: #fff;
}
.app-title {
font-size: 14px;
padding-bottom: 11px;
text-transform: uppercase;
}
.card-title {
font-size: 33px;
line-height: 36px;
}
.app-content {
padding-top: 10px;
padding-bottom: 100px;
font-size: 20px;
}
.input-wrapper {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 110px;
background-color: #fff;
box-shadow: 0px -20px 20px -8px rgba(255,255,255,1);
}
.input-container {
width: 100%;
padding: 0 24px;
text-align: center;
box-sizing: border-box;
}
.form-get-the-app {
display: -webkit-box;
display: flex;
text-align: center;
padding-top: 10px;
border-top: 2px solid #cecece;
min-height: 300px;
}
.input-label {
padding: 4px 10px;
font-size: 13px;
overflow: hidden;
word-wrap: break-word;
text-align: center;
}
.app-icon {
width: 62px;
height: 62px;
line-height: 62px;
background-size: 100% auto;
}
.cta-button {
-webkit-box-flex: 1;
flex-grow: 1;
height: 62px;
line-height: 62px;
background-color: #444;
border-radius: 2px;
font-size: 20px;
padding: 0 20px;
margin-left: 10px;
color: #fff;
text-align: center;
text-decoration: none;
display: block;
}
/* No data (portrait) */
@media only screen and (orientation: portrait) {
.card--no-data .main-image {
background-image: url("http://s3-us-west-1.amazonaws.com/branch-assets/b_stripes-small.png");
background-size: auto;
background-position: top center;
background-repeat: repeat;
height: 190px;
}
.card--no-data > .app-icon {
position: absolute;
top: 160px;
left: 34px;
}
.card--no-data #content-container {
margin-top: 20px;
}
}
@media screen /* >= iPhone 5 */
and (min-device-width: 321px) {
.input-label {
font-size: 14px;
}
}
@media only screen /* >= iPhone 6 */
and (min-device-width: 375px)
and (orientation: portrait) {
.main-image {
height: 300px;
height: 80vw;
}
.app-content {
padding-bottom: 120px;
}
.input-wrapper {
height: 115px;
}
}
@media only screen /* >= iPhone 6+ */
and (min-device-width: 414px)
and (orientation: portrait) {
.main-image {
height: 390px;
height: 95vw;
}
}
/* ============ Landscape ============ */
@media only screen and (orientation: landscape){
.main-image {
position: fixed;
height: 100%;
height: 100vh;
width: 50%;
}
.input-wrapper {
right: 0;
left: auto;
width: 50%;
}
#content-container {
float: left;
width: 50%;
margin-left: 50%;
}
.input-wrapper {
height: 108px;
}
.app-content {
padding-bottom: 110px;
}
.form-get-the-app {
padding-top: 8px;
}
.input-container {
left: 50%;
}
.cta-button {
height: 44px;
line-height: 44px;
padding: 0 5px;
margin-left: 50px;
}
.app-icon {
width: 44px;
height: 44px;
}
/* No data (landscape) */
.card--no-data .main-image {
height: 100%;
}
.card--no-data > .app-icon {
display: none;
}
.card--no-data #content-container {
margin-top: 0;
}
}
@media only screen /* >= iPhone 6 */
and (min-device-width: 645px)
and (orientation: landscape) {
.form-get-the-app {
padding-top: 8px;
}
.cta-button {
height: 62px;
line-height: 62px;
padding: 0 20px;
margin-left: 70px;
}
.app-icon {
width: 62px;
height: 62px;
top: -2px;
}
}
/* Reusables */
.text-bold {
font-weight: 700
}
.text-light {
font-weight: 300;
}
.cta-button--no-app-icon {
margin-left: 0;
}
</style>
<meta name="twitter:card" content="summary">
<title>LABAN</title>
<meta property="og:title" content="LABAN">
<meta name="twitter:title" content="LABAN">
<meta property="fb:app_id" content="111411968896241">
<meta property="og:type" content="website">
<meta name="twitter:app:country" content="US">
<script async src="https://cdn.ampproject.org/v0.js"></script><script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script><script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script><script async src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js" custom-template="amp-mustache"></script><link rel="canonical" href="https://tkt78.app.link/BFnvVv9DHcb"></head>
<body>
<div class="card card--no-data center">
<div class="main-image"></div>
<div class="app-icon"> </div>
<div id="content-container">
<div class="app-title text-bold">5</div>
<div class="card-title text-light">LABAN</div>
<div class="app-content text-light"></div>
</div>
<div class="input-wrapper">
<div class="input-container">
<div class="input-label text-light">See this content immediately after install</div>
<div class="form-get-the-app">
<amp-list src="https://tkt78.app.link/BFnvVv9DHcb?__branch_amp_json=1" layout="flex-item">
<template type="amp-mustache" id="cta-template">
<a href="{{action}}" class="cta-button text-light cta-button--no-app-icon cta-button--no-app-icon">
Get The App
</a>
<amp-iframe id="branch-sdk" src="/amp-iframe-redirect?scheme_redirect={{scheme_redirect}}&redirect_strategy={{redirect_strategy}}&app_id=873684226321437346&has_app=false" sandbox="allow-scripts allow-top-navigation" height="11" layout="fixed-height" frameborder="0"></amp-iframe></template>
</amp-list>
</div>
</div>
</div>
</div>
</body>
</html>