Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Apr 23, 2017
Embed
What would you like to do?
YVGKBp
<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>
//as seen on https://www.electricobjects.com
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment