How to add more menus horizontally in my code?

Legacy boards (read-only) Education & Credentials
,
1

Here you can see only 1 circle of SUNGLASSES. But i want 3 more circles horizontally and clickable to redirect on another page.

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap" rel="stylesheet">

  <style>
    body1 {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;

      display: grid;
    }

    .text {
      font-weight: 600;
      letter-spacing: 1.7px;
      text-transform: uppercase;
      font-family: 'Kanit';
      font-size: 17px;
      fill: #111;
      text-shadow: 2px 0px #ccc;
    }

    #rotatingText {
      animation-name: rotate-circle;
      animation-duration: 10s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    @keyframes rotate-circle {
      to {
        transform: rotate(1turn);
      }
    }

    .main {
      display: grid;
      align-items: center;
      justify-items: center;
    }

    .main img {
      position: absolute;
    }

    .main img {
      position: absolute;
      animation-name: rotate-circle;
      animation-direction: reverse;
      animation-duration: 20s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;

      filter: drop-shadow(0px 0px 5px #333);
    }
  </style>

  <div class="main">
    <img src="https://goeye.in/cdn/shop/files/VY221004PMG5251_2_d653eb6d-4249-4e4c-9360-520d02af1d7e_120x.jpg?v=1715385375" width="100" height="100">
    <svg id="rotatingText" viewBox="0 0 200 200" width="300" height="300">
      <defs>
        <path id="circle" d="M 100, 100
                m -75, 0
                a 75, 75 0 1, 0 150, 0
                a 75, 75 0 1, 0 -150, 0
                ">
        </path>
      </defs>
      <text width="200">
        <textPath alignment-baseline="top" xlink:href="#circle" class="text">
          SUNGLASSES - SUNGLSSES - SUNGLASSES 
        </textPath>
      </text>
    </svg>

  </div>
2

Hi @napster2025 ,

Can you share your store URL and the circle you are referring to so that I can help?

Best,

Daisy

3

https://vg7p9eakgcmww9xz-57081200663.shopifypreview.com

4

Any solution?