Components

    <div class="alert alert-primary text-sm mx-5 p-4 rounded-sm">
      This is Primary Alert Example
    </div>

    <div class="alert alert-danger text-sm mx-5 p-4 rounded-sm">
      This is Danger Alert Example
    </div>

    <div class="alert alert-success text-sm mx-5 p-4 rounded-sm">
      This is Success Alert Example
    </div>

    <div class="alert alert-warning text-sm mx-5 p-4 rounded-sm">
      This is Warning Alert Example
    </div>
 <div class="alert alert-outlined alert-primary-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-info-circle mr-4"></i>This is Primary outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-danger-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Danger outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-success-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-check-circle mr-4"></i>This is Success outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-warning-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Warning outlined Alert with icon
 </div>
    <div class="alert alert-primary text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-info-circle mr-4"></i>This is Primary Alert with icon
    </div>

    <div class="alert alert-danger text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-exclamation-triangle mr-4"></i>This is Danger Alert with icon
    </div>

    <div class="alert alert-success text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-check-circle mr-4"></i>This is Success Alert with icon
    </div>

    <div class="alert alert-warning text-sm mx-5 p-4 rounded-sm d-flex align-center">
        <i class="fas fa-exclamation-triangle mr-4"></i>This is Warning Alert with icon
    </div>
  <button class="btn btn-primary rounded-sm text-md p-5">
      Primary
  </button>

  <button class="btn btn-danger rounded-sm text-md p-5">Danger</button>

  <button class="btn btn-success rounded-sm text-md p-5">
      Success
  </button>

  <button class="btn btn-primary btn-disabled rounded-sm text-md p-5" disabled="disabled">
      Disabled
  </button>
 <button class="btn btn-primary rounded-sm text-sm p-3">
     Primary
 </button>

 <button class="btn btn-danger rounded-sm text-sm p-3">Danger</button>

 <button class="btn btn-success rounded-sm text-sm p-3">
     Success
 </button>

 <button class="btn btn-primary btn-disabled rounded-sm text-sm p-3" disabled="disabled">
     Disabled
 </button>
<button class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3">
    Primary
</button>

<button class="btn btn-outline btn-danger-outline rounded-sm text-sm p-3">
    Danger
</button>

<button class="btn btn-outline btn-success-outline rounded-sm text-sm p-3">
    Success
</button>
 <button class="btn btn-link p-3 text-sm rounded-sm">
     <a href="#">Link Button</a>
 </button>
<button class="btn btn-icon"><i class="fas fa-heart text-md"></i></button>

<button class="btn btn-icon">
    <i class="fas fa-shopping-cart text-md"></i>
</button>

<button class="btn btn-icon"><i class="fas fa-trash text-md"></i></button>
<button class="btn btn-primary p-4 rounded-sm">
    <i class="fas fa-bolt mr-2"></i> Buy now
</button>

<button class="btn btn-outline btn-primary-outline p-4 rounded-sm">
    <i class="fas fa-shopping-cart mr-2"></i> Add To Cart
</button>
<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-plus text-md"></i>
</button>

<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-trash text-md"></i>
</button>

<button class="btn btn-primary btn-floating p-4 rounded-full box-shadow-lg">
    <i class="fas fa-share text-md"></i>
</button>
 <img class="img-responsive" src="https://source.unsplash.com/1EYMue_AwDw" alt="scenary" />
<img class="img-round rounded-full" src="https://source.unsplash.com/73iq0upkPnI" alt="tiger" />
<img class="img-round rounded-full" src="https://source.unsplash.com/7sfJhVSqIE4" alt="squirrel" />
 <div class="d-flex flex-col">
     <label class="input-label-required text-sm" for="email">Email</label>
     <input type="text" class="text-input w-100 p-3 text-sm" placeholder="abc@gmail.com" required />
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="name">Name</label>
     <input type="text" class="text-input w-100 p-3 text-sm" placeholder="Enter your name" required />
 </div>

 <div class="d-flex flex-col">
     <label class="input-label-required text-sm" for="password">Password</label>
     <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Enter your password" required />
 </div>

 <div class="input-grp-err d-flex flex-col">
     <label class="input-label-required text-sm" for="confirm-password">Confirm Password</label>
     <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Re-enter password" required />
     <span class="text-sm">Passwords not matched. Try Again</span>
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="country">Country</label>
     <input type="text" class="text-input text-sm w-100 p-3" name="country" value="India" readonly />
 </div>

 <div class="d-flex flex-col">
     <label class="text-sm" for="address">Enter Your Address</label>
     <textarea type="text" class="text-area w-100 p-3 text-sm" placeholder="Enter address here" rows="3"></textarea>
 </div>
<div class="avatar-lg">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>

<div class="avatar-md">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
<div class="avatar-sm">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
<div class="avatar-xs">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
</div>
 <div class="avatar-lg avatar-text rounded-full text-xl d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-md avatar-text rounded-full text-lg d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-sm avatar-text rounded-full text-md d-flex justify-center align-center">
     <span>VF</span>
 </div>
 <div class="avatar-xs avatar-text rounded-full text-sm d-flex justify-center align-center">
     <span>VF</span>
 </div>
<div class="avatar-lg p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-lg-position badge-status-online rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-md p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-md-badge-position status-offline rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-sm p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-sm-position badge-status-dnd rounded-full d-inline-block p-absolute"></span>
</div>

<div class="avatar-xs p-relative">
    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=2" />
    <span class="badge-status badge-xs-position badge-status-idle rounded-full d-inline-block p-absolute"></span>
</div>
 <h1>
     <span class="p-relative headline-lg">Heading with a badge<span class="badge heading-badge-position p-absolute rounded-full text-sm font-wt-bold">4</span></span>
 </h1>

 <p>
     <span class="p-relative text-sm">Text with a badge<span class="badge text-badge-position p-absolute rounded-full text-sm font-wt-bold">4</span></span>
 </p>
<button class="btn btn-success p-3 rounded-sm p-relative">
    <span class="text-sm">Action</span>
    <span class="badge btn-badge-position text-sm font-wt-bold rounded-full p-absolute">8</span>
</button>

<button class="btn btn-success p-5 rounded-sm p-relative">
    <span class="text-md">Action</span>
    <span class="badge btn-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
</button>
 <div class="p-relative text-md icon-badge-wrapper">
     <i class="fas fa-shopping-cart"></i>
     <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
 </div>

 <div class="p-relative text-md icon-badge-wrapper">
     <i class="far fa-envelope"></i>
     <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
 </div>
<div class="card-wrapper product-card">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
// variant 1 
<div class="card-wrapper product-card horizontal-card-wrapper d-flex">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="horizontal-card-btns-wrapper p-3 d-flex flex-col">
          <button type="button" class="btn btn-primary rounded-sm text-sm p-3">
            <i class="fas fa-shopping-cart mr-3"></i>
            Add to Cart
          </button>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3"
          >
            <i class="fas fa-heart mr-3"></i>
            Add to Wishlist
          </button>
        </div>
      </div>
    </div>

//variant 2

 <div class="card-wrapper w-100 d-flex mt-4">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img w-75"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3 w-100">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="d-flex my-2">
          <div class="d-flex align-center">
            <button
              type="button"
              class="btn btn-quantity btn-primary rounded-full"
            >
              <i class="fas fa-plus text-sm"></i>
            </button>
            <span class="text-sm mx-2 font-wt-semibold">1</span>
            <button
              type="button"
              class="btn btn-quantity btn-outline btn-primary-outline rounded-full"
            >
              <i class="fas fa-minus text-sm"></i>
            </button>
          </div>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 ml-8"
          >
            <i class="fas fa-trash mr-3"></i>
            Remove
          </button>

          <button
            type="button"
            class="btn btn-primary rounded-sm text-sm p-3 ml-auto"
          >
            <i class="fas fa-heart mr-3"></i>
            Move to Wishlist
          </button>
        </div>
      </div>
    </div>
<div class="card-wrapper product-card">
      <span class="vertical-card-badge text-sm p-3 p-relative"
        >Best Seller</span
      >
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
<button
      type="button"
      class="btn rounded-sm text-sm p-3 btn-primary reset-dismissed-card"
    >
      Reset
    </button>
    <div class="card-wrapper dismiss-card-wrapper product-card">
      <div class="close-icon-wrapper">
        <i class="fas fa-times-circle p-2 fa-3x"></i>
      </div>
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
<div class="card-wrapper product-card box-shadow-lg">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
    </div>
<div class="card-wrapper product-card p-relative">
      <div class="px-4">
        <img
          class="img-responsive d-block m-auto pt-4 product-card-img"
          src="../../assets/monitor.png"
          alt="headphone"
        />
      </div>
      <div class="p-2">
        <p class="font-wt-bold text-center text-sm">
          Redgear Wired Gaming Headphones with RGB LED Effect
        </p>
      </div>
      <div class="px-8 py-2">
        <div class="product-price-wrapper">
          <span class="product-discount-price text-sm font-wt-bold"
            >Rs. 1,790.00</span
          >
          <span class="product-original-price text-sm ml-6">Rs. 2,999.00</span>
        </div>
        <span class="product-discount font-wt-bold text-sm">Save 40%</span>
      </div>
      <div class="card-btns-wrapper p-3 d-flex flex-col">
        <button
          type="button"
          class="btn btn-primary rounded-sm text-sm p-5 mx-4"
        >
          <i class="fas fa-shopping-cart mr-3"></i>
          Add to Cart
        </button>
        <button
          type="button"
          class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 mx-4"
        >
          <i class="fas fa-heart mr-3"></i>
          Add to Wishlist
        </button>
      </div>
      <div
        class="text-overlay-container p-absolute w-100 h-100 container-center"
      >
        <span class="text-overlay text-uppercase text-md p-5 rounded-md"
          >Out of Stock</span
        >
      </div>
    </div>
<div class="card-wrapper product-card">
      <div class="p-2">
        <h2 class="text-center headline-md">Card header</h2>
      </div>
      <div class="px-8 py-2">
        <p class="text-sm">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores,
          corrupti unde. Perspiciatis eos sunt temporibus nulla atque soluta
          saepe inventore necessitatibus dolorem aperiam alias placeat, eveniet
          quos sint nisi dignissimos!
        </p>
      </div>
    </div>
<div class="modal-wrapper w-100 h-100 justify-center align-center d-none p-fixed" id="simple-modal-wrapper">
    <div class="modal-container rounded-md">
        <div class="p-8">
            <h2 class="headline-md">Modal header</h2>
            <p class="text-sm mt-3">
                Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
                ac consectetur ac, vestibulum at eros.
            </p>
            <div class="action-btns-wrapper mt-4 d-flex justify-end" id="simple-modal-buttons">
                <button class="btn btn-primary btn-action rounded-sm text-sm p-3">
                    Save Changes
                </button>
                <button class="btn btn-outline btn-action btn-primary-outline rounded-sm text-sm p-3 ml-4">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper w-100 h-100 justify-center align-center d-none p-fixed" id="list-modal-wrapper">
    <div class="modal-container rounded-md">
        <div class="p-8">
            <h2 class="headline-md">Modal header</h2>
            <div class="action-btns-wrapper mt-4" id="list-modal-buttons">
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 1
                </button>
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm p-3 mt-4 w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 2
                </button>
                <button class="btn btn-outline btn-primary-outline btn-action rounded-sm text-sm p-3 mt-4 w-100 d-flex justify-start align-center p-2"><i class="fas fa-user mr-2"></i>
                    Item 3
                </button>
            </div>
        </div>
    </div>
</div>
 <h1 class="headline-xl">Headline 1</h1>
 <h2 class="headline-lg">Headline 2</h2>
 <h3 class="headline-md">Headline 3</h3>
 <h4 class="headline-sm">Headline 4</h4>
 <h5 class="headline-xs">Headline 5</h5>
   <p class="text-xl">Paragraph 1</p>
   <p class="text-lg">Paragraph 2</p>
   <p class="text-md">Paragraph 3</p>
   <p class="text-sm">Paragraph 4</p>
   <p class="text-xs">Paragraph 5</p>
<h2 class="headline-lg text-gray">Headline 2</h2>
<p class="text-lg text-gray">Paragraph 2</p>
<p class="text-lg text-left">Paragraph 2</p>
<p class="text-lg text-center">Paragraph 2</p>
<p class="text-lg text-right">Paragraph 2</p>
<ul class="list p-8">
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item mt-4">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
</ul>
<ul class="list p-8">
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
    <li class="list-item">
        <div class="p-4">
            <div class="d-flex align-center text-sm">
                <div class="avatar-sm">
                    <img class="img-responsive img-round rounded-full" src="https://i.pravatar.cc?img=32" />
                </div>
                <div class="ml-4">
                    <h3 class="headline-md">John Doe</h3>
                    <p class="text-sm">@johndoe</p>
                </div>
            </div>
            <p class="text-sm">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                dolore earum ducimus quaerat perferendis natus itaque beatae quae et
                assumenda id quo eius facere, illum excepturi sapiente ipsam. Iste,
                quos.
            </p>
        </div>
    </li>
</ul>
<header class="navbar-wrapper d-flex align-center box-shadow-lg">
    <h1 class="brand headline-lg m-4">Brand</h1>
    <nav class="ml-auto">
        <ul class="d-flex text-sm">
            <li class="nav-link-item mx-8 font-wt-bold">Home</li>
            <li class="nav-link-item mx-8 font-wt-bold">Profile</li>
            <li class="nav-link-item mx-8 font-wt-bold">Cart</li>
            <li class="nav-link-item mx-8 font-wt-bold">Wishlist</li>
        </ul>
    </nav>
</header>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <h1 class="brand headline-lg p-4">Brand</h1>
    <div class="search-box d-flex align-center justify-between my-4 w-50">
        <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required />
        <button type="submit" class="btn btn-icon p-4">
            <i class="fas fa-search text-md"></i>
        </button>
    </div>
    <nav class="">
        <ul class="d-flex text-sm">
            <li class="nav-link-item mx-8 font-wt-bold">Home</li>
            <li class="nav-link-item mx-8 font-wt-bold">Profile</li>
            <li class="nav-link-item mx-8 font-wt-bold">Cart</li>
            <li class="nav-link-item mx-8 font-wt-bold">Wishlist</li>
        </ul>
    </nav>
</header>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <h1 class="brand headline-lg p-4">Brand</h1>
    <div class="search-box d-flex align-center justify-between my-4 w-50">
        <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required />
        <button type="submit" class="btn btn-icon p-4">
            <i class="fas fa-search text-md"></i>
        </button>
    </div>
    <button class="btn btn-primary rounded-sm text-sm p-4">Login</button>
    <button class="btn btn-outline btn-primary-outline  rounded-sm text-sm p-4">Wishlist</button>
</header>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <h1 class="brand headline-lg p-4">Brand</h1>
    <div class="search-box d-flex align-center justify-between my-4 w-50">
        <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required />
        <button type="submit" class="btn btn-icon p-4">
            <i class="fas fa-search text-md"></i>
        </button>
    </div>
    <ul class="nav-links d-flex align-center">
        <li>
            <button class="btn btn-primary rounded-sm text-sm p-4">Login</button>
        </li>
        <li class="p-relative text-md icon-badge-wrapper m-4">
            <i class="fas fa-shopping-cart"></i>
            <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span>
        </li>
        <li class="p-relative text-md icon-badge-wrapper m-4">
            <i class="fas fa-heart"></i>
            <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span>
        </li>
    </ul>
</header>
<div class="d-grid grid-20-80 gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
</div>
<div class="d-grid grid-50-50 gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
</div>
<div class="d-grid grid-3-column gap-1">
    <div class="grid-item text-center text-md">Column1</div>
    <div class="grid-item text-center text-md">Column 2</div>
    <div class="grid-item text-center text-md">Column 3</div>
</div>
<div class="rating-container text-md">
    <input type="checkbox" id="star-1" checked disabled />
    <label for="star-1" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-2" checked disabled />
    <label for="star-2" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-3" checked disabled />
    <label for="star-3" class="fas fa-star rating-checked"></label>
    <input type="checkbox" id="star-4" disabled />
    <label for="star-4" class="fas fa-star rating-unchecked"></label>
    <input type="checkbox" id="star-5" disabled />
    <label for="star-5" class="fas fa-star rating-unchecked"></label>
</div>
 <!-- success toast -->
 <div id="toast-success" class="toast text-sm d-flex align-center p-3 rounded-sm d-none">
     Added Successfully !
     <button type="button" class="btn btn-icon">
         <i class="fas fa-times text-md btn-toast-close ml-4"></i>
     </button>
 </div>

 <!-- error toast -->
 <div id="toast-error" class="toast text-sm d-flex align-center p-3 rounded-sm d-none">
     Try Again Later !
     <button type="button" class="btn btn-icon">
         <i class="fas fa-times text-md btn-toast-close ml-4"></i>
     </button>
 </div>
 <div class="d-flex align-center">
     <input type="range" name="slider" class="simple-slider" min="0" max="500" value="200" />
 </div>
<div class="d-flex align-center">
    <label for="icon-slider"><i class="fas fa-volume-up text-md mr-2"></i></label>
    <input type="range" name="slider" class="icon-slider" min="0" max="500" value="250" />
</div>
<div class="d-flex align-center">
    <label class="disabled-slider-label" for="disabled-slider"><i class="fas fa-volume-up text-md mr-2"></i></label>
    <input type="range" name="slider" class="disabled-slider" min="0" max="500" value="300" disabled />
</div>
 <div class="d-flex align-center">
     <input type="range" name="slider" class="styled-slider" min="0" max="500" value="200" />
 </div>
<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg">
    <a class="brand-name text-dec-none headline-lg font-wt-bold p-4" href="../index.html">Gamers Zone</a>
    <button id="hamburger-btn" class="btn text-md ml-auto mr-8 p-4">
        <i class="fas fa-bars hamburger-icon"></i>
    </button>
    <section id="nav-menu-without-hamburger" class="d-flex">
        <div class="search-box d-flex align-center justify-between my-8 w-50">
            <input type="text" class="search-input p-2 m-2 text-sm" placeholder="Search for products..." required />
            <button type="submit" class="btn btn-icon p-4">
                <i class="fas fa-search text-md"></i>
            </button>
        </div>
        <nav class="nav-links d-flex align-center">
            <a href="./signup.html" class="btn text-dec-none btn-primary rounded-sm text-sm p-4 ml-4">
                Signup
            </a>

            <a class="nav-link-icon p-relative icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="./products.html">
                <i class="fas fa-store text-md"></i>
                <span class="nav-link-description text-sm">Products</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="./cart.html">
                <span class="p-relative"><i class="fas fa-shopping-cart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span></span>
                <span class="nav-link-description text-sm">Cart</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex flex-col align-center text-dec-none" href="#">
                <span class="p-relative">
                    <i class="fas fa-heart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span></span>
                <span class="nav-link-description text-sm">Wishlist</span>
            </a>
        </nav>
    </section>
</header>

