YVGKBp

index.html

<header class="main-header">
  <h1>CodeMyUI.com</h1>
  <nav>
    <ul>
      <li>Buy Now</li>
    </ul>
  </nav>
</header>

<div class="eo2-sold-out js-sold-out-btn"><a href="https://codemyui.com/"><img src="https://s7.postimg.org/dijzij76z/9_Mdtu_G1.png"></a></div>

script.js

//as seen on https://www.electricobjects.com

style.css

@keyframes eo2-sold-out-swing {
    0% {
        transform: rotate(3deg)
    }

    50% {
        transform: rotate(-3deg)
    }

    100% {
        transform: rotate(3deg)
    }
}

.eo2-sold-out {
    position: absolute;
    top: -5px;
    right: 80px;
    width: 115px;
    height: 115px;
    z-index: 1;
    cursor: pointer;
    animation: eo2-sold-out-swing 2s ease-in-out forwards infinite;
    transform-origin: 50% 0;
    transition: top 150ms ease-in-out, opacity 150ms ease-in-out
}

.eo2-sold-out:hover {
    opacity: .8
}

.main-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 6rem;
  color: white;
  background: #1E6262;
  line-height: 6rem;
  transform: translateY(0);
  transform: translate3d(0,0,0);
  transition: .25s transform;
  backface-visibility: hidden;
}

.main-header h1 {
  float: left;
  font-size: 1.4rem;
  margin: 0 0 0 2rem;
}

.main-header nav {
  float: right;
  font-size: 1.4rem;
}

.main-header nav ul { 
  margin: 0; 
  padding: 0; 
}

.main-header nav li {
  display: inline-block;
  padding: 0 2rem;
  border-left: .1rem solid #fff;
  background: #00AD7C;
}

main { 
  padding: 10rem 6rem;
  background: #EEE;
}

yvgkbp.markdown

YVGKBp

A Pen by Saijo George on CodePen.

License.