jl-frontend/css/project_card.css

85 lines
1.7 KiB
CSS

.project-listing-card {
background-color: white;
height: 495px;
width: 390px;
min-width: 80%;
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: start;
border-bottom: 6px solid #04B2D9;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
gap: 6px;
}
@media only screen and (max-width: 400px) {
.project-listing-card {
width: 90%;
}
}
.project-listing-card:hover {
cursor: pointer;
/*border: 3px solid #04B2D9;*/
transition-duration: 0.1s;
}
.project-search-result-card-picture {
border-radius: 6px 6px 0px 0px;
width: 100%;
height: 390px;
background-color: rgba(0, 0, 0, 0.3);
object-fit: cover;
}
.project-search-result-card-title {
font-size: 14px;
font-family: Inter;
font-weight: normal;
text-transform: uppercase;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
height: 20px;
color: rgb(79, 79, 79);
}
.project-search-result-card-price {
padding-left: 10px;
padding-right: 10px;
max-lines: 1;
font-size: 21px;
font-family: Inter;
font-weight: bold;
color: rgb(29, 29, 29);
}
.project-search-result-card-details-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 75px;
width: 100%;
padding-top: 6px;
padding-left: 13px;
padding-right: 15px;
}
.project-search-result-card-details-item {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.527);
font-size: 16px;
gap: 10px;
}