Skip to content

Instantly share code, notes, and snippets.

@DaljeetDhaliwal

DaljeetDhaliwal/index.html

Last active January 12, 2024 18:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DaljeetDhaliwal/8631601 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DaljeetDhaliwal/8631601 to your computer and use it in GitHub Desktop.
Download ZIP
under construction
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<title>stark coffee table keyboard</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="key-wrapper">
<div class="top"></div><br/>
<h1><i> STARK INDUSTRIES</i></h1>
<br/><br/><br/><br/>
<h5 class="type">StarkSearch 1.0 Beta Powered By</h5>
<div>
<center><span><input type="text" name="username" class="input"><img src="http://www.seomofo.com/downloads/new-google-logo-knockoff.png" class="img"></span></center>
</div>
<br/><br/>
<ul class="row">
<li class="key k1">1</li>
<li class="key k7">2</li>
<li class="key k9">3</li>
<li class="key k2">4</li>
<li class="key k4">5</li>
<li class="key k9">6</li>
<li class="key k5">7</li>
<li class="key k3">8</li>
<li class="key k9">9</li>
<li class="key k0">0</li>
<li class="key k3">-</li>
<li class="key k9">=</li>
<li class="key k40">Bspc</li>
</ul>
<ul class="row">
<li class="key k81">q</li>
<li class="key k87">w</li>
<li class="key k69">e</li>
<li class="key k82">r</li>
<li class="key k84">t</li>
<li class="key k89">y</li>
<li class="key k85">u</li>
<li class="key k73">i</li>
<li class="key k79">o</li>
<li class="key k80">p</li>
<li class="key k79">[</li>
<li class="key k80">]</li>
</ul>
<ul class="row">
<li class="key k65">a</li>
<li class="key k83">s</li>
<li class="key k68">d</li>
<li class="key k70">f</li>
<li class="key k71">g</li>
<li class="key k72">h</li>
<li class="key k74">j</li>
<li class="key k75">k</li>
<li class="key k76">l</li>
<li class="key k74">;</li>
<li class="key k75">'</li>
<li class="key k40">Enter</li>
</ul>
<ul class="row">
<li class="key k40">shift</li>
<li class="key k90">z</li>
<li class="key k88">x</li>
<li class="key k67">c</li>
<li class="key k86">v</li>
<li class="key k66">b</li>
<li class="key k78">n</li>
<li class="key k77">m</li>
<li class="key k188">,</li>
<li class="key k40">shift</li>
</ul>
<ul class="row">
<li class="key k32"></li>
<li class="key k40"></li>
</ul>
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Raw
script.js
// 1) Click anwyere in the window bellow
// 2) Start pressing those keys
$(window).keydown(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.k' + key).addClass('active');
console.log(key);
});
$(window).keyup(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.k' + key).removeClass('active');
});
Raw
style.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
background: url(http://www.wallsave.com/wallpapers/1920x1080/jarvis/59402/jarvis-iron-man-hd-59402.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Ubuntu', sans-serif;
color:#f5f4e9;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
/*h2 {
position: absolute;
margin: -200px 0 0;
top: 50%;
width: 100%;
color: #444;
text-align: center;
}
span {
padding: 0 0 2px;
border-bottom: 1px dotted #444;
cursor: pointer;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
span:hover {
color: #fd0;
}*/
.key-wrapper {
height:500px;
width:850px;
border-color:#eae9d2 #eae9d2 #eae9d2 #eae9d2;
opacity:0.7;
position:absolute;
top: 20%;
left: 40%;
margin-top:10px;
border-width:medium;
border-style:solid;
border-radius:20px;
margin: -90px -294px;
}
.row {text-align: center;}
.key {
margin: 3px 1px;
width: 40px;
height: 40px;
border: 2px solid #eae9d2;
opacity:0.8;
border-radius: 5px;
display: inline-block;
cursor:pointer;
text-align:justify;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
.k32 {
width: 346px;
}
.k40 {
width: 100px;
}
.key299 {
width: 150px;
}
.active {
border: 2px solid #fd0;
color: #fd0;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
transition: 0s;
}
.top{
width:100%;
height:80px;
background-color:rgba(000,000,000,0.7);
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.input {
border:none;
width:400px;
height:30px;
background-color:#eae9d2;
opacity:0.5;
margin-left:90px;
}
.img {
vertical-align:bottom;
width:100px;
}
.type {
margin-left:480px;
font-weight:bolder;
color:#eae9d2;
opacity:0.8;
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: #eae9d2;
opacity:0.8;
font-style:italic;
font-size: 2.8rem;
font-weight: bold;
position: absolute;
margin-left:170px;
margin-top:50px;
top: 50px;
}
h1:before {
border-left: 535px solid transparent;
border-bottom: 10px solid #eae9d2;
content: ' ';
height: 0;
position: absolute;
right: -74px;
top: -10px;
width: 0;
}
h1:after {
border-left: 100px solid transparent;
border-top: 16px solid #eae9d2;
content: ' ';
height: 0;
position: absolute;
right: -85px;
top: 24px;
transform: rotate(-47deg);
-webkit-transform:rotate(-47deg);
width: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment