iPhone CSS

index.html

<div class="iphone">
	<div class="screen">
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
		<button class="icon"></button>
	</div>
<button class="home" title="Home"></button>
	<span class="speaker" title="Speaker"></span>
	<span class="camera" title="Camera"></span>
	<span class="proximity" title="Proximity Sensor"></span>

	<button class="silence" title="Silence Switch"></button>
	<button class="volume-up" title="Volume Up"></button>
	<button class="volume-down" title="Volume Down"></button>
	<button class="sleep" title="Sleep"></button>
</div>

iPhone CSS.markdown

iPhone CSS

A mockup of an iPhone using only HTML & CSS. A flexbox layout.

A Pen by C-Rodg on CodePen.

License.

style.scss

$white: #fff;
$athens-gray: #f7f8fa;
$shuttle-gray: #525c6b;
$indigo: #3f74ca;

html,
body {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

button {
	border:none;
	padding: 0;
	outline: none;
	background-color: transparent;
	user-select: none;
}

span {
	box-sizing: border-box;
}

.screen {
	background-color: $indigo;
	display: flex;
	flex-wrap: wrap;
	padding: 1.5vh;
	width: 36vh;
	background: linear-gradient(to top, lighten($indigo, 8%) 11.5vh, $indigo 11.5vh);
}

.icon {
	width: 6vh;
	height: 6vh;
	border-radius: 1.5vh;
	background-color: $athens-gray;
	margin: 1.5vh;
}

.icon:active,
.icon:hover {
	opacity: 0.75;
}

.icon:nth-last-of-type(-n+4){
	margin-top: 3vh;
}

.iphone, 
.screen {
	border: 0.5vh solid $shuttle-gray;
}

.iphone {
	padding: 10vh 1.5vh;
	border-radius: 6vh;
	position: relative;
}

.home,
.camera,
.proximity,
.speaker,
.silence,
.volume-up,
.volume-down,
.sleep {
	position: absolute;
}

.home,
.camera, 
.proximity {
	border-radius: 50%;
}

.speaker,
.silence,
.volume-up,
.volume-down,
.sleep,
.proximity {
	background-color: $shuttle-gray;
}

.home,
.speaker,
.camera,
.proximity {
	left: 50%;
}

.home,
.speaker {
	margin-left: -3vh;
	width: 6vh;
}

.home,
.camera {
	border: 0.5vh solid $shuttle-gray;
}

.home {
	height: 6vh;
	bottom: 2vh;
}

.speaker {
	top: 4.75vh;
	height: 0.5vh;
	border-radius: 0.5vh;
}

.camera {
	width: 1.5vh;
	height: 1.5vh;
	top: 4.25vh;
	margin-left: -6.5vh;
}

.proximity {
	width: 1vh;
	height: 1vh;
	top: 2vh;
	margin-left: -0.5vh;
}

.silence,
.volume-up,
.volume-down,
.sleep {
	width: 0.5vh;
}

.volume-up,
.volume-down,
.sleep {
	height: 5vh;
}

.silence,
.volume-up,
.volume-down {
	left: -0.75vh;
}

.silence {
	height: 3vh;
	top: 10vh;
}

.volume-up,
.sleep {
	top: 17vh;
}

.volume-down {
	top: 24vh;
}

.sleep {
	right: -0.75vh;
}