Webleb - Snippet di Codice -

2759 Andev.web

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 May 2025

Codice di incorporamento del gioco HTML5 Geometry Dash Lite

23 November 2025

la mia scuola

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="layout">
	<div class="content">
		<h1><strong>C</strong>ascading <strong>S</strong>olar <strong>S</strong>ystem</h1>
	</div>

<ol class="solar-system">
		<li class="orbit">
        	<div class="label">Sun</div>
			<div class="planet sun"></div>
		</li>
		<li class="orbit">
			<div class="label">Mercury</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mercury"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Venus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet venus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Earth</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet earth"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Mars</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mars"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Jupiter</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet jupiter"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Saturn</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet saturn"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Uranus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet uranus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Neptune</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet neptune"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Pluto</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet pluto"></div>
			</div>
		</li>
	</ol>
</div>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
}

.solar-system {
	--sun-diameter: 12dvh;
	--sun-spacing: .15;

/* very much not to scale */
	--mercury-size: .2;
	--venus-size: .25;
	--earth-size: .25;
	--mars-size: .25;
	--jupiter-size: .75;
	--saturn-size: .6;
	--uranus-size: .4;
	--neptune-size: .4;
	--pluto-size: .1;

/* to scale! https://en.wikipedia.org/wiki/Orbital_period#Examples_of_sidereal_and_synodic_periods */
	--mercury-period: .24;
	--venus-period: .615;
	--earth-duration: 5s;
	--mars-period: 1.88;
	--jupiter-period: 11.86;
	--saturn-period: 29.46;
	--uranus-period: 84;
	--neptune-period: 164;
	--pluto-period: 248;

padding: 1rem 0 0 0;
	overflow: hidden;

display: grid;
	gap: calc(var(--sun-diameter) * .15);
	grid-template-rows: repeat(10, auto);
	grid-template-areas:
		"pluto"
		"neptune"
		"uranus"
		"saturn"
		"jupiter"
		"mars"
		"earth"
		"venus"
		"mercury"
		"sun";

.orbit {
		--sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
		--planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);

grid-column: 1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		grid-template-columns: subgrid;
		justify-items: center;

&:has(.sun) {
			--planet-size: 1;
			grid-area: sun;
			padding-block: var(--sun-margin);
            .label {
                color: transparent;
            }
		}
		&:has(.mercury) {
			--planet-size: var(--mercury-size);
			--planet-duration: calc(var(--earth-duration) * var(--mercury-period));
			grid-row: mercury-start / sun-end;
			.planet, .label {
				grid-area: mercury;
			}
		}
		&:has(.venus) {
			--planet-size: var(--venus-size);
			--planet-duration: calc(var(--earth-duration) * var(--venus-period));
			grid-row: venus-start / sun-end;
			.planet, .label {
				grid-area: venus;
			}
		}
		&:has(.earth) {
			--planet-size: var(--earth-size);
			--planet-duration: var(--earth-duration);
			grid-row: earth-start / sun-end;
			.planet, .label {
				grid-area: earth;
			}
		}
		&:has(.mars) {
			--planet-size: var(--mars-size);
			--planet-duration: calc(var(--earth-duration) * var(--mars-period));
			grid-row: mars-start / sun-end;
			.planet, .label {
				grid-area: mars;
			}
		}
		&:has(.jupiter) {
			--planet-size: var(--jupiter-size);
			--planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
			grid-row: jupiter-start / sun-end;
			.planet, .label {
				grid-area: jupiter;
			}
		}
		&:has(.saturn) {
			--planet-size: var(--saturn-size);
			--planet-duration: calc(var(--earth-duration) * var(--saturn-period));
			grid-row: saturn-start / sun-end;
			.planet, .label {
				grid-area: saturn;
			}

}
		&:has(.uranus) {
			--planet-size: var(--uranus-size);
			--planet-duration: calc(var(--earth-duration) * var(--uranus-period));
			grid-row: uranus-start / sun-end;
			.planet, .label {
				grid-area: uranus;
			}
		}
		&:has(.neptune) {
			--planet-size: var(--neptune-size);
			--planet-duration: calc(var(--earth-duration) * var(--neptune-period));
			grid-row: neptune-start / sun-end;
			.planet, .label {
				grid-area: neptune;
			}
		}
		&:has(.pluto) {
			--planet-size: var(--pluto-size);
			--planet-duration: calc(var(--earth-duration) * var(--pluto-period));
			grid-row: pluto-start / sun-end;
			.planet, .label {
				grid-area: pluto;
			}
		}
	}

.planet {
		height: var(--planet-diameter);
		aspect-ratio: 1;
		border-radius: 50%;
		/* background-color: rgb(255 0 0 / .9); */
		z-index: 1;
		background-image: radial-gradient(circle at center 80%, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 50%);

&.sun {
			--sun-color: #ffd800;
			background-color: var(--sun-color);
			background-image: none;
			box-shadow: 0 0 42px 0 color-mix(in oklch, transparent, var(--sun-color) 50%);
		}
		&.mercury {
			background-color: #989494;
		}
		&.venus {
			background-color: #e1d59d;
		}
		&.earth {
			background-color: #008bb3;
		}
		&.mars {
			background-color: #dfa272;
		}
		&.jupiter {
			background-color: #af7045;
		}
		&.saturn {
			background-color: #d3b57c;
		}
		&.uranus {
			background-color: #77aac4;
		}
		&.neptune {
			background-color: #3a80a4;
		}
		&.pluto {
			background-color: #989494;
		}
	}

.orbit-ring {
		grid-area: 1 / 1 / -1 / -1;
		height: calc(2 * (100% - var(--planet-diameter) / 2 - var(--sun-diameter) / 2 - var(--sun-margin)));
		aspect-ratio: 1;
		translate: 0 calc(var(--planet-diameter) / 2);
		border-radius: 50%;
		border: 1px solid rgb(255 255 255 / .5);
		z-index: 0;
	}

.axis {
		grid-area: 1 / 1 / -1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		transform-origin: center calc(100% - var(--sun-diameter) / 2 - var(--sun-margin));
		animation: orbit var(--planet-duration) linear infinite;
	}

.label {
		align-self: center;
		translate: 0 -.5lh;
		z-index: 2;
	}
}

@keyframes orbit {
	from {
		rotate: 0turn;
	}

to {
		rotate: 1turn;
	}
}

body {
	font-family: system-ui, sans-serif;
	color: white;
	background: linear-gradient(to bottom, #112, #223);
}

a {
	color: currentcolor;
}

h1 {
	font-weight: 400;
}

.layout {
	min-height: 100dvh;
	display: grid;

& > .solar-system {
		align-self: end;
	}
}

.content {
	max-inline-size: 40rem;
	margin: 8px;
	& > * + * {
		margin-block-start: 1em;
	}
}

Consigliato

Un codice di Mete

Codice di incorporamento del gioco HTML5 Geometry Dash Lite

la mia scuola

HTML

CSS

JS

Consigliato

Un codice di Mete

Codice di incorporamento del gioco HTML5 Geometry Dash Lite

la mia scuola

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS