Real Estate Listing banner Images and CSS

• Tweet

• Tweet

Hi Guys,

While I was browsing a realestate site I came across something that I think was really good. A Cool identifier to mark listings as one of the below mentioned statuses.

1. Leased
2. Off Market
3. For Lease
4. Selling Now
5. Sold
6. Under Contract

So I thought I should make some markers that could be useful for few.

Below is the artwork I worked on and is available under open license. You can use the images for FREE on both Commercial or Non-Commercial sites if you like. My motive is to show how you can place these onto your DIV so it all looks nice and clean.

Adobe Illustrator Vector file can be downloaded at the end of this post (registration required)

`For Lease` Banner

`Leased` Banner

`Sold` Banner

`Under Contract` banner

`Off Market` banner

`Selling Now` banner

Alright now lets take a look at the CSS, markup and the demo

The Markup

<div class='listing'>
    <div class='banner'></div>
    <div class='title'>Property for sale</div>
    <!-- Your other markup goes here -->
</div>

The CSS

.listing {
        width:600px;
        height: 200px;
        border: 8px solid rgba(59,95,147,0.4);
        border-radius: 10px;
        position: relative;
      }
      .banner {
         position: absolute; 
         top:0;
         left:0;
         height:150px;
         width:150px;
         background: url(../img/real-status/sold.png) 0 0 no-repeat;
         background-size: 60% 60%;
         opacity: 0.7;
      }
      .title {
        background: rgba(59,95,147,0.6);
        padding: 10px;
        color: #FFF;
      }

What it looks like

This is just a basic example to give you an idea on how to use the above labels.

Demo

http://jaspreetchahal.org/examples/css-examples/real-estate-listing-banners.html

Download Vector

http://bit.ly/M23SNp

I hope that this will be helpful in one way or another.

Hope to bring you some other cool stuff in future.

Cheers,

Advertisement