galaxy/Cards/ZeroKaarma_wet-goat-13.html

 <div class="main">
             <div id="c2" class="card">
                <div class="card-info">
                    <div class="contact-title">Contact</div>
                        <div class="card-contact">
                            <li class="icon-contact">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M280 0C408.1 0 512 103.9 512 232c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-101.6-82.4-184-184-184c-13.3 0-24-10.7-24-24s10.7-24 24-24zm8 192a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-32-72c0-13.3 10.7-24 24-24c75.1 0 136 60.9 136 136c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-48.6-39.4-88-88-88c-13.3 0-24-10.7-24-24zM117.5 1.4c19.4-5.3 39.7 4.6 47.4 23.2l40 96c6.8 16.3 2.1 35.2-11.6 46.3L144 207.3c33.3 70.4 90.3 127.4 160.7 160.7L345 318.7c11.2-13.7 30-18.4 46.3-11.6l96 40c18.6 7.7 28.5 28 23.2 47.4l-24 88C481.8 499.9 466 512 448 512C200.6 512 0 311.4 0 64C0 46 12.1 30.2 29.5 25.4l88-24z"></path>
                                </svg>
                                     Tel:(+00) 000 99999-0000
                            </li>
                            <li class="icon-contact">
                                <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path>
                                </svg>
                                    Email: contact@mail.com
                            </li>            
                        </div>
                    </div>
                </div>

            <div id="c3" class="card">
                <div class="card-info">
                    <li class="address-icon">
                        <svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"></path>
                        </svg>
                    </li>
                    <li class="address-title">Address:</li>
                    <li class="address">Champs Elysees, Paris.</li>
              </div>
            </div>

            <div id="c1" class="card">
                 <div class="card-info">
                    <div class="card-avatar">
                         <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"></path>
                        </svg>
                    </div>
                    <div class="card-title">Main Title</div>
                    <div class="card-subtitle">Sub-title</div>
                    <div class="card-social">
                    <li id="cs1" class="card-social-icon">
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
                         </svg>
                         Twitter
                        </li>
                    <li id="cs2" class="card-social-icon">
                         <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path>
                        </svg>
                        LinkedIn
                    </li>
                    <li id="cs3" class="card-social-icon">
                        <svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
                        </svg>
                        GitHub
                    </li>
                    </div>
                </div>
            </div>
        </div>
<style>
/* From Uiverse.io by ZeroKaarma - Tags: card, profilecard, project-card */
.main {
  display: grid;
  place-items: center;
  width: 190px;
  height: 254px;
}

.card {
  width: 190px;
  height: 254px;
  background: #FAF1F6;
  padding: 2rem 1.5rem;
  transition: box-shadow .3s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  position: absolute;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-avatar {
  background: radial-gradient(#A8A6B6,#B3B1BF,#BDBBC7,#C5C4CE,#E2E2E7);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transition: transform .2s ease;
}

.card-avatar svg {
  padding-top: 5px;
  height: 80px;
  width: 100px;
  fill: #515F65;
}

.card-social {
  display: flex;
  justify-content: space-around;
  width: 190px;
  margin-top: 10%;
  text-align: center;
}

.card-social-icon {
  list-style: none;
  color: #515F65;
  font-size: 0.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-social-icon svg {
  display: block;
  height: 20px;
  width: 20px;
  fill: #515F65;
  cursor: pointer;
}

.card-title {
  color: #1b1b1b;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 2rem;
  margin-top: 5px;
}

.card-subtitle {
  color: #7e93a0;
  font-size: 1.0em;
}

.address-icon {
  fill: #515F65;
  height: 150px;
  width: 100px;
  list-style: none;
  justify-content: space-around;
}

.address-title {
  color: #333;
  font-size: 1.0em;
  font-weight: 600;
  list-style: none;
}

.address {
  color: #859ba8;
  font-size: 0.8em;
  list-style: none;
  padding-left: 20px;
  ;
}

.contact-title {
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
  margin-top: 45%;
  padding-bottom: 5px;
}

.card-contact {
  color: #859ba8;
  font-size: 0.8em;
}

.icon-contact {
  list-style: none;
  display: flex;
  align-items: center;
}

.icon-contact svg {
  display: block;
  height: 18px;
  width: 18px;
  fill: #515F65;
  padding-right: 5px;
}

.card:hover {
  box-shadow: 0 10px 50px #23232333;
}

.card:hover .card-info {
  transform: translateY(-5%);
}

.card-avatar:hover {
  transform: scale(1.1);
}

#cs1:hover {
  transform: scale(2.0);
}

#cs2:hover {
  transform: scale(2.0);
}

#cs3:hover {
  transform: scale(2.0);
}

.main:hover #c1 {
  transform: translateX(0px);
}

.main:hover #c2 {
  transform: translateX(200px);
}

.main:hover #c3 {
  transform: translateX(-200px);
}
</style>