123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrapper">
	
	<div class="frame">

		<input type="checkbox" class="slider-input" id="slider" />

		<label class="state" for="slider">
			<span class="slider round"></span>
		</label>

		<div class="intro">
			<h1>Pure CSS game</h1>

			<h2>Save the eggs</h2>

			<div class="instructions">
				<p>This is a very simple game</p>
				<p>You need to save the eggs</p>
				<p>How to do that?</p>
				<p>You need to click on the eggs (or touch them) to save them in the basket</p>
				<p>Each egg you will save, will give you a single point</p>
				<p>There are 100 eggs all around</p>
				<p>Each egg that you missed... well, you know what happen to egg that falling on the floor</p>
				<p>Enjoy</p>
			</div>
		</div>

		<input type="radio" class="game-check egg_1" id="egg_1">
		<input type="radio" class="game-check egg_2" id="egg_2">
		<input type="radio" class="game-check egg_3" id="egg_3">
		<input type="radio" class="game-check egg_4" id="egg_4">
		<input type="radio" class="game-check egg_5" id="egg_5">
		<input type="radio" class="game-check egg_6" id="egg_6">
		<input type="radio" class="game-check egg_7" id="egg_7">
		<input type="radio" class="game-check egg_8" id="egg_8">
		<input type="radio" class="game-check egg_9" id="egg_9">
		<input type="radio" class="game-check egg_10" id="egg_10">
		<input type="radio" class="game-check egg_11" id="egg_11">
		<input type="radio" class="game-check egg_12" id="egg_12">
		<input type="radio" class="game-check egg_13" id="egg_13">
		<input type="radio" class="game-check egg_14" id="egg_14">
		<input type="radio" class="game-check egg_15" id="egg_15">
		<input type="radio" class="game-check egg_16" id="egg_16">
		<input type="radio" class="game-check egg_17" id="egg_17">
		<input type="radio" class="game-check egg_18" id="egg_18">
		<input type="radio" class="game-check egg_19" id="egg_19">
		<input type="radio" class="game-check egg_20" id="egg_20">
		<input type="radio" class="game-check egg_21" id="egg_21">
		<input type="radio" class="game-check egg_22" id="egg_22">
		<input type="radio" class="game-check egg_23" id="egg_23">
		<input type="radio" class="game-check egg_24" id="egg_24">
		<input type="radio" class="game-check egg_25" id="egg_25">
		<input type="radio" class="game-check egg_26" id="egg_26">
		<input type="radio" class="game-check egg_27" id="egg_27">
		<input type="radio" class="game-check egg_28" id="egg_28">
		<input type="radio" class="game-check egg_29" id="egg_29">
		<input type="radio" class="game-check egg_30" id="egg_30">
		<input type="radio" class="game-check egg_31" id="egg_31">
		<input type="radio" class="game-check egg_32" id="egg_32">
		<input type="radio" class="game-check egg_33" id="egg_33">
		<input type="radio" class="game-check egg_34" id="egg_34">
		<input type="radio" class="game-check egg_35" id="egg_35">
		<input type="radio" class="game-check egg_36" id="egg_36">
		<input type="radio" class="game-check egg_37" id="egg_37">
		<input type="radio" class="game-check egg_38" id="egg_38">
		<input type="radio" class="game-check egg_39" id="egg_39">
		<input type="radio" class="game-check egg_40" id="egg_40">
		<input type="radio" class="game-check egg_41" id="egg_41">
		<input type="radio" class="game-check egg_42" id="egg_42">
		<input type="radio" class="game-check egg_43" id="egg_43">
		<input type="radio" class="game-check egg_44" id="egg_44">
		<input type="radio" class="game-check egg_45" id="egg_45">
		<input type="radio" class="game-check egg_46" id="egg_46">
		<input type="radio" class="game-check egg_47" id="egg_47">
		<input type="radio" class="game-check egg_48" id="egg_48">
		<input type="radio" class="game-check egg_49" id="egg_49">
		<input type="radio" class="game-check egg_50" id="egg_50">
		<input type="radio" class="game-check egg_51" id="egg_51">
		<input type="radio" class="game-check egg_52" id="egg_52">
		<input type="radio" class="game-check egg_53" id="egg_53">
		<input type="radio" class="game-check egg_54" id="egg_54">
		<input type="radio" class="game-check egg_55" id="egg_55">
		<input type="radio" class="game-check egg_56" id="egg_56">
		<input type="radio" class="game-check egg_57" id="egg_57">
		<input type="radio" class="game-check egg_58" id="egg_58">
		<input type="radio" class="game-check egg_59" id="egg_59">
		<input type="radio" class="game-check egg_60" id="egg_60">
		<input type="radio" class="game-check egg_61" id="egg_61">
		<input type="radio" class="game-check egg_62" id="egg_62">
		<input type="radio" class="game-check egg_63" id="egg_63">
		<input type="radio" class="game-check egg_64" id="egg_64">
		<input type="radio" class="game-check egg_65" id="egg_65">
		<input type="radio" class="game-check egg_66" id="egg_66">
		<input type="radio" class="game-check egg_67" id="egg_67">
		<input type="radio" class="game-check egg_68" id="egg_68">
		<input type="radio" class="game-check egg_69" id="egg_69">
		<input type="radio" class="game-check egg_70" id="egg_70">
		<input type="radio" class="game-check egg_71" id="egg_71">
		<input type="radio" class="game-check egg_72" id="egg_72">
		<input type="radio" class="game-check egg_73" id="egg_73">
		<input type="radio" class="game-check egg_74" id="egg_74">
		<input type="radio" class="game-check egg_75" id="egg_75">
		<input type="radio" class="game-check egg_76" id="egg_76">
		<input type="radio" class="game-check egg_77" id="egg_77">
		<input type="radio" class="game-check egg_78" id="egg_78">
		<input type="radio" class="game-check egg_79" id="egg_79">
		<input type="radio" class="game-check egg_80" id="egg_80">
		<input type="radio" class="game-check egg_81" id="egg_81">
		<input type="radio" class="game-check egg_82" id="egg_82">
		<input type="radio" class="game-check egg_83" id="egg_83">
		<input type="radio" class="game-check egg_84" id="egg_84">
		<input type="radio" class="game-check egg_85" id="egg_85">
		<input type="radio" class="game-check egg_86" id="egg_86">
		<input type="radio" class="game-check egg_87" id="egg_87">
		<input type="radio" class="game-check egg_88" id="egg_88">
		<input type="radio" class="game-check egg_89" id="egg_89">
		<input type="radio" class="game-check egg_90" id="egg_90">
		<input type="radio" class="game-check egg_91" id="egg_91">
		<input type="radio" class="game-check egg_92" id="egg_92">
		<input type="radio" class="game-check egg_93" id="egg_93">
		<input type="radio" class="game-check egg_94" id="egg_94">
		<input type="radio" class="game-check egg_95" id="egg_95">
		<input type="radio" class="game-check egg_96" id="egg_96">
		<input type="radio" class="game-check egg_97" id="egg_97">
		<input type="radio" class="game-check egg_98" id="egg_98">
		<input type="radio" class="game-check egg_99" id="egg_99">
		<input type="radio" class="game-check egg_100" id="egg_100">
		
		<div class="chicken">
			
			<div class="head">
				<div class="eye"></div>
				<div class="eye"></div>
				<div class="nose"></div>
			</div>

			<div class="body">
				<div class="wing"></div>
				<div class="wing"></div>
				<div class="leg"></div>
				<div class="leg"></div>
			</div>
		</div>
	
		<label for="egg_1" class="egg egg__1"></label>
		<label for="egg_2" class="egg egg__2"></label>
		<label for="egg_3" class="egg egg__3"></label>
		<label for="egg_4" class="egg egg__4"></label>
		<label for="egg_5" class="egg egg__5"></label>
		<label for="egg_6" class="egg egg__6"></label>
		<label for="egg_7" class="egg egg__7"></label>
		<label for="egg_8" class="egg egg__8"></label>
		<label for="egg_9" class="egg egg__9"></label>
		<label for="egg_10" class="egg egg__10"></label>
		<label for="egg_11" class="egg egg__11"></label>
		<label for="egg_12" class="egg egg__12"></label>
		<label for="egg_13" class="egg egg__13"></label>
		<label for="egg_14" class="egg egg__14"></label>
		<label for="egg_15" class="egg egg__15"></label>
		<label for="egg_16" class="egg egg__16"></label>
		<label for="egg_17" class="egg egg__17"></label>
		<label for="egg_18" class="egg egg__18"></label>
		<label for="egg_19" class="egg egg__19"></label>
		<label for="egg_20" class="egg egg__20"></label>
		<label for="egg_21" class="egg egg__21"></label>
		<label for="egg_22" class="egg egg__22"></label>
		<label for="egg_23" class="egg egg__23"></label>
		<label for="egg_24" class="egg egg__24"></label>
		<label for="egg_25" class="egg egg__25"></label>
		<label for="egg_26" class="egg egg__26"></label>
		<label for="egg_27" class="egg egg__27"></label>
		<label for="egg_28" class="egg egg__28"></label>
		<label for="egg_29" class="egg egg__29"></label>
		<label for="egg_30" class="egg egg__30"></label>
		<label for="egg_31" class="egg egg__31"></label>
		<label for="egg_32" class="egg egg__32"></label>
		<label for="egg_33" class="egg egg__33"></label>
		<label for="egg_34" class="egg egg__34"></label>
		<label for="egg_35" class="egg egg__35"></label>
		<label for="egg_36" class="egg egg__36"></label>
		<label for="egg_37" class="egg egg__37"></label>
		<label for="egg_38" class="egg egg__38"></label>
		<label for="egg_39" class="egg egg__39"></label>
		<label for="egg_40" class="egg egg__40"></label>
		<label for="egg_41" class="egg egg__41"></label>
		<label for="egg_42" class="egg egg__42"></label>
		<label for="egg_43" class="egg egg__43"></label>
		<label for="egg_44" class="egg egg__44"></label>
		<label for="egg_45" class="egg egg__45"></label>
		<label for="egg_46" class="egg egg__46"></label>
		<label for="egg_47" class="egg egg__47"></label>
		<label for="egg_48" class="egg egg__48"></label>
		<label for="egg_49" class="egg egg__49"></label>
		<label for="egg_50" class="egg egg__50"></label>
		<label for="egg_51" class="egg egg__51"></label>
		<label for="egg_52" class="egg egg__52"></label>
		<label for="egg_53" class="egg egg__53"></label>
		<label for="egg_54" class="egg egg__54"></label>
		<label for="egg_55" class="egg egg__55"></label>
		<label for="egg_56" class="egg egg__56"></label>
		<label for="egg_57" class="egg egg__57"></label>
		<label for="egg_58" class="egg egg__58"></label>
		<label for="egg_59" class="egg egg__59"></label>
		<label for="egg_60" class="egg egg__60"></label>
		<label for="egg_61" class="egg egg__61"></label>
		<label for="egg_62" class="egg egg__62"></label>
		<label for="egg_63" class="egg egg__63"></label>
		<label for="egg_64" class="egg egg__64"></label>
		<label for="egg_65" class="egg egg__65"></label>
		<label for="egg_66" class="egg egg__66"></label>
		<label for="egg_67" class="egg egg__67"></label>
		<label for="egg_68" class="egg egg__68"></label>
		<label for="egg_69" class="egg egg__69"></label>
		<label for="egg_70" class="egg egg__70"></label>
		<label for="egg_71" class="egg egg__71"></label>
		<label for="egg_72" class="egg egg__72"></label>
		<label for="egg_73" class="egg egg__73"></label>
		<label for="egg_74" class="egg egg__74"></label>
		<label for="egg_75" class="egg egg__75"></label>
		<label for="egg_76" class="egg egg__76"></label>
		<label for="egg_77" class="egg egg__77"></label>
		<label for="egg_78" class="egg egg__78"></label>
		<label for="egg_79" class="egg egg__79"></label>
		<label for="egg_80" class="egg egg__80"></label>
		<label for="egg_81" class="egg egg__81"></label>
		<label for="egg_82" class="egg egg__82"></label>
		<label for="egg_83" class="egg egg__83"></label>
		<label for="egg_84" class="egg egg__84"></label>
		<label for="egg_85" class="egg egg__85"></label>
		<label for="egg_86" class="egg egg__86"></label>
		<label for="egg_87" class="egg egg__87"></label>
		<label for="egg_88" class="egg egg__88"></label>
		<label for="egg_89" class="egg egg__89"></label>
		<label for="egg_90" class="egg egg__90"></label>
		<label for="egg_91" class="egg egg__91"></label>
		<label for="egg_92" class="egg egg__92"></label>
		<label for="egg_93" class="egg egg__93"></label>
		<label for="egg_94" class="egg egg__94"></label>
		<label for="egg_95" class="egg egg__95"></label>
		<label for="egg_96" class="egg egg__96"></label>
		<label for="egg_97" class="egg egg__97"></label>
		<label for="egg_98" class="egg egg__98"></label>
		<label for="egg_99" class="egg egg__99"></label>
		<label for="egg_100" class="egg egg__100"></label>

		<div class="footer">
			<div class="score">You saved:&nbsp;<span></span>&nbsp;of 100 eggs</div>
		</div>

		<div class="gameover">
			<h1>GAME OVER</h1>
			<p class="score">Your current score is&nbsp;<span></span></p>
			<p class="text">You can try again by clicking&nbsp;<a href="">here</a></p>
			<div class="text author">Created by <a href="https://www.linkedin.com/in/itzikpop/">Itzik Pop</a>. <span>100% JS free</span></div>
		</div>
	</div>
