<!-- vertical dark card -->
          <div class="card-vertical card-dark">
              <div class="card-img-container">
                  <img src="..." alt="product-image" />
              </div>
              <div class="card-text">
                  <h1 class="card-title title-sm">Sony DSC W830 Cyber-Shot 20.1 MP Pointand Shoot Camera (Black) with 8X Optical Zoom</h1>
                  <h2 class="card-price">10,999/-</h2>
              </div>
              <div class="card-nav">
                  <div class="card-cta-btn">
                      <button class="btn primary-btn-sm add-cart">Add to Cart</button>
                      <div class="card-nav-icon">
                          <button class="btn primary-text-btn-sm icon-md">
                            <i class="far fa-heart"></i>
                          </button>
                          <button class="btn primary-text-btn-sm icon-md">
                            <i class="fas fa-share-alt"></i>
                          </button>
                      </div>
                  </div>
              </div>
          </div>

           <!-- horizontal light card -->
           <div class="card-horizontal card-light">
               <div class="card-img-container">
                   <img src="..." alt="product-image" />
               </div>
               <div class="card-body">
                   <div class="card-text">
                       <h1 class="card-title title-sm">
                         Canon EOS 1500D 24.1 Digital SLR Camera
                           (Black) with EF S18-55 is II Lens</h1>
                       <h2 class="card-price">35,999/-</h2>
                   </div>
                   <div class="card-nav">
                       <div class="card-cta-btn">
                           <button class="btn primary-btn-sm add-to-cart">
                             Add to Cart</button>
                           <div class="card-nav-icon">
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="far fa-heart"></i>
                               </button>
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="fas fa-share-alt"></i>
                               </button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

            <!-- horizontal dark card -->
            <div class="card-horizontal card-dark">
                <div class="card-img-container">
                    <img src="..." alt="product-image" />
                </div>
                <div class="card-body">
                    <div class="card-text">
                        <h1 class="card-title title-sm">
                          Canon EOS 1500D 24.1 Digital SLR Camera
                            (Black) with EF S18-55 is II Lens</h1>
                        <h2 class="card-price">35,999/-</h2>
                    </div>
                    <div class="card-nav">
                        <div class="card-cta-btn">
                            <button class="btn primary-btn-sm add-to-cart">
                              Add to Cart</button>
                            <div class="card-nav-icon">
                                <button class="btn primary-text-btn-sm icon-md">
                                  <i class="far fa-heart"></i>
                                </button>
                                <button class="btn primary-text-btn-sm icon-md">
                                  <i class="fas fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- vertical light card -->
            <div class="card-vertical card-light">
                <button class="btn secondary-text-btn-sm card-close">
                  <i class="fas fa-times"></i></button>
                <div class="card-img-container">
                    <img src="..." alt="product-image" />
                </div>
                <div class="card-text">
                    <h1 class="card-title title-sm">
                      Sony DSC W830 Cyber-Shot 20.1 MP Point and
                        Shoot Camera (Black) with 8X Optical Zoom</h1>
                    <h2 class="card-price">10,999/-</h2>
                </div>
                <div class="card-nav">
                    <div class="card-cta-btn">
                        <button class="btn primary-btn-sm add-to-cart">Add to Cart
                      </button>
                        <div class="card-nav-icon">
                            <button class="btn primary-text-btn-sm icon-md">
                              <i class="far fa-heart"></i>
                            </button>
                            <button class="btn primary-text-btn-sm icon-md">
                              <i class="fas fa-share-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

           <!-- vertical dark card -->
           <div class="card-vertical card-dark">
               <button class="btn secondary-text-btn-sm card-close">
                 <i class="fas fa-times"></i></button>
               <div class="card-img-container">
                   <img src="..." alt="product-image" />
               </div>
               <div class="card-text">
                   <h1 class="card-title title-sm">
                     Sony DSC W830 Cyber-Shot 20.1 MP Point and
                       Shoot Camera (Black) with 8X Optical Zoom</h1>
                   <h2 class="card-price">10,999/-</h2>
               </div>
               <div class="card-nav">
                   <div class="card-cta-btn">
                       <button class="btn primary-btn-sm add-to-cart">Add to Cart
                     </button>
                       <div class="card-nav-icon">
                           <button class="btn primary-text-btn-sm icon-md">
                             <i class="far fa-heart"></i>
                           </button>
                           <button class="btn primary-text-btn-sm icon-md">
                             <i class="fas fa-share-alt"></i>
                           </button>
                       </div>
                   </div>
               </div>
           </div>

           <!-- horizontal light card -->
           <div class="card-horizontal card-light">
               <button class="btn secondary-text-btn-sm card-close">
                 <i class="fas fa-times"></i></button>
               <div class="card-img-container">
                   <img src="..." alt="product-image" />
               </div>
               <div class="card-body">
                   <div class="card-text">
                       <h1 class="card-title title-sm">
                         Canon EOS 1500D 24.1 Digital SLR Camera
                           (Black) with EF S18-55 is II Lens</h1>
                       <h2 class="card-price">35,999/-</h2>
                   </div>
                   <div class="card-nav">
                       <div class="card-cta-btn">
                           <button class="btn primary-btn-sm add-to-cart">
                             Add to Cart</button>
                           <div class="card-nav-icon">
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="far fa-heart"></i>
                               </button>
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="fas fa-share-alt"></i>
                               </button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

           <!-- horizontal dark card -->
           <div class="card-horizontal card-dark">
               <button class="btn secondary-text-btn-sm card-close">
                 <i class="fas fa-times"></i></button>
               <div class="card-img-container">
                   <img src="..." alt="product-image" />
               </div>
               <div class="card-body">
                   <div class="card-text">
                       <h1 class="card-title title-sm">
                         Canon EOS 1500D 24.1 Digital SLR Camera
                           (Black) with EF S18-55 is II Lens</h1>
                       <h2 class="card-price">35,999/-</h2>
                   </div>
                   <div class="card-nav">
                       <div class="card-cta-btn">
                           <button class="btn primary-btn-sm add-to-cart">
                             Add to Cart</button>
                           <div class="card-nav-icon">
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="far fa-heart"></i>
                               </button>
                               <button class="btn primary-text-btn-sm icon-md">
                                 <i class="fas fa-share-alt"></i>
                               </button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>

         <!-- Vertical text overlay light card -->
         <div class="card-vertical text-overlay card-light">
             <div class="card-img-container">
                 <img src="..." alt="product-image" />
             </div>
             <div class="overlay-text-dark">
                 <h1 class="card-title title-md">Photography Backdrop</h1>
                 <p>Polyester Wrinkle Resistant Photography Backdrop Background Cloth for
                     Photo Shoot Portrait Video Shooting (8x12 ft)</p>
             </div>
         </div>

         <!-- Vertical text overlay light card -->
         <div class="card-vertical text-overlay card-light">
             <div class="card-img-container">
                 <img src="..." alt="product-image" />
             </div>
             <div class="overlay-text-white">
                 <h1 class="card-title title-md">Canon EOS 1500D</h1>
                 <p>Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens</p>
             </div>
         </div>

         <!-- Vertical text overlay dark card -->
         <div class="card-vertical text-overlay card-dark">
             <div class="card-img-container">
                 <img src="..." alt="product-image" />
             </div>
             <div class="overlay-text-white">
                 <h1 class="card-title title-md">Canon EOS 1500D</h1>
                 <p>Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF S18-55 is II Lens</p>
             </div>
         </div>

         <!-- Vertical text only light card -->
         <div class="card-text-only card-light">
             <h1 class="title-lg-wt-bold">Canon EOS 1500D</h1>
             <h2 class="title-md-wt-5">
               Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF
                 S18-55 is II Lens</h2>
             <p class="p-lg">
               EF-S mount compatible with all EF and EF-S lenses (crop-sensor mount
                 versatile and compact, especially when used with EF-S lenses)</p>
         </div>

         <!-- Vertical text only dark card -->
         <div class="card-text-only card-dark">
             <h1 class="title-lg-wt-bold">Canon EOS 1500D</h1>
             <h2 class="title-md-wt-5">
               Canon EOS 1500D 24.1 Digital SLR Camera (Black) with EF
                 S18-55 is II Lens</h2>
             <p class="p-lg">
               EF-S mount compatible with all EF and EF-S lenses (crop-sensor mount
                 versatile and compact, especially when used with EF-S lenses)</p>
         </div>

          <!-- vertical light card -->
          <div class="card-vertical card-light">
              <div class="badge-on-card top-left">
                  <h2>New Arrival</h2>
              </div>
              <div class="card-img-container">
                  <img src="..." alt="product-image" />
              </div>
              <div class="card-text">
                  <h1 class="card-title title-sm">
                    Sony DSC W830 Cyber-Shot 20.1 MP Point and
                      Shoot Camera (Black) with 8X Optical Zoom</h1>
                  <h2 class="card-price">10,999/-</h2>
              </div>
              <div class="card-nav">
                  <div class="card-cta-btn">
                      <button class="btn primary-btn-sm add-cart">Add to Cart</button>
                      <div class="card-nav-icon">
                          <button class="btn primary-text-btn-sm icon-md">
                            <i class="far fa-heart"></i>
                          </button>
                          <button class="btn primary-text-btn-sm icon-md">
                            <i class="fas fa-share-alt"></i>
                          </button>
                      </div>
                  </div>
              </div>
          </div>

         <!-- vertical light card -->
         <div class="card-vertical card-light card-shadow">
             <div class="card-img-container">
                 <img src="..." alt="product-image" />
             </div>
             <div class="card-text">
                 <h1 class="card-title title-sm">
                   Sony DSC W830 Cyber-Shot 20.1 MP Point and
                     Shoot Camera (Black) with 8X Optical Zoom</h1>
                 <h2 class="card-price">10,999/-</h2>
             </div>
             <div class="card-nav">
                 <div class="card-cta-btn">
                     <button class="btn primary-btn-sm add-cart">Add to Cart</button>
                     <div class="card-nav-icon">
                         <button class="btn primary-text-btn-sm icon-md">
                           <i class="far fa-heart"></i>
                         </button>
                         <button class="btn primary-text-btn-sm icon-md">
                           <i class="fas fa-share-alt"></i>
                         </button>
                     </div>
                 </div>
             </div>
         </div>

          <!-- square image -->
          <img src="..." alt="image" class="img-lg-square">

            <!-- round image -->
            <img src="..." alt="image" class="img-lg-round">

        <!-- responsive image -->
        <img src="..." alt="image" class="img-responsive" />

           <!-- outline input text field -->
           <div class="outline-text-input">
               <label for="text">Name
                   <input type="text" name="text" autocomplete="name" />
               </label>
           </div>

           <!-- outline input email field -->
           <div class="outline-email-input">
               <label for="email">Email *
                   <input type="email" name="email" required autocomplete="email" />
               </label>
           </div>

           <!-- outline input password field -->
           <div class="outline-password-input">
               <label for="password">Password *
                   <input type="password" name="password" autocomplete="current-password" required value="..." />
                   wrong password, try again
               </label>
           </div>

           <!-- outline input number field -->
           <div class="outline-number-input">
               <label for="number">Number<input type="number" name="number" />
               </label>
           </div>

           <!-- outline input date field -->
           <div class="outline-date-input">
               <label for="date">Date<input type="date" name="date" />
               </label>
           </div>

           <!-- outline input month field -->
           <div class="outline-month-input">
               <label for="month">Month<input type="month" name="month" />
               </label>
           </div>

           <!-- outline input file field -->
           <div class="outline-file-input">
               <label for="file">File<input type="file" name="file" />
               </label>
           </div>

           <!-- outline input telephone field -->
           <div class="outline-tel-input">
               <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" />
               </label>
           </div>

           <!-- no-outline input text field -->
           <div class="no-outline-text-input">
               <label for="text">Name
                   <input type="text" name="text" autocomplete="name" />
               </label>
           </div>

           <!-- no-outline input email field -->
           <div class="no-outline-email-input">
               <label for="email">Email *
                   <input type="email" name="email" required autocomplete="email" />
               </label>
           </div>

           <!-- no-outline input password field -->
           <div class="no-outline-password-input">
               <label for="password">Password *
                   <input type="password" name="password" autocomplete="current-password" required value="..." />
                   wrong password, try again
               </label>
           </div>

           <!-- no-outline input number field -->
           <div class="no-outline-number-input">
               <label for="number">Number<input type="number" name="number" />
               </label>
           </div>

           <!-- no-outline input date field -->
           <div class="no-outline-date-input">
               <label for="date">Date<input type="date" name="date" />
               </label>
           </div>

           <!-- no-outline input month field -->
           <div class="no-outline-month-input">
               <label for="month">Month<input type="month" name="month" />
               </label>
           </div>

           <!-- no-outline input file field -->
           <div class="no-outline-file-input">
               <label for="file">File<input type="file" name="file" />
               </label>
           </div>

           <!-- no-outline input telephone field -->
           <div class="no-outline-tel-input">
               <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" />
               </label>
           </div>

           <!-- outline input text field -->
           <div class="outline-text-input">
               <label for="text">Name
                   <input type="text" name="text" autocomplete="name" placeholder="enter name" />
               </label>
           </div>

           <!-- outline input email field -->
           <div class="outline-email-input">
               <label for="email">Email *
                   <input type="email" name="email" required autocomplete="email" placeholder="enter email" />
               </label>
           </div>

           <!-- outline input password field -->
           <div class="outline-password-input">
               <label for="password">Password *
                   <input type="password" name="password" autocomplete="current-password" placeholder="enter password" required value="..." />
                   wrong password, try again
               </label>
           </div>

           <!-- outline input number field -->
           <div class="outline-number-input">
               <label for="number">Number<input type="number" name="number" placeholder="enter quantity" />
               </label>
           </div>

           <!-- outline input date field -->
           <div class="outline-date-input">
               <label for="date">Date<input type="date" name="date" />
               </label>
           </div>

           <!-- outline input month field -->
           <div class="outline-month-input">
               <label for="month">Month<input type="month" name="month" />
               </label>
           </div>

           <!-- outline input file field -->
           <div class="outline-file-input">
               <label for="file">File<input type="file" name="file" />
               </label>
           </div>

           <!-- outline input telephone field -->
           <div class="outline-tel-input">
               <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" placeholder="enter phone number" />
               </label>
           </div>

           <!-- no-outline input text field -->
           <div class="no-outline-text-input">
               <label for="text">Name
                   <input type="text" name="text" autocomplete="name" placeholder="enter name" />
               </label>
           </div>

           <!-- no-outline input email field -->
           <div class="no-outline-email-input">
               <label for="email">Email *
                   <input type="email" name="email" required autocomplete="email" placeholder="enter email" />
               </label>
           </div>

           <!-- no-outline input password field -->
           <div class="no-outline-password-input">
               <label for="password">Password *
                   <input type="password" name="password" autocomplete="current-password" placeholder="enter password" required value="..." />
                   wrong password, try again
               </label>
           </div>

           <!-- no-outline input number field -->
           <div class="no-outline-number-input">
               <label for="number">Number<input type="number" name="number" placeholder="enter quantity" />
               </label>
           </div>

           <!-- no-outline input date field -->
           <div class="no-outline-date-input">
               <label for="date">Date<input type="date" name="date" />
               </label>
           </div>

           <!-- no-outline input month field -->
           <div class="no-outline-month-input">
               <label for="month">Month<input type="month" name="month" />
               </label>
           </div>

           <!-- no-outline input file field -->
           <div class="no-outline-file-input">
               <label for="file">File<input type="file" name="file" />
               </label>
           </div>

           <!-- no-outline input telephone field -->
           <div class="no-outline-tel-input">
               <label for="tel">Phone no<input type="tel" autocomplete="tel" name="tel" placeholder="enter phone number" />
               </label>
           </div>

 <div class="alerts alert-primary">
     <i class="fas fa-info-circle"></i>An example alert with an icon.
 </div>
 <div class="alerts alert-success">
     <i class="fas fa-check-circle"></i>An example success alert with
     an icon
 </div>
 <div class="alerts alert-warning">
     <i class="fas fa-exclamation-circle"></i>An example warning alert
     with an icon.
 </div>
 <div class="alerts alert-danger">
     <i class="fas fa-exclamation-triangle"></i>An example danger alert
     with an icon.
 </div>

   <div class="alerts alert-primary alerts-error">
              <i class="fas fa-info-circle"></i> An example alert with an icon.
              <button
                onclick="this.parentElement.style.display='none'"
                class="close-btn"
              >
                &times;
              </button>
            </div>
            <div class="alerts alert-success alerts-error">
              <i class="fas fa-check-circle"></i>An example success alert with
              an icon
              <button
                onclick="this.parentElement.style.display='none'"
                class="close-btn"
              >
                &times;
              </button>
            </div>
            <div class="alerts alert-warning alerts-error">
              <i class="fas fa-check-circle"></i>An example success alert with
              an close button.
              <button
                onclick="this.parentElement.style.display='none'"
                class="close-btn"
              >
                &times;
              </button>
            </div>
            <div class="alerts alert-danger alerts-error">
              <i class="fas fa-check-circle"></i>An example success alert with
              an close button.
              <button
                onclick="this.parentElement.style.display='none'"
                class="close-btn"
              >
                &times;
              </button>
            </div>

<div class="alert alert-Primary">Primary! This is Primary Alert</div>
<div class="alert alert-Warning">Warning! This is Warning Alert</div>
<div class="alert alert-Success">Success! This is Success Alert</div>
<div class="alert alert-Danger">Danger! This is Danger Alert</div>

<div class="badge">
    <img src="image-url" alt="" class="avatar">
    <div class="online"></div>
</div>
<div class="badge">
     <img src="image-url" alt="" class="avatar">
     <div class="dnd"></div>
</div>
<div class="badge">
    <img src="image-url" alt="" class="avatar">
    <div class="offline"></div>
</div>

<div class="badge">
    <i class="fas fa-envelope icon"></i>
    <div class="number-badge">10</div>
</div>
<div class="badge">
    <i class="fas fa-shopping-cart icon"></i>
    <div class="number-badge">15</div>
</div>
<div class="badge">
    <i class="fas fa-comment-alt icon"></i>
    <div class="number-badge">20</div>
</div>

@import url("https://spark-ui.netlify.app/Components/Badge/badge.css");

<link rel="stylesheet" href="https://spark-ui.netlify.app/Components/Badge/badge.css" />

<div class="outline-alert out-primary">Primary! This is Primary Alert</div>
<div class="outline-alert out-warning">Warning! This is Warning Alert</div>
<div class="outline-alert out-success">Success! This is Success Alert</div>
<div class="outline-alert out-danger">Danger! This is Danger Alert</div>

<div class="text-with-badge badge-medium">
    <p class="badge-text">New Year Sale</p>
    <div class="badge-badge1">60% off</div>
</div>

<div class="button-with-badge badge-medium">
    <button class="badge-button">Comments</button>
    <div class="badge-badge2">28</div>
</div>

 <div class="icon-with-badge badge-medium">
     <button class="badge-icon-button">
         <i class="material-icons badge-icon">whatsapp</i>
     </button>
     <div class="badge-badge3">62</div>
 </div>

/* badge-on-text */
--text-badge-bg-color: transparent;
--text-badge-border: 1px dashed #000;
--badge1-bg-color: #bae6fd;
--badge1-border: 1px solid #000;
/* badge-on-button */
--button-badge-bg-color: #bae6fd;
--button-badge-border: 1px solid #000;
--badge2-bg-color: #2563eb;
--badge2-border: 1px solid #000;
/* badge-on-icon */
--icon-badge-color: #059669;
--badge3-bg-color: #dc2626;
--badge3-border: 1px solid #fff;
/* badge-on-avatar */
--avatar-badge-border: none;
--badge4-bg-color: #ff0000;
--badge4-border: 1px solid #fff;
/* focus color is seen when you use tab key to access buttons or links */
--badge-focus-outline-color: #000;

<button class="CL-button btn-primary">Primary</button>
<button class="CL-button btn-signin">Sign in</button>
<button class="CL-button btn-signout">Sing out</button>
<button class="CL-button btn-login">Login</button>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

@import url("https://spark-ui.netlify.app/Components/Avatar/avatar.css");

<link rel="stylesheet" href="https://spark-ui.netlify.app/Components/Avatar/avatar.css" />

<button class="CL-button btn-out-primary">Primary</button>
<button class="CL-button btn-out-signin">Sign in</button>
<button class="CL-button btn-out-signout">Sign out</button>
<button class="CL-button btn-out-login">Login</button>

<img src="" alt="" class="avatar avatar-medium" />

--avatar-size: 2em;
--avatar-border: none;

<button class="CL-button icn-btn-cart">
  <i class="fas fa-shopping-cart"></i>
  <span>Add to cart</span>
</button>
<button class="CL-button  icn-btn-delete">
   <i class="fas fa-trash"></i>
   <span>Delete</span>
</button>

<button class="CL-button click-cl">
  <a class="btn-cl-anchor" href="#">Click here</a>
</button>

<button class="CL-button click-coup">
   <a class="btn-cl-anchor" href="#">Apply coupon</a>
</button>

<button class="floating-btn float-plus">
  <i class="fas fa-plus-circle"></i>
</button>
<button class="floating-btn float-tele">
  <i class="fab fa-telegram-plane"></i>
</button>

<textarea class="textarea" placeholder="Please enter your Text here."></textarea>

<div class="input-grp">
    <label>Username</label>
    <input class="input" type="text" placeholder="Username">
</div>
<div class="input-grp">
    <label>Email address</label>
    <input class="input input-error" type="email" placeholder="Email address">
    <div class="error-msg">Please enter correct email.</div>
</div>
<div class="input-grp">
    <label>Password</label>
    <input class="input input-warning" type="password" placeholder="Password">
    <div class="warning-msg">Please enter a strong password.</div>
</div>
<div class="input-grp">
    <label>Confirm Password</label>
    <input class="input input-success" type="password" placeholder="Password">
    <div class="success-msg">Password matched.</div>
</div>

<img class="round-img" src="https://www.wearegurgaon.com//wp-content/uploads/2020/05/the-noodle-company-gurgaon.jpg" alt="round-image" />
<img class="round-img" src="https://5.imimg.com/data5/SELLER/Default/2020/9/SX/XX/AC/11037343/whatsapp-image-2020-09-08-at-1-54-23-pm-500x500.jpeg" alt="round-image" />

<img class="sq-img" src="https://www.wearegurgaon.com//wp-content/uploads/2020/05/the-noodle-company-gurgaon.jpg" alt="square-image" />
<img class="sq-img" src="https://5.imimg.com/data5/SELLER/Default/2020/9/SX/XX/AC/11037343/whatsapp-image-2020-09-08-at-1-54-23-pm-500x500.jpeg" alt="square-image" />

