galaxy/Cards/csozidev_neat-jellyfish-86.html

<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M24 12L18.3431 17.6569L16.9289 16.2426L21.1716 12L16.9289 7.75736L18.3431 6.34315L24 12ZM2.82843 12L7.07107 16.2426L5.65685 17.6569L0 12L5.65685 6.34315L7.07107 7.75736L2.82843 12ZM9.78845 21H7.66009L14.2116 3H16.3399L9.78845 21Z"></path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M4.99958 12.9998C4.99958 7.91186 7.90222 3.56348 11.9996 1.81787C16.0969 3.56348 18.9996 7.91186 18.9996 12.9998C18.9996 13.8227 18.9236 14.6263 18.779 15.4026L20.7194 17.2352C20.8845 17.3911 20.9238 17.6388 20.815 17.8381L18.3196 22.4132C18.1873 22.6556 17.8836 22.7449 17.6412 22.6127C17.5993 22.5898 17.5608 22.5611 17.5271 22.5273L15.2925 20.2927C15.1049 20.1052 14.8506 19.9998 14.5854 19.9998H9.41379C9.14857 19.9998 8.89422 20.1052 8.70668 20.2927L6.47209 22.5273C6.27683 22.7226 5.96025 22.7226 5.76498 22.5273C5.73122 22.4935 5.70246 22.4551 5.67959 22.4132L3.18412 17.8381C3.07537 17.6388 3.11464 17.3911 3.27975 17.2352L5.22014 15.4026C5.07551 14.6263 4.99958 13.8227 4.99958 12.9998ZM6.47542 19.6955L7.29247 18.8785C7.85508 18.3159 8.61814 17.9998 9.41379 17.9998H14.5854C15.381 17.9998 16.1441 18.3159 16.7067 18.8785L17.5237 19.6955L18.5056 17.8954L17.4058 16.8566C16.9117 16.39 16.6884 15.7044 16.8128 15.0363C16.9366 14.3721 16.9996 13.691 16.9996 12.9998C16.9996 9.13025 15.0045 5.69953 11.9996 4.04021C8.99462 5.69953 6.99958 9.13025 6.99958 12.9998C6.99958 13.691 7.06255 14.3721 7.18631 15.0363C7.31078 15.7044 7.08746 16.39 6.59338 16.8566L5.49353 17.8954L6.47542 19.6955ZM11.9996 12.9998C10.895 12.9998 9.99958 12.1044 9.99958 10.9998C9.99958 9.89525 10.895 8.99982 11.9996 8.99982C13.1041 8.99982 13.9996 9.89525 13.9996 10.9998C13.9996 12.1044 13.1041 12.9998 11.9996 12.9998Z"></path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM4.53956 9.82234C6.8254 10.837 8.68402 12.5048 9.74238 14.7996 10.8008 12.5048 12.6594 10.837 14.9452 9.82234 12.6321 8.79557 10.7676 7.04647 9.74239 4.71088 8.71719 7.04648 6.85267 8.79557 4.53956 9.82234ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899ZM18.3745 19.0469 18.937 18.4883 19.4878 19.0469 18.937 19.5898 18.3745 19.0469Z"></path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: card */
/* CSS Challange card made by: csozi | Website: www.csozi.hu*/

.card {
  background-color: #161617;
  height: 290px;
  width: 230px;
  position: relative;
  padding: 10px;
  padding-top: 10px;
  border-radius: 20px;
}

.card::before {
  content: '';
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  height: 298px;
  width: 238px;
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: -1;
  border-radius: 24px;
}

.heading {
  line-height: 10px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.heading span {
  position: relative;
  top: 22px;
  font-size: 50px;
  font-weight: bolder;
  background: linear-gradient(233deg, #091296, #580aab, #9e45af, #e54dd3);
  background-size: 400% 400%;
  animation: galaxy_background 7s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 10;
}

.heading span::after {
  content: 'Galaxy';
  position: absolute;
  padding-top: 20px;
  translate: 0px -19px;
  left: 0;
  top: 25px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffffff 1px, transparent 0);
  background-size: 15px 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(0, 0, 0, 0);
  animation: infinite galaxy_bg_dots 3s linear;
  pointer-events: none;
}

.item {
  color: white;
  font-weight: bold;
  width: fit-content;
  height: fit-content;
  position: absolute;
  transition: 0.2s;
  cursor: pointer;
}

.item--create:hover {
  color: #9e45af;
}

.item--post:hover {
  color: #580aab;
}

.item--inspire:hover {
  color: #e54dd3;
}

.item svg {
}

.item--create {
  top: 80px;
  left: 15px;
  rotate: -5deg;
}

.item--create::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 25px;
  left: 80px;
  animation: infinite dots 3.5s;
  animation-delay: 0s;
  scale: 0;
  opacity: 0;
}

.item--create::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 40px;
  left: 95px;
  animation: infinite dots 3.5s;
  animation-delay: 0.5s;
  scale: 0;
  opacity: 0;
}

.item--post {
  top: 130px;
  right: 20px;
  rotate: 6deg;
}

.item--post::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 25px;
  right: 70px;
  animation: infinite dots 3.5s;
  animation-delay: 1s;
  scale: 0;
  opacity: 0;
}

.item--post::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  top: 30px;
  right: 55px;
  animation: infinite dots 3.5s;
  animation-delay: 1.5s;
  scale: 0;
  opacity: 0;
}

.item--inspire {
  top: 180px;
  left: 20px;
  rotate: -3deg;
}

.item--inspire::before {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 27px;
  left: 110px;
  animation: infinite dots 3.5s;
  animation-delay: 2s;
  scale: 0;
  opacity: 0;
}

.item--inspire::after {
  content: '';
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: white;
  bottom: 20px;
  left: 90px;
  animation: infinite dots 3.5s;
  animation-delay: 2.5s;
  scale: 0;
  opacity: 0;
}

.item span {
  position: relative;
  bottom: 5px;
}

.card button {
  position: absolute;
  bottom: 10px;
  width: calc(100% - 20px);
  height: 50px;
  border-radius: 10px;
  background-color: #323232;
  background-image: linear-gradient(27deg, #323232 40%, #091296 50%, #580aab 65%, #9e45af 80%, #e54dd3 100%);
  background-size: 400% 400%;
  background-position: 0%;
  transition: 0.3s ease-in-out;
  border: none;
  color: white;
  font-size: 22px;
  font-weight: bolder;
  cursor: pointer;
}

.card button:hover {
  background-position: 100% 100%;
  translate: 0px -2px;
}

@keyframes dots {
  0% {
    scale: 0;
    opacity: 0;
  }

  25% {
    scale: 1.4;
    opacity: 1;
  }

  90% {
    scale: 0;
    opacity: 0;
  }

  100% {
    scale: 0;
    opacity: 0;
  }
}

@keyframes galaxy_background {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes galaxy_bg_dots {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -100px 100px;
  }
}
</style>