</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One|Source+Sans+Pro|Orbitron|Permanent+Marker|Righteous|Sedgwick+Ave+Display');
// font-family: 'Sedgwick Ave Display', cursive;
// font-family: 'Permanent Marker', cursive;
// font-family: 'Righteous', cursive;
// font-family: 'Alfa Slab One', cursive;
// font-family: 'Orbitron', sans-serif;
// font-family: 'Source Sans Pro', sans-serif;


// General Vars
$zindex: 1;
$zindex-footer: 10;
$frame-radius: 20px;
$intro-zindex: $zindex-footer + 10;
$intro-opa: 0.8;
$state-zindex: $zindex-footer + 20;
$gameover-zindex: $zindex-footer + 30;
$game-speed: 40;

$fh: 40px;

$eggs: 100;
$egh: 30px;
$zindex-egg: $zindex-footer + 1;

// Colors
$white: rgb(255, 255, 255);
$black: darken($white, 100%);

$blue: rgb(1, 175, 209);
$orange: rgb(250, 179, 43);
$green: rgb(55, 200, 123);
$turqouise: rgb(18, 121, 142);
$yellow: rgb(250, 217, 33);
$red: rgb(208, 61, 60);


@function pv() {
	$position: random()*95 + '%';

	@return #{$position};
}

