timeline/index.html at master · vkyin/timeline · GitHub

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
122
123
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="fontawesome/css/font-awesome.min.css" rel="stylesheet"/>
		<style>
			html{
				height: 100%;
			}
			body{
				margin: 0;
				background:-webkit-linear-gradient(top,#4d5055,#383b3e);
				height: 100%;
				overflow: hidden;

				/*test*/
				font-family: "times new roman";
				/*test*/
			}
			ul{
				list-style: none;
				background-image: url(img/bg4.png);
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: hidden;
			}
			ul li{
				margin: 0 auto;
			}
			ul:after{
				content: "";
				display: block;
				width: 2px;
				height: 100%;
				background-color: #26282b;
				margin: 0 auto;
				box-shadow: 0 0 1px 0px rgba(255, 255, 255, 0.3);
				position: absolute;
				top: 0;
				left: calc(50% - 1px);
				z-index: -3;
			}
			.circle{
				border-radius: 50%;
				background-color: #191919;
				text-align: center;
				color: #d3d3d3;
				position: relative;
				width: 56px;
				height: 56px;
				line-height: 55px;
				box-shadow: 0px 2px 10px -7px;
				z-index: 0;
				margin-bottom: 30px;
			}
			.circle:after{
				content: "";
				display: block;
				background: -webkit-linear-gradient(top,#4d5055,#383b3e);
				border-radius: 50%;
				position: absolute;
				top: 3px;
				left: 3px;
				width: 50px;
				height: 50px;
				z-index: -2;
			}
			.circle.small{
				width: 40px;
				height: 40px;
				line-height: 40px;
			}
			.circle.small:after{
				width: 34px;
				height: 34px;
			}
			.avatar img{
				width: 184px;
				height: 184px;
				border-radius: 50%;
				position: absolute;
				top: 7px;
				left: 7px;
				border: solid 1px #131313;
			}
			.avatar{
				width: 200px;
				height: 200px;
				margin-top: 35px;
				margin-bottom: 70px;
			}
			.avatar:after{
				width: 196px;
				height: 196px;
				top: 2px;
				left: 2px;
			}
			input[type=checkbox]{
				/*display: none;*/
				position: absolute;
			}
			label:checked{
				position: absolute;
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="circle avatar"><img src="http://vkslife.sinaapp.com/wp-content/themes/vk/images/avatar.jpg"></li>
			<li class="circle"><i class="icon-camera-retro"></i></li>
			<li class="circle"><input type="checkbox" id="asdf" /><label for="asdf">2014</label></li>
			<li class="circle"><i class="icon-camera-retro"></i></li>
			<li class="circle"><i class="icon-camera-retro"></i></li>
			<li class="circle small"><i class="icon-globe"></i></li>
			<li class="circle"><i class="icon-camera-retro"></i></li>
			<li class="circle"><i class="icon-camera-retro"></i></li>
			<li class="circle small"><i class="icon-user"></i></li>
		</ul>
	</body>
</html>