The Hero

Below the header comes the main content of the page, in main. On the home page of a website, it usually starts with a big section that tells visitors at first sight where they are and what they can do there. Web designers call it the hero, because it's the star of the page.

Our hero has the cinema's name as the main heading of the page, one sentence about the cinema and a button that leads to the showtimes, the page that visitors want most. It's a section of the page, so it goes in a section element, with the class hero for styling.

The button is actually a link: it takes the visitor to another page, and that's what links are for. (The button element is for forms and for actions on the page itself.) It gets the class button, and in CSS, you'll make it look like a button.

Instructions

  1. Below the header, add main, and in it a section with the class hero. In the section, create the main heading of the page, h1, with the text Starlight Cinema.

  2. Below the heading, add a paragraph with the text A small cinema with big films, on Elm Street since 1932.

  3. Below the paragraph, add a link with the class button and the text See what's on that leads to showtimes.html.

BackNext