Real Estate Flyer Template

index.html

<div class="container">
  <main>
    <img src="http://www.directcommercialfunding.com/images/apartment-building-loans.jpg" alt="apartment building" />
    <div class="for-sale">
      <header>
        <i class="fa fa-home"></i>
        <h3><span class="blue">DESIGNYEP</span><br /> PROPERTY</h3>
      </header>
      <h1><span class="blue light-weight">FOR</span><br /> <strong>SALE</strong></h1>
      <h4>OFFERED AT</h4>
      <h2>$400,000</h2>
    </div>
    <!--for-sale-->
  </main>
  <div class="slogan">
    <h3>the beatiful living home</h3>
  </div>
  <!--slogan-->
  <div class="home-features">
    <figure>
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d5/62/2d/d5622d29d21649f0b793c33d0f48c928.jpg" alt="bed room" />
      <figcaption>
        <h4>2 Bed Room</h4>
      </figcaption>
    </figure>
    <figure>
      <img src="https://st.hzcdn.com/fimgs/a64112da07c031fe_9887-w500-h400-b0-p0--modern-living-room.jpg" alt="living room" />
      <figcaption class="active">
        <h4>Living Room</h4>
      </figcaption>
    </figure>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Modern_kitchen_gnangarra.JPG/1200px-Modern_kitchen_gnangarra.JPG" alt="kitchen" />
      <figcaption>
        <h4>Modular Kitchen</h4>
      </figcaption>
    </figure>
  </div>
  <!--home-features-->
  <div class="more-info">
    <ul>
      <h2><span class="blue">OUR</span> FACILITIES</h2>
      <li>Lorem ipsum dolor sit amet, consectetur elit</li>
      <li>Adipisicing elit. Explicabo inventore, accusantium </li>
      <li>Commodi necessitatibus eius reiciendis iusto</li>
      <li>Deleniti voluptate earum magnam fuga voluptates</li>
      <li>Magnam, nemo unde doloremque eaque dicta</li>
    </ul>
    <div class="realtor">
      <figure>
        <img src="https://d3iw72m71ie81c.cloudfront.net/male-73.png" alt="" />
        <figcaption>
          <h3>Mike Smith</h3>
          <p>Exclusive Broker</p>
        </figcaption>
      </figure>
    </div>
  </div>
  <!--more-info-->
  <footer>
    <ul>
      <li><i class="fa fa-phone"></i> Call: 012 345 6789</li>
      <li><i class="fa fa-envelope"></i> contact@yourdomain.com</li>
      <li><i class="fa fa-globe"></i> www.designyep.com</li>
    </ul>
  </footer>
</div>
<!--container-->

real-estate-flyer-template.markdown

Real Estate Flyer Template

Created a real estate flyer template using FlexBox.

A Pen by Juan on CodePen.

License.

script.js

// http://freepsdflyer.com/wp-content/uploads/2016/05/Free-Real-Estate-Flyer-PSD-Template-FreePSDFlyer-com.jpg

style.scss

.blue {
  color: rgb(92, 133, 214);
}
img {
  width: 100%;
}
.container {
  width: 650px;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: rgb(255,255,255);
  box-shadow: 0 0 10px gray;
}
main {
  display: flex;
  img {
    flex: 2;
  }
  .for-sale {
    flex: 1;
    padding: 20px 0;
    header {
      display: flex;
      align-items: center;
      padding-left: 20px;
      .fa-home {
        font-size: 45px;
        background: rgb(92, 133, 214);
        color: rgb(255,255,255);
        padding: 10px;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
    h1 {
      font-size: 40px;
      line-height: 1;
      margin-bottom: 0;
      padding-left: 20px;
      .light-weight {
        font-weight: 100;
      }
    }
    h4 {
      line-height: 0;
      font-size: 13px;
      padding-left: 20px;
      color: rgb(92, 133, 214);
    }
    h2 {
      font-size: 30px;
      font-weight: 200;
      padding-left: 20px;
      margin-top: 0;
    }
  }
}
.slogan {
  background: rgb(92, 133, 214);
  text-transform: uppercase;
  color: rgb(255,255,255);
  flex: 1;
  text-align: center;
  letter-spacing: 2px;
  padding: 10px;
  h3 {
    margin: 0;
  }
}
.home-features {
  display: flex;
  figure {
    margin: 0;
    flex: 1;
    img {
      height: 150px;
      margin: 0;
      display: block;
    }
  }
  figcaption {
    background: rgb(50,50,50);
    color: rgb(255,255,255);
    padding: 10px;
    text-align: center;
    margin-top: 0;
    h4 {
      margin: 0;
    }
  }
  .active {
    background: rgb(92, 133, 214);
  }
}
.more-info {
  display: flex;
  ul {
    list-style: none;
    margin: auto 0;
    padding-right: 0;
    padding-left: 0;
    flex: 2;
    h2 {
      margin-left: 20px;
      margin-top: 0;
    }
    li {
      margin: 10px 0 0 20px;
      font-size: 14px;
      color: gray;
      &:before {
        content: '\f00d';
        font-family: 'FontAwesome';
        margin-right: 15px;
        color: rgb(92, 133, 214);
      }
    }
  }
  .realtor {
    flex: 1;
    line-height: 0.5;
    text-align: center;
    color: rgb(255,255,255);
    background: linear-gradient(0deg,rgb(50,50,50) 51%,rgb(92, 133, 214) 51%);
    figure img {
      border-radius: 5px;
    }
  }
}
footer {
  background: rgb(92, 133, 214);
  color: rgb(255,255,255);
  ul {
    list-style: none;
    padding: 20px;
    margin: 0;
    display: flex;
    justify-content: space-around;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />