پیشنمایش زنده
کد HTML
<div class="card">
<div class="lc cavity"></div>
<div class="lc line"></div>
<div class="led"></div>
<div class="text">UIVERSE</div>
</div>
کد CSS
.card {
width: 270px;
height: 220px;
background-color: #1e1e1e;
border-radius: 70px;
box-shadow:
inset 0px 35px 25px rgba(255, 255, 255, 0.05),
inset 10px 0px 25px rgba(0, 0, 0, 0.8),
inset 40px 0px 20px rgba(255, 255, 255, 0.05),
inset -10px 0px 25px rgba(0, 0, 0, 0.8),
inset -40px 0px 20px rgba(255, 255, 255, 0.05),
inset 0px 10px 10px rgba(0, 0, 0, 0.9),
inset 0px -15px 25px rgba(255, 255, 255, 0.05),
10px 25px 40px -10px rgba(0, 0, 0, 0.8);
position: relative;
}
.card .line {
width: 100%;
height: 2px;
background-color: #4a4a4a;
margin-top: 30%;
position: relative;
}
.line::after,
.line::before {
content: "";
position: absolute;
width: 5%;
height: 2px;
background-color: #2a2a2a;
}
.line::before {
right: 0;
}
.card .cavity {
width: 150px;
height: 20px;
background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
border-radius: 200px;
margin: auto;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 30%);
}
.card .led {
width: 7px;
aspect-ratio: 1;
background-color: #00ff00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 30%);
border-radius: 100px;
box-shadow: 0 0 6px #00ff00;
}
.card .text {
text-align: center;
margin-top: 70px;
color: rgba(255, 255, 255, 0.3);
font-weight: bolder;
}