Androguide/watch.html

## watch.html
<!DOCTYPE html>
<html>

<head>
	<title>CSS WATCH</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
	<style type="text/css">

	body {
	  background: #00bad2;
	  font-family: Roboto, 'Helvetica', sans-serif;
	  font-weight: 100;
	  color: #fff;
	}

	h1 {
	  font-weight: 100;
	  color: #fff;
	}

	#watch {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 16.7em;
	}

	#watch_face {
		height: 15em;
		width: 15em;
		border-radius: 50%;
		background: #222;
		border: 8px solid #999;
		position: relative;
		z-index: 99;
		box-shadow: 0 0 6px #555;
	}

	#watch_display {
		position: relative;
		z-index: 99;
		border-radius: 50%;
		height: 96.75%;
		width: 96.75%;
		border: 4px solid #555;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.9)100%);
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
	}

	#watch_button {
		position: relative;
		left: 15.4em;
		height: 15px;
		width: 12px;
		bottom: 23em;
		background: #787878;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	#top_band, #bottom_band {
		width: 7.5em;
		background: #222;
		position: relative;
		margin-left: 3.75em;
		margin-right: 3.75em;
		height: 7.5em;
		border-left: 8px solid #777;
		border-right: 8px solid #777;
		border-radius: 5px;
		box-shadow: 0 0 12px #555;
	}

	#top_band {
		bottom: -1.75em;
	}

	#bottom_band {
		top: -1.75em;
		height: 8.5em;
	}

	#screen_image {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		border-radius: 50%;
		top: -15em;
	}
	</style>
</head>

<body>
	<header>
		<h1>Android Wear</h1>
	</header>
	<div id="watch">
		<div id="top_band"></div>
		<div id="watch_face">
			<div id="watch_display"></div>
		    <img id="screen_image" src="android-wear-screenshot.png">
			<div id="watch_button"></div>
		</div>
		<div id="bottom_band"></div>
	</div>

	<h1>This watch was made with the most premium material: CSS</h1>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS WATCH</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
	<style type="text/css">

	body {
	background: #00bad2;
	font-family: Roboto, 'Helvetica', sans-serif;
	font-weight: 100;
	color: #fff;
	}

	h1 {
	font-weight: 100;
	color: #fff;
	}

	#watch {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 16.7em;
	}

	#watch_face {
	height: 15em;
	width: 15em;
	border-radius: 50%;
	background: #222;
	border: 8px solid #999;
	position: relative;
	z-index: 99;
	box-shadow: 0 0 6px #555;
	}

	#watch_display {
	position: relative;
	z-index: 99;
	border-radius: 50%;
	height: 96.75%;
	width: 96.75%;
	border: 4px solid #555;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.9)100%);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	}

	#watch_button {
	position: relative;
	left: 15.4em;
	height: 15px;
	width: 12px;
	bottom: 23em;
	background: #787878;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	}

	#top_band, #bottom_band {
	width: 7.5em;
	background: #222;
	position: relative;
	margin-left: 3.75em;
	margin-right: 3.75em;
	height: 7.5em;
	border-left: 8px solid #777;
	border-right: 8px solid #777;
	border-radius: 5px;
	box-shadow: 0 0 12px #555;
	}

	#top_band {
	bottom: -1.75em;
	}

	#bottom_band {
	top: -1.75em;
	height: 8.5em;
	}

	#screen_image {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
	top: -15em;
	}
	</style>
	</head>

	<body>
	<header>
	<h1>Android Wear</h1>
	</header>
	<div id="watch">
	<div id="top_band"></div>
	<div id="watch_face">
	<div id="watch_display"></div>
	<img id="screen_image" src="android-wear-screenshot.png">
	<div id="watch_button"></div>
	</div>
	<div id="bottom_band"></div>
	</div>

	<h1>This watch was made with the most premium material: CSS</h1>
	</body>
	</html>