Brandfix Posted March 6, 2022 Share Posted March 6, 2022 Site URL: https://codepen.io/dagerzuga/pen/KLOaqL Hi, was hoping to get some assistance formatting the shared CodePen reference to be used within a code block. Want to use it as header text for a page section area. Thank you in advance. - - Link to comment
tuanphan Posted March 10, 2022 Share Posted March 10, 2022 Add a COde Block > Paste this code <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <div class="tcontainer"> <div class="text-container"> <p class="static-text">Hi, I'm a</p> <ul class="dynamic-text"> <li class="item">web developer</li> <li class="item">mobile developer</li> <li class="item">UX/UI desiger</li> <li class="item">content creator</li> <li class="item">professor</li> </ul> </div> </div> <style> .tcontainer { width: 100%; } .text-container { width: 520px; font-size: 40px; height: 50px; font-family: Montserrat; } .dynamic-text, .static-text { display: inline-block; } .static-text { margin-right: 10px; color: #41D3BD; } .dynamic-text { list-style: none; position: absolute; overflow: hidden; height: 50px; } .item { position: relative; top: 0; animation: move 5s infinite 1s; } .item:first-child { color: #01BAEF; } .item:nth-child(2) { color: #F79256; } .item:nth-child(3) { color: #0FA3B1; } .item:nth-child(4) { color: #FE5F55; } .item:nth-child(5) { color: #B0DB43; } @keyframes move { 0% { top: 0px; } 20% { top: -50px; } 40% { top: -96px; } 60% { top: -146px; } 80% { top: -196px; } } .signature { color: #85A9C1; font-family: Roboto, sans-serif; padding-top: 75px; } .signature__name { transition: 0.5s; color: #6E8CA0; text-decoration: none; } .signature__name:hover { color: #1E6583; text-decoration: underline; transition: 0.5s; } .svg-icon { width: 1em; height: 1em; animation: pulse-animation 0.5s alternate infinite; fill: #BA2632; } @keyframes pulse-animation { to { transform: scale(1.2); } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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