-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path10000hours.html
104 lines (104 loc) · 4.3 KB
/
10000hours.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/10000hours/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/10000hours.css">
<title>1만 시간의 법칙</title>
</head>
<body>
<section id="contents">
<div class="wrapper">
<div class="title">
<img class="clock_img" src="images/10000hours/clock.png" alt="background">
<div class="title_img">
<img src="images/10000hours/title.png" alt="1만 시간의 법칙">
</div>
</div>
<div class="intro">
<div class="intro_saying">"연습은 어제의 당신보다 당신을 더 낫게 만든다."</div>
<div class="explain">
<div class="quotes">
<img src="images/10000hours/quotes.png" alt="따옴표">
</div>
<p>
<span>1만 시간의 법칙</span>은<br>어떤 분야의 전문가가 되기 위해서는<br>최소한 1만 시간의 훈련이 필요하다는 법칙이다.
</p>
</div>
</div>
<div class="inputs">
<div class="field">
<p>나는</p>
<input id="field_value" type="text" placeholder="예)프로그래밍">
<p>전문가가 될 것이다.</p>
</div>
<div class="time">
<p>그래서 앞으로 매일 하루에</p>
<div>
<input id="time_value" type="number" placeholder="예)5">
<p>시간씩 훈련할 것이다.</p>
</div>
</div>
</div>
<div class="start">
<div class="btn_wrap">
<button class="start_btn">나는 며칠 동안 훈련을 해야 1만 시간이 될까?</button>
<div class="click_img">
<img src="images/10000hours/click.png" alt="클릭">
</div>
</div>
</div>
<div class="result_loading">
<div class="img_wrap">
<img src="images/10000hours/loading.png" alt="로딩 중">
</div>
</div>
<div class="result">
<div class="result_wrap">
<div>
당신은<span class="field_result"></span>전문가가 되기 위해서
</div>
<div>
대략<span class="time_result"></span>일 이상 훈련하셔야 합니다! :)
</div>
</div>
<div class="buttons">
<div class="go">
<button class="modal_btn">훈련하러 가기 GO!GO!</button>
</div>
<div class="share">
<button class="share_btn">공유하기</button>
</div>
</div>
</div>
</div>
</section>
<section id="modal">
<div class="modal_wrap">
<div class="cheer">
<h1>화이팅!!♥♥♥</h1>
<h3>당신의 꿈을 응원합니다!</h3>
</div>
<div class="licat_img">
<img src="images/10000hours/licat.png" alt="라이캣 응원">
</div>
<div class="btn">
<button class="close_btn">종료하고 진짜 훈련하러 가기 GO!GO!</button>
<p>(그냥 닫기 버튼입니다.)</p>
</div>
</div>
</section>
<section id="copyright">
<div class="logo_img">
<img src="images/10000hours/logo.png" alt="weniv">
</div>
<p>
※ 본 서비스 내 이미지 및 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다.<br>
수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
</p>
</section>
<script type="text/javascript" src="js/10000hours.js"></script>
</body>
</html>