Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Cards:

Bootstrap Image Card for Hotel Reservation

Previous Code Next Code

Cards are such great features that many websites overuse them. You can use cards for advertising almost anything in your website. Basically, we use cards to display all the important information from a page in a shorter less detailed manner. Besides that, most cards also feature some sort of a “share” button which provokes engagement. The reason cards have become extremely popular among websites is their responsiveness and compatibility with smartphones and tablets. This is important because it makes everything look professional and work seamlessly. With that said, a nice use of cards could be for displaying your services.

In this post, we are introducing a Bootstrap image card which can be especially useful for hotel reservations. Booking sites, including hotel websites, tend to use effects that are easy on the eye and invite you to use the service. The code we have here feature a Bootstrap rotate image effect which is perfect for this matter. The Bootstrap image card itself features a cover photo, the price, and the options. In hover mode, the image zooms in and does a slight rotation. The design is sleek and professional and the image card effect feels easy on the eye. All in all, this card with Bootstrap image effects is incredibly inviting as a hotel reservation advertisement.

#

Bootstrap Image Effects

#

Bootstrap Rotate image

#

Bootstrap Image Card

#

Image Card Effect

<!-- This script got from frontendfreecode.com -->
<div class="gradient">
  <div class="wrap">
    <div class="card">
      <a href="#">
        <div class="price">60<span class="glyphicon glyphicon-eur" aria-hidden="true"></span>  / day</div>
        <div class="image"></div>
        <div class="description">
            <div class="row">
              <div class="col-sm-3"><h4>Hotel</h4></div>
              <div class="col-sm-9">
                 <ul>
                  <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span><p>3 persons</p></li>
                  <li><span class="glyphicon glyphicon-signal" aria-hidden="true"></span><p>Free WI-FI</p></li>
                   <li><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span><p>Kitchen</p></li>
                  <li><span class="glyphicon glyphicon-tint" aria-hidden="true"></span><p>Bathroom</p></li>
                </ul>                
              </div>
            </div>
        </div>
      </a>
    </div>
  </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.gradient {
  height: 100vh;
  background-color: grey;
  background-image: radial-gradient(ellipse closest-side, #fff, #ccc);
}
.wrap {
  width: 80%;
  position: relative;
  margin: 0 auto 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (min-width: 800px) {
  .wrap {
    width: 50%;
  }
}
.card {
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 5px #999;
  overflow: hidden;
  z-index: 10;
}
.image {
  background-image: url("https://www.frontendfreecode.com/img/master-suite-01.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: center;
  background-repeat: no-repeat;
  min-height: 300px;
  transition: all 0.5s ease-in-out;
}
.image:hover {
  transform: rotate(-3deg) scale(1.1);
  -webkit-transform: rotate(-3deg) scale(1.1);
}
.price {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  color: #eee;
  padding: 20px;
  background-color: #333;
  background-color: rgba(76, 166, 255, 0.9);
  font-size: 24px;
  z-index: 10;
}
.price span {
  font-size: 0.6em;
}
.description {
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
  color: #eee;
  padding: 10px 20px 0px 20px;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.7);
}
.description ul {
  padding: 0;
}
.description li {
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}
.description p {
  font-size: 12px;
  padding-top: 10px;
  text-align: center;
}
.description .glyphicon {
  font-size: 20px;
  text-align: center;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
.gradient {
  height: 100vh;
  background-color: grey;
  background-image: radial-gradient(ellipse closest-side, #fff, #ccc);
}
.wrap {
  width: 80%;
  position: relative;
  margin: 0 auto 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (min-width: 800px) {
  .wrap {
    width: 50%;
  }
}
.card {
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 1px 5px #999;
  overflow: hidden;
  z-index: 10;
}
.image {
  background-image: url("https://www.frontendfreecode.com/img/master-suite-01.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: center;
  background-repeat: no-repeat;
  min-height: 300px;
  transition: all 0.5s ease-in-out;
}
.image:hover {
  transform: rotate(-3deg) scale(1.1);
  -webkit-transform: rotate(-3deg) scale(1.1);
}
.price {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  color: #eee;
  padding: 20px;
  background-color: #333;
  background-color: rgba(76, 166, 255, 0.9);
  font-size: 24px;
  z-index: 10;
}
.price span {
  font-size: 0.6em;
}
.description {
  position: absolute;
  z-index: 10;
  bottom: 0;
  width: 100%;
  color: #eee;
  padding: 10px 20px 0px 20px;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.7);
}
.description ul {
  padding: 0;
}
.description li {
  list-style: none;
  display: inline-block;
  margin-right: 20px;
}
.description p {
  font-size: 12px;
  padding-top: 10px;
  text-align: center;
}
.description .glyphicon {
  font-size: 20px;
  text-align: center;
}
</style>

</head>
<body>
<div class="gradient">
  <div class="wrap">
    <div class="card">
      <a href="#">
        <div class="price">60<span class="glyphicon glyphicon-eur" aria-hidden="true"></span>  / day</div>
        <div class="image"></div>
        <div class="description">
            <div class="row">
              <div class="col-sm-3"><h4>Hotel</h4></div>
              <div class="col-sm-9">
                 <ul>
                  <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span><p>3 persons</p></li>
                  <li><span class="glyphicon glyphicon-signal" aria-hidden="true"></span><p>Free WI-FI</p></li>
                   <li><span class="glyphicon glyphicon-cutlery" aria-hidden="true"></span><p>Kitchen</p></li>
                  <li><span class="glyphicon glyphicon-tint" aria-hidden="true"></span><p>Bathroom</p></li>
                </ul>                
              </div>
            </div>
        </div>
      </a>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS