More languages
More actions
No edit summary |
No edit summary |
||
(21 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
.portal-banner{ | .portal-banner{ | ||
width:100%; | width:100%; | ||
margin:0; | |||
overflow:hidden; | |||
border-radius:7px; | |||
} | } | ||
/*image container*/ | /*image container*/ | ||
.portal-banner-image{ | .portal-banner-image{ | ||
width:100%; | |||
height:400px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
position:relative; | |||
} | } | ||
.portal-banner img{ | .portal-banner img{ | ||
object-fit:cover; | |||
width:100%; | |||
height:auto; | |||
z-index:1; | |||
position:absolute; | position:absolute; | ||
top:0; | |||
left:0; | |||
right:0; | |||
bottom:0; | |||
overflow:hidden; | |||
filter:blur(3px) brightness(0.7); | |||
} | } | ||
/*text container*/ | /*text container*/ | ||
.portal-banner-content{ | .portal-banner-content{ | ||
margin-top:-400px; | |||
width:100%; | |||
height:400px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:flex-start; | |||
padding-left:15px; | |||
} | } | ||
.portal-title{ | .portal-title{ | ||
font-size:4rem; | |||
font-weight:100; | |||
text-shadow:4px 4px 9px black; | |||
position:relative; | |||
z-index:10; | |||
user-select:none; | |||
line-height:1; | |||
} | } |
Latest revision as of 18:13, 9 November 2024
/*parent container*/
.portal-banner{
width:100%;
margin:0;
overflow:hidden;
border-radius:7px;
}
/*image container*/
.portal-banner-image{
width:100%;
height:400px;
display: flex;
align-items: center;
justify-content: center;
position:relative;
}
.portal-banner img{
object-fit:cover;
width:100%;
height:auto;
z-index:1;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
filter:blur(3px) brightness(0.7);
}
/*text container*/
.portal-banner-content{
margin-top:-400px;
width:100%;
height:400px;
display:flex;
align-items:center;
justify-content:flex-start;
padding-left:15px;
}
.portal-title{
font-size:4rem;
font-weight:100;
text-shadow:4px 4px 9px black;
position:relative;
z-index:10;
user-select:none;
line-height:1;
}