Webdesign for the Pendragon RPG campaign (Hobby project)

Medieval, Projects, Webdesign

February 10, 2021

Webdesign for our Pendragon RPG campaign

Borders, patterns, colors and background images

As I used centuries old illuminated manuscript elements for inspiration, please feel free to use this design for your similar personal or non-profit projects and attribute this page as origin of design if you are inspired by what you find.

This is a paragraph with a more contrasted text colour and two highlighted words in it that simulate golden illumination. The text font is “Overlock”, a playful, award winning typeface that was intended to simulate the Overlock sewing technique.

Text font: Overlock: Overlock Regular
Text size: 1.2 em
Text color: #afafb4 rgb(175,175,180)
Optional text color with more contrast: #cccdd1 rgb(204,205,209)
Highlighted (gold) text color: #958061 rgb(149,128,97)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Colours

Red

#792818

Blue

#2C3C7E

Green

#546B49

Gold

#958061

Bright Red

#993421

Blue 2

#425BC0

Links

#425BC0

Green

#79D74E

Bright Gold

#BC9256

Table 1

#2b2b32

Table 2

#222328

Grey text

#afafb4

Text

#afafb4

Header, more contrasting text

#C2B4B4

Tables

tr:nth-child(even) {background-color: #222328 }
th {background-color: #2b2b32;}
.tg-c3ow {text-align:center;}

	482	483	484	485
Sword	15
Lance	9
Spear	1
Dagger	5

Valorous 16 (+5) ｜ Cowardly 4

Wins 0｜ Loses 0

Bright Gold Title

The colour of the initial is a brighter blue to stand out, but not too bright to distract.

Heading

selector {
border: 10px solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_06.jpg) 19 round;
}

Heading

selector {
border: 10px solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_06.jpg) 19 round;
}

Picture frame

selector {
border: 10px solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_06.jpg) 19 round;
}

Picture frame

selector {
border: 10px solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_06.jpg) 19 round;
}

Picture frame

selector {
border-width: 40px ;
border-style: solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_01_8x8_framed.jpg) 39 round;
}

Picture frame

selector {
border-width: 40px ;
border-style: solid;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/Pattern_01_8x8_framed.jpg) 39 round;
}

Picture frame

selector {
border: 40px solid transparent;
border-image: url(https://pappcseperke.hu/wp-content/uploads/2021/02/GoldenFrame_01-300×240.png) 45 stretch;
}

Picture frame

Text Box BG

Picture frame

One line BG

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Codepen link