<img class="resp-img" src="https://5.imimg.com/data5/SELLER/Default/2020/9/SX/XX/AC/11037343/whatsapp-image-2020-09-08-at-1-54-23-pm-500x500.jpeg" alt="responsive-image" />

<div class="card">
    <h3 class="card-title">Lorem dolor Lorem ipsum. </h3>
    <p class="card-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis dicta perferendis rem unde id totam! Nesciunt et sed dolores! Eligendi ipsa optio consectetur magni commodi?
    </p>
</div>

<div class="card card-ecom mg-1-all">
    <div class="card-img-cont">
        <img class="card-img" src="https://5.imimg.com/data5/CH/YY/IW/SELLER-11037343/corn-cheese-momos-500x500.jpg" alt="veg-momos" />
    </div>
    <div class="card-badge">OFFER</div>
    <div class="card-body">
        <div class="card-header">
            <h6 class="card-title">MOMOS</h6>
            <p class="card-desc">Veg Steemed Momos</p>
            <div class="card-price">
                <span class="price-new">Rs.56</span>
                <span class="price-old">Rs.80</span>
                <span class="discount">(30%)</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="button btn-primary">ADD TO CART</button>
        </div>
    </div>
</div>

<div class="card card-ecom mg-1-all">
    <div class="card-img-cont">
        <img class="card-img" src="https://images.herzindagi.info/image/2019/Feb/tandoori-momos-food-main.jpg" alt="veg-momos" />
    </div>
    <div class="card-badge">OFFER</div>
    <div class="card-body">
        <div class="card-header">
            <h6 class="card-title">MOMOS</h6>
            <p class="card-desc">Tandoori Momos</p>
            <div class="card-price">
                <span class="price-new">Rs.60</span>
                <span class="price-old">Rs.100</span>
                <span class="discount">(40%)</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="button btn-primary">ADD TO CART</button>
        </div>
    </div>
