mixin s()
	| !{' '}
	
.wrapper
	div.wohoo
		<a class="logo" aria-label="Next.js" href="https://nextjs.org"><svg height="80" viewBox="0 0 148 90" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" style="transform:translateX(4%);shape-rendering:auto"><path d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z" fill="#000" fill-rule="nonzero"></path></svg></a>
		span.txt Congratulations on 50,000 Stargazers! 🎉
	- var count = 301
	while count > -1
		div(class="confetti-"+count)
		- count--





<!-- Follow me on Twitter -->
<a class="twitter" target="_top" href="https://twitter.com/MrAhmadAwais"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
View Compiled
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	overflow: hidden;
}

.wrapper {
	position: relative;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
}

.logo {
	display: flex;
	justify-content: center;
	margin: auto;
}

.wohoo {
	width: 100%;
	height: 100vh;
	font-size: 2.4rem;
	font-family: "Inter", sans-serif;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;
	padding: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.txt {
	padding: 5rem;
}

[class|="confetti"] {
	position: absolute;
}

$colors: (#d13447, #ffbf00, #263672);

@for $i from 0 through 300 {
	$w: random(8);
	$l: random(100);
	.confetti-#{$i} {
		width: #{$w}px;
		height: #{$w * 0.4}px;
		background-color: nth($colors, random(3));
		top: -10%;
		left: unquote($l + "%");
		opacity: random() + 0.5;
		transform: rotate(#{random() * 360}deg);
		animation: drop-#{$i}
			unquote(4 + random() + "s")
			unquote(random() + "s")
			infinite;
	}

	@keyframes drop-#{$i} {
		100% {
			top: 110%;
			left: unquote($l + random(15) + "%");
		}
	}
}






















// [IGNORE] DEMO CSS BELOW.
.twitter {
	position: fixed;
	display: block;
	right: 12px;
	bottom: 12px;
	svg {
		width: 32px;
		height: 32px;
		fill: #1da1f2;
	}
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css2?family=Inter:wght@900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.