Skip to content

Instantly share code, notes, and snippets.

@gtk2k

gtk2k/theta_s.html

Created October 28, 2015 05:54
Show Gist options
  • Save gtk2k/84c511f4d1e8101c88b7 to your computer and use it in GitHub Desktop.
Save gtk2k/84c511f4d1e8101c88b7 to your computer and use it in GitHub Desktop.
Download ZIP
DOMでTHETA S
Raw
theta_s.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM THETA S</title>
.theta-camera{
width:140px;
position:relative;
}
.theta-camera *{
box-sizing:border-box;
}
.theta-embos{
position:absolute;
left:50%;
margin-left:-45px;
top:20px;
width:90px;
height:200px;
border: 2px solid white;
border-radius:50px;
}
.theta-lens{
position:absolute;
left:50%;
margin-left:-35px;
top:28px;
width:70px;
height:70px;
border: 2px solid white;
border-radius: 35px;
}
.theta-lens-mini{
position:absolute;
left:50%;
margin-left:-20px;
top:10px;
width:40px;
height:40px;
border-radius: 20px;
box-shadow:-1px -1px 1px white;
}
.theta-button-led{
position:absolute;
left:50%;
margin-left:-4px;
top:138px;
width:7px;
height:7px;
background:#327cf1;
border-radius: 3px;
}
.theta-button{
position:absolute;
left:50%;
margin-left:-20px;
top:155px;
width:40px;
height:40px;
border: 1px solid white;
border-radius: 20px;
}
.theta-wifi-led{
position:absolute;
left:50%;
margin-left:-7px;
top:240px;
width:14px;
height:14px;
background-repeat:no-repeat;
background-image:url('data:image/svg+xml;utf8,<svg fill="#327cf1" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>');
}
.theta-camera-led{
position:absolute;
left:50%;
margin-left:-7px;
top:260px;
width:14px;
height:14px;
background-repeat:no-repeat;
background-image:url('data:image/svg+xml;utf8,<svg fill="#327cf1" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}
.theta-top{
background:black;
width:140px;
height:60px;
border: 2px solid white;
border-bottom:none;
border-radius: 50% 50% 0 0;
}
.theta-bottom{
background:black;
width:140px;
height:330px;
border:2px solid white;
border-top:none;
border-radius: 0 0 10px 10px;
}
</head>
<body>
<div class="theta-camera">
<div class="theta-embos"></div>
<div class="theta-lens">
<div class="theta-lens-mini"></div>
</div>
<div class="theta-top"></div>
<div class="theta-button"></div>
<div class="theta-button-led"></div>
<div class="theta-wifi-led"></div>
<div class="theta-camera-led"></div>
<div class="theta-bottom"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment