Homepage/index.html at master · jaejunha/Homepage · 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
<!DOCTYPE html>
<html>

	<head>
		<meta property="og:title" content="This is personal page">
		<meta property="og:description" content="Thank you">
		<meta property="og:image" content="https://github.com/LeeSongA/leesonga.github.com/blob/master/image/icon/logo/icon3.png?raw=true">
		<meta name="viewport" content = "width=device-width, initial-scale=0.5, minimum-scale=0.5, user-scalable=no"/>
		<title> SongA's page </title>
		<link rel="shortcut icon" type="image/x-icon" href="https://github.com/LeeSongA/leesonga.github.com/blob/master/image/icon/logo/icon3.png?raw=true"/>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

		<link rel="stylesheet" href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"/>
		<link rel="stylesheet" href="./css/intro.css"/>

		<script>
			var time=0;
			$(document).ready(function(){
					/* 8초 뒤에는 인트로가 끝날것이다 가정 */
					setInterval(function() {
						time+=50;
						if(time >=3500 && time<4000){
							$('.girl1').css('opacity',(time-3500)/500.0);
						}
						else if(time == 4000)
							$('.girl1').css('opacity','1');
						else if(time == 4500){
							$('.girl1').css('opacity','0');
							$('.girl2').css('opacity','1');
						}
						else if(time == 4550){
							$('.girl2').css('opacity','0');
							$('.girl3').css('opacity','1');
						}
						else if(time == 4600){
							$('.girl3').css('opacity','0');
							$('.girl4').css('opacity','1');
						}
						else if(time == 5900){
							$('.girl4').css('opacity','0');
							$('.girl3').css('opacity','1');
						}
						else if(time == 5950){
							$('.girl3').css('opacity','0');
							$('.girl2').css('opacity','1');
						}
						else if(time == 6000){
							$('.girl2').css('opacity','0');
							$('.girl1').css('opacity','1');
						}
						if(time == 8000)
							location.href="./main.html";
					},50);
				}
			);
		</script>
		<style>
			body, html{
				width:100%;
				height:100%;
				margin:0;
				overflow:hidden;
			}
		</style>


	</head>
	<body>

		<div class="fade">
			<img class="big_circle1" src="image/intro/circle-mint.png?raw=true">
			<img class="big_circle2" src="image/intro/circle-white.png?raw=true">
			<img class="big_circle3" src="image/intro/circle-mint.png?raw=true">
			<img class="big_circle4" src="image/intro/circle-white.png?raw=true">
			<img class="gradation" src="image/intro/gradation.png?raw=true">
			<div class="text">TEXT</div>
			<img class="girl1" src="girl1.png">
			<img class="girl2" src="girl2.png">
			<img class="girl3" src="girl3.png">
			<img class="girl4" src="girl4.png">
			<div class="rotate_collection">
				<div class="small_circle1"></div>
				<div class="small_circle2"></div>
				<div class="small_circle3"></div>
				<div class="small_circle4"></div>
				<div class="small_circle5"></div>
				<div class="small_circle6"></div>
				<div class="small_circle7"></div>
				<div class="small_circle8"></div>
			</div>
			<div class="copy_right">Copyright ⓒ 2017 by <b>Song A Lee</b>. All right reserved.</div>
		</div>
	</body>
</html>