@mixin size($height, $width) {
	height: $height;
	width: $width;
}

@mixin square($size) {
	@include size($size, $size);
}

@keyframes egg {
	0% {
		box-shadow: none;
		padding: 0;
		pointer-events: all;
		top: -$egh;
	}

	95% {
		@include size($egh, $egh*.6);
		box-shadow: none;
		background-color: $white;
		border: solid 1px $black;
		border-radius: 100% 100% 100% 100% / 100% 100% 70% 70%;
		padding: 0;
		pointer-events: all;
	}

	100% {
		@include size($egh/2, $egh/2);
		box-shadow: 0 0 3px 10px darken($white, 5%);
		background-color: #ffffcc;
		border-radius: 100%;
		border-color: rgba($black, 0.1);
		padding: 5px;
		pointer-events: none;
		top: calc(100vh - #{$fh});
	}
}

@keyframes gameover {
	to {
		perspective: 1000;
		transform: rotateY(0deg);
		transition: all 600ms;
	}
}

* {
	box-sizing: border-box;

	&:before, &:after {
		box-sizing: border-box;
	}
}

html, body {
	@include size(100vh, 100vw);
	background-color: $white;
	display: flex;
	overflow: hidden;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
}

.game-check {
	@include square(0);
	appearance: none;
	background-color: transparent;
	border: 0;
	left: 0;
	outline: 0;
	position: absolute;
	top: 0;

	&:checked {
		counter-increment: game;
	}
}

.wrapper {
	@include size(100vh, 100vw);
	align-items: center;
	display: inherit;
	justify-content: center;
	// padding: 20px;
}

.intro,
.gameover {
	background-color: darken($blue, 20%);
	// border-radius: $frame-radius;
	bottom :0;
	display: flex;
	flex-direction: column;
	left: 0;
	padding: ($frame-radius / 2) $frame-radius;
	perspective: 1000;
	position: absolute;
	right: 0;
	top: 0;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition: all 600ms;
	z-index: $intro-zindex;
}

.intro {
	color: lighten($blue, 10%);

	h1, h2 {
		color: $white;
		display: flex;
		font-family: 'Sedgwick Ave Display', cursive;
		justify-content: center;
		margin-bottom: 10px;
		text-shadow: 0 .4vw 5px $black;
	}

	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2rem;
	}

	.instructions {
		display: flex;
		flex-direction: column;
		margin: 5vh auto 0;
		max-width: 50vw;

		p {
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.slider-input {
	display: none;

	&:checked {

		& ~ .intro {
			opacity: 0;
			visibility: hidden;
			transform: rotateY(90deg);
			transition: all 600ms;
		}

		& ~ .gameover {
			animation-play-state: running;
		}

		& + .state {
			display: none;

			.slider {
				background-color: #2196F3;

				&:before {
					transform: translateX(26px);
				}
			}
		}

		& ~ .egg {
			animation-play-state: running;
		}
	}
}

.state {
	bottom: 3px;
	display: inline-block;
	position: absolute;
	right: 10px;
	height: 34px;
	width: 60px;
	z-index: $state-zindex;

	.slider {
		background-color: #ccc;
		bottom: 0;
		cursor: pointer;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: .4s;

		&:before {
			background-color: white;
			bottom: 4px;
			content: "";
			height: 26px;
			left: 4px;
			position: absolute;
			transition: .4s;				
			width: 26px;
		}

		&.round {
			border-radius: 34px;

			&:before {
				border-radius: 50%;
			}
		}
	}
}

.frame {
	@include square(100%);
	background-color: darken($blue, 15%);
	// border-radius: $frame-radius;
	// border: solid 1px $black;
	// box-shadow: 0 0 20px 5px rgba($black, 0.3);
	counter-reset: none;
	height: 100vh;
	overflow: hidden;
	perspective: 1000px;
	position: relative;
	transform-style: preserve-3d;
	width: 100vw;
}

.chicken {
	display: none;
	position: relative;

	.head, .body {
		background-color: $white;
		border: solid 1px $black;
	}

	.head {
	}

	.eye {
	}

	.body {
	}

	.wing {
	}

	.leg {
	}
}

.egg {
	@include size($egh, $egh*.6);
	background-color: $white;
	border: solid 1px $black;
	border-radius: 100% 100% 100% 100% / 100% 100% 70% 70%;
	box-shadow: none;
	padding: 0;
	position: absolute;
	top: -$egh;
	z-index: $zindex-egg;

	&:hover {
		cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44572/basket.png) 25 15, auto;
	}

	@for $i from 1 through $eggs {
		$speed: random(3)*($game-speed / 4) + 's';
		$random: random()*5 + 's';

		&__#{$i} {
			animation: egg #{$speed} linear #{$random} forwards;
			animation-play-state: paused;
			left: pv();
		}

		&_#{$i} {

			&:checked {

				& ~ .egg__#{$i} {
					opacity: 0;
					transform: translate(-50%, -50%) scale(0.01);
					transition: all 0.1s linear;
				}
			}
		}
	}
}

.footer {
	align-items: center;
	background-color: darken($blue, 25%);
	// border-radius: 0 0 $frame-radius $frame-radius;
	// border-top: solid 1px $black;
	bottom: 0;
	display: flex;
	flex: 1 0 auto;
	height: $fh;
	left: 0;
	padding: 0 $frame-radius / 2;
	position: absolute;
	right: 0;
	z-index: $zindex-footer;
}

.score {
	color: $white;
	font-family: 'Orbitron', sans-serif;
	font-size: 1rem;
	text-shadow: 0 .4vw 5px $black;

	span {

		&:after {
			content: counter(game);
		}
	}
}

.gameover {
	align-items: center;
	animation: gameover 1s linear unquote($game-speed + 's') forwards;
	animation-play-state: paused;
	justify-content: center;
	transform: rotateY(90deg);
	z-index: $gameover-zindex;

	h1 {
		color: $white;
		font-family: 'Sedgwick Ave Display', cursive;
		font-size: 3rem;
		margin-bottom: 25px;
		text-shadow: 0 .4vw 5px $black;
	}

	.text {
		color: $white;
		font-family: 'Righteous', cursive;
		font-weight: normal;
		font-size: 1.5rem;
		margin-bottom: 20px;
		text-align: center;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.score {
		color: $blue;
		margin-bottom: 20px;

		span {
		}
	}

	.author {
		bottom: 10px;
		font-size: 1rem;
		position: absolute;
		right: 10px;
	}

	a {
		color: $white;
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console