The Starlight Cinema

Welcome to your first project! You've finished the HTML and CSS courses, and now you'll put all of it together into a real website: the website of the Starlight Cinema, a small old cinema with one big hall and one small one.

The site has two pages that share one stylesheet:

  • index.html, the home page: a header with the cinema's name and navigation, a big welcome section, the three films that are on this week, the ticket prices and a footer with the address,
  • showtimes.html, with a table of when each film is on,
  • style.css, the look of both pages.

When you're done, the home page will look like this (smaller):

Starlight CinemaHomeShowtimes
Starlight Cinema
A small cinema with big films, on Elm Street since 1932.
See what's on
This week
The Lighthouse Keeper
Drama · 112 min
A keeper on a lonely island finds a message in a bottle that changes everything.
Robots on Vacation
Animation · 88 min
Three tired factory robots take their first vacation at the seaside.
The Last Train North
Thriller · 104 min
One night, one train and a passenger who isn't on the list.
Tickets
TicketPrice
Adult$9
Student$7
Child (under 12)$5
Starlight Cinema, 12 Elm Street
Open every day from 2 pm to 11 pm

The website will grow with you. In the next lesson, you'll put it online, so that anyone can open it. After the JavaScript course, you'll make the showtimes page interactive, and after the Tailwind course, you'll give the whole site a new look.

Each exercise continues where the previous one ended. First you'll write the HTML of the home page, then the second page, and finally the CSS. Long texts, such as the descriptions of the films, are ready for you, so that you can focus on the structure and the styles.

The header. Let's start with the skeleton of the page and its header. A header is at the top of every page of a website. On the left, there's the site's name, often as a logo: a link that takes you back to the home page from anywhere on the site. On the right, there's the navigation with links to the other pages. Our logo is just text, and it gets the class logo, so that you can style it in CSS later:

<a href="index.html" class="logo">Starlight Cinema</a>

The links lead to the files of the site, with relative links as in the HTML course. The showtimes page doesn't exist yet, so for now, its link does nothing in the preview.

Instructions

  1. Write the skeleton of the page: the document type declaration, the html element with lang="en", and in it head with <meta charset="utf-8"> and the title Starlight Cinema, and below it an empty body.

  2. In body, create a header, and in it the logo: a link with the class logo and the text Starlight Cinema that leads to index.html.

  3. In the header, below the logo, add navigation (nav) with two links: Home, which leads to index.html, and Showtimes, which leads to showtimes.html.

BackNext