Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | @if(trip){
<div class="city-outer card p-2">
<div class="city-box">
<div class="city-image" style="position: relative" (mouseenter)="setHover(true)" (mouseleave)="setHover(false)">
<div class="box">
<img width="264" height="247" class="img-fluid" alt="Trip image" style="min-height: 247px;"
[ngStyle]="{'min-width': mainPage() ? '304px' : 'none'}" ngSrc="{{ replaceUrl(trip['img-url']) }}" />
</div>
<div class="preview-btn" style="position: absolute; top: 10px; right: 10px">
<p class="badge-green border-circle" style="
padding: 4px 10px 4px 10px;
border-radius: 90px;
gap: 10px;
">{{trip['trip-length']}} Days</p>
</div>
<div class="title" [ngStyle]="{bottom: mainPage() ? '0px' : '0px'}" (mouseenter)="setHover(true)"
(mouseleave)="setHover(false)">
<span style="font-weight: 100;">From</span>${{trip['marketing-price'].cents / 100}}<span
style="font-weight: 100;">USD</span>
</div>
</div>
<div style="
min-height: 145px;
display: flex;
flex-direction: column;
justify-content: space-between;">
<div>
<p class="p-0 m-0 mt-2" style="
font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
">{{trip.name}}</p>
</div>
<div class="my-2 d-flex justify-content-start align-items-start">
<img loading="lazy" src="/assets/images/globe-05.svg" style="width: 33px;" width="33px"
height="33px" alt="globe-05">
<p class="ps-2 m-0 p-0" style="
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
">{{countries}}</p>
</div>
<div class="d-flex">
<a class="btn-sm me-1 btn-green text-center py-1" [ngStyle]="{'min-width': mainPage() ? '154px' : '0px'}"
[href]="['/trips/' + trip.slug]">View Trip</a>
<button class="btn-sm btn-outline-green py-1" [ngStyle]="{'min-width': mainPage() ? '154px' : '0px'}"
(click)="details()">View Map</button>
</div>
</div>
</div>
</div>
} |