Webleb - Snippet di Codice -

2897 Andev.web

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

25 November 2025

Esempio di landing page per sito web di film

8 June 2025

gioco del lancio della moneta

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

Call of Duty

Esempio di landing page per sito web di film

gioco del lancio della moneta

HTML

CSS

JS

Consigliato

Call of Duty

Esempio di landing page per sito web di film

gioco del lancio della moneta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS