7f813e2c34
Refactor URL Shortening Feature and UI Enhancements * Adds new feature page, user interface and user interface enhancement Co-authored-by: anthony <anthony@Project42 - SCM <noreply@scm.project42.io>> Co-committed-by: anthony <anthony@Project42 - SCM <noreply@scm.project42.io>>
64 lines
1.1 KiB
CSS
64 lines
1.1 KiB
CSS
.Card {
|
|
position: relative;
|
|
height: 270px;
|
|
width: 250px;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
overflow: hidden;
|
|
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15), 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-family: "Roboto", sans-serif;
|
|
padding: 15px;
|
|
transition: .3s, transform .6s ease;
|
|
}
|
|
|
|
.Card:hover {
|
|
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.4), 0px 4px 6px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-25px);
|
|
}
|
|
|
|
|
|
.top-part {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.feature-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30px;
|
|
color: var(--color-primary);
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-tertiary);
|
|
}
|
|
|
|
.bottom-part {
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-description {
|
|
color: #666;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.feature-button button {
|
|
padding: 8px 30px;
|
|
border-radius: 5px;
|
|
background-color: #1d4ed8;
|
|
border: 1px solid #f5f5f5;
|
|
color: #fff;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
.feature-button button a {
|
|
color: #fff;
|
|
}
|
|
|
|
.feature-button button:hover {
|
|
opacity: 0.8;
|
|
}
|