Viking CSS Garden

The Viking CSS Garden was an assignment for the CSS course of Viking Code School‘s advanced prep work. The idea was inspired by the CSS Zen Garden, a project that allows front end developers to submit their own CSS code for styling the exact same HTML markup document. The diverse results from this exercise really show how much can be done just with CSS alone. For this assignment, I was provided with an un-styled, bland, HTML file that included some headings and paragraph text primarily about Norse mythology. While I could have chosen any theme or design for the page, I decided with my interest in history to go along with the context provided and style the page with a Viking theme.

You can view the source code for the index.html and style.css files at my Github repo.

View the results of my CSS code at viking-css-aws.surge.sh

Some of the graphics, styling, and features I added to the page include:

• Two graphics with a fixed position, a Viking ship and Viking helmet, were added to the top right corner of the page. They each actually consist of two graphics (for four graphics total), which transition between one another when the user hovers their mouse over them. The ship brings its sail up and down, while the helmet changes from a silver to gold color. Since they are both fixed images, they fall outside the normal document flow and travel with the user as they scroll. This feature was accomplished by using CSS, utilizing both the transition animation and a change in opacity between the images, which are placed on top of each other with absolute positioning. Browser prefixes were included to account for differences in how browsers process the transition property.
• A Google Font, Merienda One, was used for all of the headings, and Georgia for the paragraph text. Fail safe fonts were also included.
• A png image with transparency was used for a stylized V, added to the main title of the page.
• The page uses a large background image of an 1840 map of Scandinavia that expands to the width of window without stretching or distorting the actual image. If the height is exceeded, the image tiles vertically.
• Each heading, paragraph element, and the unordered list were given a white background with an opacity of 0.8 to allow for ease of reading, while also letting the background image of the map to be seen behind each text block.
• A reset.css file was incorporated to ensure that the page appears the same across all browsers.
• The font sizes, text alignment, padding, margins, display values, and position values were specified for a number of selectors (see the css file for further details on this).
• The unordered list was given a small black Viking ship to use as the bullet points.
• A map of Viking voyages and settlement was added above the list and below the main text.
• A graphical link to the source for the map was placed in a fixed position in the bottom left corner, which travels with the user as they scroll.
• A 2px sold black border with a 15px border-radius was added to each paragraph element.
• Two absolutely positioned graphics, one of a Viking warrior and another of a Viking longship, were added to the left hand side of the page. Both are png files, which allowed for transparency around them, so the map could be seen in the background.
• Different colors were added for when a link is unclicked, visited, hovered over, and active.
• Responsive design was added with a media query, activated when screens are less than 1000px in width. When this occurs, the animated graphics in the top left and the map source graphic in the bottom right are no long visible. The ship and warrior graphics that formerly appeared on the left then change to falling within the regular document flow between two paragraphs. The paragraphs themselves switch from a 30% width to 100% to accommodate the smaller screen.

I enjoyed styling this page, learning new ways to apply code through trial and error, especially with different position property values and the transition animation on the ship and helmet graphics.