thisissamiraaa Posted March 27, 2022 Share Posted March 27, 2022 (edited) Site URL: https://www.samiraahmed.ca/ Hi, I'm trying to add the code on this link: https://codepen.io/kkhenriquez/pen/PGvmjm to my site title: "SAMIRA AHMED" but, when i paste the code, it always says that there is a syntax error... someone please help me, i don't know what to do. If possible, i also wanted to know if I could also it on the project titles on the home page and if its possible to change the color. site password is samiraahmed Edited March 27, 2022 by thisissamiraaa Link to comment
tuanphan Posted March 30, 2022 Share Posted March 30, 2022 Hi, You added to Custom CSS. However Codepen includes HTML + CSS. If you add HTML to CSS, it will show syntax error Edit page where you want to add effect > Add a Code Block > Paste this code <a href="#" class="glitch" data-glitch="Explore">Explore</a> <style> .glitch { font-size: 8.125em; font-family: "Raleway", sans-serif; font-weight: 700; text-decoration: none; text-transform: uppercase; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; color: #fff; letter-spacing: 5px; } .glitch:before, .glitch:after { display: block; content: attr(data-glitch); text-transform: uppercase; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; } .glitch:after { color: #f0f; z-index: -2; } .glitch:before { color: #0ff; z-index: -1; } .glitch:hover:before { -webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5; animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5; } .glitch:hover:after { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 5; } @media only screen and (max-width: 400px) { .glitch { font-size: 3em; } } @-webkit-keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } to { transform: translate(0); } } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } to { transform: translate(0); } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment