-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (106 loc) · 2.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>satnami.info</title>
<link rel="stylesheet" href="assets/css/font.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<style type="text/css">
html,
body,
table,
table tbody tr td {
width: 100%;
height: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font: 16px 'Special Elite';
background: url(assets/img/crossword.png);
}
a, a:hover {
text-decoration: none;
color: #444;
}
a:hover {
color: #222;
}
#links {
text-align: center;
vertical-align: middle;
font-size: 128px;
}
.center {
text-align: center;
vertical-align: middle;
}
#links .blog {
margin-right: 32px;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td id="links">
<a class="hidden envelope" target="_blank" href="mailto:mssatnami@gmail.com">
<i class="fa fa-envelope-square"></i>
</a>
<a class="hidden linkedin" target="_blank" href="http://linkedin.com/in/satnami">
<i class="fa fa-linkedin-square"></i>
</a>
<a class="hidden github" target="_blank" href="https://github.com/satnami">
<i class="fa fa-github-square"></i>
</a>
<a class="hidden bitbucket" target="_blank" href="https://bitbucket.com/satnami">
<i class="fa fa-bitbucket-square"></i>
</a>
<a class="hidden skype" href="skype:sami.almouhtasb">
<i class="fa fa-skype"></i>
</a>
</td>
</tr>
<tr class="center">
<td>Mhd Sami Al Mouhtaseb</td>
</tr>
<tr class="center">
<td><span class="copyright">aka <a href="http://satnami.github.io">SATNAMI ©</a></span></td>
</tr>
</tbody>
</table>
<script src="assets/js/zepto.min.js"></script>
<script type="text/javascript">
$('a').on('click', function (event) {
event.preventDefault()
$(this).addClass('animated pulse')
.siblings().addClass('animated fadeOut')
setTimeout($.proxy(function () {
location = $(this).attr('href')
}, this), 512)
})
$('a i').each(function (i) {
var d = Math.floor(Math.random() * 10 - 5)
$(this).css({
MozTransform: 'rotate(' + d + 'deg)',
WebkitTransform: 'rotate(' + d + 'deg)',
OTransform: 'rotate(' + d + 'deg)',
transform: 'rotate(' + d + 'deg)'
})
setTimeout($.proxy(function () {
$(this).parent().toggleClass('hidden animated bounceIn').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass('animated bounceIn')
})
}, this), Math.floor(Math.random() * 250))
})
</script>
</body>
</html>