LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
  background-color: #F69899;
  font-family: 'arcon';
  overflow: hidden;
}
body a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
  transition: color 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
body .underbackground {
  background-color: #FAFAFA;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
}
body .underbackground .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: calc(50% - 10px);
  left: 30px;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1000;
  color: #F69899;
  line-height: 32px;
}
body .underbackground .header a {
  font-size: 18px;
  padding: 0 10px;
}
body .underbackground .header a:hover {
  color: #AD5858;
}
body .underbackground .header .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
body .underbackground .header .title a {
  font-size: 32px;
}
body .backgrounds .background {
  position: absolute;
  height: 20px;
  left: 0px;
  right: 0px;
  top: 120px;
  -webkit-animation: bg 2s ease-in-out infinite;
          animation: bg 2s ease-in-out infinite;
}
body .backgrounds .background .head {
  position: absolute;
  bottom: 100%;
  left: 0px;
  right: 0px;
  height: 20px;
}
body .backgrounds .background.layer-3 {
  background-color: #FAF0F0;
  top: 110px;
}
body .backgrounds .background.layer-3 .head {
  background: url(https://i.koya.io/grapefruitwave_3.svg);
  background-position: -60px 0px;
}
body .backgrounds .background.layer-2 {
  background-color: #FBD7D7;
  top: 114px;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
body .backgrounds .background.layer-2 .head {
  background: url(https://i.koya.io/grapefruitwave_2.svg);
  background-position: -40px 0px;
}
body .backgrounds .background.layer-1 {
  height: 30px;
  background-color: #F69899;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
body .backgrounds .background.layer-1 .head {
  background: url(https://i.koya.io/grapefruitwave_1.svg);
}
body .backgrounds .strawimage {
  z-index: 10000;
  position: absolute;
  background-image: url(https://i.koya.io/grapefruit_straw.svg);
  background-size: 30px 1316px;
  width: 30px;
  height: 1097px;
  top: 70px;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  right: 120px;
  -webkit-animation: straw 2s ease-in-out infinite;
          animation: straw 2s ease-in-out infinite;
}
body section.content {
  position: absolute;
  top: 150px;
  left: 20px;
  right: 220px;
  color: #fff;
}
body section.content h1, body section.content h2, body section.content h3, body section.content h4, body section.content h5, body section.content h6, body section.content p {
  margin: 0;
  font-weight: 400;
}
body section.content h1 {
  font-size: 32px;
}

@-webkit-keyframes bg {
  0%, 100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes bg {
  0%, 100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes straw {
  0%, 100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
            transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translateY(0px) rotate(6deg);
            transform: translateY(0px) rotate(6deg);
  }
}
@keyframes straw {
  0%, 100% {
    -webkit-transform: translateY(-2px) rotate(6deg);
            transform: translateY(-2px) rotate(6deg);
  }
  50% {
    -webkit-transform: translateY(0px) rotate(6deg);
            transform: translateY(0px) rotate(6deg);
  }
}
JS
//This was made last summer and was never used, love it and I'm aware how distracting the animation is - I lost it but there was a design with a fixed flat header for non-splash (literally) pages.
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:27

Related Codes

Pen ID
Pen ID
Pen ID