root@anesena #~: hello world! (HTML, CSS, Javascript)
HTML
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>root@anesena #~:</title>
</head>
<body>
<div class="terminal">
<span class="dollar"></span> hello world!
<br/>
<span class="dollar"></span> i'm sena
<br/>
<span class="dollar"></span> a freelance writer
<br/>
<span class="dollar"></span> based in bali, indonesia
<br/>
<span class="dollar"></span> play and make a simple game
<br/>
<span class="dollar"></span> nice to meet you
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
html,
body {
height: 100%;
margin: 0;
width: 100%;
}
body {
font: 12px "Monaco", Inconsolata, monospace;
background: #000;
color: #f8f8f8;
}
.terminal {
background: transparent;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -125px;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.4);
width: 300px;
font: inherit;
border: none;
outline: none;
color: inherit;
}
.dollar:before {
content: 'root@anesena #~:';
color: #a850d8;
}
.home {
color: #e28d47;
padding-bottom: 3px;
}
a {
font: 12px "Monaco", Inconsolata, monospace;
text-decoration: underline;
color: #f8f8f8;
}
JAVASCRIPT
// Typewriter.js
// https://github.com/ronv/Typewriter.js
$.fn.typewriter = function() {
this.each(function() {
var c = $(this),
b = c.html(),
a = 0,
d = 0;
c.html("");
var e = function() {
if ("<" == b.substring(a, a + 1)) {
var f = new RegExp(/<span class="instant"/),
g = new RegExp(/<span class="clear"/);
if (b.substring(a, b.length).match(f)) a += b.substring(a, b.length).indexOf("</span>") + 7;
else if (b.substring(a, b.length).match(g)) d = a, a += b.substring(a, b.length).indexOf("</span>") + 7;
else
for (;
">" != b.substring(a, a + 1);) a++
}
c.html(b.substring(d, a++) + (a & 1 ? "_" : ""));
a >= b.length || setTimeout(e, 70 + 100 *
Math.random())
};
e()
});
return this
};
$(".terminal").typewriter();
1 Response