mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
1040 lines
17 KiB
HTML
1040 lines
17 KiB
HTML
<div class="card">
|
|
<div class="dot-container-main">
|
|
<span class="dot dot1 size-5"></span>
|
|
<span class="dot dot2 size-5"></span>
|
|
<span class="dot dot3 size-5"></span>
|
|
<span class="dot dot4 size-5"></span>
|
|
<span class="dot dot5 size-5"></span>
|
|
<span class="dot dot6 size-5"></span>
|
|
<span class="dot dot7 size-5"></span>
|
|
<span class="dot dot8 size-5"></span>
|
|
<span class="dot dot9 size-5"></span>
|
|
<span class="dot dot10 size-5"></span>
|
|
<span class="dot dot11 size-5"></span>
|
|
<span class="dot dot12 size-5"></span>
|
|
<span class="dot dot13 size-5"></span>
|
|
<span class="dot dot14 size-5"></span>
|
|
<span class="dot dot15 size-5"></span>
|
|
<span class="dot dot16 size-5"></span>
|
|
<span class="dot dot17 size-5"></span>
|
|
<span class="dot dot18 size-5"></span>
|
|
<span class="dot dot19 size-5"></span>
|
|
<span class="dot dot20 size-5"></span>
|
|
<span class="dot dot21 size-5"></span>
|
|
<span class="dot dot22 size-5"></span>
|
|
<span class="dot dot23 size-5"></span>
|
|
<span class="dot dot24 size-5"></span>
|
|
<span class="dot dot25 size-5"></span>
|
|
<span class="dot dot26 size-5"></span>
|
|
<span class="dot dot27 size-5"></span>
|
|
<span class="dot dot28 size-5"></span>
|
|
<span class="dot dot29 size-5"></span>
|
|
<span class="dot dot30 size-5"></span>
|
|
<span class="dot dot31 size-5"></span>
|
|
<span class="dot dot32 size-5"></span>
|
|
<span class="dot dot33 size-5"></span>
|
|
<span class="dot dot34 size-5"></span>
|
|
<span class="dot dot35 size-5"></span>
|
|
<span class="dot dot36 size-5"></span>
|
|
<span class="dot dot37 size-5"></span>
|
|
<span class="dot dot38 size-5"></span>
|
|
<span class="dot dot39 size-5"></span>
|
|
<span class="dot dot40 size-5"></span>
|
|
<span class="dot dot41 size-5"></span>
|
|
<span class="dot dot42 size-5"></span>
|
|
<span class="dot dot43 size-5"></span>
|
|
<span class="dot dot44 size-5"></span>
|
|
<span class="dot dot45 size-5"></span>
|
|
<span class="dot dot46 size-5"></span>
|
|
<span class="dot dot47 size-5"></span>
|
|
<span class="dot dot48 size-5"></span>
|
|
<span class="dot dot49 size-5"></span>
|
|
<span class="dot dot50 size-5"></span>
|
|
<span class="dot dot51 size-5"></span>
|
|
<span class="dot dot52 size-10"></span>
|
|
<span class="dot dot53 size-10"></span>
|
|
<span class="dot dot54 size-10"></span>
|
|
<span class="dot dot55 size-10"></span>
|
|
<span class="dot dot56 size-10"></span>
|
|
<span class="dot dot57 size-10"></span>
|
|
<span class="dot dot58 size-10"></span>
|
|
<span class="dot dot59 size-10"></span>
|
|
<span class="dot dot60 size-10"></span>
|
|
<span class="dot dot61 size-10"></span>
|
|
<span class="dot dot62 size-10"></span>
|
|
<span class="dot dot63 size-10"></span>
|
|
<span class="dot dot64 size-10"></span>
|
|
<span class="dot dot65 size-10"></span>
|
|
<span class="dot dot66 size-10"></span>
|
|
<span class="dot dot67 size-10"></span>
|
|
<span class="dot dot68 size-10"></span>
|
|
<span class="dot dot69 size-10"></span>
|
|
<span class="dot dot70 size-10"></span>
|
|
<span class="dot dot71 size-10"></span>
|
|
<span class="dot dot72 size-15"></span>
|
|
<span class="dot dot73 size-15"></span>
|
|
<span class="dot dot74 size-15"></span>
|
|
<span class="dot dot75 size-15"></span>
|
|
<span class="dot dot76 size-20">
|
|
<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="svg">
|
|
<path d="M 9.9980469 3 C 6.1390469 3 3 6.1419531 3 10.001953 L 3 20.001953 C 3 23.860953 6.1419531 27 10.001953 27 L 20.001953 27 C 23.860953 27 27 23.858047 27 19.998047 L 27 9.9980469 C 27 6.1390469 23.858047 3 19.998047 3 L 9.9980469 3 z M 22 7 C 22.552 7 23 7.448 23 8 C 23 8.552 22.552 9 22 9 C 21.448 9 21 8.552 21 8 C 21 7.448 21.448 7 22 7 z M 15 9 C 18.309 9 21 11.691 21 15 C 21 18.309 18.309 21 15 21 C 11.691 21 9 18.309 9 15 C 9 11.691 11.691 9 15 9 z M 15 11 A 4 4 0 0 0 11 15 A 4 4 0 0 0 15 19 A 4 4 0 0 0 19 15 A 4 4 0 0 0 15 11 z"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="dot dot77 size-20">
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="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>
|
|
</span>
|
|
<span class="dot dot78 size-20">
|
|
<svg viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" class="svg">
|
|
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="dot dot79 size-15"></span>
|
|
<span class="dot dot80 size-5"></span>
|
|
<span class="dot dot81 size-5"></span>
|
|
<span class="dot dot82 size-5"></span>
|
|
<span class="dot dot83 size-5"></span>
|
|
</div>
|
|
<div class="text">UIVERS.IO</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Smit-Prajapati - Tags: card, cool card, cardhover , card animation, card hover */
|
|
.card {
|
|
width: 200px;
|
|
height: 300px;
|
|
position: relative;
|
|
background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));
|
|
display: grid;
|
|
place-content: center;
|
|
border-radius: 20px;
|
|
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.size-5 {
|
|
width: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.size-10 {
|
|
width: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.size-15 {
|
|
width: 15px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.size-20 {
|
|
width: 20px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.dot-container-main {
|
|
width: 95px;
|
|
height: 110px;
|
|
position: relative;
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
aspect-ratio: 1;
|
|
background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);
|
|
border-top: 1px solid rgb(255, 255, 255);
|
|
border-right: 1px solid white;
|
|
transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.dot:hover {
|
|
transform: scale(1.8);
|
|
}
|
|
|
|
.dot1 {
|
|
left: -40px;
|
|
top: -80px;
|
|
}
|
|
|
|
.dot52 {
|
|
left: 10px;
|
|
top: -75px;
|
|
}
|
|
|
|
.dot4 {
|
|
left: 40px;
|
|
top: -50px;
|
|
}
|
|
|
|
.dot3 {
|
|
left: -20px;
|
|
top: -70px;
|
|
}
|
|
|
|
.dot72 {
|
|
left: 50px;
|
|
top: -85px;
|
|
}
|
|
|
|
.dot2 {
|
|
left: 110px;
|
|
top: -30px;
|
|
}
|
|
|
|
.dot53 {
|
|
left: 125px;
|
|
top: -80px;
|
|
}
|
|
|
|
.dot5 {
|
|
left: 100px;
|
|
top: -20px;
|
|
}
|
|
|
|
.dot73 {
|
|
left: -25px;
|
|
top: -50px;
|
|
}
|
|
|
|
.dot6 {
|
|
left: 30px;
|
|
top: -45px;
|
|
}
|
|
|
|
.dot7 {
|
|
left: 80px;
|
|
top: -60px;
|
|
}
|
|
|
|
.dot55 {
|
|
left: 60px;
|
|
top: -30px;
|
|
}
|
|
|
|
.dot8 {
|
|
left: 70px;
|
|
top: -35px;
|
|
}
|
|
|
|
.dot54 {
|
|
left: 120px;
|
|
top: -20px;
|
|
}
|
|
|
|
.dot56 {
|
|
left: 85px;
|
|
top: -5px;
|
|
}
|
|
|
|
.dot10 {
|
|
left: 80px;
|
|
top: -20px;
|
|
}
|
|
|
|
.dot12 {
|
|
left: -40px;
|
|
top: -25px;
|
|
}
|
|
|
|
.dot9 {
|
|
left: 0px;
|
|
top: -50px;
|
|
}
|
|
|
|
.dot76 {
|
|
left: 10px;
|
|
top: -20px;
|
|
}
|
|
|
|
.dot11 {
|
|
left: 110px;
|
|
top: 0px;
|
|
}
|
|
|
|
.dot59 {
|
|
left: 110px;
|
|
top: 30px;
|
|
}
|
|
|
|
.dot14 {
|
|
left: 100px;
|
|
top: 10px;
|
|
}
|
|
|
|
.dot58 {
|
|
left: -20px;
|
|
top: 0px;
|
|
}
|
|
|
|
.dot13 {
|
|
left: 50px;
|
|
top: -10px;
|
|
}
|
|
|
|
.dot15 {
|
|
left: 70px;
|
|
top: 0px;
|
|
}
|
|
|
|
.dot57 {
|
|
left: 30px;
|
|
top: 15px;
|
|
}
|
|
|
|
.dot17 {
|
|
left: 80px;
|
|
top: 10px;
|
|
}
|
|
|
|
.dot19 {
|
|
left: 95px;
|
|
top: 30px;
|
|
}
|
|
|
|
.dot23 {
|
|
left: 130px;
|
|
top: 45px;
|
|
}
|
|
|
|
.dot61 {
|
|
left: 75px;
|
|
top: 20px;
|
|
}
|
|
|
|
.dot28 {
|
|
left: 100px;
|
|
top: 40px;
|
|
}
|
|
|
|
.dot18 {
|
|
left: -35px;
|
|
top: 0px;
|
|
}
|
|
|
|
.dot16 {
|
|
left: 0px;
|
|
top: 20px;
|
|
}
|
|
|
|
.dot20 {
|
|
left: -30px;
|
|
top: 10px;
|
|
}
|
|
|
|
.dot24 {
|
|
left: -30px;
|
|
top: 30px;
|
|
}
|
|
|
|
.dot21 {
|
|
left: 50px;
|
|
top: 10px;
|
|
}
|
|
|
|
.dot65 {
|
|
left: 30px;
|
|
top: 30px;
|
|
}
|
|
|
|
.dot60 {
|
|
left: -15px;
|
|
top: 20px;
|
|
}
|
|
|
|
.dot25 {
|
|
left: -5px;
|
|
top: 40px;
|
|
}
|
|
|
|
.dot30 {
|
|
left: 20px;
|
|
top: 40px;
|
|
}
|
|
|
|
.dot32 {
|
|
left: 0px;
|
|
top: 60px;
|
|
}
|
|
|
|
.dot78 {
|
|
left: -35px;
|
|
top: 170px;
|
|
}
|
|
|
|
.dot50 {
|
|
left: 120px;
|
|
top: 180px;
|
|
}
|
|
|
|
.dot79 {
|
|
left: 60px;
|
|
top: 170px;
|
|
}
|
|
|
|
.dot69 {
|
|
left: 100px;
|
|
top: 135px;
|
|
}
|
|
|
|
.dot68 {
|
|
left: 110px;
|
|
top: 100px;
|
|
}
|
|
|
|
.dot47 {
|
|
left: 0px;
|
|
top: 175px;
|
|
}
|
|
|
|
.dot71 {
|
|
left: 20px;
|
|
top: 160px;
|
|
}
|
|
|
|
.dot83 {
|
|
left: 100px;
|
|
top: 170px;
|
|
}
|
|
|
|
.dot45 {
|
|
left: 10px;
|
|
top: 160px;
|
|
}
|
|
|
|
.dot67 {
|
|
left: 40px;
|
|
top: 140px;
|
|
}
|
|
|
|
.dot49 {
|
|
left: 45px;
|
|
top: 190px;
|
|
}
|
|
|
|
.dot48 {
|
|
left: 20px;
|
|
top: 180px;
|
|
}
|
|
|
|
.dot46 {
|
|
left: 100px;
|
|
top: 120px;
|
|
}
|
|
|
|
.dot70 {
|
|
left: 80px;
|
|
top: 145px;
|
|
}
|
|
|
|
.dot75 {
|
|
left: -20px;
|
|
top: 140px;
|
|
}
|
|
|
|
.dot82 {
|
|
left: 60px;
|
|
top: 160px;
|
|
}
|
|
|
|
.dot43 {
|
|
left: 50px;
|
|
top: 170px;
|
|
}
|
|
|
|
.dot44 {
|
|
left: 60px;
|
|
top: 130px;
|
|
}
|
|
|
|
.dot77 {
|
|
left: 110px;
|
|
top: 70px;
|
|
}
|
|
|
|
.dot42 {
|
|
left: 90px;
|
|
top: 110px;
|
|
}
|
|
|
|
.dot81 {
|
|
left: 90px;
|
|
top: 140px;
|
|
}
|
|
|
|
.dot62 {
|
|
left: 100px;
|
|
top: 55px;
|
|
}
|
|
|
|
.dot31 {
|
|
left: 85px;
|
|
top: 80px;
|
|
}
|
|
|
|
.dot33 {
|
|
left: -30px;
|
|
top: 130px;
|
|
}
|
|
|
|
.dot80 {
|
|
left: 70px;
|
|
top: 120px;
|
|
}
|
|
|
|
.dot39 {
|
|
left: 30px;
|
|
top: 115px;
|
|
}
|
|
|
|
.dot63 {
|
|
left: -30px;
|
|
top: 55px;
|
|
}
|
|
|
|
.dot41 {
|
|
left: 50px;
|
|
top: 110px;
|
|
}
|
|
|
|
.dot40 {
|
|
left: 40px;
|
|
top: 120px;
|
|
}
|
|
|
|
.dot66 {
|
|
left: 70px;
|
|
top: 95px;
|
|
}
|
|
|
|
.dot37 {
|
|
left: 10px;
|
|
top: 130px;
|
|
}
|
|
|
|
.dot51 {
|
|
left: -5px;
|
|
top: 105px;
|
|
}
|
|
|
|
.dot29 {
|
|
left: -15px;
|
|
top: 90px;
|
|
}
|
|
|
|
.dot38 {
|
|
left: 10px;
|
|
top: 90px;
|
|
}
|
|
|
|
.dot35 {
|
|
left: 50px;
|
|
top: 90px;
|
|
}
|
|
|
|
.dot64 {
|
|
left: 80px;
|
|
top: 45px;
|
|
}
|
|
|
|
.dot34 {
|
|
left: 70px;
|
|
top: 70px;
|
|
}
|
|
|
|
.dot36 {
|
|
left: 65px;
|
|
top: 80px;
|
|
}
|
|
|
|
.dot74 {
|
|
left: 30px;
|
|
top: 70px;
|
|
}
|
|
|
|
.dot26 {
|
|
left: 45px;
|
|
top: 60px;
|
|
}
|
|
|
|
.dot22 {
|
|
left: 60px;
|
|
top: 35px;
|
|
}
|
|
|
|
.dot27 {
|
|
left: 50px;
|
|
top: 70px;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.card:hover .text {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card:hover .dot1 {
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.card:hover .dot2 {
|
|
left: 90px;
|
|
top: 0px;
|
|
}
|
|
|
|
.card:hover .dot3 {
|
|
left: 5px;
|
|
top: 5px;
|
|
}
|
|
|
|
.card:hover .dot4 {
|
|
left: 45px;
|
|
top: 5px;
|
|
}
|
|
|
|
.card:hover .dot5 {
|
|
left: 85px;
|
|
top: 5px;
|
|
}
|
|
|
|
.card:hover .dot6 {
|
|
left: 15px;
|
|
top: 10px;
|
|
}
|
|
|
|
.card:hover .dot7 {
|
|
left: 75px;
|
|
top: 10px;
|
|
}
|
|
|
|
.card:hover .dot8 {
|
|
left: 55px;
|
|
top: 15px;
|
|
}
|
|
|
|
.card:hover .dot9 {
|
|
left: 15px;
|
|
top: 20px;
|
|
}
|
|
|
|
.card:hover .dot10 {
|
|
left: 60px;
|
|
top: 20px;
|
|
}
|
|
|
|
.card:hover .dot11 {
|
|
left: 90px;
|
|
top: 20px;
|
|
}
|
|
|
|
.card:hover .dot12 {
|
|
left: 0px;
|
|
top: 25px;
|
|
}
|
|
|
|
.card:hover .dot13 {
|
|
left: 75px;
|
|
top: 25px;
|
|
}
|
|
|
|
.card:hover .dot14 {
|
|
left: 85px;
|
|
top: 25px;
|
|
}
|
|
|
|
.card:hover .dot15 {
|
|
left: 80px;
|
|
top: 30px;
|
|
}
|
|
|
|
.card:hover .dot16 {
|
|
left: 15px;
|
|
top: 35px;
|
|
}
|
|
|
|
.card:hover .dot17 {
|
|
left: 75px;
|
|
top: 35px;
|
|
}
|
|
|
|
.card:hover .dot18 {
|
|
left: 0px;
|
|
top: 40px;
|
|
}
|
|
|
|
.card:hover .dot19 {
|
|
left: 85px;
|
|
top: 40px;
|
|
}
|
|
|
|
.card:hover .dot20 {
|
|
left: 5px;
|
|
top: 45px;
|
|
}
|
|
|
|
.card:hover .dot21 {
|
|
left: 50px;
|
|
top: 45px;
|
|
}
|
|
|
|
.card:hover .dot22 {
|
|
left: 60px;
|
|
top: 45px;
|
|
}
|
|
|
|
.card:hover .dot23 {
|
|
left: 90px;
|
|
top: 45px;
|
|
}
|
|
|
|
.card:hover .dot24 {
|
|
left: 0px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot25 {
|
|
left: 15px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot26 {
|
|
left: 45px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot27 {
|
|
left: 55px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot28 {
|
|
left: 80px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot29 {
|
|
left: 10px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot30 {
|
|
left: 20px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot31 {
|
|
left: 75px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot32 {
|
|
left: 25px;
|
|
top: 60px;
|
|
}
|
|
|
|
.card:hover .dot33 {
|
|
left: 5px;
|
|
top: 65px;
|
|
}
|
|
|
|
.card:hover .dot34 {
|
|
left: 55px;
|
|
top: 65px;
|
|
}
|
|
|
|
.card:hover .dot35 {
|
|
left: 30px;
|
|
top: 70px;
|
|
}
|
|
|
|
.card:hover .dot36 {
|
|
left: 50px;
|
|
top: 70px;
|
|
}
|
|
|
|
.card:hover .dot37 {
|
|
left: 25px;
|
|
top: 75px;
|
|
}
|
|
|
|
.card:hover .dot38 {
|
|
left: 35px;
|
|
top: 75px;
|
|
}
|
|
|
|
.card:hover .dot39 {
|
|
left: 30px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot40 {
|
|
left: 40px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot41 {
|
|
left: 50px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot42 {
|
|
left: 80px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot43 {
|
|
left: 35px;
|
|
top: 95px;
|
|
}
|
|
|
|
.card:hover .dot44 {
|
|
left: 55px;
|
|
top: 95px;
|
|
}
|
|
|
|
.card:hover .dot45 {
|
|
left: 25px;
|
|
top: 100px;
|
|
}
|
|
|
|
.card:hover .dot46 {
|
|
left: 50px;
|
|
top: 100px;
|
|
}
|
|
|
|
.card:hover .dot47 {
|
|
left: 20px;
|
|
top: 105px;
|
|
}
|
|
|
|
.card:hover .dot48 {
|
|
left: 45px;
|
|
top: 105px;
|
|
}
|
|
|
|
.card:hover .dot49 {
|
|
left: 55px;
|
|
top: 105px;
|
|
}
|
|
|
|
.card:hover .dot50 {
|
|
left: 90px;
|
|
top: 105px;
|
|
}
|
|
|
|
.card:hover .dot51 {
|
|
left: 15px;
|
|
top: 60px;
|
|
}
|
|
|
|
.card:hover .dot52 {
|
|
left: 10px;
|
|
top: 0px;
|
|
}
|
|
|
|
.card:hover .dot53 {
|
|
left: 75px;
|
|
top: 0px;
|
|
}
|
|
|
|
.card:hover .dot54 {
|
|
left: 85px;
|
|
top: 10px;
|
|
}
|
|
|
|
.card:hover .dot55 {
|
|
left: 45px;
|
|
top: 15px;
|
|
}
|
|
|
|
.card:hover .dot56 {
|
|
left: 75px;
|
|
top: 15px;
|
|
}
|
|
|
|
.card:hover .dot57 {
|
|
left: 10px;
|
|
top: 25px;
|
|
}
|
|
|
|
.card:hover .dot58 {
|
|
left: 0px;
|
|
top: 30px;
|
|
}
|
|
|
|
.card:hover .dot59 {
|
|
left: 85px;
|
|
top: 30px;
|
|
}
|
|
|
|
.card:hover .dot60 {
|
|
left: 10px;
|
|
top: 40px;
|
|
}
|
|
|
|
.card:hover .dot61 {
|
|
left: 75px;
|
|
top: 40px;
|
|
}
|
|
|
|
.card:hover .dot62 {
|
|
left: 85px;
|
|
top: 50px;
|
|
}
|
|
|
|
.card:hover .dot63 {
|
|
left: 0px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot64 {
|
|
left: 55px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot65 {
|
|
left: 30px;
|
|
top: 60px;
|
|
}
|
|
|
|
.card:hover .dot66 {
|
|
left: 40px;
|
|
top: 70px;
|
|
}
|
|
|
|
.card:hover .dot67 {
|
|
left: 20px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot68 {
|
|
left: 85px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot69 {
|
|
left: 80px;
|
|
top: 100px;
|
|
}
|
|
|
|
.card:hover .dot70 {
|
|
left: 40px;
|
|
top: 95px;
|
|
}
|
|
|
|
.card:hover .dot71 {
|
|
left: 30px;
|
|
top: 100px;
|
|
}
|
|
|
|
.card:hover .dot72 {
|
|
left: 50px;
|
|
top: 0px;
|
|
}
|
|
|
|
.card:hover .dot73 {
|
|
left: 0px;
|
|
top: 10px;
|
|
}
|
|
|
|
.card:hover .dot74 {
|
|
left: 40px;
|
|
top: 55px;
|
|
}
|
|
|
|
.card:hover .dot75 {
|
|
left: 10px;
|
|
top: 65px;
|
|
}
|
|
|
|
.card:hover .dot76 {
|
|
left: 45px;
|
|
top: 25px;
|
|
}
|
|
|
|
.card:hover .dot77 {
|
|
left: 75px;
|
|
top: 60px;
|
|
}
|
|
|
|
.card:hover .dot78 {
|
|
left: 0px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot79 {
|
|
left: 60px;
|
|
top: 95px;
|
|
}
|
|
|
|
.card:hover .dot80 {
|
|
left: 60px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot81 {
|
|
left: 70px;
|
|
top: 90px;
|
|
}
|
|
|
|
.card:hover .dot82 {
|
|
left: 75px;
|
|
top: 95px;
|
|
}
|
|
|
|
.card:hover .dot83 {
|
|
left: 75px;
|
|
top: 105px;
|
|
}
|
|
|
|
.size-20 {
|
|
display: grid;
|
|
place-content: center;
|
|
border: 1px solid rgb(255, 255, 255);
|
|
}
|
|
|
|
.size-20::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
border-radius: inherit;
|
|
background: black;
|
|
opacity: 0;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.size-20 .svg {
|
|
fill: rgba(255, 255, 255, 0);
|
|
height: 10px;
|
|
width: 10px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.size-20:hover {
|
|
transform: scale(1.5);
|
|
border: none;
|
|
}
|
|
|
|
.size-20:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.size-20:hover .svg {
|
|
fill: white;
|
|
z-index: 99;
|
|
}
|
|
|
|
.text {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 10px;
|
|
letter-spacing: 5px;
|
|
color: white;
|
|
opacity: 0;
|
|
transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
}
|
|
</style>
|