Elegant Hotel Promotion Card Template for Your Website

<div class="bg-light d-flex justify-content-center align-items-center vh-100">
    <div class="card m-5 border-0 shadow" style="width: 40rem">
        <div class="card-body d-flex">
            <div class="img">
                <img src="https://wallpapercave.com/wp/wp2787397.jpg" class="card-img-top rounded-3" alt="" style="width: 13rem; height: 200px" />
            </div>
            <div class="content">
                <div class="upper-content d-flex">
                    <div>vacantions</div>
                    <div><i class="fa-solid fa-star"></i> 4.96 (reviews)</div>
                    <div>
                        <i class="fa-solid fa-heart"></i>
                    </div>
                    <div class="bg-whitesmoke rounded-pill" style="padding: 0px 5px">
                    Superhost
                    </div>
                </div>
                <div class="middle-content">
                    <h4>The Mejestic and  WonderFul Behamas</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis et augue eget rutrum. Praesent ullamcorper quam quis volutpat . <b>$110</b>/night </p>
                </div> 
            </div>
        </div>
    </div>
</div>

.content {
            width: 100%;
        }

        .upper-content {
            justify-content: space-around;
        }

        .bg-whitesmoke {
            background-color: whitesmoke;
        }

        .fa-star {
            color: orange;
        }

        .fa-heart {
            color: red;
        }
        .middle-content {
        margin:5px 20px; 

        }
        .middle-content h4{
        font-weight: 800;
        }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

BootStrap 5

Hotel Booking Card

AdBlock Detected!