Ajoutez le texte suivant aux styles personnalisés de votre site Vignette :

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker'); :root{ --skewX:-5deg; --skewY:-5deg; } html{ background:#262626!important; } #back{ &::after{ pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 17%,rgba(0,0,0,1) 100%); content: ''; display: block; height: 115%; position: absolute; top: -15%; left: 0; width: 100%; } } @keyframes pulsate { 100% { filter:drop-shadow(0px 0px 15px #f008b7); opacity:.1; } 40% { filter:drop-shadow(0px 0px 12px #f008b77d); opacity:.8; } 0% { filter:drop-shadow(0px 0px 25px #f008b7); opacity:1; }} @keyframes vAnim { 0% { transform: translateY(200px) skew(var(--skewX),var(--skewY)); opacity: 0; } 100% { transform: translateX(0) skew(var(--skewX),var(--skewY)); opacity: 1; } } #banner{ .s{ font-size: clamp(40px,var(--fst),60px)!important; } font-family: 'Permanent Marker', sans-serif; font-variant: small-caps; transform: skew(-11deg,-11deg); background-image: -webkit-linear-gradient(#FF0FF8 0%, #F9F9F7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(2px 2px 20px #f008b7); animation: pulsate 4s ease-in-out infinite alternate; } #banner:after { content: '-'; position: absolute; transform: scaleX(10.5) translate(5%, 35%); background-image: -webkit-linear-gradient(#FF0FF8 0%, #FC96FC 100%); -webkit-background-clip: text; } .nav{ transform: skew(var(--skewX),var(--skewY))!important; } .vignette{ --bs: inset 0px 0px 42px #d14fd1!important; background:#cd8fc40f!important; border-radius:15px; border: 0.2rem solid #ff9eff; border-radius: 2rem; filter: drop-shadow(0px 0px 15px #f008b7); font-size: 1.2rem; color: #fff !important; box-shadow: inset 0px 0px 42px #ff9eff9c, inset 0px 0px 0px #160716d6; overflow: hidden!important; animation: vAnim 900ms cubic-bezier(0.14, 1, 0.14, 1) 100ms 1 forwards !important; -webkit-animation: vAnim 900ms cubic-bezier(0.14, 1, 0.14, 1) 100ms 1 forwards !important; &::after { pointer-events:none; box-shadow: var(--bs); content: ''; display: block; height: 100%; position: absolute; top: 0; left:0; width: 100%; } } @media (max-width: 900px) { :root{ --col-pt: 45px!important; } #banner{ transform: skew(-11deg,-11deg); -webkit-transform: skew(-11deg,-11deg); } } @media (max-width: 600px) { .vignette{ width: calc(100% - 60px)!important; } }

ressources (couleurs, logos, etc)

Outil pour trouver une palette de couleurs :