Advertisement
Guest User

Sendsay test amp template

a guest
Apr 9th, 2019
406
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.92 KB | None | 0 0
  1. <!doctype html>
  2. <html amp4email>
  3. <head>
  4.   <meta charset="utf-8">
  5.  
  6.   <script async src="https://cdn.ampproject.org/v0.js"></script>
  7.   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  8.   <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  9.  
  10.   <style amp4email-boilerplate>body{visibility:hidden}</style>
  11.  
  12.   <style amp-custom>
  13.     h1 {
  14.       font-family: arial;
  15.       margin: 10px;
  16.     }
  17.     .center {
  18.       text-align: center;
  19.     }
  20.     .carousel-preview {
  21.       margin-top: 10px;
  22.     }
  23.   </style>
  24.  
  25. </head>
  26. <body>
  27.  
  28. <h1>Adorable Adoptable Animals</h1>
  29.  
  30. <amp-state id="myState">
  31.   <script type="application/json">
  32.     {
  33.       "cats": [
  34.          {
  35.           "name": "Aakash",
  36.           "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."
  37.         },
  38.         {
  39.           "name": "Filip",
  40.           "description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
  41.         },
  42.         {
  43.           "name": "Julian",
  44.           "description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
  45.         },
  46.         {
  47.           "name": "John",
  48.           "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."
  49.         }
  50.       ]
  51.     }
  52.   </script>
  53. </amp-state>
  54.  
  55. <amp-carousel id="carousel-with-preview"
  56.    width="800"
  57.    height="400"
  58.    layout="responsive"
  59.    type="slides"
  60.    on="slideChange:AMP.setState({currentCat: event.index})">
  61.   <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>
  62.   <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>
  63.   <amp-img layout="fill" src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  64.   <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>
  65.  </amp-carousel>
  66.  
  67. <div class="center">
  68.   <h1>
  69.     <span [text]="myState.cats[currentCat].name">Aakash</span>  is available for adoption!
  70.   </h1>
  71. </div>
  72.  
  73. <p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
  74. <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>
  75.  
  76. </body>
  77. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement