Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
	<div class="device">
		<div class="ringer-switch"></div>
		<div class="volume plus"></div>
		<div class="volume minus"></div>
		<div class="side-button"></div>
		<div class="display">
			<div class="speaker"></div>
			<div class="camera"></div>
			<div class="notch">
				<span></span>
				<span></span>
			</div>
			<div class="icons-top">
				<div class="cell">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="wifi">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="battery">
					<span></span>
				</div>
			</div>
			<div class="icon-lock"></div>
			<div class="date-time">
				<div id="time"></div>
				<div id="date"></div>
			</div>
			<video autoplay muted loop>
				<source src="https://v.redd.it/clguls7deun11/DASH_4_8_M" type="video/mp4">
			</video>
			<div class="button button--left">
				<svg width="10" height="26" viewBox="0 0 10 26" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
					<path d="M27.6666667,23 L27.6666667,37 C27.6666667,37.9204746 26.9204746,38.6666667 26,38.6666667 L24,38.6666667 C23.0795254,38.6666667 22.3333333,37.9204746 22.3333333,37 L22.3333333,23 C22.3333333,19.6666667 20,19.6666667 20,15.6666667 C20,15.6666667 30,15.6666667 30,15.6666667 C30,19.6666667 27.6666667,19.6666667 27.6666667,23 Z M25,23 C24.0795254,23 23.3333333,23.7461921 23.3333333,24.6666667 L23.3333333,27.3333333 C23.3333333,28.2538079 24.0795254,29 25,29 C25.9204746,29 26.6666667,28.2538079 26.6666667,27.3333333 L26.6666667,24.6666667 C26.6666667,23.7461921 25.9204746,23 25,23 Z M25,28.3333333 C24.4477153,28.3333333 24,27.8856181 24,27.3333333 C24,26.7810486 24.4477153,26.3333333 25,26.3333333 C25.5522847,26.3333333 26,26.7810486 26,27.3333333 C26,27.8856181 25.5522847,28.3333333 25,28.3333333 Z M20.6666667,13 L29.3333333,13 C29.7015232,13 30,13.2984768 30,13.6666667 L30,14.6666667 L20,14.6666667 L20,13.6666667 C20,13.2984768 20.2984768,13 20.6666667,13 Z" transform="translate(-20.000000, -13.000000)" fill="#FFFFFF" stroke="none" stroke-width="1" fill-rule="evenodd"/>
				</svg>
			</div>
			<div class="button button--right">
				<svg width="22" height="18" viewBox="0 0 22 18" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
					<path d="M19,19.6666667 C21,19.6666667 20.3333333,16.6666667 22.3333333,16.6666667 C24.3333333,16.6666667 27.6666667,16.6666667 27.6666667,16.6666667 C29.6666667,16.6666667 29,19.6666667 31,19.6666667 L33.4361148,19.6666667 C34.3276335,19.6666667 34.6509198,19.7594923 34.9768457,19.9337994 C35.3027716,20.1081065 35.5585602,20.363895 35.7328673,20.689821 C35.9071744,21.0157469 36,21.3390331 36,22.2305519 L36,30.7694481 C36,31.6609669 35.9071744,31.9842531 35.7328673,32.310179 C35.5585602,32.636105 35.3027716,32.8918935 34.9768457,33.0662006 C34.6509198,33.2405077 34.3276335,33.3333333 33.4361148,33.3333333 L16.5638852,33.3333333 C15.6723665,33.3333333 15.3490802,33.2405077 15.0231543,33.0662006 C14.6972284,32.8918935 14.4414398,32.636105 14.2671327,32.310179 C14.0928256,31.9842531 14,31.6609669 14,30.7694481 L14,22.2305519 C14,21.3390331 14.0928256,21.0157469 14.2671327,20.689821 C14.4414398,20.363895 14.6972284,20.1081065 15.0231543,19.9337994 C15.3490802,19.7594923 15.6723665,19.6666667 16.5638852,19.6666667 L19,19.6666667 Z M31.3333333,22.3333333 C31.7015232,22.3333333 32,22.0348565 32,21.6666667 C32,21.2984768 31.7015232,21 31.3333333,21 C30.9651435,21 30.6666667,21.2984768 30.6666667,21.6666667 C30.6666667,22.0348565 30.9651435,22.3333333 31.3333333,22.3333333 Z M25,31.6666667 C27.7614237,31.6666667 30,29.4280904 30,26.6666667 C30,23.9052429 27.7614237,21.6666667 25,21.6666667 C22.2385763,21.6666667 20,23.9052429 20,26.6666667 C20,29.4280904 22.2385763,31.6666667 25,31.6666667 Z M25,30.6666667 C22.790861,30.6666667 21,28.8758057 21,26.6666667 C21,24.4575277 22.790861,22.6666667 25,22.6666667 C27.209139,22.6666667 29,24.4575277 29,26.6666667 C29,28.8758057 27.209139,30.6666667 25,30.6666667 Z M16.3333333,18 L18,18 C18.1840949,18 18.3333333,18.1492384 18.3333333,18.3333333 L18.3333333,19 L16,19 L16,18.3333333 C16,18.1492384 16.1492384,18 16.3333333,18 Z" transform="translate(-14.000000, -16.000000)" fill="#FFFFFF" stroke="none" stroke-width="1" fill-rule="evenodd"/>
				</svg>
			</div>
				<p class="swipe">Swipe up to open</p>
			<div class="home-bar"></div>
		</div>
	</div>
</div>

              
            
!

CSS

              
                $black: #0d0d0d;
$grey: #262626;

html,
body {
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color: white;
	background-color: #eee;
}

.wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.device {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	position: relative;
	top: 1rem;
	width: 376px;
	height: 812px;
	border-radius: 39px;
	box-sizing: border-box;
	transform: rotate(6deg) scale(.85);
	box-shadow:
		25px 60px 125px -25px transparentize($black, .5),
		20px 40px 75px -35px transparentize($black, .4),
		0 0 0 20px $black,
		0 0 0 22px lighten($black, 5%);
}

$offset: -25px;

.ringer-switch {
	position: absolute;
	top: 110px;
	left: $offset;
	height: 30px;
	width: 3px;
	background: $black;
	border-radius: 3px 0 0 3px;
}

.volume {
	position: absolute;
	left: $offset;
	height: 65px;
	width: 3px;
	background: $black;
	border-radius: 3px 0 0 3px;
	
	&.plus {
		top: 170px;
	}
	
	&.minus {
		top: 250px;
	}
}

.side-button {
	position: absolute;
	top: 180px;
	right: $offset;
	height: 95px;
	width: 3px;
	background: $black;
	border-radius: 0 3px 3px 0;
}

.display {
	position: relative;
	width: 100%;
	height: 100%;
	background: black;
	overflow: hidden;
	border-radius: 39px;
}

.notch {
	position: absolute;
	left: 0;
	right: 0;
	width: 206px;
	height: 30px;
	margin: 0 auto;
	background: $black;
	border-radius: 0 0 20px 20px;
	
	span {
		position: absolute;
		width: 6px;
		height: 6px;
		display: block;
		overflow: hidden;		
		
		&:nth-child(1) {
			left: -6px;
			background: radial-gradient(circle at bottom left, transparent 6px, $black 3px);
		}
		
		&:nth-child(2) {
			right: -6px;
			background: radial-gradient(circle at bottom right, transparent 6px, $black 3px);
		}
	}
}

.speaker,
.camera {
	position: absolute;
	top: 7px;
	height: 8px;
	z-index: 1;
}

.speaker {
	display: block;
	left: 0;
	right: 0;
	width: 45px;
	margin: 0 auto;
	border-radius: 4px;
	box-shadow: inset 0 0 1px 2px transparentize(black, .7);
	background: $grey;
}

.camera {
	right: 140px;
	width: 8px;
	border: 2px solid lighten($black, 4%);
	border-radius: 50%;
	box-sizing: border-box;
	background: MidnightBlue;
}

.icons-top {
	position: absolute;
	top: 18px;
	left: 292px;
	width: 70px;
	height: 12px;
	z-index: 1;
	
	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 22px;
		left: 0;
		right: 0;
		width: 50px;
		height: 2px;
		margin: 0 auto;
		border-radius: 1px;
		background: transparentize(white, .6);
	}
	
	.cell {
		display: flex;
		height: 100%;
		
		span {
			display: block;
			align-self: flex-end;
			width: 3px;
			background: white;
			border-radius: 1px;
			
			&:not(:last-child) {
				margin-right: 2px;
			}
			
			&:nth-child(1) {
				height: 4px;
			}
			
			&:nth-child(2) {
				height: 6px;
			}
			
			&:nth-child(3) {
				height: 8px;
			}
			
			&:nth-child(4) {
				height: 10px;
				opacity: .5;
			}
		}
	}
	
	.wifi {
		position: relative;
		transform: rotate(-45deg);
		position: absolute;
		left: 31px;
		
		span {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			border: {
				color: white;
				style: solid;
				width: 2px 2px 0 0;
				radius: 0 100% 0 0;
			}
			
			&:nth-child(1) {
				width: 9px;
  			height: 9px;
			}
			
			&:nth-child(2) {
				width: 5px;
  			height: 5px;
			}
			
			&:nth-child(3) {
				width: 1px;
  			height: 1px;
				background: white;
			}
		}
	}
	
	.battery {
		position: absolute;
		left: 44px;
		top: 0;
		width: 22px;
		height: 10px;
		border: 1px solid transparentize(white, .6);
		border-radius: 3px;
		
		&::after {
			content: '';
			position: absolute;
			top: 3px;
			right: -5px;
			width: 2px;
			height: 4px;
			background: transparentize(white, .6);
			border-bottom-right-radius: 50%;
  		border-top-right-radius: 50%;
		}
		
		span {
			position: absolute;
			left: 2px;
			top: 2px;
			height: 6px;
			width: 10px;
			background: white;
			border-radius: 1px;
		}
	}
}

.icon-lock {
	position: absolute;
	top: 4.5rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 24px;
	height: 22px;
	background: white;
	border-radius: 2px;
	
	&::before {
		content: '';
		display: block;
		position: absolute;
		top: -15px;
		left: 0;
		right: 0;
		width: 12px;
		height: 12px;
		margin: 0 auto;
		border: 3px solid white;
		border-top-right-radius: 50%;
		border-top-left-radius: 50%;
	}
}

.date-time {
	position: absolute;
	top: 6.5rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-size: 22px;
	#time {
		font-size: 75px;
		font-weight: 100;
	}
}

.button {
	position: absolute;
	width: 54px;
	height: 54px;
	bottom: 3rem;
	border-radius: 50%;
	background: transparentize(black, .8);
	
	&--left,
	&--right {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	&--left {
		left: 3rem;
	}
	
	&--right {
		right: 3rem;
	}
}

.swipe {
	position: absolute;
	bottom: 1rem;
	width: 100%;
	font-size: 17px;
	text-align: center;
	opacity: 0;
	animation-name: swipe-p;
  animation-duration: 4s;
  animation-iteration-count: 2;
	animation-delay: .5s;
	animation-timing-function: ease-in-out;
}

.home-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	width: 130px;
	height: 5px;
	margin: 0 auto;
	background: transparentize(white, .2);
	opacity: .75;
	border-radius: 5px;
	animation-name: swipe-bar;
  animation-duration: 4s;
  animation-iteration-count: 2;
	animation-delay: .5s;
	animation-timing-function: ease-in-out;
}

video {
	width: auto;
	height: 100%;
}

@keyframes swipe-p {
  0% {
    opacity: 0; 
		transform: translateY(1rem);
  }
	25% {
    opacity: 0; 
		transform: translateY(1rem);
  }
  50% {
    opacity: 1;
		transform: translateY(0);
  }
	75% {
    opacity: 1; 
  }
  100% {  
    opacity: 0;    
  }
}

@keyframes swipe-bar {
  0% {
		transform: translateY(0);
  }
	25% {
		transform: translateY(0);
  }
	50% {
		transform: translateY(-.5rem);
  }
	75% {
		transform: translateY(0);
  }
  100% {
		transform: translateY(0);
  }
}

              
            
!

JS

              
                var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
  var d = new Date();
	var t = d.toLocaleTimeString([], {
		hour: '2-digit', minute:'2-digit'
	});
	
  var date = d.toLocaleDateString([], {
		day: '2-digit'
	});
  
  var weekday = new Array(7);
  weekday[0] = "Sunday,";
  weekday[1] = "Monday,";
  weekday[2] = "Tuesday,";
  weekday[3] = "Wednesday,";
  weekday[4] = "Thursday,";
  weekday[5] = "Friday,";
  weekday[6] = "Saturday,";

  var day = weekday[d.getDay()];
	
	var month = new Array(12);
  month[0] = "January";
  month[1] = "February";
  month[2] = "March";
  month[3] = "April";
	month[4] = "May";
	month[5] = "June";
	month[6] = "July";
	month[7] = "August";
  month[8] = "September";
  month[9] = "October";
  month[10] = "November";
	month[11] = "December";

  var month = month[d.getDay()];
  
  document.getElementById("date").innerHTML = day + " " + month + " " + date.replace(/^0(?:0:0?)?/, '');
	document.getElementById("time").innerHTML = t;
};
              
            
!
999px

Console