<!-- hamburger nav menu -->
<section id="hamburger-nav-menu" class="d-none my-8">
    <div class="d-flex align-center justify-center">
        <div class="search-box ml-8 d-flex align-center justify-between my-8 w-50">
            <input type="text" class="search-input p-2 m-2 text-sm" placeholder="Search for products..." required />
            <button type="submit" class="btn btn-search btn-icon p-4 p-relative">
                <i class="fas fa-search text-md"></i>
            </button>
        </div>
        <div class="ml-8">
            <a href="./signup.html" class="btn text-dec-none btn-primary rounded-sm text-sm p-4 mr-4">
                Signup
            </a>
        </div>
    </div>
    <nav class="nav-links">
        <div class="d-flex ml-4 justify-around">
            <a class="nav-link-icon p-relative icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./products.html">
                <i class="fas fa-store text-md"></i>
                <span class="nav-link-description text-sm ml-6">Products</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./cart.html">
                <span class="p-relative"><i class="fas fa-shopping-cart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span></span>
                <span class="nav-link-description text-sm ml-6">Cart</span>
            </a>
            <a class="nav-link-icon icon-badge-wrapper m-3 d-flex align-center text-dec-none" href="./wishlist.html">
                <span class="p-relative">
                    <i class="fas fa-heart text-md"></i>
                    <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span></span>
                <span class="nav-link-description text-sm ml-6">Wishlist</span>
            </a>
        </div>
    </nav>
</section>
<link rel="stylesheet" href="https://cool-ui.netlify.app/styles/main.css" />
<button type="button" class="btn btn-primary rounded-sm text-sm p-3">
    Save
</button>

<!-- you can iverride styling of the class -->
<style>
    .btn-primary {
      background-color:#f44336;
      color: #000; 
    }  
</style>
const closeIcon = document.querySelector(".close-icon-wrapper");
const cardWrapper = document.querySelector(".dismiss-card-wrapper");
const dismissCard = () => {
    cardWrapper.style.display= "none";
    resetCardBtn.style.display = "block";
}
closeIcon.addEventListener("click",dismissCard);
// take refernece of html elements
const simpleModalWrapper = document.querySelector("#simple-modal-wrapper");
const simpleModalDemoBtn = document.querySelector("#simple-modal-demo-btn");

const actionBtns = document.querySelectorAll(".btn-action");
const body = document.querySelector("body");

// event listener for live demo button for simple modal
simpleModalDemoBtn.addEventListener("click", () => {
  simpleModalWrapper.style.display = "flex";
});

// event listeners for buttons in modal
// here for example i just closed modal on click on action ,
// you can perform any action you want to do on click of action buttons
actionBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (btn.parentNode.id === "simple-modal-buttons") {
      simpleModalWrapper.style.display = "none";
    } 
  });
});

//event listener for closing modal when it is open and we click anywhere on screen/window
window.addEventListener("click", event => {
  if (event.target === simpleModalWrapper) {
    simpleModalWrapper.style.display = "none";
  }
});
// take refernece of html elements
const listModalWrapper = document.querySelector("#list-modal-wrapper");
const listModalDemoBtn = document.querySelector("#list-modal-demo-btn");
const actionBtns = document.querySelectorAll(".btn-action");
const body = document.querySelector("body");

// event listener for live demo button for list modal
listModalDemoBtn.addEventListener("click", () => {
  listModalWrapper.style.display = "flex";
});

// event listeners for buttons in modal
// here for example i just closed modal on click on action ,
// you can perform any action you want to do on click of action buttons
actionBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (btn.parentNode.id === "list-modal-buttons") {
      listModalWrapper.style.display = "none";
    }
  });
});

//event listener for closing modal when it is open and we click anywhere on screen/window
window.addEventListener("click", event => {
   if (event.target === listModalWrapper) {
    listModalWrapper.style.display = "none";
  }
});
const hamburgerMenuBtn = document.querySelector("#hamburger-btn");
const hamburgerMenu = document.querySelector("#hamburger-nav-menu");

// toggle display none class
hamburgerMenuBtn.addEventListener("click", () => {
  const classes = hamburgerMenu.classList;
  classes.toggle("d-none");
});
const closeBtns = document.querySelectorAll(".btn-toast-close");
const successDemoBtn = document.querySelector("#success-toast-demo-btn");
const successToast = document.querySelector("#toast-success");
const errorDemoBtn = document.querySelector("#error-toast-demo-btn");
const errorToast = document.querySelector("#toast-error");

// close toast when clicked on close icon button
closeBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    btn.parentElement.parentElement.style.display = "none";
  });
});

// show success toast for 3 sec
successDemoBtn.addEventListener("click", () => {
  successToast.style.display = "flex";

  setTimeout(() => {
    successToast.style.display = "none";
  }, 3000);
});

// show error toast for 3 sec
errorDemoBtn.addEventListener("click", () => {
  errorToast.style.display = "flex";

  setTimeout(() => {
    errorToast.style.display = "none";
  }, 3000);
});
const slider = document.querySelector(".simple-slider");
const value = document.querySelector("#slider-value");

slider.addEventListener("input", () => {
value.innerHTML = `You selected ${slider.value}`;
});

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? — pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow python - Convert list of dictionaries to a pandas DataFrame - Stack Overflow How to Add or Insert Row to Pandas DataFrame? - Python Examples python - Check if a value exists in pandas dataframe index - Stack Overflow python - Set value for particular cell in pandas DataFrame using index - Stack Overflow python - Pandas Dataframe How to cut off float decimal points without rounding? - Stack Overflow python - Pandas: Change day - Stack Overflow python - Clean way to convert quarterly periods to datetime in pandas - Stack Overflow Pandas - Number of Months Between Two Dates - Stack Overflow python - MonthEnd object result in <11 * MonthEnds> instead of number - Stack Overflow python - Extracting the first day of month of a datetime type column in pandas - Stack Overflow
MySQL MULTIPLES INNER JOIN How to Use EXISTS, UNIQUE, DISTINCT, and OVERLAPS in SQL Statements - dummies postgresql - SQL OVERLAPS PostgreSQL Joins: Inner, Outer, Left, Right, Natural with Examples PostgreSQL Joins: A Visual Explanation of PostgreSQL Joins PL/pgSQL Variables ( Format Dates ) The Ultimate Guide to PostgreSQL Date By Examples Data Type Formatting Functions PostgreSQL - How to calculate difference between two timestamps? | TablePlus Date/Time Functions and Operators PostgreSQL - DATEDIFF - Datetime Difference in Seconds, Days, Months, Weeks etc - SQLines CASE Statements in PostgreSQL - DataCamp SQL Optimizations in PostgreSQL: IN vs EXISTS vs ANY/ALL vs JOIN PostgreSQL DESCRIBE TABLE Quick and best way to Compare Two Tables in SQL - DWgeek.com sql - Best way to select random rows PostgreSQL - Stack Overflow PostgreSQL: Documentation: 13: 70.1. Row Estimation Examples Faster PostgreSQL Counting How to Add a Default Value to a Column in PostgreSQL - PopSQL How to Add a Default Value to a Column in PostgreSQL - PopSQL SQL Subquery - Dofactory SQL IN - SQL NOT IN - JournalDev DROP FUNCTION (Transact-SQL) - SQL Server | Microsoft Docs SQL : Multiple Row and Column Subqueries - w3resource PostgreSQL: Documentation: 9.5: CREATE FUNCTION PostgreSQL CREATE FUNCTION By Practical Examples datetime - PHP Sort a multidimensional array by element containing date - Stack Overflow database - Oracle order NULL LAST by default - Stack Overflow PostgreSQL: Documentation: 9.5: Modifying Tables PostgreSQL: Documentation: 14: SELECT postgresql - sql ORDER BY multiple values in specific order? - Stack Overflow How do I get the current unix timestamp from PostgreSQL? - Database Administrators Stack Exchange SQL MAX() with HAVING, WHERE, IN - w3resource linux - Which version of PostgreSQL am I running? - Stack Overflow Copying Data Between Tables in a Postgres Database php - How to remove all numbers from string? - Stack Overflow
Clear config cache Eloquent DB::Table RAW Query / WhereNull Laravel Eloquent "IN" Query get single column value in laravel eloquent php - How to use CASE WHEN in Eloquent ORM? - Stack Overflow AND-OR-AND + brackets with Eloquent - Laravel Daily Database: Query Builder - Laravel - The PHP Framework For Web Artisans ( RAW ) Combine Foreach Loop and Eloquent to perform a search | Laravel.io Access Controller method from another controller in Laravel 5 How to Call a controller function in another Controller in Laravel 5 php - Create a Laravel Request object on the fly php - Laravel 5.6 Upgrade caused Logging to break Artisan Console - Laravel - The PHP Framework For Web Artisans What to include in gitignore for a Laravel and PHPStorm project php - Create a Laravel Request object on the fly Process big DB table with chunk() method - Laravel Daily How to insert big data on the laravel? - Stack Overflow php - How can I build a condition based query in Laravel? - Stack Overflow Laravel Chunk Eloquent Method Example - Tuts Make Database: Migrations - Laravel - The PHP Framework For Web Artisans php - Laravel Model Error Handling when Creating - Exception Laravel - Inner Join with Multiple Conditions Example using Query Builder - ItSolutionStuff.com laravel cache disable phpunit code example | Newbedev In PHP, how to check if a multidimensional array is empty? · Humblix php - Laravel firstOrNew how to check if it's first or new? - Stack Overflow get base url laravel 8 Code Example Using gmail smtp via Laravel: Connection could not be established with host smtp.gmail.com [Connection timed out #110] - Stack Overflow
PostgreSQL POSITION() function PostgresQL ANY / SOME Operator ( IN vs ANY ) PostgreSQL Substring - Extracting a substring from a String How to add an auto-incrementing primary key to an existing table, in PostgreSQL PostgreSQL STRING_TO_ARRAY()function mysql FIND_IN_SET equivalent to postgresql PL/pgSQL Variables ( Format Dates ) The Ultimate Guide to PostgreSQL Date By Examples Data Type Formatting Functions PostgreSQL - How to calculate difference between two timestamps? | TablePlus Date/Time Functions and Operators PostgreSQL - DATEDIFF - Datetime Difference in Seconds, Days, Months, Weeks etc - SQLines CASE Statements in PostgreSQL - DataCamp SQL Optimizations in PostgreSQL: IN vs EXISTS vs ANY/ALL vs JOIN PL/pgSQL Variables PostgreSQL: Documentation: 11: CREATE PROCEDURE Reading a Postgres EXPLAIN ANALYZE Query Plan Faster PostgreSQL Counting sql - Fast way to discover the row count of a table in PostgreSQL - Stack Overflow PostgreSQL: Documentation: 9.1: tablefunc PostgreSQL DESCRIBE TABLE Quick and best way to Compare Two Tables in SQL - DWgeek.com sql - Best way to select random rows PostgreSQL - Stack Overflow How to Add a Default Value to a Column in PostgreSQL - PopSQL How to Add a Default Value to a Column in PostgreSQL - PopSQL PL/pgSQL IF Statement PostgreSQL: Documentation: 9.1: Declarations SQL Subquery - Dofactory SQL IN - SQL NOT IN - JournalDev PostgreSQL - IF Statement - GeeksforGeeks How to work with control structures in PostgreSQL stored procedures: Using IF, CASE, and LOOP statements | EDB PL/pgSQL IF Statement How to combine multiple selects in one query - Databases - ( loop reference ) DROP FUNCTION (Transact-SQL) - SQL Server | Microsoft Docs SQL : Multiple Row and Column Subqueries - w3resource PostgreSQL: Documentation: 9.5: CREATE FUNCTION PostgreSQL CREATE FUNCTION By Practical Examples datetime - PHP Sort a multidimensional array by element containing date - Stack Overflow database - Oracle order NULL LAST by default - Stack Overflow PostgreSQL: Documentation: 9.5: Modifying Tables PostgreSQL: Documentation: 14: SELECT PostgreSQL Array: The ANY and Contains trick - Postgres OnLine Journal postgresql - sql ORDER BY multiple values in specific order? - Stack Overflow sql - How to aggregate two PostgreSQL columns to an array separated by brackets - Stack Overflow How do I get the current unix timestamp from PostgreSQL? - Database Administrators Stack Exchange SQL MAX() with HAVING, WHERE, IN - w3resource linux - Which version of PostgreSQL am I running? - Stack Overflow Postgres login: How to log into a Postgresql database | alvinalexander.com Copying Data Between Tables in a Postgres Database PostgreSQL CREATE FUNCTION By Practical Examples php - How to remove all numbers from string? - Stack Overflow
כמה עוד נשאר למשלוח חינם גם לעגלה ולצקאאוט הוספת צ'קבוקס לאישור דיוור בצ'קאאוט הסתרת אפשרויות משלוח אחרות כאשר משלוח חינם זמין דילוג על מילוי כתובת במקרה שנבחרה אפשרות איסוף עצמי הוספת צ'קבוקס לאישור דיוור בצ'קאאוט שינוי האפשרויות בתפריט ה-סידור לפי בווקומרס שינוי הטקסט "אזל מהמלאי" הערה אישית לסוף עמוד העגלה הגבלת רכישה לכל המוצרים למקסימום 1 מכל מוצר קבלת שם המוצר לפי ה-ID בעזרת שורטקוד הוספת כפתור וואטסאפ לקנייה בלופ ארכיון מוצרים הפיכה של מיקוד בצ'קאאוט ללא חובה מעבר ישיר לצ'קאאוט בלחיתה על הוספה לסל (דילוג עגלה) התראה לקבלת משלוח חינם בדף עגלת הקניות גרסה 1 התראה לקבלת משלוח חינם בדף עגלת הקניות גרסה 2 קביעה של מחיר הזמנה מינימלי (מוצג בעגלה ובצ'קאאוט) העברת קוד הקופון ל-ORDER REVIEW העברת קוד הקופון ל-ORDER REVIEW Kadence WooCommerce Email Designer קביעת פונט אסיסנט לכל המייל בתוסף מוצרים שאזלו מהמלאי - יופיעו מסומנים באתר, אבל בתחתית הארכיון הוספת כפתור "קנה עכשיו" למוצרים הסתרת אפשרויות משלוח אחרות כאשר משלוח חינם זמין שיטה 2 שינוי סימן מטבע ש"ח ל-ILS להפוך סטטוס הזמנה מ"השהייה" ל"הושלם" באופן אוטומטי תצוגת הנחה באחוזים שינוי טקסט "בחר אפשרויות" במוצרים עם וריאציות חיפוש מוצר לפי מק"ט שינוי תמונת מוצר לפי וריאציה אחרי בחירה של וריאציה אחת במקרה של וריאציות מרובות הנחה קבועה לפי תפקיד בתעריף קבוע הנחה קבועה לפי תפקיד באחוזים הסרה של שדות משלוח לקבצים וירטואליים הסתרת טאבים מעמוד מוצר הצגת תגית "אזל מהמלאי" בלופ המוצרים להפוך שדות ל-לא חובה בצ'קאאוט שינוי טקסט "אזל מהמלאי" לוריאציות שינוי צבע ההודעות המובנות של ווקומרס הצגת ה-ID של קטגוריות המוצרים בעמוד הקטגוריות אזל מהמלאי- שינוי ההודעה, תגית בלופ, הודעה בדף המוצר והוספת אזל מהמלאי על וריאציה הוספת שדה מחיר ספק לדף העריכה שינוי טקסט אזל מהמלאי תמונות מוצר במאונך לצד תמונת המוצר הראשית באלמנטור הוספת כפתור קנה עכשיו לעמוד המוצר בקניה הזו חסכת XX ש''ח לאפשר למנהל חנות לנקות קאש ברוקט לאפשר רק מוצר אחד בעגלת קניות הוספת סימון אריזת מתנה ואזור להוראות בצ'קאאוט של ווקומרס הצגת הנחה במספר (גודל ההנחה) הוספת "אישור תקנון" לדף התשלום הצגת רשימת תכונות המוצר בפרונט
החלפת טקסט באתר (מתאים גם לתרגום נקודתי) הסרת פונטים של גוגל מתבנית KAVA ביטול התראות במייל על עדכון וורדפרס אוטומטי הוספת תמיכה בקבצי VCF באתר (קבצי איש קשר VCARD) - חלק 1 להחריג קטגוריה מסוימת מתוצאות החיפוש שליפת תוכן של ריפיטר יצירת כפתור שיתוף למובייל זיהוי אלו אלמנטים גורמים לגלילה אופקית התקנת SMTP הגדרת טקסט חלופי לתמונות לפי שם הקובץ הוספת התאמת תוספים לגרסת WP הוספת טור ID למשתמשים הסרת כותרת בתבנית HELLO הסרת תגובות באופן גורף הרשאת SVG חילוץ החלק האחרון של כתובת העמוד הנוכחי חילוץ הסלאג של העמוד חילוץ כתובת העמוד הנוכחי מניעת יצירת תמונות מוקטנות התקנת SMTP הצגת ה-ID של קטגוריות בעמוד הקטגוריות להוריד מתפריט הניהול עמודים הוספת Favicon שונה לכל דף ודף הוספת אפשרות שכפול פוסטים ובכלל (של שמעון סביר) הסרת תגובות באופן גורף 2 בקניה הזו חסכת XX ש''ח חיפוש אלמנטים סוררים, גלישה צדית במובייל שיטה 1 לאפשר רק מוצר אחד בעגלת קניות הצגת הנחה במספר (גודל ההנחה) הוספת "אישור תקנון" לדף התשלום שינוי צבע האדמין לפי סטטוס העמוד/פוסט שינוי צבע אדמין לכולם לפי הסכמות של וורדפרס תצוגת כמות צפיות מתוך הדשבורד של וורדפרס הצגת סוג משתמש בפרונט גלילה אין סופית במדיה שפת הממשק של אלמנטור תואמת לשפת המשתמש
הודעת שגיאה מותאמת אישית בטפסים להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 1 להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 2 שינוי הגבלת הזיכרון בשרת הוספת לינק להורדת מסמך מהאתר במייל הנשלח ללקוח להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 3 יצירת כפתור שיתוף למובייל פתיחת דף תודה בטאב חדש בזמן שליחת טופס אלמנטור - טופס בודד בדף פתיחת דף תודה בטאב חדש בזמן שליחת טופס אלמנטור - טפסים מרובים בדף ביי ביי לאריק ג'ונס (חסימת ספאם בטפסים) זיהוי אלו אלמנטים גורמים לגלילה אופקית לייבלים מרחפים בטפסי אלמנטור יצירת אנימציה של "חדשות רצות" בג'ט (marquee) שינוי פונט באופן דינאמי בג'ט פונקציה ששולפת שדות מטא מתוך JET ומאפשרת לשים הכל בתוך שדה SELECT בטופס אלמנטור הוספת קו בין רכיבי התפריט בדסקטופ ולדציה למספרי טלפון בטפסי אלמנטור חיבור שני שדות בטופס לשדה אחד שאיבת נתון מתוך כתובת ה-URL לתוך שדה בטופס וקידוד לעברית מדיה קוורי למובייל לייבלים מרחפים בטפסי אלמנטור תמונות מוצר במאונך לצד תמונת המוצר הראשית באלמנטור הצגת תאריך עברי פורמט תאריך מותאם אישית תיקון שדה תאריך בטופס אלמנטור במובייל שאיבת פרמטר מתוך הכתובת והזנתו לתוך שדה בטופס (PARAMETER, URL, INPUT) עמודות ברוחב מלא באלמנטור עמודה דביקה בתוך אלמנטור יצירת "צל" אומנותי קוד לסוויצ'ר, שני כפתורים ושני אלמנטים סקריפט לסגירת פופאפ של תפריט לאחר לחיצה על אחד העמודים הוספת כפתור קרא עוד שפת הממשק של אלמנטור תואמת לשפת המשתמש