Valentines Overlays ❤️

 

Copy and paste one, or both of the code snippets below, into the Header Code Injection area of the page or Index on which you'd like them to display.

 
cornervalentines.gif

Happy Valentines Corner Greeting

Based on code written by Valentin Radulescu

<div class="heart heart-main"><h3>
  Happy Valentines!
  </h3></div>
<style>
.heart {
  z-index: 99999;
  position: absolute;
  width: 100px;
  height: 90px;
  bottom: 0px;
  right: 20px;
}
  .heart h3 {
    margin: 0 !important;
    text-align: center;
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
    z-index: 9999999 !important;
    line-height:130%;
  }
.heart:before, .heart:after {
  content: '';
  position: absolute;
  top: 0;
  width: 50px;
  height: 80px;
  background: #fc2e5a;
  border-radius: 50px 50px 0 0;
}
.heart:before {
  left: 50px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.heart-main {
  -webkit-animation: pounding 1.5s linear infinite alternate;
          animation: pounding 1.5s linear infinite alternate;
}
@-webkit-keyframes pounding {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

@keyframes pounding {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

</style>
 

loadingvalentines.gif

Happy Valentines Loading Screen

Based on code written by Valeriya

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".valentines").delay(7000).fadeOut("slow");
})
</script>
<div class="valentines">
<div class="valentines-wrapper">
  <div class="heart-beat">
    <svg width="300" heigth="300" viewbox="0 0 100 100">
      <polygon points="25.167,37.688 25.167,25 74.882,25.03 74.882,37.65 50,62.5 "/>

       <polygon class="to-show fifth fold left" points="18.861,31.361 25.167,25 25.167,37.688 "/>

      <polygon class="to-show fifth fold right"  points="81.187,31.356 74.882,25.03 74.882,37.65 "/>

      <polygon class="fold first" points="25.167,25 50,0.168 74.833,25 "/>

      <polygon class="to-show forth fold" points="56.121,19 62.447,12.663 68.809,18.969 "/>

      <polygon class="to-show forth fold" points="31.186,19 37.512,12.694 43.874,19 "/>

      <polygon class="fold second middle" points="50,62.5 68.659,81.174 50,100 31.21,81.043 " />
      <g transform="rotate(45, 75, 47)">
        <g class="third fold right">
          <polygon class="middle" points="85.796,31.566 77.215,31.562 68.305,40.472 68.282,75.638 94.672,49.249 94.699,40.489 "/>
           <polygon class="to-hide" points="85.796,31.566 94.68,31.562 94.699,40.489 "/>
           <polygon class="to-hide" points="68.327,31.562 77.215,31.562 68.305,40.472"/>
        </g>
      </g>
      <g transform="rotate(-45, 25, 47)">
        <g class="third fold left">
          <polygon class="middle" points="14.268,31.563 22.746,31.563 31.702,40.533 31.717,75.637 5.314,49.234 5.319,40.511 "/>
          <polygon class="to-hide" points="5.32,31.583 14.247,31.583 5.319,40.511 "/>
          <polygon class="to-hide" points="22.746,31.563 31.718,31.601 31.71,40.526 "/>
        </g>
      </g>
      <polygon class="fold second left to-hide" points="12.661,62.5 50,62.5 31.21,81.043 "/>
      <polygon class="fold second right to-hide" points="50,62.5 87.293,62.501 68.659,81.174 "/>
    </svg>
  </div>
  <h3>Happy Valentines day from us all at SquareStudio</h3>
</div>
</div>
<style>
.valentines {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 99999;
  display: block;
  background-color: #fff;
}
.valentines-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 400px;
  max-width:100vw;
  height: 400px;
  max-height: 100vh;
  margin: auto;
}
.wrapper::before, .wrapper::after {
  position: absolute;
  top: 6rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 2rem;
  height: 2rem;
  -webkit-box-shadow: 0 0 5px #e7464c;
          box-shadow: 0 0 5px #e7464c;
  border-radius: 50%;
  content: "";
  -webkit-animation: heartBeatCircle 2s 5.25s infinite;
          animation: heartBeatCircle 2s 5.25s infinite;
  z-index: -999;
}
.wrapper::after {
  -webkit-animation: heartBeatCircle 2s 5.5s infinite;
          animation: heartBeatCircle 2s 5.5s infinite;
}
.heart-beat {
  -webkit-animation: heartBeat 2s 4s infinite;
          animation: heartBeat 2s 4s infinite;
}
h3 {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 0;
  display:block;
  color: #111;
  text-align: center;
  z-index: 999;
}
svg {
  display: block;
  margin: 0 auto;
  -webkit-animation: heartRotate 0.75s 1.5s ease-in forwards;
          animation: heartRotate 0.75s 1.5s ease-in forwards;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
polygon {
  fill: #e7464c;
  stroke: #faf7e8;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 1;
  -webkit-animation: strokeFadeIn 3.5s 2s forwards;
          animation: strokeFadeIn 3.5s 2s forwards;
}

.fold.first {
  -webkit-animation:
    foldVertical 0.5s 2s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldVertical 0.5s 2s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;

}
.fold.second {
  -webkit-animation:
    foldVertical 0.5s 2.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldVertical 0.5s 2.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

.fold.second.to-hide {
  opacity: 1;
  -webkit-animation:
    foldVertical 0.5s 2.5s linear forwards,
    fadeOut 0.1s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldVertical 0.5s 2.5s linear forwards,
    fadeOut 0.1s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
}

.fold.third {
  -webkit-animation:
    foldHirizontal 0.5s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldHirizontal 0.5s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.fold.third.right {
  -webkit-animation:
    foldHirizontal 0.5s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldHirizontal 0.5s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}
.third.fold.to-show {
  opacity: 0;
  -webkit-animation:
    fadeIn 0.1s 3s linear forwards,
    foldHirizontal 0.3s 3s linear forwards ;
          animation:
    fadeIn 0.1s 3s linear forwards,
    foldHirizontal 0.3s 3s linear forwards ;
}
.third.fold.to-show.right {
  -webkit-animation:
    fadeIn 0.1s 2.5s linear forwards,
    foldHirizontal 0.3s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    fadeIn 0.1s 2.5s linear forwards,
    foldHirizontal 0.3s 3s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
}
.forth.fold {
  opacity: 0;
  -webkit-animation:
    fadeIn 0.1s 3.5s linear forwards,
    foldVertical 0.5s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    fadeIn 0.1s 3.5s linear forwards,
    foldVertical 0.5s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.fifth.fold {
  -webkit-animation:
    foldHirizontal 0.5s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    foldHirizontal 0.5s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.fifth.fold.right {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}
.to-hide {
  opacity: 1;
  -webkit-animation:
    fadeOut 0.1s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
          animation:
    fadeOut 0.1s 3.5s linear forwards,
    strokeFadeIn 3.5s 2s forwards;
}

@-webkit-keyframes foldVertical {
  to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg)}
}

@keyframes foldVertical {
  to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg)}
}
@-webkit-keyframes foldHirizontal {
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg)}
}
@keyframes foldHirizontal {
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg)}
}
@-webkit-keyframes fadeOut {
  to { opacity: 0 }
}
@keyframes fadeOut {
  to { opacity: 0 }
}
@-webkit-keyframes fadeIn {
  to { opacity: 1 }
}
@keyframes fadeIn {
  to { opacity: 1 }
}
@-webkit-keyframes heartBeat {
  70% { -webkit-transform: scale(0.9); transform: scale(0.9)}
}
@keyframes heartBeat {
  70% { -webkit-transform: scale(0.9); transform: scale(0.9)}
}
@-webkit-keyframes heartRotate {
  75% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg)}
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg)}
}
@keyframes heartRotate {
  75% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg)}
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg)}
}
@-webkit-keyframes strokeFadeIn {
  0% { stroke: #faf7e8;}
  20%, 70% { stroke: #ed686d;}
  100% { stroke: #faf7e8;}
}
@keyframes strokeFadeIn {
  0% { stroke: #faf7e8;}
  20%, 70% { stroke: #ed686d;}
  100% { stroke: #faf7e8;}
}
@-webkit-keyframes heartBeatCircle {
  100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0;}
}
@keyframes heartBeatCircle {
  100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0;}
}
</style>
Blog-settings.jpg