header

Typography - Open Sans

Light - 300

  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890!@#$%^*

CSS selector:

'.type-box1'

Sample code:

<h3>.typebox1</h3>

Normal - 400

  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890!@#$%^*

CSS selector:

'.type-box2'

Sample code:

<h3>.typebox2</h3>

Bold - 500

  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890!@#$%^*

CSS selector:

'.type-box3'

Sample code:

<h3>.typebox3</h3>

Typography - Oswald

Bold - 500

  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • abcdefghijklmnopqrstuvwxyz
  • 1234567890!@#$%^*

CSS selector:

'.type-box4'

Sample code:

<h3>.typebox4</h3>

Font Combination

HEADER 1

  • capatalized
  • red
  • # b51f27
  • bold : 700
  • font size : 2.8 rem
  • At the beginning of each page

CSS selector:

'.type-box8'

Sample code:

<h1>.type-box8</h1>

HEADER 2

  • capatalized
  • black
  • # 231f20
  • bold : 700
  • font size : 2.0 rem
  • Each step of booking

CSS selector:

'.type-box5'

Sample code:

<h2>.type-box5</h2>
Navigation Bar
  • regular
  • black
  • # 231f20
  • regular : 400
  • font size : 1.0 rem
  • Nav bar

CSS selector:

'.type-box6'

Sample code:

<h3>.type-box6</h3>

Paragraph

  • regular
  • black
  • # 231f20
  • light : 300
  • font size : 0.7rem
  • Each step of booking and description

CSS selector:

'.type-box7'

Sample code:

<p>.type-box7</p>

Colors

  • purple
  • #b52185
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block
  • yellow
  • #fed60e
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block
  • orange
  • #e54724
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block
  • green
  • #6cc4a2
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block
  • red
  • #b51f27
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block
  • black
  • #000000
  • width: 100px
  • height: 100px
  • border-radius: 50%
  • display: inline-block

Icons

calendar

Date

booking

Booking

contact

Contact

time

Time

service

Service

address

Address

phone

Phone

games

Games

Interactive Elements - Buttons

Booking

CSS selector:

'.booking-buttons a'

Sample code:

<a href="#booking" class="buttons">.booking-buttons</a>
Confirm

CSS selector:

'.confirm a'

Sample code:

<a href="#confirm" class="buttons">.confirm</a>
<
>

CSS selector:

'.more a'

'.less a'

Sample code:

<a href="#more" class="more">.more</a> <a href="#less" class="less">.less</a>

Calendar selection

Janurary
Monday Tuesday Wednesday Thursday Friday Saturday Sunday
27 28 29 30 31 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

CSS selector:

'.calendar td'

Sample code:

<a href="#calendar" class="calendar td">.calendar</a>

Form Template

HOW TO CONTACT YOU

CSS selector:

'.row'

Sample code:

< div class="row" > <input id "name"class="input" name="name" type="text" value="" size="30" placeholder="Name" > < /div >