Skip to main content

COLORS

COLORS - BOOKING STEPS

State:Loading

blinkBackground_1 #cfcfcf
blinkText_1 #ff0000
Sample

State:Loaded

blinkBackground_2 #f3f3f3
blinkText_2 #3D3D3D
Sample

Hover to seedemo

Demo

HTML

Heading and text

Heading 1

75 characters max for readability lorem ipsum dolor sit ameta consecteturs.

50 characters readability on mobile small loremip.

Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo break,
ultricies eget, tempor sit amet, ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.


...

“blockquote, This is a quote as left by me.”—Harry Roberts

...

Inline Element

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

etc

CKEDITOR - Styles (Admin Text Editor)

Preamble lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

Text after preamble...

...

Block - Skin A, lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

...

Text before Highlight text after

Text before Text Large text after

Text before Text Small text after

Text before Quotation text after

Text before Text Color 1 text after

Text before Text Color 2 text after

Text before Text Color 3 text after

...

placeholder - image left Left image lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

...

placeholder - image right Right image lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque sodales arcu in aliquet. Aliquam varius est eget neque gravida tempor. Pellentesque magna mauris, interdum id pellentesque blandit, viverra sit amet velit. Quisque eget commodo massa.

...

[CKEDITOR Style: Table Skin A, found under TABLE section]

...

[CKEDITOR Style: List Skin A, found under LIST section]

FORM

FORM - BUTTONS

Buttons - Default

|

Buttons - Skin DEFAULT

Button | | | |

Large | | | |

Buttons - Skin A

Button | | | |

Large | | | |

Buttons - Skin B

Button | | | |

Large | | | |

Buttons - Skin C

Button | | | |

Large | | | |

Buttons - Skin D

Button | | | |

Large | | | |

Buttons - Skin E

Button | | | |

Large | | | |

Buttons - Skin LIGHT

Button | | | |

Large | | | |

Buttons - skin DARK

Button | | | |

Large | | | |

Buttons - Price

Button | | | |

Large | | | |

Buttons - Alert

Button | | | |

Large | | | |

Buttons - Warning & Error

Button | | | |

Large | | | |

Buttons - RESET

Button | | | |

Large | | | |

Buttons - INACTIVE

Button | | | |

Large | | | |

FORM - Text fields

Legend

fieldset


Text fields - State attributes

The difference between disabled and readonly is read-only inputs are still focusable and have interactable text.

FORM - Select menu

FORM - Checkbox

FORM - Radio Button

FORM - HTML5 input

Table

Table - Default

...

Heading 1 Heading 2 Heading 3
row two column one row two column two row two column three
row three column one row three column two row three column three
row four column one row four column two row four column three
Row Heading 1 Row Heading 2 Row Heading 3
row six column one row six column two row six column three
row seven column one row seven column two row seven column three
colspan heading
row nine column one row nine column two row nine column three
row ten column one row ten column two row ten column three

...

Table - Responsive

...

Heading 1 Heading 2 Heading 3
row two column one row two column two row two column three
row three column one row three column two row three column three
row four column one row four column two row four column three
Row Heading 1 Row Heading 2 Row Heading 3
row six column one row six column two row six column three
row seven column one row seven column two row seven column three
colspan heading
row nine column one row nine column two row nine column three
row ten column one row ten column two row ten column three

...

Table - Skin A

...

Heading 1 Heading 2 Heading 3
row two column one row two column two row two column three
row three column one row three column two row three column three
row four column one row four column two row four column three
Row Heading 1 Row Heading 2 Row Heading 3
row six column one row six column two row six column three
row seven column one row seven column two row seven column three
colspan heading
row nine column one row nine column two row nine column three
row ten column one row ten column two row ten column three

...

Table - Responsive, Skin A

...

Heading 1 Heading 2 Heading 3
row two column one row two column two row two column three
row three column one row three column two row three column three
row four column one row four column two row four column three
Row Heading 1 Row Heading 2 Row Heading 3
row six column one row six column two row six column three
row seven column one row seven column two row seven column three
colspan heading
row nine column one row nine column two row nine column three
row ten column one row ten column two row ten column three

...

List

List - Unordered

...

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

...

List - Description

...

Defines terms/names
describes each term/name
Title here
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris commodo consequat.

...

List - Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

...

List - Skin A

  • item one
  • item two
  • item three
  • item four

...

Image

Page image / Page icon (Favicon)

App Name: Kulturrejser Europa
Color: #000000 (SVG 'mask-icon')
Background Color: #000000 ('msapplication-TileColor')

icon 16x16
icon 32x32
shortcut icon

Page image - Apple

apple-touch-icon 180x180

Page image - Microsoft (browserconfig.xml)

mstile 150x150 (browserconfig.xml)

Page image - Android / Chrome (manifest.json)

android-chrome 192x192 (manifest.json)
android-chrome 512x512 (manifest.json)

Page image - Safari: Pinned Tab for Mac OS X (SVG)

Without focus

 
 
 

With focus

 
 

Startup Image

Startup Image - Apple

apple-touch-startup-image

Type icon

.icon-travelize
.icon-travelize-over
.icon-menu
.icon-search
.icon-package
.icon-home
.icon-calendar
.icon-star
.icon-star-non
.icon-prev
.icon-next
.icon-back
.icon-forward
.icon-arrow-down
.icon-arrow-right
.icon-cancel-circle
.icon-checkmark-circle
.icon-plus
.icon-close
.icon-tel
.icon-image
.icon-rss
.icon-pdf
.icon-page
.icon-mail
.icon-printer
.icon-mobile
.icon-tablet
.icon-desktop
.icon-facebook
.icon-twitter
.icon-instagram
.icon-googleplus
.icon-pinterest
.icon-tripadvisor
.icon-youtube
.icon-flickr
.icon-fa-print
.icon-location
.icon-gmd-flight-takeoff
.icon-gmd-flight-land
.icon-fa-calendar
.icon-group
.icon-fa-certificate

LAYOUT

  • Screen small: visually hidden (.hide-layout1)
  • Screen small only: not visually hidden (.hide-layout2 .hide-layout3)
  • Screen medium: visually hidden (.hide-layout2)
  • Screen medium only: not visually hidden (.hide-layout1 .hide-layout3)
  • Screen large: visually hidden (.hide-layout3)
  • Screen Large only: not visually hidden (.hide-layout1 .hide-layout2)
  • Screen small: not displayed (.not-layout1)
  • Screen small only: displayed (.not-layout2 .not-layout3)
  • Screen medium: not displayed (.not-layout2)
  • Screen medium only: displayed (.not-layout1 .not-layout3)
  • Screen large: not displayed (.not-layout3)
  • Screen large only: displayed (.not-layout1 .not-layout2)

Example: Attached Pages

Avgångar & priser

Avresa Avreseort Hotell Lediga platser Från pris
7/11 Göteborg   Mer än 8 1 595:- BestilMer information
14/11 Göteborg   Mer än 8 1 595:- BestilMer information
21/11 Göteborg   Mer än 8 1 595:- BestilMer information
28/11 Göteborg   Mer än 8 1 595:- BestilMer information
Avresa Avreseort Hotell Lediga platser Från pris
5/12 Göteborg   Mer än 8 1 595:- BestilMer information
12/12 Göteborg   Mer än 8 1 595:- BestilMer information
19/12 Göteborg   Mer än 8 1 595:- BestilMer information
26/12 Göteborg   Mer än 8 1 595:- BestilMer information

Information

sdvcdsfsfdfsf

Hotell

Alanya Hotel ALT

Alanya Hotel

Alanya hotel, detta är den svenska texten. Alanya hotel, detta är den svenska texten. Alanya hotel, detta är den svenska texten. Alanya hotel, detta är den svenska texten. Alanya hotel, detta är den s...

Birka Hotel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus magna a urna molestie aliquet a quis lectus. Donec ac nisl in velit faucibus sagittis nec sed nunc. Ut efficitur sapien ipsum,...

Bussarrangör

text Bussarangör.Læs mere
+
-x
Account: eurotravel

Switches +

CMS

id:
itype: 991
tempLeftMenuID: -1
UseApplicationCaching: False
useEnterpriseVersion: True
sitecompany: KR
useMultipleSites: 0
robotsNoIndex: True
robotsNoFollow: True
siteCurrency: DKK
defaultLanguageVersion: DK
siteLanguageVersion: DK
htmlLang: da

mobileDevice: False

enableSiteCacheApplication: Log inClear Cache
CSS & JS compile: Log inGenerate

Account: eurotravel
travelizeclientID: 1409

Front End +

Variables +