Huis-template

by PhilQ

HTML

<h1>Huis & Landgoed kopen in Zuid-West Frankrijk</h1>
<div id="moduleScroller">
    <div><span>Omschrijving tekst deel een.</span></div>
    <div><span>Omschrijving tekst deel twee.</span></div>
    <div><span>Omschrijving tekst deel drie.</span></div>
        <div><span>Omschrijving tekst deel vier.</span></div>
</div>
<div id="content">
Het hoofdhuis is een 'Maison de maitre', een herenhuis met een fontein op het voorplein, een living van 16 x 8 meter een klassieke bibliotheek in Engelse stijl, vier slaapkamers en vier terrassen. Het landgoed bestaat uit 42 hectare natuur: bossen, heuvels, weilanden, beekjes, een meer met een eigen strandje en een huis met twee aparte gastenverblijven. Bijzonder geschikt voor paardenliefhebbers.
Vraagprijs &#128; 675.000 KK. 
    Geïnteresseerd? Neem contact op met <a href="mailto:[email protected]?subject=Huis+Frankrijk">[email protected]</a>
</div>

CSS

* {
    box-sizing: border-box;
}

@import url(http://fonts.googleapis.com/css?family=Grand+Hotel&subset=latin,latin-ext);

h1 {
    z-index: 4;
    position: fixed;
    top: 0px;
    text-align: center;
    left: 0px;
    right: 0px;
    font-family: 'Grand Hotel', cursive;
    font-size: 48px;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0, 0.6);
    font-weight: normal;
}

#moduleScroller {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #fcd980;
}
#moduleScroller div {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.3);
    background-size: cover;
    background-image: url("http://www.europeservice.nl/frankrijk/14.jpg");
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0, 0.6);
    z-index: 1;
    -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

#moduleScroller div span {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-block;
    background-color: rgba(0,0,0, 0.6);
    padding: 10px 15px;
    z-index: inherit;
    font-family: 'Grand Hotel', cursive;
    font-size: 32px;
}

#moduleScroller div.current {
    z-index: 2;
    opacity: 1;
}

#moduleScroller div.next {
    z-index: 3;
    opacity: 0;
}


#content {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: inline-block;
    background-color: rgba(0,0,0, 0.6);
    padding: 10px 15px;
    z-index: 4;
    font-family: 'Grand Hotel', cursive;
    font-size: 32px;
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Grand+Hotel::latin,latin-ext' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();