Advertisement
Sebuahhobi98

cardHotel

Sep 8th, 2021
2,026
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.57 KB | None | 0 0
  1. <style type="text/css">
  2.         @import url(http://fonts.googleapis.com/css?family=Lato:400,700);
  3.         .rating {
  4.             position: relative;
  5.             display: flex;
  6.             width: 2.875rem;
  7.             height: 2.875rem;
  8.             margin-top: -1.5rem;
  9.             margin-left: 0.1rem;
  10.             justify-content: center;
  11.             align-items: center;
  12.             border: .25rem solid #fff;
  13.             border-radius: 50%;
  14.             color: #fff;
  15.             background-color: rebeccapurple
  16.         }
  17.  
  18.         .card-title {
  19.             font-family: 'Lato';
  20.             font-style: normal;
  21.             font-weight: 500;
  22.             color: #653399
  23.         }
  24.  
  25.         .card-text {
  26.             font-family: 'Lato';
  27.             font-style: normal;
  28.             font-weight: 100;
  29.             font-size: 13px
  30.         }
  31.  
  32.         .marker {
  33.             color: red
  34.         }
  35.  
  36.         .star-rating {
  37.             color: #f7b944
  38.         }
  39.         .cus{
  40.             display: flex;
  41.             margin-top: -50;
  42.         }
  43.     </style>
  44. <div class="container" style="display: block;">
  45.         <div class="row">
  46.             <div class="col-12">
  47.                 <div class="form-group mt-3 text-center">
  48.                     <button type="submit" class="btn btn-primary" id="gps_track"><i class="fas fa-search" aria-hidden="true"></i> Cari Hotel di Lokasi Terdekat</button>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.         <div class="row">
  53.             <div class="col-12 mb-3">
  54.                 <div class="card border border-primary">
  55.                     <div class="card-body hor">
  56.                         <div class="col-4 text-center">
  57.                             <img src="https://i.imgur.com/7cNRozs.jpg" class="img-fluid">
  58.                             <p class="rating">9.2</p>
  59.                         </div>
  60.                         <div class="col-8">
  61.                             <h5 class="card-title">Hotel Single View</h5>
  62.                             <p class="card-text"><i class="fa fa-map-marker marker"></i> Singla street, New Delhi, 110034</p>
  63.                             <p class="card-text">
  64.                                 <i class="fa fa-star star-rating"></i><i class="fa fa-star star-rating"></i>
  65.                                 <i class="fa fa-star star-rating"></i><i class="fa fa-star star-rating"></i>
  66.                             </p>
  67.                             <p class="card-text">$ 1,399</p>
  68.                         </div>
  69.                     </div>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.     </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement