Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create your first AMP email
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
font-family: arial;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
</style>
</head>
<body>
<amp-state id="myState">
<script type="application/json">
{"cats":
[
{
"name": "Aakash",
"description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
},
{
"name": "Filip",
"description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
},
{
"name": "Julian",
"description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
},
{
"name": "John",
"description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
}
]
}
</script>
</amp-state>
</amp-state>
<h1>Adorable Adoptable Animals</h1>
<amp-carousel id="carousel-with-preview"
width="800"
height="400"
layout="responsive"
type="slides"
on="slideChange:AMP.setState({currentCat: event.index})">
<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg" alt="photo courtesy of Unsplash"></amp-img>
<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg" alt="photo courtesy of Unsplash"></amp-img>
</amp-carousel>
<div class="center">
<h1>
<span [text]="myState.cats[currentCat].name">Aakash</span> is available for adoption!
</h1>
</div>
<p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
<p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
</body>
@QuantumADK

This comment has been minimized.

Copy link

QuantumADK commented Jul 11, 2019

@Blaze41920

This comment has been minimized.

Copy link

Blaze41920 commented Sep 21, 2019

No description provided.

@agaktr

This comment has been minimized.

Copy link

agaktr commented Dec 16, 2019

On line 47-48 there is a duplication of </ amp-state >, please fix!

@cariver

This comment has been minimized.

Copy link

cariver commented Jan 7, 2020

Can I use this sample for the google verification? I’m completely new on this...

@ionleu

This comment has been minimized.

Copy link

ionleu commented May 9, 2020

Closing </html> is missing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.