mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
95 lines
2.3 KiB
HTML
95 lines
2.3 KiB
HTML
<div class="card">
|
|
<div class="header">
|
|
<div class="img-box">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path fill="none" d="M0 0h24v24H0z"></path>
|
|
<path d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z" fill="rgba(66,193,110,1)"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="title">Features
|
|
</span></div>
|
|
|
|
<div class="content">
|
|
<p>
|
|
Lorem ipsum dolor sit tali amet, consectus uy
|
|
adipiscing it amet it...
|
|
</p>
|
|
|
|
<a class="btn-link">Read More...</a>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by joe-watson-sbf - Tags: summary, card, hover, card template, cardhover , card animation, card hover */
|
|
.card {
|
|
width: 190px;
|
|
height: 120px;
|
|
transition: all .5s;
|
|
box-shadow: 15px 15px 30px rgba(25, 25, 25, 0.11),
|
|
-15px -15px 30px rgba(60, 60, 60, 0.082);
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
height: 260px;
|
|
background: linear-gradient(360deg, #edededc5 60%, hsla(0, 0%, 13%, 1) 70%);
|
|
}
|
|
|
|
.card .header {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #212121;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card .header .img-box {
|
|
width: 50px;
|
|
}
|
|
|
|
.card .header .title {
|
|
font-size: 1em;
|
|
letter-spacing: .1em;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
padding: 4px 0 14px 0;
|
|
transition: all .5s;
|
|
color: #edededc5;
|
|
}
|
|
|
|
.card:hover .header {
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
|
|
}
|
|
|
|
.card:hover .card .header .title {
|
|
padding: 0;
|
|
}
|
|
|
|
.card .content {
|
|
display: block;
|
|
text-align: left;
|
|
color: #212121;
|
|
margin: 0 18px;
|
|
}
|
|
|
|
.card .content p {
|
|
transition: all .5s;
|
|
font-size: .8em;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card .content a {
|
|
color: #1d8122;
|
|
cursor: pointer;
|
|
transition: all .5s;
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card .content .btn-link:hover {
|
|
border-bottom: 1px solid #1d8122;
|
|
}
|
|
</style>
|