-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
98 lines (89 loc) · 4.26 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="stylesheets/front.css">
<link rel="stylesheet" type="text/css" href="stylesheets/back.css">
</head>
<body>
<div id="controls">
<input id="multiplier" type="number" value="10">
<select id="side">
<option value="front">Front side</option>
<option value="back">Back side</option>
</select>
<button id="export">Create canvas (experimental)</button>
</div>
<div id="main-container">
<div class="card-container card-back">
<div class="back-header">
<img class="round" src="images/me.png">
<div class="header-text">
<span class="fat-text">DIRK-JAN WASSINK | </span><span>Software & Webdeveloper</span>
</div>
</div>
<div class="back-content">
<div class="cards-container">
<div class="left-cards-container">
<div class="card clearfix">
<div class="icon"><i class="fa fa-user fa-2x"></i>
</div>
<h1>Hi I'm Dirk-Jan</h1>
<p>I am a student at the Saxion University of Applied Science. There I study informatics.</p>
<p>In my spare time I develop applications, especially web applications.</p>
<p>When I am not busy developing stuff I am either out with friends, watching a movie, playing the bass-guitar or just relaxing.</p>
</div>
</div>
<div class="right-cards-container">
<div class="card clearfix">
<div class="icon"><i class="fa fa-linkedin fa-2x"></i>
</div>
<p>linkedin.com/in/djwassink</p>
</div>
<div class="card clearfix">
<div class="icon"><i class="fa fa-github fa-2x"></i>
</div>
<p>github.com/djwassink</p>
</div>
<div class="card clearfix">
<div class="icon"><i class="fa fa-mobile fa-2x"></i>
</div>
<p>+31 00000000</p>
</div>
<div class="card clearfix">
<div class="icon"><i class="fa fa-globe fa-2x"></i>
</div>
<p>dirkjanwassink.nl</p>
</div>
<div class="card clearfix">
<div class="icon"><i class="fa fa-inbox fa-2x"></i>
</div>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-container card-front">
<div class="front-content">
<img class="round" src="images/me.png">
<div class="name-fit text-center">
<span class="fat-text">DIRK-JAN WASSINK</span>
</div>
<div class="title-fit text-center">
<span>Software & Webdeveloper</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/FitText.js/jquery.fittext.js"></script>
<script type="text/javascript" src="bower_components/html2canvas/build/html2canvas.min.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>