Skip to content

Instantly share code, notes, and snippets.

Created January 5, 2016 19:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
amp gallery experiment
<!doctype html>
<html ⚡>
<meta charset="utf-8">
<title>AMP #0</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='' rel='stylesheet' type='text/css'>
<style amp-custom>
body {
font-family: 'Questrial', Arial;
article {
display: block;
max-width: 736px;
margin: 8px;
.bordered {
border: 1px solid black;
.lightbox1 {
background: #222;
.lightbox1-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.lightbox1 amp-img {
max-width: 80%;
max-height: 80%;
width: 100%;
.box1 {
border: 1px solid black;
margin: 8px 0;
.logo {
background: yellow;
border: 5px solid black;
border-radius: 50%;
opacity: 0.7;
position: fixed;
z-index: 1000;
top: 100px;
right: 10px;
width: 40px;
height: 40px;
.goto {
display: block;
margin: 16px;
@font-face {
font-family: 'Comic AMP';
font-style: bold;
font-weight: 700;
src: url(fonts/ComicAMP.ttf) format('truetype');
.comic-amp-font-loaded .comic-amp {
font-family: 'Comic AMP', serif, sans-serif;
.comic-amp-font-loading .comic-amp {
color: #0ff;
.comic-amp-font-missing .comic-amp {
color: #f00;
<script async custom-element="amp-anim" src=""></script>
<script async custom-element="amp-audio" src=""></script>
<script async custom-element="amp-carousel" src=""></script>
<script async custom-element="amp-fit-text" src=""></script>
<script async custom-element="amp-font" src=""></script>
<script async custom-element="amp-iframe" src=""></script>
<script async custom-element="amp-instagram" src=""></script>
<script async custom-element="amp-image-lightbox" src=""></script>
<script async custom-element="amp-lightbox" src=""></script>
<script async custom-element="amp-twitter" src=""></script>
<script async custom-element="amp-youtube" src=""></script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src=""></script>
<script async src="./viewer-integr.js"></script>
<body class="comic-amp-font-loading">
<h1 id="top">AMP #0</h1>
<amp-carousel width=400 height=300 layout=responsive type=slides>
<amp-img src="" layout=fill></amp-img>
<amp-img src="" width=400 height=300 layout=responsive></amp-img>
<amp-img src="" width=400 height=300 layout=responsive></amp-img>
width="400" height="300">
<amp-img placeholder
width="400" height="300"></amp-img>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment