Newer
Older
GestionHoteleria / src / app / components / shared / info-bar / info-bar.component.html
James Cuadrado on 23 May 2021 2 KB init
<div class="info-bar-wraper sec-padding">
  <div class="container">
    <div fxLayout="row wrap" class="info-bar">
      <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
        <div class="light-block" fxLayout="column"  fxLayoutAlign="start center">
         <div class="icon"><mat-icon class="mat-icon-xlg  m-0">card_giftcard</mat-icon></div>
          <div class="content">
            <p>BONUS PLUS</p>
            <span class="text-muted m-0">Get a bonus plus for buying more that three products</span>
          </div>
        </div>
      </div>
      <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
        <div class="light-block" fxLayout="column"  fxLayoutAlign="start center">
          <div class="icon"> <mat-icon class="mat-icon-xlg  m-0">local_shipping</mat-icon></div>
          <div class="content">
            <p>FREE SHIPPING</p>
            <span class="text-muted m-0">Free shipping on all orders over $99</span>
          </div>
        </div>
      </div>
      <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
        <div class="light-block" fxLayout="column"  fxLayoutAlign="start center">
          <div class="icon"> <mat-icon class="mat-icon-xlg m-0">monetization_on</mat-icon></div>
          <div class="content">
            <p>MONEY BACK GUARANTEE</p>
            <span class="text-muted m-0">100% money back guarantee</span>
          </div>
        </div>
      </div>
      <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
        <div class="light-block no-bd" fxLayout="column"  fxLayoutAlign="start center">
          <div class="icon">   <mat-icon class="mat-icon-xlg m-0">history</mat-icon></div>
          <div class="content">
            <p>ONLINE SUPPORT 24/7</p>
            <span class="text-muted m-0">Call us: 02 3555 65454 55</span>
          </div>
        </div>
      </div>
    </div>
    <div class="subscribe">
      <div class="subscribe-wrap" fxLayout="row" fxLayoutAlign="space-between center" >
        <p>Check for the existing products at the moment, and new discounts</p>
        <div class="form-wrap" fxLayout="row">
        <div class="inputIc"> <input type="text" id="name" name="name" placeholder="Search for desired products" ></div>

          <button mat-raised-button color="primary">SUBSCRIBE</button>
        </div>
      </div>
    </div>
  </div>
</div>