Template html
<header style="text-align: center;">
<div style="color:#4f4f4f; text-align: center; font-size:20px"><b>{{Property Name}}</b></div>
<div style="margin: 10px 0; color: #089cb2">
{{#Price indicator}} $ {{/Price indicator}}
</div>
<div><span class="material-icons icon">place</span><i>Located in <strong>{{Within London}}</strong></i></div>
</header>
<hr>
<img src="{{Image}}">
<div style="padding-bottom:20px;padding-top:20px; text-align: center;"><span style="color: black;font-size:18px"><span class="material-icons icon">event_available</span><b><i> {{Availablity}}</i></b></span></div>
<div style="color: #4f4f4f;font-weight:bold">Amenities:</div>
<ul>
{{#Amenities}}
<li>{{.}}</li>
{{/Amenities}}
</ul>
<div style="height:50px"></div>
<footer>
<a target="_blank" href="https://www.google.com" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<i class="material-icons mdc-button__icon" aria-hidden="true">shopping_cart</i>
<span class="mdc-button__label">Buy now</span>
</a>
</footer>
<div style="color:#4f4f4f; text-align: center; font-size:20px"><b>{{Property Name}}</b></div>
<div style="margin: 10px 0; color: #089cb2">
{{#Price indicator}} $ {{/Price indicator}}
</div>
<div><span class="material-icons icon">place</span><i>Located in <strong>{{Within London}}</strong></i></div>
</header>
<hr>
<img src="{{Image}}">
<div style="padding-bottom:20px;padding-top:20px; text-align: center;"><span style="color: black;font-size:18px"><span class="material-icons icon">event_available</span><b><i> {{Availablity}}</i></b></span></div>
<div style="color: #4f4f4f;font-weight:bold">Amenities:</div>
<ul>
{{#Amenities}}
<li>{{.}}</li>
{{/Amenities}}
</ul>
<div style="height:50px"></div>
<footer>
<a target="_blank" href="https://www.google.com" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<i class="material-icons mdc-button__icon" aria-hidden="true">shopping_cart</i>
<span class="mdc-button__label">Buy now</span>
</a>
</footer>
Template CSS
hr {
width: 150px;
height: 1px;
background-color: #4f4f4f;
margin-top: 15px
}
img {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 250px
}
.icon {
font-size: 16px;
vertical-align: middle;
padding-right: 5px;
}
.mdc-card-content {
height: 100%;
position: relative;
}
footer {
text-align: center;
width: 100%;
position: absolute;
bottom: 20px;
left: 0;
}
No comments:
Post a Comment