mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
105 lines
3.1 KiB
HTML
105 lines
3.1 KiB
HTML
|
|
<div class="card">
|
|
<div class="text">
|
|
<span>Lorem ipsum dolor sit amet</span>
|
|
<p class="subtitle">Vivamus nisi purus</p>
|
|
</div>
|
|
<div class="icons">
|
|
<a class="btn" href="#">
|
|
<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="svg-icon">
|
|
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M31.8,64.5a14.5,14.5,0,0,1-3.2-28.7,17.5,17.5,0,0,1-.4-4,18.2,18.2,0,0,1,36-3.6h.3a18.2,18.2,0,0,1,3.7,36M39.1,75.4,50,86.3m0,0L60.9,75.4M50,86.3V42.7">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="btn" href="#">
|
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
<path d="M4.317,16.411c-1.423-1.423-1.423-3.737,0-5.16l8.075-7.984c0.994-0.996,2.613-0.996,3.611,0.001C17,4.264,17,5.884,16.004,6.88l-8.075,7.984c-0.568,0.568-1.493,0.569-2.063-0.001c-0.569-0.569-0.569-1.495,0-2.064L9.93,8.828c0.145-0.141,0.376-0.139,0.517,0.005c0.141,0.144,0.139,0.375-0.006,0.516l-4.062,3.968c-0.282,0.282-0.282,0.745,0.003,1.03c0.285,0.284,0.747,0.284,1.032,0l8.074-7.985c0.711-0.71,0.711-1.868-0.002-2.579c-0.711-0.712-1.867-0.712-2.58,0l-8.074,7.984c-1.137,1.137-1.137,2.988,0.001,4.127c1.14,1.14,2.989,1.14,4.129,0l6.989-6.896c0.143-0.142,0.375-0.14,0.516,0.003c0.143,0.143,0.141,0.374-0.002,0.516l-6.988,6.895C8.054,17.836,5.743,17.836,4.317,16.411"></path>
|
|
</svg>
|
|
</a>
|
|
<a class="btn" href="#">
|
|
<svg y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="svg-icon">
|
|
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" d="M21.9,50h0M50,50h0m28.1,0h0M25.9,50a4,4,0,1,1-4-4A4,4,0,0,1,25.9,50ZM54,50a4,4,0,1,1-4-4A4,4,0,0,1,54,50Zm28.1,0a4,4,0,1,1-4-4A4,4,0,0,1,82.1,50Z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Javierrocadev - Tags: card, svg, hover effect, cardhover */
|
|
.card {
|
|
width: 250px;
|
|
height: 200px;
|
|
border-radius: 15px;
|
|
background: rgba(105, 13, 197, 0.103);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
height: 100px;
|
|
width: 100px;
|
|
position: absolute;
|
|
top: -40%;
|
|
left: -20%;
|
|
border-radius: 50%;
|
|
border: 35px solid rgba(255, 255, 255, 0.102);
|
|
transition: all .8s ease;
|
|
filter: blur(.5rem);
|
|
}
|
|
|
|
.text {
|
|
flex-grow: 1;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: aliceblue;
|
|
font-weight: 900;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: .6em;
|
|
font-weight: 300;
|
|
color: rgba(240, 248, 255, 0.691);
|
|
}
|
|
|
|
.icons {
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
width: 250px;
|
|
border-radius: 0px 0px 15px 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn {
|
|
border: none;
|
|
width: 84px;
|
|
height: 35px;
|
|
background-color: rgba(247, 234, 234, 0.589);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
stroke: rgb(38, 59, 126);
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: rgb(247, 234, 234);
|
|
}
|
|
|
|
.card:hover::before {
|
|
width: 140px;
|
|
height: 140px;
|
|
top: -30%;
|
|
left: 50%;
|
|
filter: blur(0rem);
|
|
}
|
|
</style>
|