You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.9 KiB
CSS
113 lines
2.9 KiB
CSS
2 days ago
|
.flag {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 0 0 300px 0; /* Top-left corner rounded */
|
||
|
|
height: 33.3%;
|
||
|
|
object-fit: cover;
|
||
|
|
border: 5px solid #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map {
|
||
|
|
width: 33.3%;
|
||
|
|
height: auto;
|
||
|
|
object-fit: cover;
|
||
|
|
filter: brightness(0);
|
||
|
|
margin-left: 33.3%;
|
||
|
|
margin-right: 33.3%;
|
||
|
|
margin-top: 33.3%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.parent {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
grid-template-rows: repeat(2, 1fr);
|
||
|
|
grid-column-gap: 0px;
|
||
|
|
grid-row-gap: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.div1 { grid-area: 1 / 1 / 2 / 2; }
|
||
|
|
.div2 { grid-area: 2 / 1 / 3 / 2; }
|
||
|
|
|
||
|
|
.profiles{
|
||
|
|
--size: 200px;
|
||
|
|
--img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z"; /* unfortunatly it isn't possible (as far as I know) to use custom properties in clip paths */
|
||
|
|
--img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
|
||
|
|
--name-txt-clr: #9c6868;
|
||
|
|
--bg-blur: 0; /* background image default blur */
|
||
|
|
--bg-blur-hover: 5px; /* background image blur on hover */
|
||
|
|
font-family: 'Ubuntu', sans-serif;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
gap: 25%;
|
||
|
|
margin: auto auto;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
@media (min-width: 500px){
|
||
|
|
.profiles{
|
||
|
|
--grid-cols: 3 ;
|
||
|
|
margin: 23px 20%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar{
|
||
|
|
position: relative;
|
||
|
|
width: var(--size);
|
||
|
|
height: var(--size); /* for older browsers */
|
||
|
|
aspect-ratio: 1;
|
||
|
|
}
|
||
|
|
.avatar-img {
|
||
|
|
clip-path: path(var(--img-clip));
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar-img::before{
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
display: blocl;
|
||
|
|
inset: 50% 0 0 0;
|
||
|
|
z-index: -1;
|
||
|
|
border-radius: 20px;
|
||
|
|
background-color: var(--bg-clr); /* fallback if image not defined as custom property */
|
||
|
|
background-image: var(--bg-img);
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
filter: blur(var(--bg-blur));
|
||
|
|
transition: filter 300ms ease-in-out;
|
||
|
|
}
|
||
|
|
.avatar-img > img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
transition: scale 300ms, filter 300ms;
|
||
|
|
transform-origin: bottom;
|
||
|
|
scale: var(--img-scale, .9);
|
||
|
|
filter: var(--img-shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.avatar > p{
|
||
|
|
text-align: right;
|
||
|
|
font-size: .9rem;
|
||
|
|
color: var(--name-txt-clr);
|
||
|
|
bottom: .5rem;
|
||
|
|
right: 0;
|
||
|
|
translate: 0 var(--name-y,-50px);
|
||
|
|
opacity: var(--name-opacity,0);
|
||
|
|
z-index: -1;
|
||
|
|
transition-name: translate, opacity;
|
||
|
|
transition-delay: 150ms;
|
||
|
|
transition-duration: 300ms;
|
||
|
|
transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* all hover effects as custom properties */
|
||
|
|
.avatar:hover{
|
||
|
|
--img-scale: 1.2;
|
||
|
|
--img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
|
||
|
|
--name-y: 0;
|
||
|
|
--name-opacity: 1;
|
||
|
|
--bg-blur: var(--bg-blur-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|