Now that you are familiar with adding a page to a Web Story, adding the next pages in our "The Joy of Pets" story is very similar. Based on the information provided below, go ahead and create the remaining pages by using what you've learned so far. If you get stuck, look at the completed (pets-completed.html) code.
TIP – Remember that each page needs a unique "id" attribute (e.g., id="page1").
Page 1: Cats
Demonstrates how to display an image and text in a single layer.
A <q> element for the following quotation: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Page 2: Dogs
Demonstrates how to arrange text and display a screen-filling image with two layers.
Contains 2 layers:
Layer 1: Implements the fill template, and contains a responsive amp-img (dog.jpg, 720 x 1280px).
Layer 2: Implements the thirds template and contains 2 elements:
An <h1> element with the title: Dogs
A <p> element that specifies a grid-area that occupies the lower-third and contains the following text: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.
Page 3: Birds
Demonstrates how to arrange text, display a screen-filling image, and provide background audio for the page.
Contains 3 layers:
Layer 1: Implements the fill template, and contains a responsive amp-img (bird.jpg, 720 x 1280px).
Layer 2 Implements the vertical template and contains one element:
An <h1> element with the title: Birds
Layer 3: Implements the vertical template and contains one element:
A <q> element for the following quotation: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
This third layer specifies class="bottom" to align the child elements to the bottom of screen.
Plays an audio file in the background while the page is displayed. You can play audio in the background for the whole story or for a single page. To play audio for a page, add the background-audio="assets/bird-singing.mp3" attribute to the <amp-story-page> element. If your audio contains narration or important audio information, make sure that the same information is also conveyed as text, for users who may not be able to hear it or have their sound turned off.
Page 4: Rabbits
Demonstrates how to arrange text and display a screen-filling video for the page.
Contains 3 layers:
Layer 1: Implements the fill template, and contains a responsive amp-video (rabbit.mp4).
Remember to add the required script for the amp-video component in your <head> section so the video appears.
Specify a poster image (rabbit.jpg). This attribute is required for valid AMP stories.
Set the video to play automatically with the autoplay attribute. This attribute is required for valid AMP stories.
Set the video to automatically loop back with the loop attribute.
Set the dimensions to width="720"height="1280" and layout="responsive".
Layer 2 Implements the vertical template and contains one element:
An <h1> element with the title: Rabbits
Layer 3: Implements the vertical template and contains one element:
A <p> element that contains the following text: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Apply the bottom CSS class to the layer to align the child elements to the bottom of screen.
Our "Joy of Pets" story is nearly complete. We'll use animations in our last page to bring all the pets together.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.