Skip to content

Instantly share code, notes, and snippets.

@CrystalOnScript
Last active August 10, 2024 08:13
Show Gist options
  • Save CrystalOnScript/988c3f0a2eb406da27e9d9bf13a8bf73 to your computer and use it in GitHub Desktop.
Save CrystalOnScript/988c3f0a2eb406da27e9d9bf13a8bf73 to your computer and use it in GitHub Desktop.
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>
@sohaib-hash
Copy link

sohaib-hash commented Jul 5, 2021 via email

Copy link

ghost commented May 9, 2022

Thanks for this turtorial

@KaramJMoore
Copy link

kjm

@Nosnos15
Copy link

@Jones098
Copy link

Check this out 🐱

@Nosnos15
Copy link

firstemail.html

@Nosnos15
Copy link

@c+e

@jegarian83
Copy link

Screenshot_20240522-192516

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment