Jump to content

Assistance Compiling Codepen for Code Block

Recommended Posts

  • Replies 1
  • Views 444
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.