cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              div.wrapper
  div.additional-block.estateinfo-block
    div.box-container
      div.image-container
        img src="http://lorempixel.com/100/100/people/9"
      div.estate-info
        h2 Isabelle Ravensburg
        div.item
          div.value.link Helenweser Str. 2
        div.item
          div.value.link 50827 Köln
        div.item
          div.value.link Deutschland
        div.item
          div.value.link +49 (0) 1577 548544
      ul.buttons
        li
          i.icon-home
          | Immobilie anbieten
        li
          i.icon-envelope
          | Anschreiben erstellen
        li
          i.icon-trash
          | löschen
  div.additional-block
    h2 Suchprofil
    div.address-details
      div.item
        div.label Objektart
        div.value Wohnung
      div.item
        div.label Miete
        div.value höchstens 450,00 €
      div.item
        div.label Balkon/Terasse
        div.value ja
      div.item
        div.label Einbauküche
        div.value ja
      div.item
        div.label Anzahl zimmer
        div.value mindestens 2
      div.item
        div.label Qualität der Lage
        div.value gut
  div.additional-block
    h2 Notizen
    p 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. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  
            
          
!
            
              @import "compass/css3";

@import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";

$darkgrey: #969696; $grey: #c2c2c2; $lightgrey: #f0f0f0; $white: #fcfcfc; $bordergrey: #dadada; $black: #333; $buttonhover: #eaeaea; $link: #1b75bb; $green: #439b18;

// Helper classes
.clearfix:after { clear: both; display: block; content: " "; height: 0; visibility: hidden;}
.clearfix {	display: inline-block; }
.oneliner { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
// Firefox3 fix
html>/**/body .oneliner, x:-moz-any-link { white-space: normal; }

.thisToFlexContainer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex; }
.thisToFlexWidthOne { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; flex: 1; }
.thisToFlexWidthTwo { -webkit-box-flex: 2; -moz-box-flex: 2; -webkit-flex: 2; flex: 2; }

// Main
body { background: $lightgrey; font: 100%/1.5 Tahoma, sans-serif; overflow-y: scroll;}
.wrapper { font-size: 0.6875em; color: $black; }
h2 { margin: 0; padding: .5em; border-bottom: 1px solid $lightgrey; font-weight: normal; }
p { padding: 0 1em; }
ul { list-style-type: none; margin: 0; padding: 0; }
.label { color: $darkgrey; }
.value { color: $black; }
.value.link { color: $link; cursor: pointer; }
.bold { font-weight: bold; }

// Every Block
.additional-block { background: $white; border: 1px solid $bordergrey; margin: 1em; position: relative; 
  .clearfix { width: 100%; display: block; }
  .label, .value { @extend .oneliner; display: inline-block; }
}

// Estateinfo
.estateinfo-block {}
.box-container{@extend .thisToFlexContainer; width: 100%;}
.image-container{padding:1em 0 0 1em;}
.estate-info { @extend .thisToFlexWidthOne; padding: 1em;
  h2{border:none; padding: 0 0 0 0;}
  .item { @extend .thisToFlexContainer; line-height: 1.7; width: 100%;
    .label { width: 12em; padding: 0; }
    .value { @extend .thisToFlexWidthOne; padding: 0; }
  }
}

.buttons { width: 17em;
  li { text-align: left; background: $lightgrey; cursor: pointer; padding: 1.2em 1em 1.2em 2em; position: relative; 
    i { display:inline-block; font-size: 14px; padding-right: .5em; width: 1em; }
    &:hover { background: $buttonhover; }
  }
  .moregroup { display: none; width: 17em; position: absolute; left: 0; top: 3.8em; z-index: 10;
    li { position: relative; background: darken($lightgrey,5); padding-left: 4.5em; padding-top: .6em; padding-bottom: .5em; 
      &:hover { background: darken($buttonhover,8); }
    }
  }
  h2 ~ & { position: absolute; top: 0; right: 0; }
}

// Carousel
.carousel-block { background: $white; border-bottom: 1px solid $bordergrey; white-space: nowrap; overflow-x: scroll;
  .container { display: inline-block; padding: 1em 0 1em 0; margin-left: 1em; text-align: center; 
    &:hover { background: $lightgrey; }
  }
  .container:last-child { padding-right: 1em; }
  img { display: inline-block; width: 10em; height: 10em; background: $lightgrey; cursor: pointer; }
  .description { @extend .oneliner; color: $darkgrey; cursor: pointer; width: 10em; margin: 0; padding: 0;
    &:hover { color: $black; }
  }
}

// Address details
.address-details { padding: 1em 0;
  .item { width: 29em; display: inline-block; margin-right: 1em; line-height: 1.7;
    .label, .value { padding: 0 1em; }
    .label { width: 8em; }
    .value { width: 17em; }
  }
}

// Relations
.relations-block, .activities-block, .searchprofiles-block {
  .item { @extend .thisToFlexContainer; line-height: 2; width: 100%;
    i { display: inline-block; width: 2em; font-size: 14px; text-align: center; color: $black; line-height: 1.6; 
      &[class=icon-ok-sign] { color: $green; }
    }
    .undone { opacity: .2; color: $green; }
  }
  p { margin: 0; color: $darkgrey; padding: 0 1em 0 0; }
  .label { width: 10.5em; }
  .value { @extend .thisToFlexWidthOne; height: 1.5em; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
  .description { width: 13em; /* Chrome 12em */ }

  // Gives first and last item a margin for a nice distance within the block
  h2 + .item, .buttons + .item { margin-top: 1em; }
  .item:last-child { margin-bottom: 1em; }
}

@media screen and (min-width: 1200px) {
  .carousel-block {
    img {
      width: 20em;
      height: 20em; 
    }
    .description { width: 20em; }
  }
}

@media screen and (max-width: 800px) {
  .carousel-block {
    img {
      width: 5em;
      height: 5em; 
    }
    .description { width: 5em; }
  }
}
            
          
!
            
              // Pressing 'Weitere Aktionen' toggles submenu
$('.buttons > .more').click(function(event) {
  $(this).find('.moregroup').slideToggle('fast');
});

// Pressing one of the submenus toggles submenu
$('.moregroup > li').click(function(event) {	
  $(this).parent().find('.moregroup').slideToggle('fast');
});

// Close the submenus if clicking somewhere else
$('html').click(function(){
  $(this).find('.moregroup').slideUp('fast');
});

// ... and do not do any other action.
$('.buttons > .more').click(function(event){
    event.stopPropagation();
});

// Text-overflow polyfill for Firefox 3: https://raw.github.com/bramstein/text-overflow/master/lib/jquery.text-overflow.js
$('.label').textOverflow();
$('.value').textOverflow({
    autoUpdate: true
});
$('.description').textOverflow();


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console