Bicycle Tour
 

Our Service Overview - H1

Theme 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.click»

Theme 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.click»

Theme 3

Lorem ipsum dolor si amet.

Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.click»

Theme 4

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.click»

Theme 5

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.click»

Theme 6

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Vivamus elementum semper nisi.click»

 

This template is a modern "responsive" template in HTML5 with CSS3. This means: the layout automatically adapts to the different screen resolutions of the visitor, no matter if desktop computer, tablet or smartphone. You can check this simply by dragging the right side of the browser window to the left and so make the resolution smaller. At a certain point you will see that the text and the boxes jump to another position and the layout still looks pretty. Additionally the header photo will become smaller and the header texts jump to another position also.

H2 heading

This template consists of 2 differently designed pages. The index-page shows 2 different kinds of teaser boxes, where you can add some text and put a link to the actual topic where you give special attention to this point.

In the CSS-file I have put a special height to these teaser boxes where it says "teaserbox3" resp. "teaserbox4". If you decide to have a longer text in your teaser boxes, this special box would stretch, which doesn't look nice if the others don't, so you should change the height value in the style.css-file in order to have the same height in all boxes.

Theme 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.click»

Theme 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.click»

Theme 3

Lorem ipsum dolor si amet.

Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.click»

Theme 4

Lorem ipsum dolor si amet.

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. click»

You can visit page 2 of this template by clicking on "click" in one of the two teaser boxes named "Teaser box 1". In this second page you have a classic navigation bar on the left side.

All colours and effects like shadows have been done by using CSS3 technicque. The only graphical element used is the header image, which may only be used for this template!

H3 Heading

One specialty should be mentioned: the font used for the headings is a Google font called "Rock Salt". Formerly it was always necessary to use fonts that most computers use. Meanwhile there is a possibility to add fonts directly from the internet that do not have to be on the visitor's computer. You simply have to add one line of code in the header of your website and this special font is added from Google as soon as needed. In this case the code looks like this: <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>. This font has then additionally been added in the style.css-file and further fonts have been mentioned just in case the Google service is interrupted, though chances for this are small. :)

H4 Heading

Link texts look like this: Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

H5 Heading

This template is preadjusted to a max. width of 1024 px, which can be changed in the style.css-file.

A little experience in working with CSS should be available. If you are not sure if you can handle this please try one of the templates of series 12 just to get some practise.