mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
72 lines
1.2 KiB
HTML
72 lines
1.2 KiB
HTML
<div class="card">
|
|
<div class="img"></div>
|
|
<div class="textBox">
|
|
<div class="textContent">
|
|
<p class="h1">Clans of Clash</p>
|
|
<span class="span">12 min ago</span>
|
|
</div>
|
|
<p class="p">Xhattmahs is not attacking your base!</p>
|
|
<div>
|
|
</div></div></div>
|
|
<style>
|
|
/* From Uiverse.io by JohnnyCSilva - Tags: notification */
|
|
.card {
|
|
width: 100%;
|
|
max-width: 290px;
|
|
height: 70px;
|
|
background: #353535;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
backdrop-filter: blur(10px);
|
|
transition: 0.5s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
cursor: pointer;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-left: 10px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(#d7cfcf, #9198e5);
|
|
}
|
|
|
|
.card:hover > .img {
|
|
transition: 0.5s ease-in-out;
|
|
background: linear-gradient(#9198e5, #712020);
|
|
}
|
|
|
|
.textBox {
|
|
width: calc(100% - 90px);
|
|
margin-left: 10px;
|
|
color: white;
|
|
font-family: 'Poppins' sans-serif;
|
|
}
|
|
|
|
.textContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.h1 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.p {
|
|
font-size: 12px;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
|
|
</style>
|