mirror of
https://github.com/Wessel/portfolio.git
synced 2026-07-27 18:51:54 +02:00
64 lines
1.7 KiB
SCSS
64 lines
1.7 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
|
|
|
|
.card {
|
|
backdrop-filter: blur(16px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
background-color: rgba(17, 25, 40, 0.25);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.125);
|
|
padding: 25px;
|
|
filter: drop-shadow(0 30px 10px rgba(0,0,0,0.125));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content:center;
|
|
text-align: center;
|
|
height: 450px;
|
|
|
|
}
|
|
|
|
.wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-grow: 1; /* Allow the wrapper to grow and take available space */
|
|
}
|
|
|
|
.banner-image {
|
|
background-image: url(https://images.unsplash.com/photo-1641326201918-3cafc641038e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 300px;
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255,255,255, 0.255)
|
|
}
|
|
|
|
.banner-image-revvedup {
|
|
background-image: url(../img/revvedup.svg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
height: 150px;
|
|
width: 100%;
|
|
|
|
background-size: contain;
|
|
border-radius: 12px;
|
|
// border: 1px solid rgba(255,255,255, 0.255)
|
|
}
|
|
|
|
.banner-image-muetab {
|
|
background-image: url(../img/mue_dark.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 150px;
|
|
width: 100%;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%; /* Ensure the card takes the full height */
|
|
}
|