Main Content
Featured Property Styles
Standard Wireframing Elements
Featured Property Style 1
Close
HTML
<section class="aios-property-style-2">
<h2>Featured <strong>Properties</strong></h2>
<div class="container">
<div class="row">
<div class="fp-wrap">
<div class="col-md-6 fp-list">
<a href="#">
<canvas width="555" height="258" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400<br> El Segundo, CA 90245 USA</p>
<span>View Details</span>
</div>
</a>
</div>
<div class="col-md-6 fp-list">
<a href="#">
<canvas width="555" height="258" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400<br> El Segundo, CA 90245 USA</p>
<span>View Details</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section><!-- end of property style 2 -->
CSS
.aios-property-style-1{
width: 100%;
height: auto;
margin: 20px 0;
}
.aios-property-style-1 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-property-style-1 h2 strong{
font-weight: 700;
}
.aios-property-style-1 .fp-wrap{
}
.aios-property-style-1 .fp-wrap canvas{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
display: block;
}
.aios-property-style-1 .fp-wrap canvas img{
display: block;
width: 100%;
height: auto;
}
.aios-property-style-1 .fp-wrap .fp-list{
padding-bottom: 40px;
}
.aios-property-style-1 .fp-wrap .fp-list a{
text-decoration: none;
}
.aios-property-style-1 .fp-wrap .fp-list h3{
color: #959595;
font-weight: 700;
font-size: 25px;
text-align: center;
letter-spacing: 0.1em;
position: relative;
padding: 30px 0;
}
.aios-property-style-1 .fp-wrap .fp-list h3:after{
display: block;
content: "";
position: absolute;
left: 50%;
bottom: 14px;
margin-left: -48.5px;
width: 97px;
height: 1px;
background: #009bbb;
}
.aios-property-style-1 .fp-wrap .fp-list p{
font-weight: 300;
font-size: 14px;
color: #959595;
text-align: center;
}
CSS Mobile
Javascript
Featured Properties
Featured Property Style 2
Close
HTML
<section class="aios-property-style-2">
<h2>Featured <strong>Properties</strong></h2>
<div class="container">
<div class="row">
<div class="fp-wrap">
<div class="col-md-6 fp-list">
<a href="#">
<canvas width="555" height="258" style="background-image: url(components/featuredproperties/fp-style-2/images/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400<br> El Segundo, CA 90245 USA</p>
<span>View Details</span>
</div>
</a>
</div>
<div class="col-md-6 fp-list">
<a href="#">
<canvas width="555" height="258" style="background-image: url(components/featuredproperties/fp-style-2/images/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400<br> El Segundo, CA 90245 USA</p>
<span>View Details</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section><!-- end of property style 2 -->
CSS
.aios-property-style-2{
width: 100%;
height: auto;
margin: 20px 0;
}
.aios-property-style-2 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-property-style-2 h2 strong{
font-weight: 700;
}
.aios-property-style-2 .fp-wrap canvas{
width: 50%;
height: 258px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
display: inline-block;
vertical-align: top;
}
.aios-property-style-2 .fp-wrap canvas img{
width: 100%;
height: auto;
display: block;
}
.aios-property-style-2 .fp-wrap .fp-list{
position: relative;
margin-bottom: 50px;
}
.aios-property-style-2 .fp-wrap .fp-list a{
display: block;
position: relative;
text-decoration: none;
color: inherit;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details{
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50.2%;
background: #fff;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details h3{
color: #959595;
font-weight: 700;
font-size: 29px;
text-align: center;
letter-spacing: -0.02em;
position: relative;
padding: 29px 0;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details h3:after{
display: block;
content: "";
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -48.5px;
width: 97px;
height: 1px;
background: #009bbb;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details p{
font-weight: 300;
font-size: 13px;
line-height: 22px;
text-align: center;
padding-top: 10px;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details span{
width: 132px;
height: 44px;
background-color: #169bc6;
color: #fff;
display: block;
margin: 0 auto;
text-align: center;
line-height: 44px;
text-decoration: none;
margin-top: 25px;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details span:hover{
background-color: #0fb6ec;
}
CSS Mobile
@media only screen and (max-width: 767px){
.aios-property-style-2 .fp-wrap canvas{
width: 100%;
}
.aios-property-style-2 .fp-wrap .fp-list .pro-details{
position: static;
width: 100%;
}
}
Javascript
Featured Properties
Featured Property Style 3
Close
HTML
<section class="aios-property-style-3">
<h2>Featured <strong>Properties</strong></h2>
<div class="container">
<div class="row">
<div class="fp-wrap">
<div class="col-md-4 fp-list">
<a href="#">
<canvas width="360" height="306" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<span>View</span>
</div>
</a>
</div>
<div class="col-md-4 fp-list">
<a href="#">
<canvas width="360" height="306" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<span>View</span>
</div>
</a>
</div>
<div class="col-md-4 fp-list">
<a href="#">
<canvas width="360" height="306" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<div class="pro-details">
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<span>View</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
CSS
.aios-property-style-3{
width: 100%;
height: auto;
margin: 20px 0;
}
.aios-property-style-3 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-property-style-3 h2 strong{
font-weight: 700;
}
.aios-property-style-3 .fp-wrap canvas{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
display: block;
}
.aios-property-style-3 .fp-wrap canvas img{
width: 100%;
height: auto;
display: block;
}
.aios-property-style-3 .fp-wrap .fp-list{
margin-bottom: 50px;
}
.aios-property-style-3 .fp-wrap .fp-list a{
display: block;
position: relative;
width: 100%;
height: auto;
color: inherit;
text-decoration: none;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details{
position: absolute;
left: 0;
bottom: 0;
height: auto;
width: 100%;
background: rgba(0, 0, 0, 0.35);
padding: 25px 30px;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details h3{
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 0.001em;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details p{
color: #fff;
font-weight: 300;
font-size: 12px;
padding-top: 7px;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details span{
display: block;
position: absolute;
right: 30px;
top: 50%;
width: 83px;
height: 38px;
line-height: 38px;
font-weight: 300;
font-size: 13px;
color: #fff;
text-align: center;
background: #169bc6;
margin-top: -19px;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details span:hover{
background-color: #0fb6ec;
}
CSS Mobile
@media only screen and (max-width: 1199px) {
.aios-property-style-3 .fp-wrap .fp-list a .pro-details{
padding: 25px 17px;
}
.aios-property-style-3 .fp-wrap .fp-list a .pro-details span{
right: 15px;
}
}
Javascript
Featured Properties
Featured Property Style 4
Close
HTML
<section class="aios-property-style-4">
<h2>Featured <strong>Properties</strong></h2>
<div class="container">
<div class="row">
<div class="fp-wrap">
<div class="col-md-3 fp-list">
<a href="#">
<canvas width="263" height="326">
</canvas>
<div class="pro-details">
<h3>$5.1M</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<div class="bsbs">3 beds <i>|</i> 3 baths</div>
<span>View</span>
</div>
</a>
</div>
<div class="col-md-3 fp-list">
<a href="#">
<canvas width="263" height="326">
</canvas>
<div class="pro-details">
<h3>$5.1M</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<div class="bsbs">3 beds <i>|</i> 3 baths</div>
<span>View</span>
</div>
</a>
</div>
<div class="col-md-3 fp-list">
<a href="#">
<canvas width="263" height="326">
</canvas>
<div class="pro-details">
<h3>$5.1M</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<div class="bsbs">3 beds <i>|</i> 3 baths</div>
<span>View</span>
</div>
</a>
</div>
<div class="col-md-3 fp-list">
<a href="#">
<canvas width="263" height="326">
</canvas>
<div class="pro-details">
<h3>$5.1M</h3>
<p>2700 E. Walnut Ave., Suite 400</p>
<div class="bsbs">3 beds <i>|</i> 3 baths</div>
<span>View</span>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
CSS
.aios-property-style-4{
width: 100%;
height: auto;
margin: 20px 0;
}
.aios-property-style-4 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-property-style-4 h2 strong{
font-weight: 700;
}
.aios-property-style-4 .fp-wrap canvas{
width: 100%;
height: 100%;
background: url(images/image-holder-big.png) no-repeat center center #d7d7d7;
display: block;
}
.aios-property-style-4 .fp-wrap canvas img{
width: 100%;
height: auto;
display: block;
}
.aios-property-style-4 .fp-list{
margin-bottom: 40px;
}
.aios-property-style-4 .fp-list a{
display: block;
width: 100%;
height: 100%;
position: relative;
color: inherit;
text-decoration: none;
}
.aios-property-style-4 .fp-list a .pro-details{
display: block;
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 50%;
text-align: center;
padding: 0;
margin-top: -25%;
}
.aios-property-style-4 .fp-list a .pro-details h3{
color: #636363;
font-weight: 700;
font-size: 20px;
color: #636363;
}
.aios-property-style-4 .fp-list a .pro-details p{
font-weight: 300;
font-size: 13px;
color: #636363;
padding: 10px 0;
}
.aios-property-style-4 .fp-list a .pro-details .bsbs{
font-weight: 300;
font-size: 13px;
color: #636363;
border-top: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
margin: 0 41px;
padding: 17.5px 0;
}
.aios-property-style-4 .fp-list a .pro-details .bsbs i{
font-style: normal;
}
.aios-property-style-4 .fp-list a .pro-details span{
width: 83px;
height: 38px;
background: #169bc6;
color: #fff;
text-decoration: none;
display: block;
line-height: 38px;
margin: 20px auto;
}
CSS Mobile
Javascript
Featured Properties
Featured Property Style 5
Close
HTML
<section class="aios-property-style-1">
<h2>Featured <strong>Properties</strong></h2>
<div class="container">
<div class="row">
<div class="fp-wrap">
<div class="col-md-6 fp-list">
<a href="#">
<canvas width="555" height="306" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400 El Segundo, CA 90245 USA</p>
</a>
</div>
<div class="col-md-6 fp-list" >
<a href="#">
<canvas width="555" height="306" style="background-image: url(https://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/image-holder.png)">
</canvas>
<h3>$5,290,000</h3>
<p>2700 E. Walnut Ave., Suite 400 El Segundo, CA 90245 USA</p>
</a>
</div>
</div>
</div>
</div>
</section><!-- end of property style 1 -->CSS
.aios-property-style-5{
width: 100%;
height: auto;
margin: 20px 0;
}
.aios-property-style-5 h2{
text-align: center;
font-size: 26px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 6px;
padding: 25px 0;
}
.aios-property-style-5 h2 strong{
font-weight: 700;
}
.aios-property-style-5 .fp-wrap canvas{
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: #d7d7d7;
display: block;
}
.aios-property-style-5 .fp-wrap canvas img{
width: 100%;
height: auto;
display: block;
}
.aios-property-style-5 .fp-list{
margin-bottom: 40px;
}
.aios-property-style-5 .fp-list a{
display: block;
color: inherit;
text-decoration: none;
position: relative;
width: 100%;
height: 100%;
}
.aios-property-style-5 .fp-list a .prop-cont{
position: relative;
}
.aios-property-style-5 .fp-list a .prop-cont:after{
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #169bc6;
content: "";
z-index: 0;
opacity: 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-property-style-5 .fp-list a:hover .prop-cont:after{
opacity: 1;
}
.aios-property-style-5 .fp-list a h3{
font-size: 18px;
font-weight: bold;
color: #959595;
text-align: center;
text-transform: uppercase;
padding: 24px 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.aios-property-style-5 .fp-list a:hover h3{
color: #169bc6;
}
.aios-property-style-5 .fp-list a .pro-details{
position: absolute;
left: 0;
top: 30%;
width: 100%;
height: auto;
text-align: center;
z-index: 5;
opacity: 0;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
margin-top: -20%;
}
.aios-property-style-5 .fp-list a:hover .pro-details{
opacity: 1;
top: 50%;
}
.aios-property-style-5 .fp-list a .pro-details h4{
font-weight: bold;
font-size: 20px;
color: #ffffff;
}
.aios-property-style-5 .fp-list a .pro-details p{
color: #ffffff;
font-weight: 300;
font-size: 13px;
padding: 15px 0;
}
.aios-property-style-5 .fp-list a .pro-details .bsbs{
width: 164px;
height: 43px;
border: solid 1px #fff;
margin: 0 auto;
color: #fff;
line-height: 43px;
font-weight: 300;
font-size: 13px;
}
CSS Mobile
Javascript