Brume's website https://brume.ink
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

120 lines
1.8 KiB

.card-parent {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
}
h1 {
font-weight: 300;
}
.row {
max-width: 900px;
margin: 50px auto 0;
}
.card-projet {
float: left;
padding: 0 1.7rem;
width: 35rem;
@media screen and (max-width: 600px) {
width: 95%;
}}
.card .wrapper {
margin-bottom: 55px;
background-color: #888;
position: relative;
overflow: hidden;
transition: 0.3s box-shadow ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.27), 0 8px 6px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card-projet .wrapper {
height: 30rem;
@media screen and (max-width: 600px) {
height: 23rem;
width: 80vw;
}}
.card .wrapper:hover .data {
transform: translateY(0);
}
.card-projet .data {
position: absolute;
bottom: 0;
width: 100%;
transform: translateY(calc(70px + 1em));
transition: transform 0.3s;
}
.card .data .content {
position: relative;
z-index: 1;
}
.content-project {
padding: 1em;
}
.card .author {
font-size: 12px;
}
.card .title {
margin-top: 10px;
}
.card .text {
margin: 0;
}
.card-desc {
height: 70px;
}
.date {
position: absolute;
top: 0;
left: 0;
background-color: #8D97EA;
color: #fff;
padding: 0.8em;
}
.date span {
display: block;
text-align: center;
}
.date .day {
font-weight: 700;
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.date .month {
font-size: 20px;
text-transform: uppercase;
}
.date .date-projet .year {
font-size: 26px;
font-weight: 700;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.content {
background-color: #000b;
box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.title a {
color: white;
}