-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (102 loc) · 5.78 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
119
120
121
<!DOCTYPE html>
<html class="no-js" lang="en">
<!-- Head START -->
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<!-- Mobile -->
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Skills Of A Misspent Youth | a CSS Poster by Bill Karkavos
</title>
<meta content="Bill Karkavos | bill-karkavos.com" name="author">
<meta content="A one screen CSS Poster with a fullscreen HTML5 responsive video background, pseudo elements and CSS Text Hover tweaks." name="description">
<meta content="all,follow" name="robots">
<!-- Website Favicon -->
<link href="img/fav/favicon.ico" rel="icon" type="image/x-icon">
<!-- Apple iOS devices and Google Android Devices -->
<link href="img/fav/protest-icon-152-213225.png" rel="apple-touch-icon-precomposed">
<!-- IE 10 Metro Tile Icon -->
<meta content="#ffffff" name="msapplication-TileColor">
<meta content="img/fav/protest-icon-144-213225.png" name="msapplication-TileImage">
<!-- Everything Else -->
<link href="img/fav/protest-icon-152-213225.png" rel="apple-touch-icon-precomposed" sizes="152x152">
<link href="img/fav/protest-icon-144-213225.png" rel="apple-touch-icon-precomposed" sizes="144x144">
<link href="img/fav/protest-icon-120-213225.png" rel="apple-touch-icon-precomposed" sizes="120x120">
<link href="img/fav/protest-icon-114-213225.png" rel="apple-touch-icon-precomposed" sizes="114x114">
<link href="img/fav/protest-icon-72-213225.png" rel="apple-touch-icon-precomposed" sizes="72x72">
<link href="img/fav/protest-icon-57-213225.png" rel="apple-touch-icon-precomposed">
<link href="img/fav/protest-icon-32-213225.png" rel="icon" sizes="32x32">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet" type='text/css'>
<!-- Animsition CSS -->
<link href="css/animsition.min.css" rel="stylesheet" type='text/css'>
<!-- Normalize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" type='text/css'>
<!-- Local -->
<!-- <link href="css/normalize.min.css" rel="stylesheet" type='text/css'> -->
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400' rel='stylesheet' type='text/css'>
<!-- Modernizr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- Local -->
<!-- <script src="js/modernizr.min.js"></script> -->
</head>
<body>
<section class="animsition" data-animsition-in="fade-in" data-animsition-out="fade-out">
<div class="wrapper">
<div class="wrapper-inner animsition-child animsition-child--first">
<p class="symbols">
<span>♫</span><span>☢</span><span>❤</span><span>♂</span><span>✈</span><span>♞</span><span>✌</span>
</p>
<p class="title">
<span>Skills</span> <span>Of</span> <span>A</span> <span>Misspent</span> <span>Youth</span>
</p>
<p class="tagline">
<span>Never know when they come useful</span>
</p>
</div>
</div>
<video autoplay="" class="video" loop="" poster="img/bg-1-80.png" preload="none">
<source src="img/video-1.mp4" type="video/mp4"></video>
</section>
<div class="buttons">
<a class="btn animsition-link" href="index.html">1</a>
<a class="btn animsition-link" href="2.html">2</a>
<a class="btn animsition-link" href="3.html">3</a>
<a class="btn animsition-link" href="4.html">4</a>
</div>
<div class="twitter">
<a class="twitter-follow-button" data-show-count="false" href="https://twitter.com/BillKarkavos">Follow @BillKarkavos</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<a class="twitter-share-button" data-text="Check out this site" data-via="BillKarkavos" href="https://twitter.com/share">Tweet</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<!-- Vendor JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Local -->
<!-- <script src="js/query.min.js"></script> -->
<!-- Animsition JS -->
<script src="js/jquery.animsition.min.js"></script>
<script>
$(document).ready(function () {
$(".animsition").animsition().one('animsition.end',function(){
$(this).find('.animsition-child--first').addClass('zoom-in-sm');
})
});
</script>
</body>
</html>