<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Rolex Oyster Perpetual Submariner - pure HTML/CSS illustration</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="rolex">
<div class="band"></div>
<div class="crown"></div>
<div class="bezel"><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i><i class="bez"></i>
<div class="bezel-gradient"></div>
</div><i class="bez-five-min"></i>
<ul class="bez-num">
<li>10</li>
<li>20</li>
<li>30</li>
<li>40</li>
<li>50</li>
</ul>
<div class="bezel-decor"><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i><i class="bez-min"></i>
</div>
<div class="crystal"></div>
<div class="face">
<div class="content-upper">
<div class="logo">
<div class="logo-left"></div>
<div class="logo-right"></div>
</div>
<p class="name">Rolex</p>
<p class="sub-name">Oyster Perpetual Date</p>
</div>
<div class="content-lower">
<p class="sub-text">Submariner</p>
<p class="sub-num">1000<em>ft</em> = 300<em>m</em></p>
<p class="sub-fine">Superlative Chronometer<br/>Officially Certified</p>
<p class="sub-swiss"><span>Chris</span> <span>made</span></p>
</div><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i><i class="sec"></i>
<div class="marker-triangle"></div>
<div class="marker-square"></div>
<div class="marker-circle"><i class="markers-circle"></i><i class="markers-circle"></i><i class="markers-circle"></i><i class="markers-circle"></i>
</div>
<div class="date"></div>
<div id="date-num"></div>
<div class="hand-hour"><span><i class="hour-decor"></i></span></div>
<div class="hand-min"><span></div>
<div class="hand-sec">
<div class="hand-sec-details"></div>
</div>
</div>
</div>
<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>