Codesandbox Link - https://codesandbox.io/s/dm120-project-2-philip-henslowe-classic-theatre-forked-7i9tbi?file=/ph_plays.html
Project Description
Philip Henslowe Classic Theatre: Randall Chen is the media director for the Philip Henslowe Classic Theatre, a regional classical theatre in Coeur d’Alene, Idaho. In this project, Randall Chen requires that I to work on the website design for the company. The content and layout of the page had already been created and my job was to create a style sheet for the typography of the page. The files needed for this assignment were;
· ph_plays.html
· ph_layout.css
· ph_styles.css
· ph_logo.png
· 1942.ttf
· DobkinPlain.ttf
· cac_champagne.ttf
· 1942.woff
· DobkinPlain.woff
· cac_champagne.woffThe first process for this project was to enter my name to the ph_plays.html and ph_styles.css files, and then, define the character encoding used in the document as utf-8 (@charset "utf-8"; at the very first row of the stylesheet file). After this, the next instruction was to work on the Structural Styles, where I added web fonts, and set the background color. In the next section, I worked on the Web Page Layout, to for every paragraph that sets the margin space to 0 pixels and the padding space to 5 pixels on top and 25 pixels on the right, bottom, and left. Also, I formatted the appearance of navigation lists on the page.
Go to the Navigation Styles section and create a style rule for the nav a selector that displays the hypertext links using the font stack Trebuchet MS, Helvetica, sans-serif. Set the top and bottom padding to 10 pixels.
The next instruction by Randall was to work on the Playbills appearance, where I defined the appearance of the four playbills, and the the playbill background with the following instructions;
Each playbill section is identified by a different ID value ranging from play1 to play4. Create style rules that set a different background color for each playbill using the following background colors:
· ID: play1 set to hsl(240, 100%, 88%)
· ID: play2 set to hsl(25, 88%, 73%)
· ID: play3 set to hsl(0, 100%, 75%)
· ID: play4 set to hsl(296, 86%, 86%)
Each playbill section heading will also have a different font. For the h1 headings within the four different playbills, create style rules to apply the following font stacks:
· ID: play1 set to Champagne, cursive
· ID: play2 set to Grunge, ‘Times New Roman’, Times, serif
· ID: play3 set to Impact, Charcoal, sans-serif
· ID: play4 set to Dobkin, cursiveThe last instruction by Randall was to format the Definition Lists where he (Randall) has put the author and the director of each play within a definition list style section and creating a style rule for the dt element that sets the font size to 1.3em, the font weight to bold, and the font color to the semi-transparent value hsla(0, 0%, 0%, 0.4).
This produced the final result in the below image.
Photo of the Completed Website
Comments