Mosaic

Developer

Size

6,825 Kb

Views

10,120

Mosaic Previews
Mosaic HTML Codes
Mosaic CSS Codes
Mosaic JS Codes

How do I make an mosaic?

What is a mosaic? How do you make a mosaic? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Mosaic Previews

Mosaic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mosaic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<screen> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item> <item></item>
</screen>
<!--
| OxxO
| X oo X
| X >< X
| XXXX~<>
| (..)(..)
--> <script src="js/index.js"></script>
</body>
</html>

Mosaic - Script Codes CSS Codes

screen { counter-reset: item;
}
screen :nth-child(1)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(2)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(3)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(4)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(5)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(6)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(7)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(8)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(9)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(10)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(11)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(12)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(13)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(14)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(15)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(16)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(17)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(18)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(19)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(20)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(21)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(22)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(23)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(24)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(25)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(26)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(27)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(28)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(29)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(30)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(31)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(32)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(33)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(34)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(35)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(36)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(37)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(38)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(39)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(40)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(41)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(42)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(43)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(44)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(45)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(46)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(47)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(48)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(49)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(50)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(51)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(52)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(53)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(54)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(55)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(56)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(57)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(58)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(59)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(60)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(61)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(62)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(63)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(64)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(65)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(66)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(67)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(68)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(69)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(70)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(71)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(72)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(73)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(74)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(75)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(76)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(77)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(78)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(79)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(80)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(81)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(82)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(83)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(84)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(85)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(86)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(87)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(88)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(89)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(90)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(91)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(92)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(93)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(94)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(95)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(96)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(97)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(98)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(99)::after { counter-increment: item; content: counter(item);
}
screen :nth-child(100)::after { counter-increment: item; content: counter(item);
}
screen ::after { color: #333; font-size: 3vmin;
}
* { box-sizing: border-box;
}
body { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 100vh; margin: -10vh 0 0; background-color: #333; -webkit-perspective: 100vh; perspective: 100vh;
}
screen { position: relative; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 80vmin; width: 80vmin; margin: auto; -webkit-transform: rotateX(40deg); transform: rotateX(40deg); -webkit-transition: 2s; transition: 2s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;
}
screen:hover { top: 10vmin; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition-delay: 0s; transition-delay: 0s;
}
item { z-index: 1; width: 7.6vmin; height: 7.6vmin; background: Orange url("https://c2.staticflickr.com/2/1478/26055727592_04d8f1ca70_o.png"); background-size: 80vmin 80vmin; background-position: 0 0; margin: 0.2vmin; border-bottom: 0.2vmin solid #111; border-radius: 1.5vmin; -webkit-transition: z-index 4s ease-in-out 0s, -webkit-transform 4s ease-in-out 0s; transition: z-index 4s ease-in-out 0s, -webkit-transform 4s ease-in-out 0s; transition: transform 4s ease-in-out 0s, z-index 4s ease-in-out 0s; transition: transform 4s ease-in-out 0s, z-index 4s ease-in-out 0s, -webkit-transform 4s ease-in-out 0s;
}
screen :nth-child(1) { background-position: 0vmin 0vmin;
}
screen :nth-child(2) { background-position: -8vmin 0vmin;
}
screen :nth-child(3) { background-position: -16vmin 0vmin;
}
screen :nth-child(4) { background-position: -24vmin 0vmin;
}
screen :nth-child(5) { background-position: -32vmin 0vmin;
}
screen :nth-child(6) { background-position: -40vmin 0vmin;
}
screen :nth-child(7) { background-position: -48vmin 0vmin;
}
screen :nth-child(8) { background-position: -56vmin 0vmin;
}
screen :nth-child(9) { background-position: -64vmin 0vmin;
}
screen :nth-child(10) { background-position: -72vmin 0vmin;
}
screen :nth-child(11) { background-position: -80vmin -8vmin;
}
screen :nth-child(12) { background-position: -88vmin -8vmin;
}
screen :nth-child(13) { background-position: -96vmin -8vmin;
}
screen :nth-child(14) { background-position: -104vmin -8vmin;
}
screen :nth-child(15) { background-position: -112vmin -8vmin;
}
screen :nth-child(16) { background-position: -120vmin -8vmin;
}
screen :nth-child(17) { background-position: -128vmin -8vmin;
}
screen :nth-child(18) { background-position: -136vmin -8vmin;
}
screen :nth-child(19) { background-position: -144vmin -8vmin;
}
screen :nth-child(20) { background-position: -152vmin -8vmin;
}
screen :nth-child(21) { background-position: -160vmin -16vmin;
}
screen :nth-child(22) { background-position: -168vmin -16vmin;
}
screen :nth-child(23) { background-position: -176vmin -16vmin;
}
screen :nth-child(24) { background-position: -184vmin -16vmin;
}
screen :nth-child(25) { background-position: -192vmin -16vmin;
}
screen :nth-child(26) { background-position: -200vmin -16vmin;
}
screen :nth-child(27) { background-position: -208vmin -16vmin;
}
screen :nth-child(28) { background-position: -216vmin -16vmin;
}
screen :nth-child(29) { background-position: -224vmin -16vmin;
}
screen :nth-child(30) { background-position: -232vmin -16vmin;
}
screen :nth-child(31) { background-position: -240vmin -24vmin;
}
screen :nth-child(32) { background-position: -248vmin -24vmin;
}
screen :nth-child(33) { background-position: -256vmin -24vmin;
}
screen :nth-child(34) { background-position: -264vmin -24vmin;
}
screen :nth-child(35) { background-position: -272vmin -24vmin;
}
screen :nth-child(36) { background-position: -280vmin -24vmin;
}
screen :nth-child(37) { background-position: -288vmin -24vmin;
}
screen :nth-child(38) { background-position: -296vmin -24vmin;
}
screen :nth-child(39) { background-position: -304vmin -24vmin;
}
screen :nth-child(40) { background-position: -312vmin -24vmin;
}
screen :nth-child(41) { background-position: -320vmin -32vmin;
}
screen :nth-child(42) { background-position: -328vmin -32vmin;
}
screen :nth-child(43) { background-position: -336vmin -32vmin;
}
screen :nth-child(44) { background-position: -344vmin -32vmin;
}
screen :nth-child(45) { background-position: -352vmin -32vmin;
}
screen :nth-child(46) { background-position: -360vmin -32vmin;
}
screen :nth-child(47) { background-position: -368vmin -32vmin;
}
screen :nth-child(48) { background-position: -376vmin -32vmin;
}
screen :nth-child(49) { background-position: -384vmin -32vmin;
}
screen :nth-child(50) { background-position: -392vmin -32vmin;
}
screen :nth-child(51) { background-position: -400vmin -40vmin;
}
screen :nth-child(52) { background-position: -408vmin -40vmin;
}
screen :nth-child(53) { background-position: -416vmin -40vmin;
}
screen :nth-child(54) { background-position: -424vmin -40vmin;
}
screen :nth-child(55) { background-position: -432vmin -40vmin;
}
screen :nth-child(56) { background-position: -440vmin -40vmin;
}
screen :nth-child(57) { background-position: -448vmin -40vmin;
}
screen :nth-child(58) { background-position: -456vmin -40vmin;
}
screen :nth-child(59) { background-position: -464vmin -40vmin;
}
screen :nth-child(60) { background-position: -472vmin -40vmin;
}
screen :nth-child(61) { background-position: -480vmin -48vmin;
}
screen :nth-child(62) { background-position: -488vmin -48vmin;
}
screen :nth-child(63) { background-position: -496vmin -48vmin;
}
screen :nth-child(64) { background-position: -504vmin -48vmin;
}
screen :nth-child(65) { background-position: -512vmin -48vmin;
}
screen :nth-child(66) { background-position: -520vmin -48vmin;
}
screen :nth-child(67) { background-position: -528vmin -48vmin;
}
screen :nth-child(68) { background-position: -536vmin -48vmin;
}
screen :nth-child(69) { background-position: -544vmin -48vmin;
}
screen :nth-child(70) { background-position: -552vmin -48vmin;
}
screen :nth-child(71) { background-position: -560vmin -56vmin;
}
screen :nth-child(72) { background-position: -568vmin -56vmin;
}
screen :nth-child(73) { background-position: -576vmin -56vmin;
}
screen :nth-child(74) { background-position: -584vmin -56vmin;
}
screen :nth-child(75) { background-position: -592vmin -56vmin;
}
screen :nth-child(76) { background-position: -600vmin -56vmin;
}
screen :nth-child(77) { background-position: -608vmin -56vmin;
}
screen :nth-child(78) { background-position: -616vmin -56vmin;
}
screen :nth-child(79) { background-position: -624vmin -56vmin;
}
screen :nth-child(80) { background-position: -632vmin -56vmin;
}
screen :nth-child(81) { background-position: -640vmin -64vmin;
}
screen :nth-child(82) { background-position: -648vmin -64vmin;
}
screen :nth-child(83) { background-position: -656vmin -64vmin;
}
screen :nth-child(84) { background-position: -664vmin -64vmin;
}
screen :nth-child(85) { background-position: -672vmin -64vmin;
}
screen :nth-child(86) { background-position: -680vmin -64vmin;
}
screen :nth-child(87) { background-position: -688vmin -64vmin;
}
screen :nth-child(88) { background-position: -696vmin -64vmin;
}
screen :nth-child(89) { background-position: -704vmin -64vmin;
}
screen :nth-child(90) { background-position: -712vmin -64vmin;
}
screen :nth-child(91) { background-position: -720vmin -72vmin;
}
screen :nth-child(92) { background-position: -728vmin -72vmin;
}
screen :nth-child(93) { background-position: -736vmin -72vmin;
}
screen :nth-child(94) { background-position: -744vmin -72vmin;
}
screen :nth-child(95) { background-position: -752vmin -72vmin;
}
screen :nth-child(96) { background-position: -760vmin -72vmin;
}
screen :nth-child(97) { background-position: -768vmin -72vmin;
}
screen :nth-child(98) { background-position: -776vmin -72vmin;
}
screen :nth-child(99) { background-position: -784vmin -72vmin;
}
screen :nth-child(100) { background-position: -792vmin -72vmin;
}
screen :hover { -webkit-transition: -webkit-transform 0.1s ease-in-out 0s; transition: -webkit-transform 0.1s ease-in-out 0s; transition: transform 0.1s ease-in-out 0s; transition: transform 0.1s ease-in-out 0s, -webkit-transform 0.1s ease-in-out 0s;
}
screen :nth-child(1):hover { -webkit-transform: translate3d(-62vmin, -3vmin, 0) rotate3d(0, 2, 1, 541deg) scale(1.5); transform: translate3d(-62vmin, -3vmin, 0) rotate3d(0, 2, 1, 541deg) scale(1.5); z-index: 250;
}
screen :nth-child(2):hover { -webkit-transform: translate3d(47vmin, -13vmin, 0) rotate3d(0, 0, 0, 436deg) scale(1.7); transform: translate3d(47vmin, -13vmin, 0) rotate3d(0, 0, 0, 436deg) scale(1.7); z-index: 270;
}
screen :nth-child(3):hover { -webkit-transform: translate3d(5vmin, 89vmin, 0) rotate3d(0, 0, 2, -26deg) scale(0); transform: translate3d(5vmin, 89vmin, 0) rotate3d(0, 0, 2, -26deg) scale(0); z-index: 100;
}
screen :nth-child(4):hover { -webkit-transform: translate3d(-95vmin, 73vmin, 0) rotate3d(0, 0, 0, -651deg) scale(1); transform: translate3d(-95vmin, 73vmin, 0) rotate3d(0, 0, 0, -651deg) scale(1); z-index: 200;
}
screen :nth-child(5):hover { -webkit-transform: translate3d(-5vmin, -37vmin, 0) rotate3d(0, 1, 2, 202deg) scale(2.3); transform: translate3d(-5vmin, -37vmin, 0) rotate3d(0, 1, 2, 202deg) scale(2.3); z-index: 330;
}
screen :nth-child(6):hover { -webkit-transform: translate3d(37vmin, 60vmin, 0) rotate3d(1, 0, 2, 390deg) scale(1.8); transform: translate3d(37vmin, 60vmin, 0) rotate3d(1, 0, 2, 390deg) scale(1.8); z-index: 280;
}
screen :nth-child(7):hover { -webkit-transform: translate3d(29vmin, 62vmin, 0) rotate3d(1, 2, 0, 528deg) scale(1.3); transform: translate3d(29vmin, 62vmin, 0) rotate3d(1, 2, 0, 528deg) scale(1.3); z-index: 230;
}
screen :nth-child(8):hover { -webkit-transform: translate3d(75vmin, -52vmin, 0) rotate3d(1, 1, 1, 127deg) scale(1.8); transform: translate3d(75vmin, -52vmin, 0) rotate3d(1, 1, 1, 127deg) scale(1.8); z-index: 280;
}
screen :nth-child(9):hover { -webkit-transform: translate3d(75vmin, -83vmin, 0) rotate3d(2, 0, 2, 331deg) scale(2.2); transform: translate3d(75vmin, -83vmin, 0) rotate3d(2, 0, 2, 331deg) scale(2.2); z-index: 320;
}
screen :nth-child(10):hover { -webkit-transform: translate3d(60vmin, 82vmin, 0) rotate3d(1, 1, 1, 626deg) scale(1.4); transform: translate3d(60vmin, 82vmin, 0) rotate3d(1, 1, 1, 626deg) scale(1.4); z-index: 240;
}
screen :nth-child(11):hover { -webkit-transform: translate3d(32vmin, -35vmin, 0) rotate3d(0, 1, 2, 568deg) scale(0.4); transform: translate3d(32vmin, -35vmin, 0) rotate3d(0, 1, 2, 568deg) scale(0.4); z-index: 140;
}
screen :nth-child(12):hover { -webkit-transform: translate3d(-91vmin, 89vmin, 0) rotate3d(1, 0, 1, -682deg) scale(0.2); transform: translate3d(-91vmin, 89vmin, 0) rotate3d(1, 0, 1, -682deg) scale(0.2); z-index: 120;
}
screen :nth-child(13):hover { -webkit-transform: translate3d(45vmin, -84vmin, 0) rotate3d(1, 2, 1, -456deg) scale(0.4); transform: translate3d(45vmin, -84vmin, 0) rotate3d(1, 2, 1, -456deg) scale(0.4); z-index: 140;
}
screen :nth-child(14):hover { -webkit-transform: translate3d(10vmin, -19vmin, 0) rotate3d(0, 2, 2, -93deg) scale(2.7); transform: translate3d(10vmin, -19vmin, 0) rotate3d(0, 2, 2, -93deg) scale(2.7); z-index: 370;
}
screen :nth-child(15):hover { -webkit-transform: translate3d(-12vmin, 22vmin, 0) rotate3d(2, 2, 0, -299deg) scale(1.8); transform: translate3d(-12vmin, 22vmin, 0) rotate3d(2, 2, 0, -299deg) scale(1.8); z-index: 280;
}
screen :nth-child(16):hover { -webkit-transform: translate3d(60vmin, -8vmin, 0) rotate3d(2, 0, 2, 578deg) scale(1.9); transform: translate3d(60vmin, -8vmin, 0) rotate3d(2, 0, 2, 578deg) scale(1.9); z-index: 290;
}
screen :nth-child(17):hover { -webkit-transform: translate3d(-71vmin, -19vmin, 0) rotate3d(1, 0, 0, -32deg) scale(0.1); transform: translate3d(-71vmin, -19vmin, 0) rotate3d(1, 0, 0, -32deg) scale(0.1); z-index: 110;
}
screen :nth-child(18):hover { -webkit-transform: translate3d(-92vmin, 60vmin, 0) rotate3d(1, 0, 0, 337deg) scale(0.6); transform: translate3d(-92vmin, 60vmin, 0) rotate3d(1, 0, 0, 337deg) scale(0.6); z-index: 160;
}
screen :nth-child(19):hover { -webkit-transform: translate3d(56vmin, -32vmin, 0) rotate3d(0, 2, 1, -631deg) scale(1); transform: translate3d(56vmin, -32vmin, 0) rotate3d(0, 2, 1, -631deg) scale(1); z-index: 200;
}
screen :nth-child(20):hover { -webkit-transform: translate3d(-68vmin, -30vmin, 0) rotate3d(2, 2, 0, -86deg) scale(2.9); transform: translate3d(-68vmin, -30vmin, 0) rotate3d(2, 2, 0, -86deg) scale(2.9); z-index: 390;
}
screen :nth-child(21):hover { -webkit-transform: translate3d(66vmin, 15vmin, 0) rotate3d(0, 0, 2, 17deg) scale(2.3); transform: translate3d(66vmin, 15vmin, 0) rotate3d(0, 0, 2, 17deg) scale(2.3); z-index: 330;
}
screen :nth-child(22):hover { -webkit-transform: translate3d(40vmin, 23vmin, 0) rotate3d(0, 2, 1, -36deg) scale(1.8); transform: translate3d(40vmin, 23vmin, 0) rotate3d(0, 2, 1, -36deg) scale(1.8); z-index: 280;
}
screen :nth-child(23):hover { -webkit-transform: translate3d(-33vmin, 15vmin, 0) rotate3d(0, 1, 2, -626deg) scale(1.4); transform: translate3d(-33vmin, 15vmin, 0) rotate3d(0, 1, 2, -626deg) scale(1.4); z-index: 240;
}
screen :nth-child(24):hover { -webkit-transform: translate3d(-80vmin, 46vmin, 0) rotate3d(0, 2, 2, -275deg) scale(0.6); transform: translate3d(-80vmin, 46vmin, 0) rotate3d(0, 2, 2, -275deg) scale(0.6); z-index: 160;
}
screen :nth-child(25):hover { -webkit-transform: translate3d(23vmin, -12vmin, 0) rotate3d(2, 0, 0, 80deg) scale(2.5); transform: translate3d(23vmin, -12vmin, 0) rotate3d(2, 0, 0, 80deg) scale(2.5); z-index: 350;
}
screen :nth-child(26):hover { -webkit-transform: translate3d(-38vmin, -50vmin, 0) rotate3d(0, 1, 2, -335deg) scale(1.8); transform: translate3d(-38vmin, -50vmin, 0) rotate3d(0, 1, 2, -335deg) scale(1.8); z-index: 280;
}
screen :nth-child(27):hover { -webkit-transform: translate3d(-83vmin, -45vmin, 0) rotate3d(0, 0, 1, -293deg) scale(0.3); transform: translate3d(-83vmin, -45vmin, 0) rotate3d(0, 0, 1, -293deg) scale(0.3); z-index: 130;
}
screen :nth-child(28):hover { -webkit-transform: translate3d(-74vmin, -89vmin, 0) rotate3d(2, 1, 2, -495deg) scale(1.7); transform: translate3d(-74vmin, -89vmin, 0) rotate3d(2, 1, 2, -495deg) scale(1.7); z-index: 270;
}
screen :nth-child(29):hover { -webkit-transform: translate3d(20vmin, 48vmin, 0) rotate3d(1, 2, 0, 455deg) scale(2.4); transform: translate3d(20vmin, 48vmin, 0) rotate3d(1, 2, 0, 455deg) scale(2.4); z-index: 340;
}
screen :nth-child(30):hover { -webkit-transform: translate3d(25vmin, -78vmin, 0) rotate3d(1, 1, 0, 353deg) scale(2.8); transform: translate3d(25vmin, -78vmin, 0) rotate3d(1, 1, 0, 353deg) scale(2.8); z-index: 380;
}
screen :nth-child(31):hover { -webkit-transform: translate3d(-85vmin, -86vmin, 0) rotate3d(2, 1, 1, -349deg) scale(0.9); transform: translate3d(-85vmin, -86vmin, 0) rotate3d(2, 1, 1, -349deg) scale(0.9); z-index: 190;
}
screen :nth-child(32):hover { -webkit-transform: translate3d(-98vmin, -53vmin, 0) rotate3d(2, 1, 0, 378deg) scale(1.5); transform: translate3d(-98vmin, -53vmin, 0) rotate3d(2, 1, 0, 378deg) scale(1.5); z-index: 250;
}
screen :nth-child(33):hover { -webkit-transform: translate3d(42vmin, -27vmin, 0) rotate3d(2, 0, 0, -51deg) scale(2.2); transform: translate3d(42vmin, -27vmin, 0) rotate3d(2, 0, 0, -51deg) scale(2.2); z-index: 320;
}
screen :nth-child(34):hover { -webkit-transform: translate3d(75vmin, 67vmin, 0) rotate3d(1, 2, 0, -555deg) scale(0.6); transform: translate3d(75vmin, 67vmin, 0) rotate3d(1, 2, 0, -555deg) scale(0.6); z-index: 160;
}
screen :nth-child(35):hover { -webkit-transform: translate3d(37vmin, 74vmin, 0) rotate3d(1, 0, 1, 80deg) scale(2.1); transform: translate3d(37vmin, 74vmin, 0) rotate3d(1, 0, 1, 80deg) scale(2.1); z-index: 310;
}
screen :nth-child(36):hover { -webkit-transform: translate3d(-87vmin, 79vmin, 0) rotate3d(2, 2, 1, 488deg) scale(1.3); transform: translate3d(-87vmin, 79vmin, 0) rotate3d(2, 2, 1, 488deg) scale(1.3); z-index: 230;
}
screen :nth-child(37):hover { -webkit-transform: translate3d(-67vmin, 56vmin, 0) rotate3d(1, 1, 1, 578deg) scale(1.4); transform: translate3d(-67vmin, 56vmin, 0) rotate3d(1, 1, 1, 578deg) scale(1.4); z-index: 240;
}
screen :nth-child(38):hover { -webkit-transform: translate3d(3vmin, 13vmin, 0) rotate3d(0, 0, 0, 357deg) scale(0.3); transform: translate3d(3vmin, 13vmin, 0) rotate3d(0, 0, 0, 357deg) scale(0.3); z-index: 130;
}
screen :nth-child(39):hover { -webkit-transform: translate3d(-2vmin, -76vmin, 0) rotate3d(0, 0, 2, -332deg) scale(1.9); transform: translate3d(-2vmin, -76vmin, 0) rotate3d(0, 0, 2, -332deg) scale(1.9); z-index: 290;
}
screen :nth-child(40):hover { -webkit-transform: translate3d(37vmin, 50vmin, 0) rotate3d(0, 1, 1, -166deg) scale(1.5); transform: translate3d(37vmin, 50vmin, 0) rotate3d(0, 1, 1, -166deg) scale(1.5); z-index: 250;
}
screen :nth-child(41):hover { -webkit-transform: translate3d(90vmin, 63vmin, 0) rotate3d(0, 1, 0, -198deg) scale(0.6); transform: translate3d(90vmin, 63vmin, 0) rotate3d(0, 1, 0, -198deg) scale(0.6); z-index: 160;
}
screen :nth-child(42):hover { -webkit-transform: translate3d(79vmin, -65vmin, 0) rotate3d(1, 2, 2, -638deg) scale(2.8); transform: translate3d(79vmin, -65vmin, 0) rotate3d(1, 2, 2, -638deg) scale(2.8); z-index: 380;
}
screen :nth-child(43):hover { -webkit-transform: translate3d(-76vmin, 96vmin, 0) rotate3d(2, 0, 2, 658deg) scale(0.3); transform: translate3d(-76vmin, 96vmin, 0) rotate3d(2, 0, 2, 658deg) scale(0.3); z-index: 130;
}
screen :nth-child(44):hover { -webkit-transform: translate3d(-80vmin, -4vmin, 0) rotate3d(0, 0, 2, 122deg) scale(1.2); transform: translate3d(-80vmin, -4vmin, 0) rotate3d(0, 0, 2, 122deg) scale(1.2); z-index: 220;
}
screen :nth-child(45):hover { -webkit-transform: translate3d(-50vmin, 39vmin, 0) rotate3d(2, 2, 2, -389deg) scale(0.3); transform: translate3d(-50vmin, 39vmin, 0) rotate3d(2, 2, 2, -389deg) scale(0.3); z-index: 130;
}
screen :nth-child(46):hover { -webkit-transform: translate3d(-88vmin, 50vmin, 0) rotate3d(2, 0, 1, -215deg) scale(0.4); transform: translate3d(-88vmin, 50vmin, 0) rotate3d(2, 0, 1, -215deg) scale(0.4); z-index: 140;
}
screen :nth-child(47):hover { -webkit-transform: translate3d(69vmin, -98vmin, 0) rotate3d(1, 0, 0, 442deg) scale(0.1); transform: translate3d(69vmin, -98vmin, 0) rotate3d(1, 0, 0, 442deg) scale(0.1); z-index: 110;
}
screen :nth-child(48):hover { -webkit-transform: translate3d(-14vmin, -13vmin, 0) rotate3d(2, 2, 1, 356deg) scale(0.6); transform: translate3d(-14vmin, -13vmin, 0) rotate3d(2, 2, 1, 356deg) scale(0.6); z-index: 160;
}
screen :nth-child(49):hover { -webkit-transform: translate3d(44vmin, -42vmin, 0) rotate3d(0, 2, 2, 577deg) scale(2.2); transform: translate3d(44vmin, -42vmin, 0) rotate3d(0, 2, 2, 577deg) scale(2.2); z-index: 320;
}
screen :nth-child(50):hover { -webkit-transform: translate3d(20vmin, 12vmin, 0) rotate3d(1, 1, 2, -175deg) scale(2.7); transform: translate3d(20vmin, 12vmin, 0) rotate3d(1, 1, 2, -175deg) scale(2.7); z-index: 370;
}
screen :nth-child(51):hover { -webkit-transform: translate3d(-80vmin, 59vmin, 0) rotate3d(0, 2, 2, -171deg) scale(0.3); transform: translate3d(-80vmin, 59vmin, 0) rotate3d(0, 2, 2, -171deg) scale(0.3); z-index: 130;
}
screen :nth-child(52):hover { -webkit-transform: translate3d(-23vmin, -55vmin, 0) rotate3d(0, 2, 0, 642deg) scale(2.1); transform: translate3d(-23vmin, -55vmin, 0) rotate3d(0, 2, 0, 642deg) scale(2.1); z-index: 310;
}
screen :nth-child(53):hover { -webkit-transform: translate3d(6vmin, 99vmin, 0) rotate3d(1, 0, 2, 288deg) scale(2.5); transform: translate3d(6vmin, 99vmin, 0) rotate3d(1, 0, 2, 288deg) scale(2.5); z-index: 350;
}
screen :nth-child(54):hover { -webkit-transform: translate3d(-19vmin, -64vmin, 0) rotate3d(0, 0, 0, -692deg) scale(1.5); transform: translate3d(-19vmin, -64vmin, 0) rotate3d(0, 0, 0, -692deg) scale(1.5); z-index: 250;
}
screen :nth-child(55):hover { -webkit-transform: translate3d(-4vmin, -40vmin, 0) rotate3d(0, 2, 0, 23deg) scale(0.8); transform: translate3d(-4vmin, -40vmin, 0) rotate3d(0, 2, 0, 23deg) scale(0.8); z-index: 180;
}
screen :nth-child(56):hover { -webkit-transform: translate3d(-45vmin, 61vmin, 0) rotate3d(0, 2, 2, -255deg) scale(2.3); transform: translate3d(-45vmin, 61vmin, 0) rotate3d(0, 2, 2, -255deg) scale(2.3); z-index: 330;
}
screen :nth-child(57):hover { -webkit-transform: translate3d(-41vmin, -34vmin, 0) rotate3d(1, 1, 2, 435deg) scale(1.1); transform: translate3d(-41vmin, -34vmin, 0) rotate3d(1, 1, 2, 435deg) scale(1.1); z-index: 210;
}
screen :nth-child(58):hover { -webkit-transform: translate3d(86vmin, 74vmin, 0) rotate3d(1, 2, 1, -4deg) scale(2); transform: translate3d(86vmin, 74vmin, 0) rotate3d(1, 2, 1, -4deg) scale(2); z-index: 300;
}
screen :nth-child(59):hover { -webkit-transform: translate3d(21vmin, -4vmin, 0) rotate3d(0, 0, 2, 87deg) scale(1.7); transform: translate3d(21vmin, -4vmin, 0) rotate3d(0, 0, 2, 87deg) scale(1.7); z-index: 270;
}
screen :nth-child(60):hover { -webkit-transform: translate3d(-33vmin, 5vmin, 0) rotate3d(1, 0, 1, 147deg) scale(1); transform: translate3d(-33vmin, 5vmin, 0) rotate3d(1, 0, 1, 147deg) scale(1); z-index: 200;
}
screen :nth-child(61):hover { -webkit-transform: translate3d(-58vmin, 43vmin, 0) rotate3d(0, 0, 2, 603deg) scale(1.4); transform: translate3d(-58vmin, 43vmin, 0) rotate3d(0, 0, 2, 603deg) scale(1.4); z-index: 240;
}
screen :nth-child(62):hover { -webkit-transform: translate3d(67vmin, -53vmin, 0) rotate3d(2, 1, 0, 451deg) scale(2.7); transform: translate3d(67vmin, -53vmin, 0) rotate3d(2, 1, 0, 451deg) scale(2.7); z-index: 370;
}
screen :nth-child(63):hover { -webkit-transform: translate3d(2vmin, -43vmin, 0) rotate3d(0, 1, 2, -667deg) scale(1.9); transform: translate3d(2vmin, -43vmin, 0) rotate3d(0, 1, 2, -667deg) scale(1.9); z-index: 290;
}
screen :nth-child(64):hover { -webkit-transform: translate3d(79vmin, 71vmin, 0) rotate3d(0, 2, 0, 624deg) scale(1.4); transform: translate3d(79vmin, 71vmin, 0) rotate3d(0, 2, 0, 624deg) scale(1.4); z-index: 240;
}
screen :nth-child(65):hover { -webkit-transform: translate3d(41vmin, 9vmin, 0) rotate3d(0, 1, 1, 35deg) scale(0.7); transform: translate3d(41vmin, 9vmin, 0) rotate3d(0, 1, 1, 35deg) scale(0.7); z-index: 170;
}
screen :nth-child(66):hover { -webkit-transform: translate3d(-78vmin, -39vmin, 0) rotate3d(1, 2, 0, -327deg) scale(1.4); transform: translate3d(-78vmin, -39vmin, 0) rotate3d(1, 2, 0, -327deg) scale(1.4); z-index: 240;
}
screen :nth-child(67):hover { -webkit-transform: translate3d(78vmin, -27vmin, 0) rotate3d(1, 2, 2, -188deg) scale(1.9); transform: translate3d(78vmin, -27vmin, 0) rotate3d(1, 2, 2, -188deg) scale(1.9); z-index: 290;
}
screen :nth-child(68):hover { -webkit-transform: translate3d(95vmin, 57vmin, 0) rotate3d(0, 2, 0, -361deg) scale(2.7); transform: translate3d(95vmin, 57vmin, 0) rotate3d(0, 2, 0, -361deg) scale(2.7); z-index: 370;
}
screen :nth-child(69):hover { -webkit-transform: translate3d(49vmin, 33vmin, 0) rotate3d(2, 1, 0, -528deg) scale(0.8); transform: translate3d(49vmin, 33vmin, 0) rotate3d(2, 1, 0, -528deg) scale(0.8); z-index: 180;
}
screen :nth-child(70):hover { -webkit-transform: translate3d(50vmin, 97vmin, 0) rotate3d(2, 0, 0, -633deg) scale(1.9); transform: translate3d(50vmin, 97vmin, 0) rotate3d(2, 0, 0, -633deg) scale(1.9); z-index: 290;
}
screen :nth-child(71):hover { -webkit-transform: translate3d(10vmin, 92vmin, 0) rotate3d(2, 1, 1, -84deg) scale(0.3); transform: translate3d(10vmin, 92vmin, 0) rotate3d(2, 1, 1, -84deg) scale(0.3); z-index: 130;
}
screen :nth-child(72):hover { -webkit-transform: translate3d(-20vmin, 58vmin, 0) rotate3d(1, 0, 2, -437deg) scale(2); transform: translate3d(-20vmin, 58vmin, 0) rotate3d(1, 0, 2, -437deg) scale(2); z-index: 300;
}
screen :nth-child(73):hover { -webkit-transform: translate3d(-81vmin, 34vmin, 0) rotate3d(2, 2, 2, 311deg) scale(2.1); transform: translate3d(-81vmin, 34vmin, 0) rotate3d(2, 2, 2, 311deg) scale(2.1); z-index: 310;
}
screen :nth-child(74):hover { -webkit-transform: translate3d(68vmin, 44vmin, 0) rotate3d(2, 0, 2, -259deg) scale(2.4); transform: translate3d(68vmin, 44vmin, 0) rotate3d(2, 0, 2, -259deg) scale(2.4); z-index: 340;
}
screen :nth-child(75):hover { -webkit-transform: translate3d(98vmin, -31vmin, 0) rotate3d(1, 0, 0, 577deg) scale(2.8); transform: translate3d(98vmin, -31vmin, 0) rotate3d(1, 0, 0, 577deg) scale(2.8); z-index: 380;
}
screen :nth-child(76):hover { -webkit-transform: translate3d(-36vmin, -27vmin, 0) rotate3d(1, 0, 1, -571deg) scale(1.6); transform: translate3d(-36vmin, -27vmin, 0) rotate3d(1, 0, 1, -571deg) scale(1.6); z-index: 260;
}
screen :nth-child(77):hover { -webkit-transform: translate3d(60vmin, -24vmin, 0) rotate3d(0, 2, 1, 141deg) scale(2.9); transform: translate3d(60vmin, -24vmin, 0) rotate3d(0, 2, 1, 141deg) scale(2.9); z-index: 390;
}
screen :nth-child(78):hover { -webkit-transform: translate3d(-57vmin, -91vmin, 0) rotate3d(2, 2, 1, -585deg) scale(1.6); transform: translate3d(-57vmin, -91vmin, 0) rotate3d(2, 2, 1, -585deg) scale(1.6); z-index: 260;
}
screen :nth-child(79):hover { -webkit-transform: translate3d(9vmin, -78vmin, 0) rotate3d(2, 0, 1, -28deg) scale(1.3); transform: translate3d(9vmin, -78vmin, 0) rotate3d(2, 0, 1, -28deg) scale(1.3); z-index: 230;
}
screen :nth-child(80):hover { -webkit-transform: translate3d(-2vmin, 84vmin, 0) rotate3d(2, 2, 2, 647deg) scale(2.6); transform: translate3d(-2vmin, 84vmin, 0) rotate3d(2, 2, 2, 647deg) scale(2.6); z-index: 360;
}
screen :nth-child(81):hover { -webkit-transform: translate3d(55vmin, -18vmin, 0) rotate3d(0, 1, 2, 374deg) scale(1.8); transform: translate3d(55vmin, -18vmin, 0) rotate3d(0, 1, 2, 374deg) scale(1.8); z-index: 280;
}
screen :nth-child(82):hover { -webkit-transform: translate3d(39vmin, -44vmin, 0) rotate3d(0, 1, 2, -443deg) scale(2); transform: translate3d(39vmin, -44vmin, 0) rotate3d(0, 1, 2, -443deg) scale(2); z-index: 300;
}
screen :nth-child(83):hover { -webkit-transform: translate3d(19vmin, 34vmin, 0) rotate3d(0, 2, 0, -299deg) scale(2.3); transform: translate3d(19vmin, 34vmin, 0) rotate3d(0, 2, 0, -299deg) scale(2.3); z-index: 330;
}
screen :nth-child(84):hover { -webkit-transform: translate3d(68vmin, -40vmin, 0) rotate3d(1, 0, 0, 324deg) scale(1.1); transform: translate3d(68vmin, -40vmin, 0) rotate3d(1, 0, 0, 324deg) scale(1.1); z-index: 210;
}
screen :nth-child(85):hover { -webkit-transform: translate3d(20vmin, -30vmin, 0) rotate3d(1, 2, 0, 586deg) scale(2.7); transform: translate3d(20vmin, -30vmin, 0) rotate3d(1, 2, 0, 586deg) scale(2.7); z-index: 370;
}
screen :nth-child(86):hover { -webkit-transform: translate3d(-74vmin, -12vmin, 0) rotate3d(0, 2, 0, -247deg) scale(1); transform: translate3d(-74vmin, -12vmin, 0) rotate3d(0, 2, 0, -247deg) scale(1); z-index: 200;
}
screen :nth-child(87):hover { -webkit-transform: translate3d(56vmin, 16vmin, 0) rotate3d(0, 2, 1, -499deg) scale(0.5); transform: translate3d(56vmin, 16vmin, 0) rotate3d(0, 2, 1, -499deg) scale(0.5); z-index: 150;
}
screen :nth-child(88):hover { -webkit-transform: translate3d(50vmin, -92vmin, 0) rotate3d(2, 0, 2, -47deg) scale(2.3); transform: translate3d(50vmin, -92vmin, 0) rotate3d(2, 0, 2, -47deg) scale(2.3); z-index: 330;
}
screen :nth-child(89):hover { -webkit-transform: translate3d(8vmin, 23vmin, 0) rotate3d(0, 2, 2, -470deg) scale(1.8); transform: translate3d(8vmin, 23vmin, 0) rotate3d(0, 2, 2, -470deg) scale(1.8); z-index: 280;
}
screen :nth-child(90):hover { -webkit-transform: translate3d(98vmin, -31vmin, 0) rotate3d(0, 2, 0, -537deg) scale(1.4); transform: translate3d(98vmin, -31vmin, 0) rotate3d(0, 2, 0, -537deg) scale(1.4); z-index: 240;
}
screen :nth-child(91):hover { -webkit-transform: translate3d(66vmin, -46vmin, 0) rotate3d(1, 1, 2, -414deg) scale(1.8); transform: translate3d(66vmin, -46vmin, 0) rotate3d(1, 1, 2, -414deg) scale(1.8); z-index: 280;
}
screen :nth-child(92):hover { -webkit-transform: translate3d(-18vmin, 25vmin, 0) rotate3d(0, 0, 0, -344deg) scale(2.2); transform: translate3d(-18vmin, 25vmin, 0) rotate3d(0, 0, 0, -344deg) scale(2.2); z-index: 320;
}
screen :nth-child(93):hover { -webkit-transform: translate3d(87vmin, -56vmin, 0) rotate3d(1, 1, 0, 92deg) scale(0.9); transform: translate3d(87vmin, -56vmin, 0) rotate3d(1, 1, 0, 92deg) scale(0.9); z-index: 190;
}
screen :nth-child(94):hover { -webkit-transform: translate3d(15vmin, 75vmin, 0) rotate3d(1, 1, 0, -234deg) scale(0.3); transform: translate3d(15vmin, 75vmin, 0) rotate3d(1, 1, 0, -234deg) scale(0.3); z-index: 130;
}
screen :nth-child(95):hover { -webkit-transform: translate3d(77vmin, 22vmin, 0) rotate3d(1, 2, 2, 641deg) scale(2.2); transform: translate3d(77vmin, 22vmin, 0) rotate3d(1, 2, 2, 641deg) scale(2.2); z-index: 320;
}
screen :nth-child(96):hover { -webkit-transform: translate3d(55vmin, -91vmin, 0) rotate3d(2, 2, 1, -330deg) scale(0.1); transform: translate3d(55vmin, -91vmin, 0) rotate3d(2, 2, 1, -330deg) scale(0.1); z-index: 110;
}
screen :nth-child(97):hover { -webkit-transform: translate3d(-93vmin, 33vmin, 0) rotate3d(1, 2, 1, 1deg) scale(2.1); transform: translate3d(-93vmin, 33vmin, 0) rotate3d(1, 2, 1, 1deg) scale(2.1); z-index: 310;
}
screen :nth-child(98):hover { -webkit-transform: translate3d(-100vmin, 11vmin, 0) rotate3d(0, 0, 1, 315deg) scale(0.4); transform: translate3d(-100vmin, 11vmin, 0) rotate3d(0, 0, 1, 315deg) scale(0.4); z-index: 140;
}
screen :nth-child(99):hover { -webkit-transform: translate3d(27vmin, 10vmin, 0) rotate3d(2, 2, 2, 619deg) scale(2); transform: translate3d(27vmin, 10vmin, 0) rotate3d(2, 2, 2, 619deg) scale(2); z-index: 300;
}
screen :nth-child(100):hover { -webkit-transform: translate3d(13vmin, -46vmin, 0) rotate3d(0, 2, 1, 182deg) scale(1.4); transform: translate3d(13vmin, -46vmin, 0) rotate3d(0, 2, 1, 182deg) scale(1.4); z-index: 240;
}

Mosaic - Script Codes JS Codes

// @inspired by Gerard Ferrandez
// @link https://codepen.io/ge1doot/pen/QyKVMQ

Home Page	Home
Developer	Olivier C
Username	olivier-c
Uploaded	November 19, 2022
Rating	3
Size	6,825 Kb
Views	10,120

Do you need developer help for Mosaic?

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!

Olivier C (olivier-c) Script Codes

Name	Size
Vertical Organizational Chart	3,634 Kb
Full SVG	18,023 Kb
Resize Navigation Bar	2,714 Kb
TagSphere	3,539 Kb
Signature	16,001 Kb
A Pen by Olivier C	1,980 Kb
Table layout	2,198 Kb
Animation full CSS	2,368 Kb
One Page Template HTML5	5,479 Kb
Some problems caused by flexbox	2,306 Kb

Create amazing SEO 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
Cloudy Spiral CSS animation	Hakimel	6,587 Kb
A Pen by Alex Bergin	Abergin	3,347 Kb
Slick Slider	Wearebold	5,913 Kb
HEXAGON	Aurumlux	1,684 Kb
Wikipedia Viewer	Codinger	4,681 Kb
Drill-down Map	Good886	8,484 Kb
Cut and Paste Roll Link	BottomlineInteractive	2,546 Kb
Responsive Advert	James_zedd	2,354 Kb
CSS 3D Radio buttons	Andreasnylin	1,650 Kb
Blog Concept 2	JGallardo	2,994 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!