STYLING INDEX

 INDEX.EJS

<% layout("/layouts/boilerplate")%>
<body>
  <h2>All Listings</h2>
  <!-- <form method="get" action="/listings/new">
      <button>Add new Listing</button>
    </form> -->

  <div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1">
    <% for(listing of AllListings){%>
    <a href="/listings/<%=listing._id%>" class="listing-link">
      <div class="card col">
        <img
          src="<%= listing.image%>"
          class="card-img-top"
          alt="listing_image"
          style="height: 20rem"
        />
        <div class="card-img-overlay"></div>
          <div class="card-body">
          <p class="card-text">
            <b><%= listing.title%></b><br />
            &#8377;<%= listing.price.toLocaleString("en-IN") %>/night
          </p>
        </div>
      </div>
    </a>
    <%}%>
  </div>

STYLE.CSS


/* CARDS */
.card{
    border: none !important;
    margin-bottom: 2rem;
}
.card-img-top{
    border-radius: 1rem !important;
    width: 100% !important;
    object-fit: cover !important;
}
.card-body{
    padding: 0 !important;
}
.card-text{
    font-weight: 400 !important;
}
.lisiting-link{
    text-decoration: none;
}
.listing-link:hover{
    text-decoration:underline;
}



/* CARD EFFECTS */
.card-img-overlay{
    opacity: 0;
}
.card-img-overlay:hover{
    opacity: 0.2;
    background-color: white;
}

Comments

Post a Comment