پیشنمایش زنده
کد HTML
<div class="card columns">
<div class="button-container">
<button class="btn red-flag">RED FLAG</button>
<p class="offer">JOB OFFER</p>
</div>
<p class="secondary-heading">
"As a UX designer,you will design the entire UI."
</p>
<p class="card-description">
Verify alignment of job description with proposed position.<br />
</p>
</div>
کد CSS
.columns {
width: 19em;
position: relative;
border-radius: 20px;
padding: 35px;
border: 2px solid black;
transition: all 0.4s;
}
.columns:hover {
box-shadow: 4px 4px 0 1px rgba(0, 0, 0);
}
.dots {
position: absolute;
right: 15px;
top: 15px;
}
.columns .button-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
margin-bottom: 20px;
}
.offer {
font-size: 17px;
font-weight: 900;
border-bottom: 2px solid black;
cursor: pointer;
transition: all 0.4s;
}
.btn {
padding: 7px 15px;
border: 1px solid black;
background-color: orange;
border-radius: 10px;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s;
}
.columns:hover .btn {
box-shadow: 2px 2px 0 1px rgba(0, 0, 0);
}
.btn:focus {
background: transparent;
}
.secondary-heading {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.card-description {
font-size: 18px;
font-weight: 500;
line-height: 1.2;
}