Link to the project: HTML Poem/Song Lyrics
Description & Concept:
This mini project is an illustration of one of my famous poems from Dylan Thomas–“Do Not Go Gentle Into That Good Night”. In this project, I want to emphasize the feeling of rage inside the poem and how it was shown in Christopher Nolan’s movie “Interstellar”.
On the first page, the full text of the poem is shown. The background of this page and the title is 2 famous artworks of Chinese artist Cai Guo-Qiang, “Dragon Cypress” and “Study for Pompeii: Fierce Lion”, which are made from gunpowder. I choose his artwork because gunpowder is a fierce matter which I think parrel with the rage in this poem. At the same time, the spreading pattern of the “Dragon Cypress” can add more power to this image. The background of the texts becomes brighter from the top down. In this way, I want to create the enhancement of the emotion along with the poem. The repetitive sentence “Rage, rage against the dying of the light” also becomes redder and brighter because of the same reason.
The second page is linked to the first photo in the first page, which is a photo of the author, Dylan Thomas. The purpose of this page is to briefly explain the meaning behind this poem. On the second page, the background is an image of flame, which is aimed to indicate the rage that Dylan wants people to have in face of struggles or even death.
The third page is linked to the second picture on the first page, which is a photo of the movie “Interstellar”. This movie constantly uses this poem throughout the movie, which leaves a strong impression on the audience. The purpose of this page is thus an explanation of the poem’s usage in the film.
Development & Technical Implementation
I first encountered a problem in changing the font by utilizing fonts in Google Fonts. I didn’t know how to indicate the new font in CSS or it’s necessary to embed the link to the font in the head of the HTML file. The main takeaway is thus every time something else outside of the HTML is mentioned, it’s a must to indicate it in the head of the HTML so that it could be called.
Then the biggest problem is that I want to add interaction to the CSS but failed to do so.
By referring to w3school and the link in the lecture slide, I drew these two circles on the screen. However, no matter how I manipulate it (using “object-position”, “display”, etc.), the circles seem to stay in the top-left corner of the screen and can’t be put in the middle. I still don’t know why but I’ll keep working on that.