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="imac">
	<div class="imac__screen"></div>
	<div class="imac__i-o">
		<div class="imac__speaker"></div>
		<div class="imac__headphone-jacks">
			<svg class="imac__headphones-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10">
				<path fill="#ffffff" d="M10,5.044c0-1.335-0.52-2.592-1.464-3.535C7.592,0.565,6.336,0.045,5,0.045c-1.335,0-2.592,0.52-3.536,1.464
	C0.52,2.453,0,3.709,0,5.044v2.369C0,8.75,1.089,9.84,2.427,9.84c0.161,0,0.289-0.129,0.289-0.289V5.276
	c0-0.161-0.128-0.289-0.289-0.289c-0.741,0-1.404,0.333-1.85,0.856V5.044c0-2.438,1.984-4.422,4.422-4.422
	c2.438,0,4.422,1.984,4.422,4.422c0,0.02,0.002,0.039,0.007,0.058c-0.005,0.02-0.007,0.039-0.007,0.058v0.798
	c-0.445-0.524-1.108-0.856-1.85-0.856c-0.159,0-0.288,0.129-0.288,0.29v4.274c0,0.16,0.129,0.289,0.288,0.289
	C8.911,9.955,10,8.865,10,7.528V5.161c0-0.02-0.002-0.039-0.006-0.058C9.998,5.083,10,5.064,10,5.044z"/>
			</svg>
		</div>
		<div class="imac__disc-slot"></div>
		<button class="imac__power-btn">
			<svg class="imac__power-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10">
				<path fill="#111111" d="M6.766,1.41c0,0-0.531-0.239-0.531,0.319c0,0.559,0.526,0.933,0.532,0.932
					C7.696,3.266,8.31,4.314,8.31,5.506c0,1.848-1.475,3.35-3.31,3.396C3.164,8.855,1.69,7.354,1.69,5.506
					c0-1.191,0.613-2.239,1.542-2.846c0.007,0.001,0.532-0.373,0.532-0.932c0-0.558-0.53-0.319-0.53-0.319
					C1.676,2.115,0.592,3.684,0.592,5.506C0.592,7.959,2.558,9.953,5,10c2.442-0.047,4.408-2.041,4.408-4.494
					C9.408,3.684,8.324,2.115,6.766,1.41z"/>
				<path fill="#111111" d="M5.031,0C4.537,0,4.383,0.362,4.383,0.503v2.214V4.93c0,0.142,0.154,0.503,0.648,0.503
					c0.493,0,0.586-0.362,0.586-0.503V2.717V0.503C5.617,0.362,5.524,0,5.031,0z"/>
			</svg>
		</button>
		<div class="imac__speaker imac__speaker--flipped"></div>
	</div>
