Skip to content

Instantly share code, notes, and snippets.

@gustavopaes

gustavopaes/amp-story-issue.html

Created April 2, 2018 16:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gustavopaes/daafd940adad053340a4472d2aa4ed24 to your computer and use it in GitHub Desktop.
Save gustavopaes/daafd940adad053340a4472d2aa4ed24 to your computer and use it in GitHub Desktop.
Download ZIP
amp-story-issue.html
Raw
amp-story-issue.html
<!doctype html>
<html amp lang="pt">
<head>
<title>UOL Copa do Mundo 2018</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<link rel="shortcut icon" href="https://conteudo.imguol.com.br/favicon.ico" type="image/x-icon">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<script custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js" async></script>
<script custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" async></script>
<script custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js" async></script>
<script custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js" async></script>
<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js" async></script>
<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>
</head>
<body>
<amp-story standalone bookend-config-src="https://copadomundo.uol.com.br/2018/amp-stories/as-copas-que-escaparam/bookend.json">
<amp-story-page id="page1">
<amp-story-grid-layer template="fill">
<amp-video autoplay loop width="720" height="1280" layout="responsive"
poster="https://conteudo.imguol.com.br/c/webmasters/gifs/5c/2018/03/28/gif-de-story-05-1522271713049_g2_768x1024.jpg">
<source src="https://conteudo.imguol.com.br/c/webmasters/gifs/5c/2018/03/28/gif-de-story-05-1522271713049_g2_768x1024.mp4" type="video/mp4">
<source src="https://conteudo.imguol.com.br/c/webmasters/gifs/5c/2018/03/28/gif-de-story-05-1522271713049_g2_768x1024.webm" type="video/webm">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="grid-row-half gradient-layer">
<div class="cover-area grid-second valign-bottom halign-center"
animate-in="fly-in-bottom" animate-in-delay="0.2s">
<p class="description" animate-in="fade-in" animate-in-delay="0.5s">
Lorem ipsum
</p>
</div>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment