Martial Arts Website

I redesigned my Martial Arts Online Magazine in 2017. Additionally, I moved the website from Jekyll (as static page generator) to Hugo. I used the CSS Grid Layout throughout the website, the homepage has 12 different grids.

I removed clutter by removing some background patterns, added new hover animations for images and containers, added new buttons, and a new pulsing heart animation for the donation section.

I added Service Worker and full offline support for the website. The source programming is available on GitHub.

Color Palette

R 26 G 23 B 27 
H 285 S 8 L 10 
#1A171B
R 176 G 188 B 4 
H 64 S 96 L 38 
#B0BC04
R 124 G 160 B 77 
H 86 S 35 L 46 
#7CA04D
R 188 G 206 B 159 
H 83 S 32 L 72 
#BCCE9F
R 221 G 221 B 221 
H 0 S 0 L 87 
#DDDDDD
R 255 G 255 B 255 
H 0 S 0 L 100 
#FFFFFF
Typeface Exo
Rakkan Logo
Bamboo Illustration

Homepage

Homepage

Subpages

Ninjutsu Page Book Recommendation Page

Grid Layout

CSS Grid Layout 1 CSS Grid Layout 2
CSS Grid Layout 3 CSS Grid Layout 4

Tablet & Phone

Hompage Tablet Homepage Phone