</div>
            
          
!
            
              * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.imac {
	color: #1b5aa1;
	font-size: 10px;
	margin: 1.5em auto 0 auto;
	width: 69em;
	height: 65em;
}
.imac__i-o, .imac__screen {
	display: flex;
	align-items: center;
}
.imac__screen {
	background:
		radial-gradient(2em 50em at 3% 100%,#fff 25%,#fff0),
		radial-gradient(2em 0.25em at 12% 6%,#fff 25%,#fff0),
		radial-gradient(1em 0.25em at 20% 11%,#fff 25%,#fff0),
		radial-gradient(5em 0.25em at 45% 3%,#fff 50%,#fff0),
		radial-gradient(3em 0.25em at 45% 5%,#fff 50%,#fff0),
		radial-gradient(2.5em 0.25em at 92% 3%,#fff 50%,#fff0),
		radial-gradient(2em 0.25em at 83% 6%,#fff 50%,#fff0),
		radial-gradient(1.8em 1.5em at 75% 13%,#fff 25%,#fff0),
		radial-gradient(1em 2em at 50% 5%,#000 20%,#3b442f00 21% 40%,#3b442f7f 49%,#3b442f00 50%),
		linear-gradient(#c2c8c6 1.2em,#c2c8c600 2.4em),
		linear-gradient(90deg,#0004 40%,#0000 40% 60%,#0004 60%) 67.4em 10em / 0.8em 3.5em no-repeat,
		linear-gradient(90deg,#0004 40%,#0000 40% 60%,#0004 60%) 67.4em 14em / 0.8em 1.5em no-repeat,
		linear-gradient(90deg,#9a939b00 50%,#9a939b7f 67.3em,currentColor 68.3em,#0000 68.3em),
		linear-gradient(90deg,currentColor 0.5em,#fff 0.5em 0.7em,#0000 0.7em 68.3em,#d3d9d7 68.3em 68.5em,currentColor 68.5em),
		repeating-linear-gradient(90deg,#eee 0 0.2em,#d3d9d7 0.4em 0.8em);
	border-radius: 4em 4em 0 0;
	flex-direction: column;
	justify-content: flex-end;
	height: 54em;
	will-change: color;
}
.imac__screen:before, .imac__screen:after, .imac__i-o:before, .imac__i-o:after, .imac__disc-slot:before {
	display: block;
}
.imac__screen:before, .imac__i-o:before, .imac__i-o:after, .imac__disc-slot:before {
	content: "";
}
.imac__screen:before {
	background-image:
		linear-gradient(110deg,#0000 40%,#000 70%),
		linear-gradient(#2a331e 20%,#3b442f 45%);
	background-size: 100% auto;
	border-radius: 1.5em;
	box-shadow:
		0 -0.1em 0 0.2em #eee,
		0 -0.1em 0.2em 0.4em #777,
		0 0 0.4em 1.2em #d3d9d7,
		0 0 0 1.4em #aaa,
		0 0 0 1.5em #eee,
		0 1em 0.25em #000 inset,
		0 -0.5em 0.25em #000 inset,
		3em 0 0.5em #000 inset,
		0 6em 0.5em #0002 inset;
	margin-bottom: 1.5em;
	width: 53em;
	height: 40em;
}
.imac__screen:after {
	color: #010;
 	content: "iMac";
 	font-size: 2em;
 	line-height: 2.25;
 	text-align: center;
 	text-shadow: 0 0 1em #0004;
 	transform: scaleY(1.3);
}
.imac__i-o {
	background:
		radial-gradient(2em 11em at 3% 0,#fff 25%,#fff0),
		linear-gradient(#fff0 5%,#fff4 6% 9%, #fff0 10%),
		radial-gradient(4em 0.2em at 25% 67%,#fffa,#fff0),
		radial-gradient(20em 0.2em at 50% 67%,#0001,#0000),
		radial-gradient(3em 0.2em at 73% 67%,#fff5,#fff0),
		linear-gradient(90deg,#0000 22%,#0003 23% 26%,#0000 27% 73%,#0003 74% 77%,#0000 78%) 0 0 / 100% 1.2em no-repeat,
		linear-gradient(90deg,#0000 15%,#0002 16% 19%,#0000 20% 80%,#0002 81% 84%,#0000 85%) 0 1.2em / 100% 0.5em no-repeat,
		radial-gradient(5em 4em at 91% 21%,currentColor,#9a939b,#9a939b00),
		radial-gradient(6em 4em at 90% 83%,currentColor,#9a939b,#9a939b00),
		linear-gradient(60deg,#d3d9d7 50%, #9a939b);
	border-radius: 0 0 4em 4em;
	box-shadow:
		0 -0.1em 0 #d3d9d7,
		0 0.1em 0 #0002 inset,
		0 0.5em 0.5em #fffa inset,
		0 -0.5em 2em 0 #0002 inset;
	justify-content: center;
	height: 11em;
	position: relative;
}
.imac__i-o:before, .imac__i-o:after {
	position: absolute;
}
.imac__i-o:before {
	background: linear-gradient(90deg,currentColor 0.5em,#fff 0.5em 0.7em,#0000 0.7em 68.3em,#d3d9d7 68.3em 68.5em,currentColor 68.5em);
	top: -0.1em;
	width: 100%;
	height: 1.1em;
}
.imac__i-o:after {
	background: #0007;
	box-shadow:
		0 0 0.5em 1em #0007;
	border-radius: 0 0 1em 1em / 0 0 2em 2em;
	top: 9.5em;
	left: 2em;
	width: 65em;
	height: 2em;
	z-index: -1;
}
.imac__speaker {
	background:
		radial-gradient(1em 3em at 85% 50%,#000 30%,#fff3 30% 39%,#fff0 40%),
		radial-gradient(1em 3em at 85% 50%,#000 30%,currentColor 30% 49%,#0000 50%),
		radial-gradient(#0000 35%, currentColor 36%) 0 0 / 0.5em 0.5em,
		radial-gradient(3.5em 3.5em at center,#9a939b,#d3d9d7 30% 48%,#d3d9d700 50%),
		radial-gradient(100% 100% at center,#d3d9d700 40%,#d3d9d7 42% 46%,#d3d9d700 47%),
		linear-gradient(60deg,#0000 45%,#000 46% 54%,#0000 55%),
		linear-gradient(#0000 43%,#000 44% 56%,#0000 57%),
		linear-gradient(-60deg,#0000 45%,#000 46% 54%,#0000 55%),
		radial-gradient(100% 100% at center,#d3d9d700 40%,#d3d9d7 42%);
	background-color: #000;
	border-radius: 5em / 4em;
	box-shadow: 0 0 0.1em 0.2em #fff7;
	width: 10.5em;
	height: 8.5em;
}
.imac__speaker--flipped {
	box-shadow: 0 0 0.1em 0.2em #fff3;
	transform: scaleX(-1);
}
.imac__headphone-jacks {
	background-image:
		radial-gradient(2em 2em at 30% 55%,#7d7453 15%,#eee 16% 20%,#eee0 21% 34%,#0000 35%,#0002 44%,#eee 45% 49%,#0002 50%,#0000 60%),
		radial-gradient(0.4em 1.4em at 30% 55%,#eee 45% 49%,#eee0 50%),
		radial-gradient(2em 2em at 70% 55%,#6c070d 15%,#eee 16% 20%,#eee0 21% 34%,#0000 35%,#0002 44%,#eee 45% 49%,#0002 50%,#0000 60%),
		radial-gradient(0.4em 1.4em at 70% 55%,#eee 45% 49%,#eee0 50%);
	background-color: #0002;
	border-radius: 1.25em;
	box-shadow:
		0 0 0 0.1em #fff7,
		0 0 0.5em #0003;
	margin: 0 0.5em;
	width: 6em;
	height: 2.5em;
}
.imac__headphones-icon {
	display: block;
	margin: auto;
	transform: translateY(2.7em);
	width: 1em;
	height: 1em;
}
.imac__disc-slot {
	background: #000;
	border-radius: 1.5em;
	box-shadow:
		0 0 1em 0.4em #0002,
		0 0 0 0.2em #d3d9d7 inset,
		0 0 0 0.4em currentColor inset,
		0 0 0 0.7em #0004 inset,
		0.9em 0 0 #0002 inset,
		-0.9em 0 0 #0002 inset,
		0 0 0 1.1em currentColor inset,
		0 -1.4em 0.1em #d3d9d7 inset,
		0 1.4em 0.1em #d3d9d7 inset;
	align-self: flex-start;
	margin-top: 1.5em;
	width: 27.5em;
	height: 3em;
}
.imac__disc-slot:before {
	background:
		linear-gradient(90deg,#0000 1em 6em,#0007 6em 7em,#0000 7em) -3.25em 0.2em / 7em 0.4em repeat-x,
		linear-gradient(90deg,#0000 1em 6em,#0007 6em 7em,#0000 7em) -3.25em 2.4em / 7em 0.4em repeat-x;
	width: 100%;
	height: 100%;
}
.imac__power-btn {
	background: #d3d9d7;
	border-radius: 50%;
	box-shadow: 
		0 -0.5em 1em #0003,
		0 0 0 0.2em #d3d9d7 inset,
		0 0 0 0.4em #eee inset;
	cursor: pointer;
	margin: 0 2em;
	width: 2.5em;
	height: 2.5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.imac__power-icon {
	opacity: 0.5;
	width: 1.1em;
	height: 1.1em;
}
.imac__power-btn:active, .imac__power-btn:focus {
	outline: transparent;
}
.imac__power-btn:active {
	box-shadow: 
		0 0 0.3em 0.1em #0003 inset,
		0 -0.5em 1em #0003,
		0 0 0 0.2em #d3d9d7 inset,
		0 0 0 0.4em #eee inset;
}
.imac__power-btn:active .imac__power-icon {
	width: 1em;
	height: 1em;
}
.imac--on .imac__power-btn {
	background: #7f7;
	box-shadow: 
		0 -0.5em 1em #7f7,
		0 0 0 0.2em #7f7 inset,
		0 0 0 0.4em #afa inset;
}
.imac--on .imac__screen:before {
	background-image: url("https://i.ibb.co/c2BwC0Y/mac-startup.gif");
	background-color: #b2b2b2;
	box-shadow:
		0 -0.1em 0 0.2em #eee,
		0 -0.1em 0.2em 0.4em #777,
		0 0 0.4em 1.2em #d3d9d7,
		0 0 0 1.4em #aaa,
		0 0 0 1.5em #eee,
		0 1em 0.25em #000 inset,
		0 -0.5em 0.25em #000 inset,
		1em 0 0.5em #000 inset,
		-1em 0 0.5em #000 inset;
}
.imac--on .imac__power-btn:active {
	box-shadow: 
		0 0 0.3em 0.1em #0003 inset,
		0 -0.5em 1em #7f7,
		0 0 0 0.3em #7f7 inset,
		0 0 0 0.5em #afa inset;
}
            
          
!
            
              document.querySelector(".imac__power-btn").addEventListener("click",function(){
	let cl = document.querySelector(".imac").classList,
		onStateClass = "imac--on";

	if (cl.contains(onStateClass))
		cl.remove(onStateClass);
	else
		cl.add(onStateClass);
});
            
          
!
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