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; } }

la vignette d'hyperlien

pratique pour faire des vignettes entièrement cliquable

afin de mettre des liens vers votre site ou des ressources externes comme vos réseaux sociaux

il vous suffit de glisser une image (idéalement au format SVG) dans une vignette d'hyperlien et le tour est joué