Lia Duguran


- back -


HTML | CSS | JavaScript

A responsive website about Japan, using tools such as HTML, CSS, and JavaScript. First project created for the Technical Web Designer Program at BCIT.


scroll down arrow


Japan project website shown on mulitple devices. Desktop, tablet, phone and laptop Japan project shown on mobile. Culture, Attractions and Events page. Japan project Culture page. Japan project Attractions page. Japan project Events page.

Color Scheme






Wireframes for the Japan website Wireframes for the Japan website Wireframes for the Japan website

To incorporate Japan's national flag into the design, I used a dark red and pink color palette.

Using Adobe Illustrator, I created a favicon consisting of some of the most popular tourist attractions in Japan, Mount Fuji, and Cherry Blossoms. I've also added a red sun on the background to represent the Japanese flag.

Favicon for the Japan website. Mount Fuji with cherry blossoms, in front of a red sun
favicon for the Japan website

Throughout each page, pink was used to accentuate words. In the culture webpage, it subtly highlights the title of each section. The color consumes the text on the main attractions page, separating the image from the paragraph. Meanwhile, the events page uses pink to bring attention to the dates.

pink background on paragraph with black text. On top of an image of a Japan attraction
paragraph from the attractions page
Subtitles of culture page, pink line shown in front.
subtitle from the culture page
pink box around date of the event.
the events page displaying the date

The home page features a video banner, which showcases the variety of attractions in Japan, from the lively city to the serene cherry blossoms and temples. However, this feature can affect the loading time for smaller devices. Therefore, an image is shown instead of a video on smaller screens.

Japan project shown on desktop. Home page
Japan home page desktop. Background video
Japan project shown on mobile. Home page
Japan home page mobile. Background image

Created for educational purposes

- back -

- more projects -

Merry Me

Milk Studios

Weather Forecast

Movie Database