48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lonely little box</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div id='viewbox'>
|
|
<div class='box'>
|
|
<div class='cube'>
|
|
<div class='face ft'>
|
|
<div class='face-view'>
|
|
<svg version="1.1" id="cubie" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
viewBox="0 0 6.4 5.1" enable-background="new 0 0 6.4 5.1" xml:space="preserve">
|
|
<circle fill="#000" cx="5.6" cy="0.8" r="0.8"/>
|
|
<circle fill="#000" cx="0.8" cy="0.8" r="0.8"/>
|
|
<path class="sadface hidden" fill="#000" d="M0.3,5.1c2.9,0,2.9,0,5.8,0C5.9,3.6,4.7,2.4,3.3,2.3C1.2,2.3,0.3,4.3,0.3,5.1z"/>
|
|
<path class="happyface" fill="#000" d="M0.3,2.3c2.9,0,2.9,0,5.8,0C5.9,3.8,4.7,5,3.3,5.1C1.2,5.1,0.3,3.1,0.3,2.3z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class='face bk'>
|
|
<div class='face-view'></div>
|
|
</div>
|
|
<div class='face rt'>
|
|
<div class='face-view'></div>
|
|
</div>
|
|
<div class='face lt'>
|
|
<div class='face-view'></div>
|
|
</div>
|
|
<div class='face bm'>
|
|
<div class='face-view'></div>
|
|
</div>
|
|
<div class='face tp'>
|
|
<div class='face-view'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
|
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |