Skip to content

Instantly share code, notes, and snippets.

@vcxp

vcxp/goxzkbb.markdown

Created November 8, 2021 17:27
Show Gist options
  • Save vcxp/65320950f15e87cc0f3ee505092f5214 to your computer and use it in GitHub Desktop.
Save vcxp/65320950f15e87cc0f3ee505092f5214 to your computer and use it in GitHub Desktop.
Download ZIP
gOxzKbB
Raw
index.html
<html>
<head>
<title>Tardis</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="name">
<div>Gerwin van Royen</div>
<div><a target="_blank" href="https://www.twitter.com/gerwinvanroyen">@gerwinvanroyen</a></div>
</div>
<div class="perspective">
<div class="tardis-wrap">
<div class="tardis">
<!-- start of side -->
<div class="side">
<div class="top-sign">
<div class="text">
<span class="left">POLICE</span>
<span class="tiny">PUBLIC CALL</span>
<span class="right">BOX</span>
</div>
</div>
<div class="door-frame">
<div class="door door-left">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="sign"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
<div class="door door-right">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
</div>
</div>
<!-- end of side -->
<!-- start of side -->
<div class="side">
<div class="top-sign">
<div class="text">
<span class="left">POLICE</span>
<span class="tiny">PUBLIC CALL</span>
<span class="right">BOX</span>
</div>
</div>
<div class="door-frame">
<div class="door door-left">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
<div class="door door-right">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
</div>
</div>
<!-- end of side -->
<!-- start of side -->
<div class="side">
<div class="top-sign">
<div class="text">
<span class="left">POLICE</span>
<span class="tiny">PUBLIC CALL</span>
<span class="right">BOX</span>
</div>
</div>
<div class="door-frame">
<div class="door door-left">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
<div class="door door-right">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
</div>
</div>
<!-- end of side -->
<!-- start of side -->
<div class="side">
<div class="top-sign">
<div class="text">
<span class="left">POLICE</span>
<span class="tiny">PUBLIC CALL</span>
<span class="right">BOX</span>
</div>
</div>
<div class="door-frame">
<div class="door door-left">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
<div class="door door-right">
<div class="door-inset"></div>
<div class="door-inset b"></div>
<div class="door-inset c"></div>
<div class="window">
<div class="pane a"></div><div class="pane b"></div><div class="pane c"></div>
<div class="pane d"></div><div class="pane e"></div><div class="pane f"></div>
</div>
</div>
</div>
</div>
<!-- end of side -->
<div class="roof"></div>
<div class="roof-top">
<div class="roof-panel a"></div>
<div class="roof-panel b"></div>
<div class="roof-panel c"></div>
<div class="roof-panel d"></div>
<div class="top-lid"></div>
</div>
<div class="light">
<div class="light-panel a"><div class="bottom"></div><div class="top"></div></div>
<div class="light-panel b"><div class="bottom"></div><div class="top"></div></div>
<div class="light-panel c"><div class="bottom"></div><div class="top"></div></div>
<div class="light-panel d"><div class="bottom"></div><div class="top"></div></div>
<div class="light-lid"></div>
</div>
<!-- start of floor -->
<div class="floor">
<div class="floor-panel a"></div>
<div class="floor-panel b"></div>
<div class="floor-panel c"></div>
<div class="floor-panel d"></div>
<div class="floor-lid"></div>
</div>
<!-- end of floor -->
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body{
font-family: arial;
background: #fff;
}
.name{
color: #aaa;
font-size: 12px;
position: fixed;
bottom: 10px;
right: 10px;
text-align: right;
}
.name div:first-of-type{
font-size: 14px;
}
.name a{
color: #aaa;
}
.name a:hover{
color: #888;
}
.left{
float: left;
}
.right{
float: right;
}
.perspective{
perspective: 1200px;
-webkit-perspective: 1200px;
}
.tardis-wrap{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform : translateZ(-300px);
-webkit-transform : translateZ(-300px);
}
.tardis{
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform: rotateX(-20deg) rotateY(-30deg);
-webkit-transform: rotateX(-20deg) rotateY(-30deg);
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin{
from{
transform: rotateX(-20deg) rotateY(0deg);
}
to{
transform: rotateX(-20deg) rotateY(360deg);
}
}
/*
#
# Begin details
#
*/
.tardis .side{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 360px;
background-color: #3f577d;
box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
z-index: 1;
}
.side:nth-of-type(1){
transform : translateZ(100px);
-webkit-transform : translateZ(100px);
}
.side:nth-of-type(2){
transform : rotateY(90deg) translateZ(100px);
-webkit-transform : rotateY(90deg) translateZ(100px);
}
.side:nth-of-type(3){
transform : rotateY(180deg) translateZ(100px);
-webkit-transform : rotateY(180deg) translateZ(100px);
}
.side:nth-of-type(4){
transform : rotateY(-90deg) translateZ(100px);
-webkit-transform : rotateY(-90deg) translateZ(100px);
}
.tardis .roof{
position: absolute;
width: 200px;
height: 200px;
background-color: #3f577d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform : rotateX(-90deg) translateZ(-100px);
-webkit-transform : rotateX(-90deg) translateZ(-100px);
z-index: 2;
}
/* The top roof box */
.roof-top{
position: absolute;
left: 30px;
width: 140px;
height: 140px;
z-index: 2;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.top-lid{
width: 140px;
height: 140px;
background-color: #355683;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform : rotateX(-90deg) translateZ(-89px);
-webkit-transform : rotateX(-90deg) translateZ(-89px);
}
.roof-panel{
position: absolute;
width: 140px;
height: 20px;
background-color: #445d84;
box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
top: -20px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.roof-panel.a{
transform: rotateY(0deg) translateZ(70px);
-webkit-transform: rotateY(0deg) translateZ(70px);
}
.roof-panel.b{
transform: rotateY(90deg) translateZ(70px);
-webkit-transform: rotateY(90deg) translateZ(70px);
}
.roof-panel.c{
transform: rotateY(180deg) translateZ(70px);
-webkit-transform: rotateY(180deg) translateZ(70px);
}
.roof-panel.d{
transform: rotateY(-90deg) translateZ(70px);
-webkit-transform: rotateY(-90deg) translateZ(70px);
}
/* Light */
.light{
position: absolute;
width: 40px;
height: 40px;
top: -60px;
left: 85px;
z-index: 3;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.light-lid{
width: 30px;
height: 30px;
background-color: #eee;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform : rotateX(-90deg) translateZ(-14px);
-webkit-transform : rotateX(-90deg) translateZ(-14px);
}
.light .light-panel{
position: absolute;
width: 30px;
height: 40px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.light .light-panel .bottom{
width: 30px;
height: 12px;
position: absolute;
bottom: 0px;
background-color: #355683;
box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
}
.light .light-panel .top{
width: 30px;
height: 28px;
position: absolute;
top: 0px;
background-color: #eee;
box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #fff, inset 0 1px 0 #fff, inset 0 -1px 0 #fff;
}
.light-panel.a{
transform: rotateY(0deg) translateZ(15px);
-webkit-transform: rotateY(0deg) translateZ(15px);
}
.light-panel.b{
transform: rotateY(90deg) translateZ(15px);
-webkit-transform: rotateY(90deg) translateZ(15px);
}
.light-panel.c{
transform: rotateY(180deg) translateZ(15px);
-webkit-transform: rotateY(180deg) translateZ(15px);
}
.light-panel.d{
transform: rotateY(-90deg) translateZ(15px);
-webkit-transform: rotateY(-90deg) translateZ(15px);
}
/* Floor */
.tardis .floor{
position: absolute;
width: 220px;
height: 220px;
left: -10px;
top: 360px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.floor-lid{
position: absolute;
width: 220px;
height: 220px;
background-color: #355683;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(90deg) translateZ(109px);;
-webkit-transform: rotateX(90deg) translateZ(109px);;
}
.floor-panel{
position: absolute;
width: 220px;
height: 10px;
background-color: #3f577d;
box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.floor-panel.a{
transform: rotateY(0deg) translateZ(110px);
-webkit-transform: rotateY(0deg) translateZ(110px);
}
.floor-panel.b{
transform: rotateY(90deg) translateZ(110px);
-webkit-transform: rotateY(90deg) translateZ(110px);
}
.floor-panel.c{
transform: rotateY(180deg) translateZ(110px);
-webkit-transform: rotateY(180deg) translateZ(110px);
}
.floor-panel.d{
transform: rotateY(-90deg) translateZ(110px);
-webkit-transform: rotateY(-90deg) translateZ(110px);
}
/*
#
# Top sign
#
*/
.side .top-sign{
width: 180px;
height: 28px;
background-color: #445d84;
border: solid 1px #54749f;
box-shadow: 0px 2px 4px rgba(0,0,0,.4);
border-radius: 2px;
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}
.top-sign .text{
background-color: #28394d;
border: solid 1px #54749f;
border-radius: 2px;
width: 100px;
margin: 3px auto;
height: 20px;
color: #fff;
font-size: 12px;
line-height: 20px;
padding: 0px 5px;
box-shadow: inset 0px 0px 3px rgba(0,0,0,.4);
position: relative;
text-shadow: 0px 0px 4px rgba(255,255,255, .6);
}
.text .tiny{
font-size: 4px;
line-height: 6px;
text-align: center;
width: 20px;
position: absolute;
right: 35px;
top: 4px;
}
/*
#
# Door frame
#
*/
.side .door-frame{
position: absolute;
width: 160px;
left: 20px;
top: 35px;
bottom: 0px;
background-color: #445d84;
box-shadow:inset 0px 2px 8px rgba(0,0,0,.5);
z-index: 5;
}
.door-frame .door{
position: absolute;
top: 0px;
bottom: 0px;
width: 77px;
box-shadow:inset 0px 0px 3px rgba(0,0,0,.7);
}
.door.door-left{
left: 0px;
}
.door.door-right{
right: 0px;
}
/* Insets */
.door .door-inset{
position: absolute;
left: 10px;
bottom: 10px;
width: 55px;
height: 65px;
box-shadow:inset 0px .5px 5px rgba(0,0,0,.5);
}
.door-inset:nth-of-type(2){
bottom: 85px;
}
.door-inset:nth-of-type(3){
bottom: 160px;
}
/* Sign */
.door .sign{
position: absolute;
left: 15px;
bottom: 165px;
width: 45px;
height: 55px;
background-color: #d5e4f6;
box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;
}
/* Window */
.door .window{
position: absolute;
left: 10px;
bottom: 235px;
width: 55px;
height: 65px;
background-color: #28475d;
}
.window .pane{
width: 14px;
height: 28px;
background-color: #dfe7fc;
float: left;
margin: 2px;
box-shadow: inset 0px 0px 10px #fff;
}
.pane.a{
margin-left: 3px;
margin-right: 1px;
}
.pane.d{
margin-left: 3px;
margin-right: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment