<div class="wrapper">
  <div class="wheelWrapper"></div>
  <div class="wheelRing"></div>
  <div class="ring"></div>
  <div class="stick one"></div>
  <div class="stick two"></div>
  <div class="stick three"></div>
  <div class="stick four"></div>
  <div class="stick five"></div>
  <div class="outerCircle"></div>
  <div class="innerCircle">
    SPIN
  </div>
  <div class="ringBorder"></div>
  <div class="dot one"></div>
  <div class="dot two"></div>
  <div class="dot three"></div>
  <div class="dot four"></div>
  <div class="dot five"></div>
  <div class="dot six"></div>
  <div class="dot seven"></div>
  <div class="dot eight"></div>
  <div class="dot nine"></div>
  <div class="dot ten"></div>

  <div class="shapeWrapper one">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper two">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper three">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper four">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper five">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper six">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper seven">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper eight">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper nine">
    <div class="shape"></div>
  </div>
  <div class="shapeWrapper ten">
    <div class="shape"></div>
  </div>

  <div class="circleWrapper"></div>
  <div class="circle"></div>
  <div class="pointer"></div>

  <div class="buttonsWrapper left">
    <div class="buttonWrapper">
      <div class="button"></div>
      <div class="description">L1</div>
    </div>

    <div class="buttonWrapper top">
      <div class="button"></div>
      <div class="description">L2</div>
    </div>
  </div>

  <div class="arrowsWrapper">
    <div class="background"></div>
    <div class="background flipped"></div>
    <div class="arrowWrapper top">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper right">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper bottom">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>
    <div class="arrowWrapper left">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#818384" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
    </div>

    <div class="buttonWrapper top below"></div>
    <div class="buttonWrapper right below"></div>
    <div class="buttonWrapper bottom below"></div>
    <div class="buttonWrapper left below"></div>

    <div class="buttonWrapper top"></div>
    <div class="buttonWrapper right"></div>
    <div class="buttonWrapper bottom"></div>
    <div class="buttonWrapper left"></div>
  </div>

  <div class="buttonsWrapper right">
    <div class="buttonWrapper">
      <div class="description">R1</div>
      <div class="button"></div>
    </div>

    <div class="buttonWrapper top">
      <div class="description">R2</div>
      <div class="button"></div>
    </div>
  </div>

  <div class="buttonsWrapper signs">
    <div class="buttonWrapper">
      <svg viewBox="0 0 184.58 184.58">
          <path fill="#3fb499" d="M182.004,146.234L108.745,19.345c-3.435-5.949-9.586-9.5-16.455-9.5s-13.021,3.551-16.455,9.5L2.576,146.234
		c-3.435,5.948-3.435,13.051,0,19c3.435,5.949,9.586,9.5,16.455,9.5h146.518c6.869,0,13.021-3.552,16.455-9.5
		C185.438,159.285,185.438,152.182,182.004,146.234z M169.88,158.234c-0.435,0.751-1.725,2.5-4.331,2.5H19.031
		c-2.606,0-3.896-1.749-4.331-2.5c-0.434-0.752-1.302-2.744,0.001-5L87.96,26.345c1.303-2.256,3.462-2.5,4.33-2.5
		s3.027,0.244,4.33,2.5l73.259,126.889C171.181,155.49,170.313,157.482,169.88,158.234z"/>
      </svg>
      <div class="button"></div>
    </div>

    <div class="buttonWrapper">
      <svg viewBox="0 0 47.971 47.971">
	<path fill="#a5aed9" d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
		c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
		C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
		s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/>
</svg>
      <div class="button"></div>
    </div>

    <div class="row">
      <div class="buttonWrapper">
        <svg viewBox="0 0 482.239 482.239">
    <path fill="#d998c3" d="m465.016 0h-447.793c-9.52 0-17.223 7.703-17.223 17.223v447.793c0 9.52 7.703 17.223 17.223 17.223h447.793c9.52 0 17.223-7.703 17.223-17.223v-447.793c0-9.52-7.703-17.223-17.223-17.223zm-17.223 447.793h-413.347v-413.347h413.348v413.347z"/>
</svg>
        <div class="button"></div>
      </div>

      <div class="buttonWrapper">
        <svg viewBox="0 0 512 512">
		<path fill="#e94f2b" d="M256,0C114.618,0,0,114.618,0,256s114.618,256,256,256s256-114.618,256-256S397.382,0,256,0z M256,469.333
			c-117.818,0-213.333-95.515-213.333-213.333S138.182,42.667,256,42.667S469.333,138.182,469.333,256S373.818,469.333,256,469.333z
			"/>
</svg>
        <div class="button"></div>
      </div>
    </div>
  </div>

  <div class="footerWrapper">
    <img src="https://cdn.sanity.io/images/0ugmrqfk/production/98758fc9b207ad4bebb1898d5bee151f95f66ea6-200x155.svg" class="logo" />
    <img src="https://cdn.sanity.io/images/0ugmrqfk/production/2509bfa32449151e0e7c6ffd33384f69a88adf0f-1920x376.png" class="wordmark" />

    <div class="bottomButtonsWrapper">
      <div class="buttonWrapper">
        <div class="button"></div>
        <div class="description">Select</div>
      </div>

      <div class="buttonWrapper">
        <div class="button start"></div>
        <div class="description">Start</div>
      </div>
    </div>

    <div class="textWrapper">
      <div class="text">A</div>
      <div class="triangle right"></div>
      <div class="triangle left"></div>
      <div class="text">B</div>
    </div>
  </div>
</div>

<a class="author" href="https://itsmenatalie.com" target="_blank">Created by ItsMeNatalie</a>
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  overflow: hidden;

  .wrapper {
    position: relative;
    background-color: #bbbfc8;
    border-radius: 90px;
    height: 410px;
    width: 460px;
    font-family: "Roboto", sans-serif;
    border: double 5px transparent;
    background-image: linear-gradient(#bbbfc8, #bbbfc8),
      radial-gradient(circle at top, #222, #a1a4a9);
    background-origin: border-box;
    background-clip: content-box, border-box;

    .wheelWrapper {
      position: absolute;
      border-radius: 50%;
      height: 350px;
      width: 350px;
      top: -100px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: double 4px transparent;
      background-image: linear-gradient(#bbbfc8, #bbbfc8),
        radial-gradient(circle at top, #222, #a1a4a9);
      background-origin: border-box;
      background-clip: content-box, border-box;
    }

    .wheelRing {
      position: absolute;
      border-radius: 50%;
      height: 320px;
      width: 320px;
      top: -85px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: 3px solid #3c3d3f;
      background-image: radial-gradient(circle at center, #3d3e40, #222);
    }

    .outerCircle {
      position: absolute;
      top: -25px;
      width: 200px;
      height: 200px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 50%;
      background: #e1ddde;
      box-shadow: 0 0 10px 0 rgba(34, 34, 34, 0.5);
    }

    .innerCircle {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 40px;
      width: 75px;
      height: 75px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 50%;
      background: #e1ddde;
      box-shadow: 0 0 10px 0 rgba(34, 34, 34, 0.5);
      font-weight: bolder;
      font-size: 20px;
      text-shadow: 0px 1px 1px rgba(#4d4d4d, 0.5);
      color: transparent;
    }

    .stick {
      position: absolute;
      top: -68px;
      background: radial-gradient(ellipse at center, #74817a 5%, #e1ddde 65%);
      width: 6px;
      height: 292px;
      left: 0;
      right: 0;
      margin: 0 auto;
      box-shadow: 0 0 2px 0 rgba(34, 34, 34, 0.4);

      &.one {
        transform: rotate(18deg);
      }

      &.two {
        transform: rotate(54deg);
      }

      &.three {
        transform: rotate(90deg);
      }

      &.four {
        transform: rotate(126deg);
      }

      &.five {
        transform: rotate(162deg);
      }
    }

    .ringBorder {
      position: absolute;
      top: -77px;
      left: 0;
      right: 0;
      margin: 0 auto;
      border: solid 10px #dfdde0;
      width: 290px;
      height: 290px;
      border-radius: 50%;
      box-shadow: inset 0 0 5px 0 rgba(34, 34, 34, 0.5);
    }

    .ring {
      position: absolute;
      top: -75px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: linear-gradient(36deg, #b4d726 42.34%, transparent 42.34%) 0 0,
        linear-gradient(72deg, #25b855 75.48%, transparent 75.48%) 0 0,
        linear-gradient(-36deg, #7125ae 42.34%, transparent 42.34%) 100% 0,
        linear-gradient(-72deg, #2323b0 75.48%, transparent 75.48%) 100% 0,
        linear-gradient(36deg, transparent 57.66%, #be28d9 57.66%) 100% 100%,
        linear-gradient(72deg, transparent 24.52%, #dc2222 24.52%) 100% 100%,
        linear-gradient(-36deg, transparent 57.66%, #f0e122 57.66%) 0 100%,
        linear-gradient(-72deg, transparent 24.52%, #f8ca21 24.52%) 0 100%,
        #21a4f9 linear-gradient(#ed9a41, #ed9a41) 50% 100%;
      background-repeat: no-repeat;
      background-size: 50% 50%;
    }

    .dot {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #f7f7f7;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 1);

      &.one {
        top: -67px;
        right: 181px;
      }

      &.two {
        top: -13px;
        right: 106px;
      }

      &.three {
        top: 75px;
        right: 77px;
      }

      &.four {
        top: 164px;
        right: 106px;
      }

      &.five {
        top: 218px;
        right: 181px;
      }

      &.six {
        top: 218px;
        left: 181px;
      }

      &.seven {
        top: 162px;
        left: 106px;
      }

      &.eight {
        top: 75px;
        left: 78px;
      }

      &.nine {
        top: -13px;
        left: 107px;
      }

      &.ten {
        top: -67px;
        left: 181px;
      }
    }

    .circleWrapper {
      position: absolute;
      top: 130px;
      right: 10px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 5px solid #ced0d6;
      background: #a1a4a9;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5);
    }

    .circle {
      position: absolute;
      top: 140px;
      right: 20px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ebebed;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.2);
    }

    .pointer {
      position: absolute;
      top: 127px;
      right: 27px;
      width: 80px;
      height: 7px;
      border-radius: 50%;
      background: #ebebed;
      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.4);
      transform: rotate(20deg);
    }

    .shapeWrapper {
      position: absolute;

      &.one {
        top: 105px;
        left: 185px;
        transform: rotate(55deg);
      }

      &.two {
        top: 73px;
        left: 175px;
        transform: rotate(90deg);
      }

      &.three {
        top: 40px;
        left: 180px;
        transform: rotate(125deg);
      }

      &.four {
        top: 20px;
        left: 207px;
        transform: rotate(162deg);
      }

      &.five {
        top: 122px;
        left: 208px;
        transform: rotate(18deg);
      }

      &.six {
        top: 122px;
        right: 208px;
        transform: rotate(-18deg);
      }

      &.seven {
        top: 20px;
        right: 207px;
        transform: rotate(-162deg);
      }

      &.eight {
        top: 40px;
        right: 180px;
        transform: rotate(-125deg);
      }

      &.nine {
        top: 73px;
        right: 175px;
        transform: rotate(-90deg);
      }

      &.ten {
        top: 105px;
        right: 185px;
        transform: rotate(-55deg);
      }

      .shape {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-bottom: 4px solid #f7f7f7;
        position: relative;
        top: 0px;

        &:after {
          content: "";
          position: absolute;
          left: -5px;
          top: 4px;
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-top: 25px solid #f7f7f7;
        }
      }
    }

    .buttonsWrapper {
      position: absolute;
      top: 190px;

      &.signs {
        top: 240px;
        right: 50px;

        .row {
          position: absolute;
          display: flex;
          left: -32px;
          top: 32px;
        }

        .buttonWrapper {
          margin: 30px 15px;
        }
      }

      &.left {
        left: 20px;
      }
      &.right {
        right: 20px;
      }
      .buttonWrapper {
        position: relative;
        display: flex;
        align-items: flex-end;

        &.top {
          margin-top: 10px;
          align-items: flex-start;
        }

        .button {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          background: radial-gradient(
            ellipse at center,
            #727481 50%,
            #2d2f3c 70%
          );
          border: 2px solid #030710;
          cursor: pointer;
        }

        .description {
          font-weight: bold;
          padding: 0 5px;
          color: #dbdcde;
          text-shadow: 1px 1px #69686d;
        }

        svg {
          font-size: bold;
          position: absolute;
          height: 14px;
          z-index: 5;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          cursor: pointer;
        }
      }
    }

    .arrowsWrapper {
      position: absolute;
      left: 75px;
      bottom: 20px;

      .background {
        background-color: #b0b4bf;
        height: 130px;
        width: 40px;
        border-radius: 5px;

        &.flipped {
          position: absolute;
          bottom: 0;
          transform: rotate(90deg);
        }
      }

      .arrowWrapper {
        position: absolute;

        &.top {
          top: 3px;
          left: 13px;
        }

        &.right {
          transform: rotate(90deg);
          right: -40px;
          bottom: 55px;
        }

        &.bottom {
          transform: rotate(180deg);
          bottom: 3px;
          left: 13px;
        }

        &.left {
          transform: rotate(-90deg);
          left: -40px;
          bottom: 55px;
        }

        svg {
          height: auto;
          width: 14px;
        }
      }

      .buttonWrapper {
        position: absolute;
        background-color: #6e727e;
        height: 26px;
        width: 26px;
        border-radius: 5px;

        &.below {
          height: 28px;
          width: 28px;
          background-color: #2c303a;

          &.top {
            top: 19px;
            left: 6px;
          }

          &.right {
            top: 52px;
            right: -26px;
          }

          &.bottom {
            bottom: 19px;
            left: 6px;
          }

          &.left {
            top: 52px;
            left: -26px;
          }

          &:after {
            bottom: -12px;
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-top: 14px solid #2c303a;
          }
        }

        &.top {
          top: 20px;
          left: 7px;
        }

        &.right {
          top: 53px;
          right: -25px;
          transform: rotate(90deg);
        }

        &.bottom {
          bottom: 20px;
          left: 7px;
          transform: rotate(180deg);
        }

        &.left {
          top: 53px;
          left: -25px;
          transform: rotate(-90deg);
        }

        &:after {
          content: "";
          position: absolute;
          bottom: -10px;
          border-radius: 5px;
          border-left: 13px solid transparent;
          border-right: 13px solid transparent;
          border-top: 13px solid #6e727e;
        }
      }
    }

    .footerWrapper {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0.8;

      .logo {
        height: 25px;
        width: auto;
      }

      .wordmark {
        margin-top: 4px;
        height: 15px;
        width: auto;
      }

      .bottomButtonsWrapper {
        display: flex;
        padding-top: 7px;

        .buttonWrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 15px;

          .button {
            height: 15px;
            width: 30px;
            background: radial-gradient(
              ellipse at center,
              #727481 50%,
              #2d2f3c 70%
            );
            border: 2px solid #030710;
            border-radius: 3px;
            cursor: pointer;
            &.start {
              position: relative;
              border-radius: 3px 100px 100px 3px;
            }
          }

          .description {
            font-weight: bold;
            text-transform: uppercase;
            padding-top: 5px;
            color: #030710;
            font-size: 15px;
          }
        }
      }

      .textWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        .text {
          padding: 0 2px;
          font-size: 13px;
        }
        .triangle {
          width: 0;
          height: 0;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;

          &.left {
            border-left: 7px solid #030710;
            margin-left: 5px;
          }
          &.right {
            border-right: 7px solid #030710;
            margin-right: 5px;
          }
        }
      }
    }
  }

  a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    position: absolute;
    left: calc(50% - 96px);
    bottom: 0;
    font-style: italic;
    font-size: 12px;
    color: #212121;
    background-color: white;
    padding: 10px 20px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.