We Come In ☮
How do I make an we come in ☮?
Fun with CSS animations and box shadows.. What is a we come in ☮? How do you make a we come in ☮? This script and codes were developed by John Urbank on 08 July 2022, Friday.
We Come In ☮ Previews
We Come In ☮ - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>We Come In ☮ </title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Geo);
html { background: #6faa93; /* Short-hand animation syntax. Below is an example of the full syntax. */ animation: bgChange 30s linear infinite; }
body { font-family: Helvetica, Arial, sans-serif; text-align: center; margin: 2% auto 0; position: relative; height: auto; width: 800px; overflow: hidden;
}
h1 { font-family: 'Geo', sans-serif; font-size: 30px; color: #ecded0; padding: 8px 12px; background: #1F1C1B; display: inline-block; border-radius: 5px; position: relative; z-index: 100;
}
a { color: #fff; text-decoration: none; line-height: 20px;
}
.info { position: fixed; bottom: 20px; left: 30px; z-index: 1000; font-size: 12px; text-align: left;
}
/* INVADERS
-------------------------------------------*/
.invader { width: 16px; height: 16px; position: absolute; left: 113px; z-index: 100;
}
.invader.one{ left: 55px; animation: invaderAnim 3s ease-in-out infinite, invaderAnimStepOne 2s steps(1, end) infinite; }
.invader.two { left: 322px; animation: invaderAnim 3s ease-in-out .2s infinite, invaderAnimStepTwo 2s steps(1, end) .2s infinite; }
.invader.three { left: 531px; animation: invaderAnim 3s ease-in-out .4s infinite, invaderAnimStepThree 2s steps(1, end) .4s infinite; }
/* SHADOWS
-------------------------------------------*/
.shadow { position: absolute; width: 198px; height: 50px; border-radius: 50%; box-shadow: 200px 33px 15px #3b5a4e; animation: dropShadow 3s ease-in-out infinite;
}
.shadow.one { left: -138px;
}
.shadow.two { left: 98px; animation-delay: .2s;
}
.shadow.three { left: 324px; animation-delay: .3s;
}
/*-----------------------------------------------------------------
/// ANIMATION /////////////////////////////////////////////////////
-----------------------------------------------------------------*/
/* BACKGROUND ANIMATE
-------------------------------------------*/
@keyframes bgChange { 0% { background: #6faa93; } 25% { background: #9292dc; } 50% { background: #eda8ee; } 75% { background: #ec6e86; } 100% { background: #6faa93; }
}
/* SHADOW ANIMATE
-------------------------------------------*/
@keyframes dropShadow { 0% { top: 290px; opacity: .1; width: 200px; box-shadow: 200px 33px 30px #3b5a4e; } 50% { top: 310px; opacity: 0; width: 180px; box-shadow: 200px 33px 15px #3b5a4e; } 100% { top:290px; opacity: .1; width: 200px; box-shadow: 200px 33px 30px #3b5a4e; }
}
/* INVADER VERTICLE ANIMATE
-------------------------------------------*/
@keyframes invaderAnim { 0% { top: 150px; } 50% { top:90px; } 100% { top:150px; }
}
/* INVADER ANIMATE STEP
-------------------------------------------*/
@keyframes invaderAnimStepOne { from, to { box-shadow: 48px 33px #7c532c, 64px 49px #7c532c, 128px 49px #7c532c, 144px 33px #7c532c, 64px 65px #e062d3, 48px 65px #e062d3, 48px 81px #ecded0, 32px 81px #7c532c, 16px 97px #7c532c, 16px 113px #7c532c, 16px 129px #7c532c, 32px 97px #7c532c, 48px 97px #ecded0, 48px 113px #ecded0, 48px 129px #ecded0, 64px 98px #ecded0, 64px 113px #ecded0, 80px 113px #ecded0, 80px 97px #ecded0, 80px 81px #ecded0, 80px 65px #e062d3, 96px 65px #e062d3, 112px 65px #e062d3, 128px 65px #e062d3, 144px 65px #e062d3, 160px 81px #7c532c, 144px 81px #ecded0, 112px 81px #ecded0, 96px 81px #ecded0, 96px 97px #ecded0, 112px 97px #ecded0, 128px 97px #ecded0, 144px 97px #ecded0, 160px 97px #7c532c, 176px 97px #7c532c, 176px 113px #7c532c, 176px 129px #7c532c, 96px 113px #ecded0, 112px 113px #ecded0, 128px 113px #ecded0, 144px 113px #ecded0, 144px 129px #ecded0, 128px 145px #ecded0, 112px 145px #ecded0, 80px 145px #ecded0, 64px 145px #ecded0; } 50% { box-shadow: 48px 33px #7C532C, 64px 49px #7C532C, 128px 49px #7C532C, 144px 33px #7C532C, 64px 65px #E062D3, 48px 65px #E062D3, 48px 81px #ECDED0, 32px 81px #7C532C, 16px 65px #7C532C, 16px 81px #7C532C, 16px 49px #7C532C, 32px 97px #7C532C, 16px 97px #7C532C, 48px 97px #ECDED0, 48px 113px #ECDED0, 32px 113px #7C532C, 64px 98px #ECDED0, 64px 113px #ECDED0, 80px 113px #ECDED0, 80px 97px #ECDED0, 80px 81px #ECDED0, 80px 65px #E062D3, 96px 65px #E062D3, 112px 65px #E062D3, 128px 65px #E062D3, 144px 65px #E062D3, 160px 81px #7C532C, 144px 81px #ECDED0, 112px 81px #ECDED0, 96px 81px #ECDED0, 96px 97px #ECDED0, 112px 97px #ECDED0, 128px 97px #ECDED0, 144px 97px #ECDED0, 160px 97px #7C532C, 176px 49px #7C532C, 176px 65px #7C532C, 176px 81px #7C532C, 96px 113px #ECDED0, 112px 113px #ECDED0, 128px 113px #ECDED0, 144px 113px #ECDED0, 144px 129px #ECDED0, 160px 113px #7C532C, 176px 97px #7C532C, 160px 145px #ECDED0, 32px 145px #ECDED0, 48px 129px #ECDED0; }
}
@keyframes invaderAnimStepTwo { from, to { box-shadow: 48px 33px #1f1c1b, 64px 33px #1f1c1b, 80px 33px #1f1c1b, 96px 33px #1f1c1b, 96px 49px #1f1c1b, 112px 49px #1f1c1b, 128px 49px #1f1c1b, 80px 49px #1f1c1b, 64px 49px #1f1c1b, 48px 49px #1f1c1b, 32px 49px #1f1c1b, 16px 49px #1f1c1b, 0px 49px #1f1c1b, 0px 65px #1f1c1b, -16px 65px #1f1c1b, -16px 81px #1f1c1b, -16px 97px #1f1c1b, 16px 65px #1f1c1b, 32px 65px #1f1c1b, 48px 65px #1f1c1b, 64px 65px #1f1c1b, 80px 65px #1f1c1b, 96px 65px #1f1c1b, 112px 65px #1f1c1b, 128px 65px #1f1c1b, 144px 65px #1f1c1b, 144px 81px #1f1c1b, 128px 81px #1f1c1b, 0px 81px #1f1c1b, 16px 81px #1f1c1b, 64px 81px #DFD4C3, 80px 81px #DFD4C3, 144px 97px #1f1c1b, 160px 81px #1f1c1b, 160px 65px #1f1c1b, 144px 49px #1f1c1b, 160px 97px #1f1c1b, 128px 97px #1f1c1b, 112px 97px #DFD4C3, 96px 97px #DFD4C3, 80px 97px #DFD4C3, 64px 97px #DFD4C3, 48px 97px #DFD4C3, 32px 97px #DFD4C3, 16px 97px #1f1c1b, 0px 97px #1f1c1b, 32px 113px #DFD4C3, 48px 113px #DFD4C3, 96px 113px #DFD4C3, 112px 113px #DFD4C3, 128px 129px #DFD4C3, 112px 129px #DFD4C3, 80px 129px #DFD4C3, 64px 129px #DFD4C3, 32px 129px #DFD4C3, 16px 129px #DFD4C3, 0px 145px #DFD4C3, -16px 145px #DFD4C3, 144px 145px #DFD4C3, 160px 145px #DFD4C3; } 50% { box-shadow: 48px 33px #1F1C1B, 64px 33px #1F1C1B, 80px 33px #1F1C1B, 96px 33px #1F1C1B, 96px 49px #1F1C1B, 112px 49px #1F1C1B, 128px 49px #1F1C1B, 80px 49px #1F1C1B, 64px 49px #1F1C1B, 48px 49px #1F1C1B, 32px 49px #1F1C1B, 16px 49px #1F1C1B, 0px 49px #1F1C1B, 0px 65px #1F1C1B, -16px 65px #1F1C1B, -16px 81px #1F1C1B, -16px 97px #1F1C1B, 16px 65px #1F1C1B, 32px 65px #1F1C1B, 48px 65px #1F1C1B, 64px 65px #1F1C1B, 80px 65px #1F1C1B, 96px 65px #1F1C1B, 112px 65px #1F1C1B, 128px 65px #1F1C1B, 144px 65px #1F1C1B, 144px 81px #1F1C1B, 128px 81px #1F1C1B, 0px 81px #1F1C1B, 16px 81px #1F1C1B, 64px 81px #DFD4C3, 80px 81px #DFD4C3, 144px 97px #1F1C1B, 160px 81px #1F1C1B, 160px 65px #1F1C1B, 144px 49px #1F1C1B, 160px 97px #1F1C1B, 128px 97px #1F1C1B, 112px 97px #DFD4C3, 96px 97px #DFD4C3, 80px 97px #DFD4C3, 64px 97px #DFD4C3, 48px 97px #DFD4C3, 32px 97px #DFD4C3, 16px 97px #1F1C1B, 0px 97px #1F1C1B, 32px 113px #DFD4C3, 48px 113px #DFD4C3, 96px 113px #DFD4C3, 112px 113px #DFD4C3, 128px 129px #DFD4C3, 112px 129px #DFD4C3, 80px 129px #DFD4C3, 64px 129px #DFD4C3, 32px 129px #DFD4C3, 16px 129px #DFD4C3, 48px 145px #DFD4C3, 32px 145px #DFD4C3, 96px 145px #DFD4C3, 112px 145px #DFD4C3; }
}
@keyframes invaderAnimStepThree { from, to { box-shadow: 77px 21px #D9EB72, 93px 21px #D9EB72, 61px 37px #D9EB72, 77px 37px #D9EB72, 93px 37px #D9EB72, 109px 37px #D9EB72, 45px 53px #83694D, 61px 53px #83694D, 77px 53px #83694D, 93px 53px #83694D, 109px 53px #83694D, 125px 53px #83694D, 29px 69px #D9EB72, 45px 69px #ECDED0, 61px 69px #E062D3, 77px 69px #ECDED0, 93px 69px #ECDED0, 109px 69px #E062D3, 125px 69px #ECDED0, 141px 69px #D9EB72, 141px 85px #D9EB72, 125px 85px #ECDED0, 109px 85px #ECDED0, 93px 85px #ECDED0, 77px 85px #ECDED0, 61px 85px #ECDED0, 45px 85px #ECDED0, 29px 85px #D9EB72, 61px 101px #ECDED0, 45px 117px #ECDED0, 77px 117px #ECDED0, 93px 117px #ECDED0, 109px 101px #ECDED0, 125px 117px #ECDED0, 141px 133px #ECDED0, 109px 133px #ECDED0, 61px 133px #ECDED0, 29px 133px #ECDED0; } 50% { box-shadow: 77px 21px #D9EB72, 93px 21px #D9EB72, 61px 37px #D9EB72, 77px 37px #D9EB72, 93px 37px #D9EB72, 109px 37px #D9EB72, 45px 53px #83694D, 61px 53px #83694D, 77px 53px #83694D, 93px 53px #83694D, 109px 53px #83694D, 125px 53px #83694D, 29px 69px #D9EB72, 45px 69px #ECDED0, 61px 69px #E062D3, 77px 69px #ECDED0, 93px 69px #ECDED0, 109px 69px #E062D3, 125px 69px #ECDED0, 141px 69px #D9EB72, 141px 85px #D9EB72, 125px 85px #ECDED0, 109px 85px #ECDED0, 93px 85px #ECDED0, 77px 85px #ECDED0, 61px 85px #ECDED0, 45px 85px #ECDED0, 29px 85px #D9EB72, 45px 101px #ECDED0, 77px 101px #ECDED0, 93px 101px #ECDED0, 125px 101px #ECDED0, 141px 117px #ECDED0, 125px 133px #ECDED0, 45px 133px #ECDED0, 29px 117px #ECDED0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <h1>WE COME IN ☮</h1> <div class="invader one"></div> <div class="shadow one"></div> <div class="invader two"></div> <div class="shadow two"></div> <div class="invader three"></div> <div class="shadow three"></div>
</body>
</body>
</html>
We Come In ☮ - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Geo);
html { background: #6faa93; /* Short-hand animation syntax. Below is an example of the full syntax. */ animation: bgChange 30s linear infinite; }
body { font-family: Helvetica, Arial, sans-serif; text-align: center; margin: 2% auto 0; position: relative; height: auto; width: 800px; overflow: hidden;
}
h1 { font-family: 'Geo', sans-serif; font-size: 30px; color: #ecded0; padding: 8px 12px; background: #1F1C1B; display: inline-block; border-radius: 5px; position: relative; z-index: 100;
}
a { color: #fff; text-decoration: none; line-height: 20px;
}
.info { position: fixed; bottom: 20px; left: 30px; z-index: 1000; font-size: 12px; text-align: left;
}
/* INVADERS
-------------------------------------------*/
.invader { width: 16px; height: 16px; position: absolute; left: 113px; z-index: 100;
}
.invader.one{ left: 55px; animation: invaderAnim 3s ease-in-out infinite, invaderAnimStepOne 2s steps(1, end) infinite; }
.invader.two { left: 322px; animation: invaderAnim 3s ease-in-out .2s infinite, invaderAnimStepTwo 2s steps(1, end) .2s infinite; }
.invader.three { left: 531px; animation: invaderAnim 3s ease-in-out .4s infinite, invaderAnimStepThree 2s steps(1, end) .4s infinite; }
/* SHADOWS
-------------------------------------------*/
.shadow { position: absolute; width: 198px; height: 50px; border-radius: 50%; box-shadow: 200px 33px 15px #3b5a4e; animation: dropShadow 3s ease-in-out infinite;
}
.shadow.one { left: -138px;
}
.shadow.two { left: 98px; animation-delay: .2s;
}
.shadow.three { left: 324px; animation-delay: .3s;
}
/*-----------------------------------------------------------------
/// ANIMATION /////////////////////////////////////////////////////
-----------------------------------------------------------------*/
/* BACKGROUND ANIMATE
-------------------------------------------*/
@keyframes bgChange { 0% { background: #6faa93; } 25% { background: #9292dc; } 50% { background: #eda8ee; } 75% { background: #ec6e86; } 100% { background: #6faa93; }
}
/* SHADOW ANIMATE
-------------------------------------------*/
@keyframes dropShadow { 0% { top: 290px; opacity: .1; width: 200px; box-shadow: 200px 33px 30px #3b5a4e; } 50% { top: 310px; opacity: 0; width: 180px; box-shadow: 200px 33px 15px #3b5a4e; } 100% { top:290px; opacity: .1; width: 200px; box-shadow: 200px 33px 30px #3b5a4e; }
}
/* INVADER VERTICLE ANIMATE
-------------------------------------------*/
@keyframes invaderAnim { 0% { top: 150px; } 50% { top:90px; } 100% { top:150px; }
}
/* INVADER ANIMATE STEP
-------------------------------------------*/
@keyframes invaderAnimStepOne { from, to { box-shadow: 48px 33px #7c532c, 64px 49px #7c532c, 128px 49px #7c532c, 144px 33px #7c532c, 64px 65px #e062d3, 48px 65px #e062d3, 48px 81px #ecded0, 32px 81px #7c532c, 16px 97px #7c532c, 16px 113px #7c532c, 16px 129px #7c532c, 32px 97px #7c532c, 48px 97px #ecded0, 48px 113px #ecded0, 48px 129px #ecded0, 64px 98px #ecded0, 64px 113px #ecded0, 80px 113px #ecded0, 80px 97px #ecded0, 80px 81px #ecded0, 80px 65px #e062d3, 96px 65px #e062d3, 112px 65px #e062d3, 128px 65px #e062d3, 144px 65px #e062d3, 160px 81px #7c532c, 144px 81px #ecded0, 112px 81px #ecded0, 96px 81px #ecded0, 96px 97px #ecded0, 112px 97px #ecded0, 128px 97px #ecded0, 144px 97px #ecded0, 160px 97px #7c532c, 176px 97px #7c532c, 176px 113px #7c532c, 176px 129px #7c532c, 96px 113px #ecded0, 112px 113px #ecded0, 128px 113px #ecded0, 144px 113px #ecded0, 144px 129px #ecded0, 128px 145px #ecded0, 112px 145px #ecded0, 80px 145px #ecded0, 64px 145px #ecded0; } 50% { box-shadow: 48px 33px #7C532C, 64px 49px #7C532C, 128px 49px #7C532C, 144px 33px #7C532C, 64px 65px #E062D3, 48px 65px #E062D3, 48px 81px #ECDED0, 32px 81px #7C532C, 16px 65px #7C532C, 16px 81px #7C532C, 16px 49px #7C532C, 32px 97px #7C532C, 16px 97px #7C532C, 48px 97px #ECDED0, 48px 113px #ECDED0, 32px 113px #7C532C, 64px 98px #ECDED0, 64px 113px #ECDED0, 80px 113px #ECDED0, 80px 97px #ECDED0, 80px 81px #ECDED0, 80px 65px #E062D3, 96px 65px #E062D3, 112px 65px #E062D3, 128px 65px #E062D3, 144px 65px #E062D3, 160px 81px #7C532C, 144px 81px #ECDED0, 112px 81px #ECDED0, 96px 81px #ECDED0, 96px 97px #ECDED0, 112px 97px #ECDED0, 128px 97px #ECDED0, 144px 97px #ECDED0, 160px 97px #7C532C, 176px 49px #7C532C, 176px 65px #7C532C, 176px 81px #7C532C, 96px 113px #ECDED0, 112px 113px #ECDED0, 128px 113px #ECDED0, 144px 113px #ECDED0, 144px 129px #ECDED0, 160px 113px #7C532C, 176px 97px #7C532C, 160px 145px #ECDED0, 32px 145px #ECDED0, 48px 129px #ECDED0; }
}
@keyframes invaderAnimStepTwo { from, to { box-shadow: 48px 33px #1f1c1b, 64px 33px #1f1c1b, 80px 33px #1f1c1b, 96px 33px #1f1c1b, 96px 49px #1f1c1b, 112px 49px #1f1c1b, 128px 49px #1f1c1b, 80px 49px #1f1c1b, 64px 49px #1f1c1b, 48px 49px #1f1c1b, 32px 49px #1f1c1b, 16px 49px #1f1c1b, 0px 49px #1f1c1b, 0px 65px #1f1c1b, -16px 65px #1f1c1b, -16px 81px #1f1c1b, -16px 97px #1f1c1b, 16px 65px #1f1c1b, 32px 65px #1f1c1b, 48px 65px #1f1c1b, 64px 65px #1f1c1b, 80px 65px #1f1c1b, 96px 65px #1f1c1b, 112px 65px #1f1c1b, 128px 65px #1f1c1b, 144px 65px #1f1c1b, 144px 81px #1f1c1b, 128px 81px #1f1c1b, 0px 81px #1f1c1b, 16px 81px #1f1c1b, 64px 81px #DFD4C3, 80px 81px #DFD4C3, 144px 97px #1f1c1b, 160px 81px #1f1c1b, 160px 65px #1f1c1b, 144px 49px #1f1c1b, 160px 97px #1f1c1b, 128px 97px #1f1c1b, 112px 97px #DFD4C3, 96px 97px #DFD4C3, 80px 97px #DFD4C3, 64px 97px #DFD4C3, 48px 97px #DFD4C3, 32px 97px #DFD4C3, 16px 97px #1f1c1b, 0px 97px #1f1c1b, 32px 113px #DFD4C3, 48px 113px #DFD4C3, 96px 113px #DFD4C3, 112px 113px #DFD4C3, 128px 129px #DFD4C3, 112px 129px #DFD4C3, 80px 129px #DFD4C3, 64px 129px #DFD4C3, 32px 129px #DFD4C3, 16px 129px #DFD4C3, 0px 145px #DFD4C3, -16px 145px #DFD4C3, 144px 145px #DFD4C3, 160px 145px #DFD4C3; } 50% { box-shadow: 48px 33px #1F1C1B, 64px 33px #1F1C1B, 80px 33px #1F1C1B, 96px 33px #1F1C1B, 96px 49px #1F1C1B, 112px 49px #1F1C1B, 128px 49px #1F1C1B, 80px 49px #1F1C1B, 64px 49px #1F1C1B, 48px 49px #1F1C1B, 32px 49px #1F1C1B, 16px 49px #1F1C1B, 0px 49px #1F1C1B, 0px 65px #1F1C1B, -16px 65px #1F1C1B, -16px 81px #1F1C1B, -16px 97px #1F1C1B, 16px 65px #1F1C1B, 32px 65px #1F1C1B, 48px 65px #1F1C1B, 64px 65px #1F1C1B, 80px 65px #1F1C1B, 96px 65px #1F1C1B, 112px 65px #1F1C1B, 128px 65px #1F1C1B, 144px 65px #1F1C1B, 144px 81px #1F1C1B, 128px 81px #1F1C1B, 0px 81px #1F1C1B, 16px 81px #1F1C1B, 64px 81px #DFD4C3, 80px 81px #DFD4C3, 144px 97px #1F1C1B, 160px 81px #1F1C1B, 160px 65px #1F1C1B, 144px 49px #1F1C1B, 160px 97px #1F1C1B, 128px 97px #1F1C1B, 112px 97px #DFD4C3, 96px 97px #DFD4C3, 80px 97px #DFD4C3, 64px 97px #DFD4C3, 48px 97px #DFD4C3, 32px 97px #DFD4C3, 16px 97px #1F1C1B, 0px 97px #1F1C1B, 32px 113px #DFD4C3, 48px 113px #DFD4C3, 96px 113px #DFD4C3, 112px 113px #DFD4C3, 128px 129px #DFD4C3, 112px 129px #DFD4C3, 80px 129px #DFD4C3, 64px 129px #DFD4C3, 32px 129px #DFD4C3, 16px 129px #DFD4C3, 48px 145px #DFD4C3, 32px 145px #DFD4C3, 96px 145px #DFD4C3, 112px 145px #DFD4C3; }
}
@keyframes invaderAnimStepThree { from, to { box-shadow: 77px 21px #D9EB72, 93px 21px #D9EB72, 61px 37px #D9EB72, 77px 37px #D9EB72, 93px 37px #D9EB72, 109px 37px #D9EB72, 45px 53px #83694D, 61px 53px #83694D, 77px 53px #83694D, 93px 53px #83694D, 109px 53px #83694D, 125px 53px #83694D, 29px 69px #D9EB72, 45px 69px #ECDED0, 61px 69px #E062D3, 77px 69px #ECDED0, 93px 69px #ECDED0, 109px 69px #E062D3, 125px 69px #ECDED0, 141px 69px #D9EB72, 141px 85px #D9EB72, 125px 85px #ECDED0, 109px 85px #ECDED0, 93px 85px #ECDED0, 77px 85px #ECDED0, 61px 85px #ECDED0, 45px 85px #ECDED0, 29px 85px #D9EB72, 61px 101px #ECDED0, 45px 117px #ECDED0, 77px 117px #ECDED0, 93px 117px #ECDED0, 109px 101px #ECDED0, 125px 117px #ECDED0, 141px 133px #ECDED0, 109px 133px #ECDED0, 61px 133px #ECDED0, 29px 133px #ECDED0; } 50% { box-shadow: 77px 21px #D9EB72, 93px 21px #D9EB72, 61px 37px #D9EB72, 77px 37px #D9EB72, 93px 37px #D9EB72, 109px 37px #D9EB72, 45px 53px #83694D, 61px 53px #83694D, 77px 53px #83694D, 93px 53px #83694D, 109px 53px #83694D, 125px 53px #83694D, 29px 69px #D9EB72, 45px 69px #ECDED0, 61px 69px #E062D3, 77px 69px #ECDED0, 93px 69px #ECDED0, 109px 69px #E062D3, 125px 69px #ECDED0, 141px 69px #D9EB72, 141px 85px #D9EB72, 125px 85px #ECDED0, 109px 85px #ECDED0, 93px 85px #ECDED0, 77px 85px #ECDED0, 61px 85px #ECDED0, 45px 85px #ECDED0, 29px 85px #D9EB72, 45px 101px #ECDED0, 77px 101px #ECDED0, 93px 101px #ECDED0, 125px 101px #ECDED0, 141px 117px #ECDED0, 125px 133px #ECDED0, 45px 133px #ECDED0, 29px 117px #ECDED0; }
}
| Developer | John Urbank |
| Username | jurbank |
| Uploaded | July 08, 2022 |
| Rating | 3.5 |
| Size | 5,242 Kb |
| Views | 60,720 |
Do you need developer help for We Come In ☮?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
John Urbank (jurbank) Script Codes
| Name | Size |
| Gutterless Feature Grid | 3,013 Kb |
| Logo Slider | 3,508 Kb |
| Tape Cassette Icon - CSS Only | 6,789 Kb |
| Traveling through Tron - Best viewed in Webkit | 3,195 Kb |
| Simple, CSS only, responsive menu | 2,615 Kb |
| Basic motion with JavaScript | 2,202 Kb |
| Time is Money | 4,736 Kb |
| Hamburger subtract | 2,767 Kb |
| CubeTronic | 3,716 Kb |
| Lego style loading text | 5,209 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| Svg sky | Omodev | 7,070 Kb |
| Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
| Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
| Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| BabyStore | Pablo-Ai | 3,807 Kb |
| Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
| A Pen by Jay | Jaycode | 3,784 Kb |
| Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!