Responsive Online Magazine Design Mockup

Final Assignment for the HTML I Course

For this assignment, I had to produce a mockup of an online magazine site. This exercise needed to have at least four pages and be based on a grid I made. I could not use Bootstrap, or any other prebuilt grid system.

Project Content

For the project I designed a static website using only HTML, CSS and some javascript for animation and effects. The final project consisted of:

  • the landing page of the magazine containing the logo and teaser descriptions of the articles with pictures

  • one full article page with at least five paragraphs of real text (no lorem ipsum), two headings, and two images

  • the contact page form

  • the 404 error page

  • the sources page for the images used in the web site

Theme Chosen

I decided to create a fictional yoga magazine website.

Design

Typography

Work Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 !@#$%^*()-+=

Main Content:

Libre Baskerville

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 !@#$%^*()-+=

Collour Palette

Orange

#D6511B

R:214 G:81 B:27

Brown

#0F3305

R:86 G:61 B:47

Light pink

#F3EDED

R:243 G:237 B:237

Screenshots

Main website view

View from the main page for the magazine

Article page

View from the main page for the magazine

Contact form

View form the main page for the magazine

404 error page

View form the main page for the magazine

Access to the static website for the original project

PURE YOGA MAGAZINE

 
comments powered by Disqus