Tuesday, 10 October 2023
Wednesday, 4 October 2023
Card View
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;
}
Referensi
Template Record
<div style="padding: 10px;">
<header>
<div style="color: #4f4f4f; text-align: center; font-size:20px"><b>{{Property Name}}</b></div>
<div style="text-align: center;"><i>Located in <strong>{{Within London}}</strong></i> <span class="material-icons" style="font-size:16px;vertical-align:middle">place</span></div>
</header>
<hr style="width: 50%; height: 2px; background-color: #4f4f4f; margin-bottom: 20px;" />
<div style="text-align: center;"><img style="max-width:80%" src="{{Image}}" /></div>
<table style="border:none; padding-left: 20px;border-spacing: 10px;">
<tbody>
<tr>
<td>
<div style="padding-bottom:20px;"><span style="color: black;font-size:18px"><span class="material-icons" style="font-size:16px;vertical-align:middle">event_available</span><b><i> {{Availablity}}</i></b></span></div>
<div><span style="color: #4f4f4f;"><strong>Total floor area: </strong></span>{{Total floor area}} <i style="font-size:13px">sq. ft.</i></div>
<h4><span style="color: #4f4f4f;">Amenities: </span></h4>
<ul>{{#Amenities}}
<li>{{.}}</li>
{{/Amenities}}</ul>
</td>
<td>
<p><span style="color: #4f4f4f;"><strong>Price: {{Price}}</strong></span></p>
<p><span style="color: #4f4f4f;"><strong>Deposit: </strong></span>{{Deposit}}</p>
<p><strong style="color: #4f4f4f;">Minimum stay: </strong>{{Minimum stay}}</p>
<div style="background-color: #4f4f4f; border-radius: 5px; padding-top:2px; padding-bottom:2px">
<span style="padding-left: 10px; padding-right: 10px; white-space: nowrap; color: white;"><span class="material-icons" style="font-size:16px;vertical-align:middle">phone</span> Contact: {{Contact Number}}</span>
</div>
<div style="border: solid;border-radius:5px; border-color:lightgray; margin-top: 10px">
<table>
<tbody>
<tr>
<td><img style="width: 90px;" src="https://drive.google.com/thumbnail?sz=w800&id=1VaLhuz0CXCY_LBRTs1xBuQJsnloLEeTR" /></td>
<td style="font-size: 22px;"><strong>{{Energy Class}}</strong></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<hr style="width: 50%; height: 2px; background-color: #4f4f4f;margin-top:15px" />
</div>
CSS
----------
<div style='display: flex; justify-content: center; align-items: center; height: 100%; border: 1px solid grey; padding: 0 5%'>
Please select a specific record
</div>
Image
------------
https://drive.google.com/thumbnail?sz=w800&id=1vpcwfR0lXQUjwxpCCX9veIRl5SkG0M3F
Monday, 2 October 2023
Subscribe to:
Posts (Atom)
Training and Learning Center - Pusat Belajar dan Latihan
https://www.youtube.com/watch?v=fzoIzAsR7kQ https://www.youtube.com/watch?v=GPRyH6CtHQA Training & Learning Company https://www.tlc-uk...
-
https://www.youtube.com/watch?v=erTnP8Tbk3A https://www.youtube.com/watch?v=JG18KwjqFwU https://www.youtube.com/watch?v=erTnP8Tbk3A https:... -
https://www.youtube.com/@pelitapromointernusa4813 https://www.youtube.com/watch?v=riUmSD14FVY&list=PLfD3yjoFozg7-dYm1Ci_pSNa0308Y3VrH ...
-
https://www.youtube.com/watch?v=sTa08S-LRgQ https://www.youtube.com/watch?v=MTyKg45TOpg&list=PL1Ol3ZnzbSl309cAkT8Oni_9i51GvJIkj&in...
