^^._, work in progress, small changes
This commit is contained in:
Kali Gallon
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -1,20 +1,11 @@
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #003366; /* Your monochrome blue background */
|
||||
overflow: hidden; /* Prevents scrollbars if shapes move off-screen */
|
||||
}
|
||||
|
||||
.shape {
|
||||
/* The "Physical" properties */
|
||||
position: fixed;
|
||||
/* transform: translate(-50%, -50%); Optional: This makes 'left/top' refer to the CENTER of the doodle */
|
||||
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
|
||||
/* The "Stenciling" instructions (but no image yet!) */
|
||||
-webkit-mask-size: contain;
|
||||
@@ -26,24 +17,52 @@ body, html {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.doodle-1 {
|
||||
-webkit-mask-image: url('assets/doodle/doodle1.png');
|
||||
mask-image: url('assets/doodle/doodle1.png');
|
||||
/* Set initial position here */
|
||||
left: 50vw;
|
||||
top: 30vw;
|
||||
.shape:hover {
|
||||
transform: scale(1.2); /* Grow by 20% when you hover the mouse over it */
|
||||
transition: transform 0.3s ease; /* Make it a smooth grow */
|
||||
}
|
||||
|
||||
.doodle-2 {
|
||||
-webkit-mask-image: url('assets/doodle/doodle1.png');
|
||||
mask-image: url('assets/doodle/doodle1.png');
|
||||
left: 20vw;
|
||||
top: 70vw;
|
||||
}
|
||||
/* Individual Doodle Definitions */
|
||||
.doodle-1 { -webkit-mask-image: url('assets/doodles/ball.png'); mask-image: url('assets/doodles/ball.png'); left: 10vw; top: 10vh; }
|
||||
.doodle-2 { -webkit-mask-image: url('assets/doodles/batman.png'); mask-image: url('assets/doodles/batman.png'); left: 20vw; top: 15vh; }
|
||||
.doodle-3 { -webkit-mask-image: url('assets/doodles/building.png'); mask-image: url('assets/doodles/building.png'); left: 30vw; top: 20vh; }
|
||||
.doodle-4 { -webkit-mask-image: url('assets/doodles/butterfly.png'); mask-image: url('assets/doodles/butterfly.png'); left: 40vw; top: 25vh; }
|
||||
.doodle-5 { -webkit-mask-image: url('assets/doodles/car.png'); mask-image: url('assets/doodles/car.png'); left: 50vw; top: 30vh; }
|
||||
.doodle-6 { -webkit-mask-image: url('assets/doodles/cat.png'); mask-image: url('assets/doodles/cat.png'); left: 60vw; top: 35vh; }
|
||||
.doodle-7 { -webkit-mask-image: url('assets/doodles/clouds.png'); mask-image: url('assets/doodles/clouds.png'); left: 70vw; top: 40vh; }
|
||||
.doodle-8 { -webkit-mask-image: url('assets/doodles/controls.png'); mask-image: url('assets/doodles/controls.png'); left: 80vw; top: 45vh; }
|
||||
.doodle-9 { -webkit-mask-image: url('assets/doodles/dead.png'); mask-image: url('assets/doodles/dead.png'); left: 90vw; top: 50vh; }
|
||||
.doodle-10 { -webkit-mask-image: url('assets/doodles/diamant.png'); mask-image: url('assets/doodles/diamant.png'); left: 15vw; top: 55vh; }
|
||||
.doodle-11 { -webkit-mask-image: url('assets/doodles/dice.png'); mask-image: url('assets/doodles/dice.png'); left: 25vw; top: 60vh; }
|
||||
.doodle-12 { -webkit-mask-image: url('assets/doodles/earth.png'); mask-image: url('assets/doodles/earth.png'); left: 35vw; top: 65vh; }
|
||||
.doodle-13 { -webkit-mask-image: url('assets/doodles/egypt.png'); mask-image: url('assets/doodles/egypt.png'); left: 45vw; top: 70vh; }
|
||||
.doodle-14 { -webkit-mask-image: url('assets/doodles/fire.png'); mask-image: url('assets/doodles/fire.png'); left: 55vw; top: 75vh; }
|
||||
.doodle-15 { -webkit-mask-image: url('assets/doodles/fish.png'); mask-image: url('assets/doodles/fish.png'); left: 65vw; top: 80vh; }
|
||||
.doodle-16 { -webkit-mask-image: url('assets/doodles/flag.png'); mask-image: url('assets/doodles/flag.png'); left: 75vw; top: 85vh; }
|
||||
.doodle-17 { -webkit-mask-image: url('assets/doodles/hearts.png'); mask-image: url('assets/doodles/hearts.png'); left: 85vw; top: 90vh; }
|
||||
.doodle-18 { -webkit-mask-image: url('assets/doodles/house.png'); mask-image: url('assets/doodles/house.png'); left: 5vw; top: 45vh; }
|
||||
.doodle-19 { -webkit-mask-image: url('assets/doodles/idol.png'); mask-image: url('assets/doodles/idol.png'); left: 12vw; top: 22vh; }
|
||||
.doodle-20 { -webkit-mask-image: url('assets/doodles/lotus.png'); mask-image: url('assets/doodles/lotus.png'); left: 22vw; top: 32vh; }
|
||||
.doodle-21 { -webkit-mask-image: url('assets/doodles/mail.png'); mask-image: url('assets/doodles/mail.png'); left: 32vw; top: 42vh; }
|
||||
.doodle-22 { -webkit-mask-image: url('assets/doodles/moon.png'); mask-image: url('assets/doodles/moon.png'); left: 42vw; top: 52vh; }
|
||||
.doodle-23 { -webkit-mask-image: url('assets/doodles/pokeball.png'); mask-image: url('assets/doodles/pokeball.png'); left: 52vw; top: 62vh; }
|
||||
.doodle-24 { -webkit-mask-image: url('assets/doodles/runes.png'); mask-image: url('assets/doodles/runes.png'); left: 62vw; top: 72vh; }
|
||||
.doodle-25 { -webkit-mask-image: url('assets/doodles/shield.png'); mask-image: url('assets/doodles/shield.png'); left: 72vw; top: 82vh; }
|
||||
.doodle-26 { -webkit-mask-image: url('assets/doodles/shiny.png'); mask-image: url('assets/doodles/shiny.png'); left: 82vw; top: 12vh; }
|
||||
.doodle-27 { -webkit-mask-image: url('assets/doodles/snail.png'); mask-image: url('assets/doodles/snail.png'); left: 92vw; top: 22vh; }
|
||||
.doodle-28 { -webkit-mask-image: url('assets/doodles/sound.png'); mask-image: url('assets/doodles/sound.png'); left: 18vw; top: 82vh; }
|
||||
.doodle-29 { -webkit-mask-image: url('assets/doodles/spiral.png'); mask-image: url('assets/doodles/spiral.png'); left: 28vw; top: 72vh; }
|
||||
.doodle-30 { -webkit-mask-image: url('assets/doodles/star.png'); mask-image: url('assets/doodles/star.png'); left: 38vw; top: 62vh; }
|
||||
.doodle-31 { -webkit-mask-image: url('assets/doodles/stop.png'); mask-image: url('assets/doodles/stop.png'); left: 48vw; top: 52vh; }
|
||||
.doodle-32 { -webkit-mask-image: url('assets/doodles/sun.png'); mask-image: url('assets/doodles/sun.png'); left: 58vw; top: 42vh; }
|
||||
.doodle-33 { -webkit-mask-image: url('assets/doodles/tree.png'); mask-image: url('assets/doodles/tree.png'); left: 68vw; top: 32vh; }
|
||||
.doodle-34 { -webkit-mask-image: url('assets/doodles/triskel.png'); mask-image: url('assets/doodles/triskel.png'); left: 78vw; top: 22vh; }
|
||||
.doodle-35 { -webkit-mask-image: url('assets/doodles/yin_yang.png'); mask-image: url('assets/doodles/yin_yang.png'); left: 88vw; top: 12vh; }
|
||||
|
||||
|
||||
/* 3. A quick animation for the color loop */
|
||||
.loop-color {
|
||||
animation: colorShift 24s infinite alternate ease-in-out;
|
||||
animation: colorShift 12s infinite alternate ease-in-out;
|
||||
}
|
||||
@keyframes colorShift {
|
||||
/* 0% and 100% are identical to create the "Infinite Circle" effect */
|
||||
|
||||
@@ -36,51 +36,52 @@ function moveRandomly(id) {
|
||||
// To make it move every 2 seconds automatically:
|
||||
// setInterval(() => moveRandomly('shape1'), 2000);
|
||||
// setInterval(() => moveRandomly('shape2'), 2000);
|
||||
|
||||
// Store the state of our moving shapes
|
||||
const movingShapes = {};
|
||||
function startSmoothRandomMove(id, speed = 2) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
// We store position as 0.0 to 1.0 (percentage of screen)
|
||||
// This makes it "Resolution Independent"
|
||||
// 1. Get initial pixel position or pick random if CSS isn't loaded yet
|
||||
const rect = el.getBoundingClientRect();
|
||||
|
||||
const state = {
|
||||
percentX: parseFloat(el.style.left) / 100 || Math.random(),
|
||||
percentY: parseFloat(el.style.top) / 100 || Math.random(),
|
||||
x: rect.left || Math.random() * (window.innerWidth - 142),
|
||||
y: rect.top || Math.random() * (window.innerHeight - 142),
|
||||
angle: Math.random() * Math.PI * 2,
|
||||
speed: speed
|
||||
};
|
||||
|
||||
function update() {
|
||||
// 1. Get current pixel dimensions of the window
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
// 2. Convert speed (pixels) into a "percentage" of this specific screen
|
||||
const vx = (Math.cos(state.angle) * state.speed) / width;
|
||||
const vy = (Math.sin(state.angle) * state.speed) / height;
|
||||
// 2. Refresh screen boundaries every frame
|
||||
const screenW = window.innerWidth;
|
||||
const screenH = window.innerHeight;
|
||||
const shapeSize = 142; // Matches your CSS width/height
|
||||
|
||||
state.percentX += vx;
|
||||
state.percentY += vy;
|
||||
// 3. Calculate next step
|
||||
state.x += Math.cos(state.angle) * state.speed;
|
||||
state.y += Math.sin(state.angle) * state.speed;
|
||||
|
||||
// 3. Bounce logic (Keep between 0% and 100%)
|
||||
// We subtract a little (e.g., 0.1) so the 300px shape doesn't go off-edge
|
||||
const bufferX = 300 / width;
|
||||
const bufferY = 300 / height;
|
||||
|
||||
if (state.percentX < 0 || state.percentX > (1 - bufferX)) {
|
||||
// 4. BOUNCE LOGIC (Corrected)
|
||||
// Horizontal check
|
||||
if (state.x <= 0) {
|
||||
state.x = 0;
|
||||
state.angle = Math.PI - state.angle;
|
||||
} else if (state.x + shapeSize >= screenW) {
|
||||
state.x = screenW - shapeSize;
|
||||
state.angle = Math.PI - state.angle;
|
||||
state.percentX = Math.max(0, Math.min(state.percentX, 1 - bufferX));
|
||||
}
|
||||
if (state.percentY < 0 || state.percentY > (1 - bufferY)) {
|
||||
state.angle = -state.angle;
|
||||
state.percentY = Math.max(0, Math.min(state.percentY, 1 - bufferY));
|
||||
}
|
||||
|
||||
// 4. Apply as percentages
|
||||
el.style.left = (state.percentX * 100) + "vw";
|
||||
el.style.top = (state.percentY * 100) + "vh";
|
||||
// Vertical check
|
||||
if (state.y <= 0) {
|
||||
state.y = 0;
|
||||
state.angle = -state.angle;
|
||||
} else if (state.y + shapeSize >= screenH) {
|
||||
state.y = screenH - shapeSize;
|
||||
state.angle = -state.angle;
|
||||
}
|
||||
|
||||
// 5. Apply position using pixels for precision
|
||||
el.style.left = state.x + "px";
|
||||
el.style.top = state.y + "px";
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
@@ -88,61 +89,23 @@ function startSmoothRandomMove(id, speed = 2) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// function startSmoothRandomMove(id, speed = 2) {
|
||||
// const el = document.getElementById(id);
|
||||
// if (!el) return;
|
||||
|
||||
// // Initial state: Start in the center, pick a random angle
|
||||
// movingShapes[id] = {
|
||||
// x: parseFloat(el.style.left) || 500,
|
||||
// y: parseFloat(el.style.top) || 300,
|
||||
// angle: Math.random() * Math.PI * 2, // Random direction in radians
|
||||
// speed: speed
|
||||
// };
|
||||
|
||||
// function update() {
|
||||
// const state = movingShapes[id];
|
||||
|
||||
// // 1. Calculate new position based on angle and speed
|
||||
// state.x += Math.cos(state.angle) * state.speed;
|
||||
// state.y += Math.sin(state.angle) * state.speed;
|
||||
|
||||
// // 2. "Bounce" logic: Change direction if hitting screen edges
|
||||
// if (state.x < 0 || state.x > window.innerWidth - 300) {
|
||||
// state.angle = Math.PI - state.angle; // Flip horizontal
|
||||
// }
|
||||
// if (state.y < 0 || state.y > window.innerHeight - 300) {
|
||||
// state.angle = -state.angle; // Flip vertical
|
||||
// }
|
||||
|
||||
// // 3. Randomly change direction slightly (the "Wander" effect)
|
||||
// // 1% chance every frame to pivot slightly
|
||||
// if (Math.random() < 0.01) {
|
||||
// state.angle += (Math.random() - 0.5) * 1;
|
||||
// }
|
||||
|
||||
// // 4. Apply to the element
|
||||
// el.style.left = state.x + "px";
|
||||
// el.style.top = state.y + "px";
|
||||
|
||||
// // Keep the loop going
|
||||
// requestAnimationFrame(update);
|
||||
// }
|
||||
|
||||
// // Start the first "heartbeat"
|
||||
// requestAnimationFrame(update);
|
||||
// }
|
||||
|
||||
startSmoothRandomMove('shape1', 3); // Moves at speed 3
|
||||
startSmoothRandomMove('shape2', 1.5); // Moves slower
|
||||
|
||||
// This loop runs 35 times, once for each shape ID
|
||||
for (let i = 1; i <= 35; i++) {
|
||||
// Generate a random speed between 1 and 4 for each shape
|
||||
// so they don't all move at the exact same pace
|
||||
const randomSpeed = 1 + Math.random() * 3;
|
||||
|
||||
// Call your function using the ID 'shape1', 'shape2', etc.
|
||||
startSmoothRandomMove(`shape${i}`, randomSpeed);
|
||||
}
|
||||
|
||||
function randomizeAnimationStarts() {
|
||||
const shapes = document.querySelectorAll('.loop-color');
|
||||
|
||||
shapes.forEach(shape => {
|
||||
// Pick a random number between 0 and 10 (since your loop is 10s)
|
||||
const randomDelay = Math.random() * -10;
|
||||
const randomDelay = Math.random() * - 12;
|
||||
|
||||
// Apply it directly to the element's style
|
||||
shape.style.animationDelay = randomDelay + "s";
|
||||
|
||||
@@ -16,8 +16,6 @@
|
||||
|
||||
);
|
||||
|
||||
--app-background-image: url("./assets/Frame1.png");
|
||||
|
||||
--color-surface: #ffcc00;
|
||||
--color-surface-light: #feffa6;
|
||||
--color-text: #000000;
|
||||
@@ -63,12 +61,9 @@
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
background-image:
|
||||
var(--app-background-image),
|
||||
background-image:
|
||||
var(--app-background-base);
|
||||
|
||||
animation: bg-animation 12s steps(1) infinite;
|
||||
|
||||
background-size: contain, cover;
|
||||
background-position: center, center;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
@@ -119,54 +114,13 @@ body {
|
||||
100% { transform: translateY(0) rotate(var(--rot)); }
|
||||
}
|
||||
|
||||
@keyframes bg-animation {
|
||||
0% {
|
||||
background-image: url("./assets/Frame1.png"), var(--app-background-base);
|
||||
}
|
||||
8.33% {
|
||||
background-image: url("./assets/Frame2.png"), var(--app-background-base);
|
||||
}
|
||||
16.66% {
|
||||
background-image: url("./assets/Frame3.png"), var(--app-background-base);
|
||||
}
|
||||
25% {
|
||||
background-image: url("./assets/Frame4.png"), var(--app-background-base);
|
||||
}
|
||||
33.33% {
|
||||
background-image: url("./assets/Frame5.png"), var(--app-background-base);
|
||||
}
|
||||
41.66% {
|
||||
background-image: url("./assets/Frame6.png"), var(--app-background-base);
|
||||
}
|
||||
50% {
|
||||
background-image: url("./assets/Frame7.png"), var(--app-background-base);
|
||||
}
|
||||
58.33% {
|
||||
background-image: url("./assets/Frame8.png"), var(--app-background-base);
|
||||
}
|
||||
66.66% {
|
||||
background-image: url("./assets/Frame9.png"), var(--app-background-base);
|
||||
}
|
||||
75% {
|
||||
background-image: url("./assets/Frame10.png"), var(--app-background-base);
|
||||
}
|
||||
83.33% {
|
||||
background-image: url("./assets/Frame11.png"), var(--app-background-base);
|
||||
}
|
||||
91.66% {
|
||||
background-image: url("./assets/Frame12.png"), var(--app-background-base);
|
||||
}
|
||||
100% {
|
||||
background-image: url("./assets/Frame1.png"), var(--app-background-base);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TYPOGRAPHY
|
||||
============================================ */
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
|
||||
@@ -4,10 +4,13 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Lobby</title>
|
||||
<link rel="stylesheet" href="doodle.css">
|
||||
<link rel="stylesheet" href="game.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<script src="doodle.js" defer></script>
|
||||
</head>
|
||||
<script type="module" src="app.js"></script>
|
||||
<body>
|
||||
@@ -34,5 +37,43 @@
|
||||
<div class="page" aria-label="Page">
|
||||
<button class="page__item" data-action="gameroom" aria-label="Game Rooms">Game Rooms</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="shape doodle-1 loop-color" id="shape1"></div>
|
||||
<div class="shape doodle-2 loop-color" id="shape2"></div>
|
||||
<div class="shape doodle-3 loop-color" id="shape3"></div>
|
||||
<div class="shape doodle-4 loop-color" id="shape4"></div>
|
||||
<div class="shape doodle-5 loop-color" id="shape5"></div>
|
||||
<div class="shape doodle-6 loop-color" id="shape6"></div>
|
||||
<div class="shape doodle-7 loop-color" id="shape7"></div>
|
||||
<div class="shape doodle-8 loop-color" id="shape8"></div>
|
||||
<div class="shape doodle-9 loop-color" id="shape9"></div>
|
||||
<div class="shape doodle-10 loop-color" id="shape10"></div>
|
||||
<div class="shape doodle-11 loop-color" id="shape11"></div>
|
||||
<div class="shape doodle-12 loop-color" id="shape12"></div>
|
||||
<div class="shape doodle-13 loop-color" id="shape13"></div>
|
||||
<div class="shape doodle-14 loop-color" id="shape14"></div>
|
||||
<div class="shape doodle-15 loop-color" id="shape15"></div>
|
||||
<div class="shape doodle-16 loop-color" id="shape16"></div>
|
||||
<div class="shape doodle-17 loop-color" id="shape17"></div>
|
||||
<div class="shape doodle-18 loop-color" id="shape18"></div>
|
||||
<div class="shape doodle-19 loop-color" id="shape19"></div>
|
||||
<div class="shape doodle-20 loop-color" id="shape20"></div>
|
||||
<div class="shape doodle-21 loop-color" id="shape21"></div>
|
||||
<div class="shape doodle-22 loop-color" id="shape22"></div>
|
||||
<div class="shape doodle-23 loop-color" id="shape23"></div>
|
||||
<div class="shape doodle-24 loop-color" id="shape24"></div>
|
||||
<div class="shape doodle-25 loop-color" id="shape25"></div>
|
||||
<div class="shape doodle-26 loop-color" id="shape26"></div>
|
||||
<div class="shape doodle-27 loop-color" id="shape27"></div>
|
||||
<div class="shape doodle-28 loop-color" id="shape28"></div>
|
||||
<div class="shape doodle-29 loop-color" id="shape29"></div>
|
||||
<div class="shape doodle-30 loop-color" id="shape30"></div>
|
||||
<div class="shape doodle-31 loop-color" id="shape31"></div>
|
||||
<div class="shape doodle-32 loop-color" id="shape32"></div>
|
||||
<div class="shape doodle-33 loop-color" id="shape33"></div>
|
||||
<div class="shape doodle-34 loop-color" id="shape34"></div>
|
||||
<div class="shape doodle-35 loop-color" id="shape35"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,9 +8,40 @@
|
||||
<script src="doodle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="shape doodle-1 loop-color" id="shape1"></div>
|
||||
<div class="shape doodle-2 loop-color" id="shape2"></div>
|
||||
|
||||
<div class="shape doodle-1 loop-color" id="shape1"></div>
|
||||
<div class="shape doodle-2 loop-color" id="shape2"></div>
|
||||
<div class="shape doodle-3 loop-color" id="shape3"></div>
|
||||
<div class="shape doodle-4 loop-color" id="shape4"></div>
|
||||
<div class="shape doodle-5 loop-color" id="shape5"></div>
|
||||
<div class="shape doodle-6 loop-color" id="shape6"></div>
|
||||
<div class="shape doodle-7 loop-color" id="shape7"></div>
|
||||
<div class="shape doodle-8 loop-color" id="shape8"></div>
|
||||
<div class="shape doodle-9 loop-color" id="shape9"></div>
|
||||
<div class="shape doodle-10 loop-color" id="shape10"></div>
|
||||
<div class="shape doodle-11 loop-color" id="shape11"></div>
|
||||
<div class="shape doodle-12 loop-color" id="shape12"></div>
|
||||
<div class="shape doodle-13 loop-color" id="shape13"></div>
|
||||
<div class="shape doodle-14 loop-color" id="shape14"></div>
|
||||
<div class="shape doodle-15 loop-color" id="shape15"></div>
|
||||
<div class="shape doodle-16 loop-color" id="shape16"></div>
|
||||
<div class="shape doodle-17 loop-color" id="shape17"></div>
|
||||
<div class="shape doodle-18 loop-color" id="shape18"></div>
|
||||
<div class="shape doodle-19 loop-color" id="shape19"></div>
|
||||
<div class="shape doodle-20 loop-color" id="shape20"></div>
|
||||
<div class="shape doodle-21 loop-color" id="shape21"></div>
|
||||
<div class="shape doodle-22 loop-color" id="shape22"></div>
|
||||
<div class="shape doodle-23 loop-color" id="shape23"></div>
|
||||
<div class="shape doodle-24 loop-color" id="shape24"></div>
|
||||
<div class="shape doodle-25 loop-color" id="shape25"></div>
|
||||
<div class="shape doodle-26 loop-color" id="shape26"></div>
|
||||
<div class="shape doodle-27 loop-color" id="shape27"></div>
|
||||
<div class="shape doodle-28 loop-color" id="shape28"></div>
|
||||
<div class="shape doodle-29 loop-color" id="shape29"></div>
|
||||
<div class="shape doodle-30 loop-color" id="shape30"></div>
|
||||
<div class="shape doodle-31 loop-color" id="shape31"></div>
|
||||
<div class="shape doodle-32 loop-color" id="shape32"></div>
|
||||
<div class="shape doodle-33 loop-color" id="shape33"></div>
|
||||
<div class="shape doodle-34 loop-color" id="shape34"></div>
|
||||
<div class="shape doodle-35 loop-color" id="shape35"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user