Our Service Overview - H1

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.

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.