Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html amp4email>
- <head>
- <meta charset="utf-8">
- <script async src="https://cdn.ampproject.org/v0.js"></script>
- <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
- <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-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>
- <h1>Adorable Adoptable Animals</h1>
- <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-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://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" alt="photo courtesy of Unsplash"></amp-img>
- <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" alt="photo courtesy of Unsplash"></amp-img>
- <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg" alt="photo courtesy of Unsplash"></amp-img>
- <amp-img layout="fill" src="https://amp.dev/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>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement