Virtual Theatre

Virtual Theatre simulates the auditorium of a theatre. The Mayflower Theatre in Southampton has inspired the look of this theatre tour, presented as a web page.

Comment

Inspiration

Kimberley used to enjoy trips to the Mayflower Theatre in Southampton, UK, when she lived there, so has chosen to create a virtual tour of the auditorium. This HTML and CSS coded display includes an affectionate nod to the locally produced ice cream which is a must have during interval.

What it does

The virtual theatre presents a tour of the auditorium of Southampton’s Mayflower Theatre. When the page visitor hovers over features of the scene, information appears describing what the visitor can see.

How we built it

Kimberley wrote HTML, and CSS code for the web page virtual theatre tour, using the Notepad++ editor.

Challenges we ran into

Previously, Kimberley had used basic CSS styling and the most ornate object she had created was a shadowed circle in which to frame a photograph. This project involved revisiting a lot of learned theory and applying it in varying and new ways.

Positioning of elements behaved unexpectedly for some elements, and negative margins were used to offset these.

Mozilla Firefox displayed some p element text differently from the Chrome and Edge browsers, so appropriate text was researched online for use in writing some Mozilla specific override code.

Representing room depth was another new challenge. CSS skewY() functions were applied following revision of Free Code Camp’s Responsive Design Course. Then later research was undertaken to discover how to produce a trapezoid for part of the display’s stage.

Kimberley would have liked to have included some scripts to open the curtains and icecream hatches but this is going to require some more in-depth study to implement.

Accomplishments that we're proud of

The amount of auditorium represented in the available time.

Being able to prioritise and adapt as needed.

What we learned

How to manipulate CSS grids with multiple element combinations and layers. How to create arcs, arches, and tooltips among other things.

What's next for Virtual Theatre

The plan is to:

  • add interactivity to the curtains and icecream hatches,
  • improve the appearance of room depth,
  • and learn to use SVG to introduce ornamental detail to the walls.

It would also be desirable to change the perspective to “zoom” in on an area of the auditorium for closer inspection, and to adapt the tour for different screen sizes.

Built With

Share this project:

Updates