</div>

<div class="card card-ecom mg-1-all">
    <div class="card-img-cont">
        <img class="card-img" src="https://5.imimg.com/data5/ZZ/DU/FZ/SELLER-39270477/chocolate-momo-500x500.jpg" alt="veg-momos" />
    </div>
    <div class="card-badge">OFFER</div>
    <div class="card-body">
        <div class="card-header">
            <h6 class="card-title">MOMOS</h6>
            <p class="card-desc">Chocolate Momos</p>
            <div class="card-price">
                <span class="price-new">Rs.80</span>
                <span class="price-old">Rs.120</span>
                <span class="discount">(40%)</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="button btn-primary">ADD TO CART</button>
        </div>
    </div>
</div>

<div class="card card-ecom mg-1-all">
    <button class="btn secondary-text-btn-sm card-close"><i class="fas fa-times"></i></button>
    <div class="card-img-cont">
        <img class="card-img" src="https://5.imimg.com/data5/CH/YY/IW/SELLER-11037343/corn-cheese-momos-500x500.jpg" alt="veg-momos" />
    </div>
    <div class="card-badge">OFFER</div>
    <div class="card-body">
        <div class="card-header">
            <h6 class="card-title">MOMOS</h6>
            <p class="card-desc">Veg Steemed Momos</p>
            <div class="card-price">
                <span class="price-new">Rs.56</span>
                <span class="price-old">Rs.80</span>
                <span class="discount">(30%)</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="button btn-primary">ADD TO CART</button>
        </div>
    </div>
</div>

<div class="card card-ecom card-horiz">
    <div class="card-img-cont">
        <img class="card-img" src="./assets/chocolate-momos.png" alt="chocolate-momos" />
    </div>
    <!-- <div class="card-badge">SALE</div> -->
    <div class="card-body">
        <div class="card-header">
            <h6 class="card-title">MOMOS</h6>
            <p class="card-desc">Chocolate Momos</p>
            <div class="card-price">
                <span class="price-new">Rs.80</span>
                <span class="price-old">Rs.120</span>
                <span class="discount">(40%)</span>
            </div>
        </div>
        <div class="card-footer">
            <button class="button btn-primary">ADD TO CART</button>
        </div>
    </div>
</div>

 <div class="card card-overlay mg-1-all">
     <img class="card-img" src="https://nishkitchen.com/wp-content/uploads/2019/05/Chicken-Momos-2B.jpg" alt="momos" />
     <div class="card-body">
         <h2 class="card-overlay-text">Offer on Veg Steemed Momos. HURRY UP!!</h2>
         <button class="button btn-primary card-btn">ORDER NOW</button>
     </div>
 </div>