<div class='main' id='main'>

  <div class='design'>
    <a href="http://www.big.dk/#projects-nuuk">Design</a>
  </div>

  <div class='preload-images'>
    <img id='image1' src="//s3-us-west-2.amazonaws.com/s.cdpn.io/157670/ramboll-white.jpg" />
    <img id='image2' src="//s3-us-west-2.amazonaws.com/s.cdpn.io/157670/ramboll-black.jpg" />
    <img id='logoImage1' src="//s3-us-west-2.amazonaws.com/s.cdpn.io/157670/ramboll-logo-black.gif" />
    <img id='logoImage2' src="//s3-us-west-2.amazonaws.com/s.cdpn.io/157670/ramboll-logo-white.png" />
  </div>

  <div class='teaser'>
    <p class='teaser-main'>
      vi kan ikke spå om vejret
    </p>
    <p class='teaser-second'>
      (men vi er ret gode til klimatilpasning)

    </p>
    <p class='teaser-link'>
      Fra København til Singapore. Vi rådgiver globalt om waste-to-energy. <a href="http://www.ramboll.com">www.ramboll.com</a>
    </p>
  </div>

  <div class='footer'>
    <div class='ramboll-logo'>
      <img src="#" id='logoImage' />
    </div>

    <div class='text'>
      vi er 12.300 ingeniører, designere og rådgivere og skaber bæredygtige helhedsløsninger inden for byggeri, transport, miljø, vand, energi olie &amp; gas og management consulting.


    </div>
  </div>
</div>
$device-extra-small: " (min-width : 480px)"
$device-very-small: " (min-width : 650px)"
$device-small: " (min-width : 768px)"
$device-medium: " (min-width : 992px)"
$device-large: " (min-width : 1200px)"
$brand-color: #69AABE
$brand-color2: #00aeef

a
  text-decoration: underline
  color: ghostwhite

html, body
  background-color: #1d1f20
  margin: 0
  padding: 0
  // overflow-y: scroll
  // -webkit-overflow-scrolling: touch

.design
  position: absolute
  top: 6px
  left: 6px
  font-size: 70%
  
.main  
  -webkit-transition: background 2s
  transition: background 2s
  
  .preload-images
    display: none
  
  background: url('#') no-repeat center center fixed
  -webkit-background-size: cover
  -moz-background-size: cover
  -o-background-size: cover
  background-size: cover
  min-height: 440px
  position: relative   

  @media (max-width: 600px)
    background-position: 0 0
    
  @media #{$device-extra-small} 
    min-height: 320px  
  @media #{$device-very-small} 
    min-height: 260px
  @media #{$device-small} 
    min-height: 360px
  
  .teaser
    background-color: $brand-color
    background: linear-gradient($brand-color2, $brand-color)
    font-family: Sans-serif
    opacity: 0.8            
    position: absolute
    top: 10%
    @media #{$device-extra-small} 
      top: 10%
    @media #{$device-very-small} 
      top: 5%
    @media #{$device-small} 
      top: 10%
    @media #{$device-medium} 
      top: 20%
    
  
    right: 5%
    margin-left: 5%
    text-align: left
    padding: 20px    
    color: white
    border-radius: 10px
    max-width: 600px
    
    .teaser-main, .teaser-second
      text-transform: uppercase
      margin: 0        
      font-size: 110%      
      @media #{$device-small} 
        font-size: 150%
      @media #{$device-medium} 
        font-size: 200%
            
    .teaser-second
      padding-top: 5px
      @media #{$device-small} 
        padding-top: 0
      padding-bottom: 20px
      opacity: 0.6
      
    .teaser-link        
      font-size: 80%
      @media #{$device-medium} 
        font-size: 100%
      
      padding: 0
      margin: 0
      
  .footer        
    color: white
    text-transform: uppercase
    position: absolute
    bottom: 20px    
    padding-left: 5%
    @media #{$device-medium} 
      padding-left: 100px
    
    .ramboll-logo
      min-height: 40px      
      position: relative
      width: auto      
      margin-right: 10px
      display: block
      @media #{$device-medium} 
        display: inline      
      img
        -webkit-transition: all 2s
        transition: all 2s
        max-width: 160px
      
    .text      
      padding: 4px
      position: relative      
      background-color: #777
      -webkit-transition: background-color 2s
      transition: background-color 2s
      border-radius: 2px
      opacity: 0.7
      margin-right: 5%
      @media #{$device-medium} 
        display: inline-block
      
! function(d) {

  function adjustHeight() {
    var h = Math.max(
      d.documentElement.clientHeight,
      window.innerHeight || 0);

    d.getElementById('main')
      .style.height = h + 'px';
  }

  var imageSource1 = d.getElementById('image1').src,
    imageSource2 = d.getElementById('image2').src,
    logoImage1 = d.getElementById('logoImage1').src,
    logoImage2 = d.getElementById('logoImage2').src,
    main = d.getElementById('main'),
    logoImage = d.getElementById('logoImage'),
    delay = 10 * 1000;

  ! function setupAndStartCarrousel() {
    function image1() {
      main.style.backgroundImage = "url('" + imageSource1 + "')";
      logoImage.style.opacity = 0.1;
      logoImage.src = logoImage1;
      adjustHeight();
      setTimeout(image2, delay);
      setTimeout(function() {
        logoImage.style.opacity = 1;
      }, 100);
    }

    function image2() {
      main.style.backgroundImage = "url('" + imageSource2 + "')";
      logoImage.style.opacity = 0.1;
      logoImage.src = logoImage2;
      adjustHeight();
      setTimeout(image1, delay);
      setTimeout(function() {
        logoImage.style.opacity = 1;
      }, 100);
    }
    image1();
  }();

}(document);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.