Banner

Personalize your own perfume, ascend your scent to descend upon your surrounding.
Choose from a variety of fragrance oils to create a distinctive perfume that will bear your name.

Create You Own Fragrance

List

Available Fragrances

Create your signature scent with our personalized perfume customization service.

Bergamot

Get expert advice and recommendations on choosing the perfect perfume for any occasion.

Gardenia

Discover our exquisite perfume gift sets, perfect for surprising your loved ones.

Grapes

Jasmine

Lavender

Lemongrass

Mango

Mint

Orange

Peach

Pineapple

Rosemarry

Sage

Sandalwood

Strawberry

Vanilla

Embed

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      margin-inline: 100px;
      margin-bottom: 50px;
      margin-left: auto;
      margin-right: auto;
    }
    
    table td {
      border: 0px solid rgb(206, 17, 17);
      padding: 5px;
      text-align: left;
    }
    
    #selected-items-table {
      margin-top: 30px;
    }
    
    #selected-items-table td {
      padding: 20px 20px;
    }
  </style>
</head>
<body>
    <div class="table-wrapper">
  <table id="checkbox-table">
    <tr>
      <td>
        <input type="checkbox" id="Bergamot" name="Bergamot" value="Bergamot">
        <label for="Bergamot">Bergamot</label>
      </td>
      <td>
        <input type="checkbox" id="Gardenia" name="Gardenia" value="Gardenia">
        <label for="Gardenia">Gardenia</label>
      </td>
      <td>
        <input type="checkbox" id="Grapes" name="Grapes" value="Grapes">
        <label for="Grapes">Grapes</label>
      </td>
      <td>
        <input type="checkbox" id="Jasmine" name="Jasmine" value="Jasmine">
        <label for="Jasmine">Jasmine</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="Lavender" name="Lavender" value="Lavender">
        <label for="Lavender">Lavender</label>
      </td>
      <td>
        <input type="checkbox" id="Lemongrass" name="Lemongrass" value="Lemongrass">
        <label for="Lemongrass">Lemongrass</label>
      </td>
        <td>
        <input type="checkbox" id="Mango" name="Mango" value="Mango">
        <label for="Mango">Mango</label>
      </td>
      <td>
        <input type="checkbox" id="Mint" name="Mint" value="Mint">
        <label for="Mint">Mint</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="Orange" name="Orange" value="Orange">
        <label for="Orange">Orange</label>
      </td>
      <td>
        <input type="checkbox" id="Peach" name="Peach" value="Peach">
        <label for="Peach">Peach</label>
      </td>
        <td>
        <input type="checkbox" id="Pineapple" name="Pineapple" value="Pineapple">
        <label for="Pineapple">Pineapple</label>
      </td>
      <td>
        <input type="checkbox" id="Rosemary" name="Rosemary" value="Rosemary">
        <label for="Rosemary">Rosemary</label>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="Sage" name="Sage" value="Sage">
        <label for="Sage">Sage</label>
      </td>
      <td>
        <input type="checkbox" id="Sandalwood" name="Sandalwood" value="Sandalwood">
        <label for="Sandalwood">Sandalwood</label>
      </td>
        <td>
        <input type="checkbox" id="Strawberry" name="Strawberry" value="Strawberry">
        <label for="Strawberry">Strawberry</label>
      </td>
      <td>
        <input type="checkbox" id="Vanilla" name="Vanilla" value="Vanilla">
        <label for="Vanilla">Vanilla</label>
      </td>
    </tr>
  </table>
  
  <span style="white-space: pre-line"></span>

  <table id="selected-items-table">
    <tr>
      <th width="auto">Fragrances number</th>
      <th width = "300px">Selected Fracgrances</th>
    </tr>
    <tr>
      <td text-align="center" id="selected-count">0</td>
      <td id="selected-names"></td>
    </tr>
  </table>
  </div>

    <style>
    .table-wrapper {
        display: flex;
        flex-direction: column;
    }
    </style>
  
  <script>
    const checkboxes = document.querySelectorAll('#checkbox-table input[type="checkbox"]');
    const selectedCount = document.getElementById('selected-count');
    const selectedNames = document.getElementById('selected-names');

    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', () => {
        let count = 0;
        let names = '';

        checkboxes.forEach((checkbox) => {
          if (checkbox.checked) {
            count++;
            names += checkbox.value + ', ';
          }
        });

        selectedCount.textContent = count;
        selectedNames.textContent = names.slice(0, -2);
      });
    });
    
  </script>
</body>
</html>

Meta-Scent

perfume

Mulish

Merriweather