송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
8830487d 2 parents 5cb62b2a 4bf42aca

Merge branch 'temp1' of http://khuhub.khu.ac.kr/2020104743/EMOJI-HUMAN into temp1

Expand all
Inline Side-by-side
Showing 50 changed files with 3023 additions and 106 deletions
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - iOS 10 chat bubbles Pure CSS</title>
6 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
7 +<link rel="stylesheet" href="./style.css">
8 +
9 +</head>
10 +<body>
11 +<!-- partial:index.partial.html -->
12 +
13 +
14 +
15 +
16 +<section>
17 +<!-- 1번 대화 -->
18 + <div class="from-them">
19 + <p>안녕하세요!!<br>
20 + 저는 이모지 인간이라고 해요 @.@ <br>
21 + 당신을 만나게 되어서 매우 반가워요 :)
22 + </p>
23 + </div>
24 + <div class="clear"></div>
25 +
26 + <div class="from-me slam">
27 + <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
28 + </div>
29 + <div class="clear"></div>
30 +<!-- 1번 대화 -->
31 +
32 +<!-- 2번 대화 -->
33 + <div class="from-me gentle">
34 + <p>이모지 인간은 뭔가요...?</p>
35 + </div>
36 + <div class="clear"></div>
37 +
38 + <div class="from-them">
39 + <p>이모지 인간은 말그대로
40 + “이모지”로 이루어진 인격체입니다.
41 + 여러분이 알고 계시는 다양한 이모지들이 있죠?
42 + 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
43 + 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
44 + 예를 들어, 옆의 태양이나 파라솔까지도요!
45 + (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
46 + </div>
47 +<!-- 2번 대화 -->
48 +
49 +<!-- 3번 대화 -->
50 +<div class="from-me gentle">
51 + <p>어...이모지 인간은 어떻게 생겨났나요?</p>
52 +</div>
53 +<div class="clear"></div>
54 +
55 +<div class="from-them">
56 + <p>요즘 10대-20대들은 SNS 사용시,
57 + 주로 이모지를 사용하여 대화를 하곤 합니다.
58 + 문자로 길게 설명을 하는 것보다 표정이나 감정들을
59 + 직관적으로 전달할 수 있는 이모지가
60 + 더 간편하기에 그렇습니다.
61 + 이에 현대인들의 일상은 이모지로 가득 찬,
62 + “<이모지 인간>이 아닐까”
63 + 하는 발상에서 제가 생겨나게 되었답니다.</p>
64 +</div>
65 +<!-- 3번 대화 -->
66 +
67 +<!-- 4번 대화 -->
68 +<div class="from-me gentle">
69 + <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
70 +</div>
71 +<div class="clear"></div>
72 +
73 +<div class="from-them">
74 + <p>첫째, 저와의 간단한 대화!
75 + 둘째, 이모지로 보내는 문자!
76 + 셋째, 이모지 MBTI 카드!</p>
77 +</div>
78 +
79 +<div class="from-them">
80 + <p>첫번째...보다는
81 + 두번째와 세번째에 대한 설명을 더 해볼께요...
82 + 이모지로 보내는 문자는 Emo-ssage라고 해요.
83 + 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
84 + 대화 중 일부를 이모지로 채워줄 거랍니다.
85 + 작성이 완료되면 여러분만의 emo-ssage를
86 + 이미지로 저장할 수 있어요!</p>
87 +</div>
88 +
89 +<div class="from-them">
90 + <p>이모지 MBTI 카드는 EMOTI라고 해요.
91 + 여러 이모지들을 활용해서 각 16개 mbti
92 + 고유의 이모지들을 탄생시켰어요.
93 + 아, 그리고 각 mbti 카드를 넘길 때마다
94 + 어울리는 노래도 흘러나온답니다! </p>
95 +</div>
96 +<!-- 4번 대화 -->
97 +
98 +<!-- 5번 대화 -->
99 +<div class="from-me gentle">
100 + <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
101 +</div>
102 +<div class="clear"></div>
103 +
104 +<div class="from-them">
105 + <p>This page cannot be found</p>
106 +</div>
107 +<!-- 5번 대화 -->
108 +
109 +</section>
110 + <script src="./script.js"></script>
111 +
112 +
113 +
114 +
115 +</body>
116 +</html>
1 +//extends from ios 7 chat bubbles
2 +//https://codepen.io/samuelkraft/pen/Farhl
3 +
4 +//cmd/ctrl + shift + 5 rerun preview
...\ No newline at end of file ...\ No newline at end of file
1 +body {
2 + font-family: "Helvetica Neue";
3 + font-size: 20px;
4 + font-weight: normal;
5 +}
6 +
7 +section {
8 + max-width: 450px;
9 + margin: 50px auto;
10 +}
11 +section div {
12 + max-width: 255px;
13 + word-wrap: break-word;
14 + margin-bottom: 20px;
15 + line-height: 24px;
16 +}
17 +
18 +.clear {
19 + clear: both;
20 +}
21 +
22 +.from-me {
23 + position: relative;
24 + padding: 10px 20px;
25 + color: white;
26 + background: #0B93F6;
27 + border-radius: 25px;
28 + float: right;
29 +}
30 +.from-me:before {
31 + content: "";
32 + position: absolute;
33 + z-index: -1;
34 + bottom: -2px;
35 + right: -7px;
36 + height: 20px;
37 + border-right: 20px solid #0B93F6;
38 + border-bottom-left-radius: 16px 14px;
39 + -webkit-transform: translate(0, -2px);
40 +}
41 +.from-me:after {
42 + content: "";
43 + position: absolute;
44 + z-index: 1;
45 + bottom: -2px;
46 + right: -56px;
47 + width: 26px;
48 + height: 20px;
49 + background: white;
50 + border-bottom-left-radius: 10px;
51 + -webkit-transform: translate(-30px, -2px);
52 +}
53 +
54 +.from-them {
55 + position: relative;
56 + padding: 10px 20px;
57 + background: #E5E5EA;
58 + border-radius: 25px;
59 + color: black;
60 + float: left;
61 +}
62 +.from-them:before {
63 + content: "";
64 + position: absolute;
65 + z-index: 2;
66 + bottom: -2px;
67 + left: -7px;
68 + height: 20px;
69 + border-left: 20px solid #E5E5EA;
70 + border-bottom-right-radius: 16px 14px;
71 + -webkit-transform: translate(0, -2px);
72 +}
73 +.from-them:after {
74 + content: "";
75 + position: absolute;
76 + z-index: 3;
77 + bottom: -2px;
78 + left: 4px;
79 + width: 26px;
80 + height: 20px;
81 + background: white;
82 + border-bottom-right-radius: 10px;
83 + -webkit-transform: translate(-30px, -2px);
84 +}
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Fun with background gradients</title>
6 + <link rel="stylesheet" href="./style.css">
7 +
8 +</head>
9 +<body>
10 +<!-- partial:index.partial.html -->
11 +<nav>Global navigation</nav>
12 +<header>
13 + <h1>Fun with background gradients</h1>
14 + <p>Just a bit of fun while wondering about using simple and subtle CSS gradients for backgrounds...</p>
15 +</header>
16 +<main>
17 + <ul class="cards">
18 + <li class="card -red">
19 + <div class="card--image">✤</div><h2>Red</h2>
20 + <p>Red is the color at the long wavelength end of the visible spectrum of light, next to orange and opposite violet.</p>
21 + </li>
22 + <li class="card -green">
23 + <div class="card--image">✦</div>
24 + <h2>Green</h2>
25 + <p>Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm.</p>
26 + </li>
27 + <li class="card -blue">
28 + <div class="card--image">❖</div>
29 + <h2>Blue</h2>
30 + <p>Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light.</p>
31 + </li>
32 + </ul>
33 +</main>
34 +<!-- partial -->
35 +
36 +</body>
37 +</html>
1 +* {
2 + box-sizing: border-box;
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +body {
8 + width: 100vw;
9 + height: 200vh;
10 + padding: 1rem;
11 + font-family: Avenir, sans-serif;
12 + font-size: 112.5%;
13 + color: #124;
14 + background-image: radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(0, 128, 0, 0.3), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.3), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 40vw);
15 + background-position: -40vw 14rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
16 + background-size: 80vw 80vw;
17 + background-repeat: no-repeat;
18 +}
19 +
20 +nav {
21 + position: fixed;
22 + top: 0;
23 + right: 0;
24 + left: 0;
25 + padding: 1.5rem 1rem;
26 + background-color: white;
27 + border-top: 4px solid #c080c0;
28 +}
29 +
30 +header {
31 + max-width: 600px;
32 + margin: 24vh auto;
33 +}
34 +
35 +h1 {
36 + font-size: 3.2rem;
37 + font-weight: 900;
38 + line-height: 1.1;
39 +}
40 +h1 + p {
41 + margin-top: 1rem;
42 +}
43 +
44 +main {
45 + max-width: 800px;
46 + margin-right: auto;
47 + margin-left: auto;
48 +}
49 +
50 +.cards {
51 + display: flex;
52 + flex-direction: column;
53 + margin: -1rem;
54 + list-style: none;
55 +}
56 +@media (min-width: 600px) {
57 + .cards {
58 + flex-direction: row;
59 + }
60 +}
61 +
62 +.card {
63 + flex: 1;
64 + margin: 1rem;
65 + padding: 1rem;
66 + background-color: white;
67 + border-radius: 0.5rem;
68 + box-shadow: 0 0 6rem rgba(0, 0, 0, 0.1);
69 +}
70 +.card * {
71 + margin-bottom: 1rem;
72 +}
73 +
74 +.card--image {
75 + font-size: 6rem;
76 + line-height: 1;
77 +}
78 +.card.-red .card--image {
79 + color: #ff8080;
80 +}
81 +.card.-green .card--image {
82 + color: #80c080;
83 +}
84 +.card.-blue .card--image {
85 + color: #8080ff;
86 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Scroll text</title>
6 + <link rel="stylesheet" href="./style.css">
7 +
8 +</head>
9 +<body>
10 +<!-- partial:index.partial.html -->
11 +
12 +
13 +<div class="l">
14 + Designing. Designing. Designing. Designing. Designing. Designing.
15 +</div>
16 +<div class="r">
17 + Designing. Designing. Designing. Designing. Designing. Designing.
18 +</div>
19 +
20 +
21 +
22 +
23 +<!-- partial -->
24 +
25 +</body>
26 +</html>
1 +body{
2 + display:flex;
3 + align-items:center;
4 + font-family:sans-serif;
5 + flex-direction:column;
6 + height:100vh;
7 + font-size:6rem;
8 + -webkit-text-stroke: 1px white;
9 + -webkit-text-fill-color: black;
10 + -webkit-animation: fill 0.5s infinite alternate;
11 + background:black;
12 + width:100vw;
13 + overflow-x:hidden;
14 + justify-content:center;
15 +}
16 +
17 +.l{
18 + width:fit-content;
19 + white-space:nowrap;
20 + animation: example 10s linear 0.5s infinite;
21 +}
22 +.r{
23 + width:fit-content;
24 + white-space:nowrap;
25 + animation: example2 10s linear 0.5s infinite;
26 +}
27 +
28 +@keyframes example2 {
29 + 0% {
30 + margin-right:0%;
31 + opacity:0%;
32 + }
33 + 10%{
34 + opacity:100%;
35 + }
36 + 90%{
37 + opacity:100%;
38 + }
39 + 100% {
40 + margin-right:-100%;
41 + opacity:0%;
42 + }
43 +}
44 +@keyframes example {
45 + 0% {
46 + margin-left:0%;
47 + opacity:0%;
48 + }
49 + 10%{
50 + opacity:100%;
51 + }
52 + 90%{
53 + opacity:100%;
54 + }
55 + 100% {
56 + margin-left:-100%;
57 + opacity:0%;
58 + }
59 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Animated - SVG Scrolling Mouse Icon</title>
6 +
7 + <!-- 헤더, 콘텐츠 틀 -->
8 + <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
9 +
10 + <!-- 메세지 버블 -->
11 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
12 +
13 +
14 +
15 +</head>
16 +<body>
17 +<!-- partial:index.partial.html -->
18 +
19 +
20 +
21 +
22 +<!-- 헤더 틀 -->
23 +<div class="hero">
24 +
25 + <h1>Emoji Human,<br>Who are you?</h1>
26 +
27 + <a class="scroll-link" href="#content">
28 + <svg class="mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 130" preserveAspectRatio="xMidYMid meet">
29 + <g fill="none" fill-rule="evenodd">
30 + <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
31 + <circle class="scroll" cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
32 + </g>
33 + </svg>
34 + </a>
35 +
36 +</div>
37 +<!-- 헤더 틀 -->
38 +
39 +<!-- 콘텐츠 틀 -->
40 +<div id="content" class="content">
41 +
42 + <!-- 메세지 버블 -->
43 + <section>
44 + <!-- 1번 대화 -->
45 + <div class="from-them">
46 + <p>안녕하세요!!<br>
47 + 저는 이모지 인간이라고 해요 @.@ <br>
48 + 당신을 만나게 되어서 매우 반가워요 :)
49 + </p>
50 + </div>
51 + <div class="clear"></div>
52 +
53 + <div class="from-me slam">
54 + <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
55 + </div>
56 + <div class="clear"></div>
57 + <!-- 1번 대화 -->
58 +
59 + <!-- 2번 대화 -->
60 + <div class="from-me gentle">
61 + <p>이모지 인간은 뭔가요...?</p>
62 + </div>
63 + <div class="clear"></div>
64 +
65 + <div class="from-them">
66 + <p>이모지 인간은 말그대로
67 + “이모지”로 이루어진 인격체입니다.
68 + 여러분이 알고 계시는 다양한 이모지들이 있죠?
69 + 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
70 + 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
71 + 예를 들어, 옆의 태양이나 파라솔까지도요!
72 + (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
73 + </div>
74 + <!-- 2번 대화 -->
75 +
76 + <!-- 3번 대화 -->
77 + <div class="from-me gentle">
78 + <p>어...이모지 인간은 어떻게 생겨났나요?</p>
79 + </div>
80 + <div class="clear"></div>
81 +
82 + <div class="from-them">
83 + <p>요즘 10대-20대들은 SNS 사용시,
84 + 주로 이모지를 사용하여 대화를 하곤 합니다.
85 + 문자로 길게 설명을 하는 것보다 표정이나 감정들을
86 + 직관적으로 전달할 수 있는 이모지가
87 + 더 간편하기에 그렇습니다.
88 + 이에 현대인들의 일상은 이모지로 가득 찬,
89 + “<이모지 인간>이 아닐까”
90 + 하는 발상에서 제가 생겨나게 되었답니다.</p>
91 + </div>
92 + <!-- 3번 대화 -->
93 +
94 + <!-- 4번 대화 -->
95 + <div class="from-me gentle">
96 + <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
97 + </div>
98 + <div class="clear"></div>
99 +
100 + <div class="from-them">
101 + <p>첫째, 저와의 간단한 대화!
102 + 둘째, 이모지로 보내는 문자!
103 + 셋째, 이모지 MBTI 카드!</p>
104 + </div>
105 +
106 + <div class="from-them">
107 + <p>첫번째...보다는
108 + 두번째와 세번째에 대한 설명을 더 해볼께요...
109 + 이모지로 보내는 문자는 Emo-ssage라고 해요.
110 + 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
111 + 대화 중 일부를 이모지로 채워줄 거랍니다.
112 + 작성이 완료되면 여러분만의 emo-ssage를
113 + 이미지로 저장할 수 있어요!</p>
114 + </div>
115 +
116 + <div class="from-them">
117 + <p>이모지 MBTI 카드는 EMOTI라고 해요.
118 + 여러 이모지들을 활용해서 각 16개 mbti
119 + 고유의 이모지들을 탄생시켰어요.
120 + 아, 그리고 각 mbti 카드를 넘길 때마다
121 + 어울리는 노래도 흘러나온답니다! </p>
122 + </div>
123 + <!-- 4번 대화 -->
124 +
125 + <!-- 5번 대화 -->
126 + <div class="from-me gentle">
127 + <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
128 + </div>
129 + <div class="clear"></div>
130 +
131 + <div class="from-them">
132 + <p>This page cannot be found</p>
133 + </div>
134 + <!-- 5번 대화 -->
135 + </section>
136 + <script src="./script.js"></script>
137 + <!-- 메세지 버블 -->
138 +
139 +</div>
140 +
141 + <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src="./script.js"></script>
142 +<!-- 콘텐츠 틀 -->
143 +
144 +
145 +
146 +
147 +</body>
148 +</html>
1 +jQuery(document).ready(function($){
2 +
3 + $('a.scroll-link').click(function(e){
4 + e.preventDefault();
5 + $id = $(this).attr('href');
6 + $('body,html').animate({
7 + scrollTop: $($id).offset().top -20
8 + }, 750);
9 + });
10 +
11 +});
...\ No newline at end of file ...\ No newline at end of file
1 +/* 헤더, 콘텐츠 틀 */
2 +@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700|Source+Sans+Pro");
3 +*,
4 +*::before,
5 +*::after {
6 + box-sizing: border-box;
7 +}
8 +
9 +body {
10 + -webkit-font-smoothing: antialiased;
11 + -moz-osx-font-smoothing: grayscale;
12 + font-family: "Source Sans Pro", sans-serif;
13 + font-size: 16px;
14 + line-height: 1.618;
15 +}
16 +
17 +h1,
18 +h2 {
19 + font-family: "Playfair Display", serif;
20 + line-height: 1.2;
21 + margin-bottom: 1rem;
22 + letter-spacing: 1px;
23 +}
24 +
25 +h1 {
26 + font-size: 3rem;
27 + max-width: 35rem;
28 + text-align: center;
29 +}
30 +
31 +h2 {
32 + font-size: 2.5rem;
33 +}
34 +
35 +.hero {
36 + position: relative;
37 + min-height: 100vh;
38 + display: flex;
39 + align-items: center;
40 + justify-content: center;
41 + padding: 12rem 2rem;
42 + color: white;
43 + background-image: linear-gradient(to bottom, #45484d 0%, black 100%), url("https://source.unsplash.com/random/1920x1080/?sky");
44 + background-blend-mode: multiply;
45 + background-size: cover;
46 +}
47 +
48 +.mouse {
49 + max-width: 2.5rem;
50 + width: 100%;
51 + height: auto;
52 +}
53 +
54 +.scroll {
55 + -webkit-animation-name: scroll;
56 + animation-name: scroll;
57 + -webkit-animation-duration: 1.5s;
58 + animation-duration: 1.5s;
59 + -webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
60 + animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
61 + -webkit-animation-iteration-count: infinite;
62 + animation-iteration-count: infinite;
63 + transform-origin: 50% 20.5px;
64 + will-change: transform, opacity;
65 + opacity: 1;
66 +}
67 +
68 +.scroll-link {
69 + position: absolute;
70 + bottom: 1rem;
71 + left: 50%;
72 + transform: translateX(-50%);
73 +}
74 +
75 +@-webkit-keyframes scroll {
76 + 0%, 20% {
77 + transform: translateY(0) scaleY(1);
78 + }
79 + 100% {
80 + transform: translateY(36px) scaleY(2);
81 + opacity: 0;
82 + }
83 +}
84 +
85 +@keyframes scroll {
86 + 0%, 20% {
87 + transform: translateY(0) scaleY(1);
88 + }
89 + 100% {
90 + transform: translateY(36px) scaleY(2);
91 + opacity: 0;
92 + }
93 +}
94 +.content {
95 + min-height: 100vh;
96 + max-width: 28rem;
97 + margin: 0 auto;
98 + display: flex;
99 + flex-direction: column;
100 + align-items: center;
101 + justify-content: center;
102 + text-align: center;
103 +}
104 +/* 헤더, 콘텐츠 틀 */
105 +
106 +
107 +
108 +
109 +
110 +/* 메세지 버블 */
111 +body {
112 + font-family: "Helvetica Neue";
113 + font-size: 20px;
114 + font-weight: normal;
115 +}
116 +
117 +section {
118 + max-width: 450px;
119 + margin: 50px auto;
120 +}
121 +section div {
122 + max-width: 255px;
123 + word-wrap: break-word;
124 + margin-bottom: 20px;
125 + line-height: 24px;
126 +}
127 +
128 +.clear {
129 + clear: both;
130 +}
131 +
132 +.from-me {
133 + position: relative;
134 + padding: 10px 20px;
135 + color: white;
136 + background: #0B93F6;
137 + border-radius: 25px;
138 + float: right;
139 +}
140 +.from-me:before {
141 + content: "";
142 + position: absolute;
143 + z-index: -1;
144 + bottom: -2px;
145 + right: -7px;
146 + height: 20px;
147 + border-right: 20px solid #0B93F6;
148 + border-bottom-left-radius: 16px 14px;
149 + -webkit-transform: translate(0, -2px);
150 +}
151 +.from-me:after {
152 + content: "";
153 + position: absolute;
154 + z-index: 1;
155 + bottom: -2px;
156 + right: -56px;
157 + width: 26px;
158 + height: 20px;
159 + background: white;
160 + border-bottom-left-radius: 10px;
161 + -webkit-transform: translate(-30px, -2px);
162 +}
163 +
164 +.from-them {
165 + position: relative;
166 + padding: 10px 20px;
167 + background: #E5E5EA;
168 + border-radius: 25px;
169 + color: black;
170 + float: left;
171 +}
172 +.from-them:before {
173 + content: "";
174 + position: absolute;
175 + z-index: 2;
176 + bottom: -2px;
177 + left: -7px;
178 + height: 20px;
179 + border-left: 20px solid #E5E5EA;
180 + border-bottom-right-radius: 16px 14px;
181 + -webkit-transform: translate(0, -2px);
182 +}
183 +.from-them:after {
184 + content: "";
185 + position: absolute;
186 + z-index: 3;
187 + bottom: -2px;
188 + left: 4px;
189 + width: 26px;
190 + height: 20px;
191 + background: white;
192 + border-bottom-right-radius: 10px;
193 + -webkit-transform: translate(-30px, -2px);
194 +}
195 +/* 메세지 버블 */
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -5,59 +5,3 @@ function createRipple(y, x) { ...@@ -5,59 +5,3 @@ function createRipple(y, x) {
5 $('.ripple').append(_ripple); 5 $('.ripple').append(_ripple);
6 setTimeout(() => _ripple.remove(), 900); 6 setTimeout(() => _ripple.remove(), 900);
7 } 7 }
8 -
9 -function confetti() {
10 - [{
11 - bg: '#b00b00',
12 - position: Math.random() * $('html').width() },
13 - {
14 - bg: '#de1e7e',
15 - position: Math.random() * $('html').width() },
16 - {
17 - bg: '#BADA55',
18 - position: Math.random() * $('html').width() },
19 - {
20 - bg: '#F0FEAF',
21 - position: Math.random() * $('html').width() },
22 - {
23 - bg: '#ac1d1c',
24 - position: Math.random() * $('html').width() },
25 - {
26 - bg: '#facade',
27 - position: Math.random() * $('html').width() },
28 - {
29 - bg: 'transparent',
30 - position: Math.random() * $('html').width(),
31 - internal: '😜' },
32 - {
33 - bg: 'transparent',
34 - position: Math.random() * $('html').width(),
35 - internal: '🌵' },
36 - {
37 - bg: 'transparent',
38 - position: Math.random() * $('html').width(),
39 - internal: '🤑' },
40 - {
41 - bg: 'transparent',
42 - position: Math.random() * $('html').width(),
43 - internal: '🐻' },
44 - {
45 - bg: 'transparent',
46 - position: Math.random() * $('html').width(),
47 - internal: '💰' },
48 - {
49 - bg: 'transparent',
50 - position: Math.random() * $('html').width(),
51 - internal: '🍍' }].
52 - map(options => {
53 - const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
54 - $('body').append(c);
55 - setTimeout(() => c.remove(), 1900);
56 - });
57 -}
58 -
59 -$('.mui-button').mousedown(e => {
60 - const offset = $(e.target).offset();
61 - createRipple(e.pageY - offset.top, e.pageX - offset.left);
62 - confetti();
63 -});
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.
1 +/* 내비 */
2 +body {
3 + font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
4 + overflow-x: hidden;
5 + }
6 + .center
7 + {
8 + text-align: center;
9 + }
10 + p
11 + {
12 + font-size: 20px;
13 + }
14 + a,
15 + a:hover,
16 + a:focus,
17 + a:active,{
18 + color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
19 + outline: none; /*gives outline to an element*/
20 + }
21 + h2,
22 + h3,
23 + {
24 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
25 + text-transform: uppercase;
26 + font-weight: 700;
27 + font-size: 30px;
28 + }
29 + hr.star-light,
30 + hr.star-primary {
31 + padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
32 + border: none;
33 + border-top: solid 5px;
34 + text-align: center;
35 + max-width: 250px;
36 + margin: 25px auto 30px;
37 + }
38 + hr.star-light:after,
39 + hr.star-primary:after {
40 + content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
41 + font-family: FontAwesome;
42 + display: inline-block;
43 + position: relative;
44 + top: -0.8em;
45 + font-size: 2em;
46 + padding: 0 0.25em;
47 + }
48 + hr.star-light {
49 + border-color: white; /*gives border white*/
50 + }
51 + hr.star-light:after {
52 + background-color: #18BC9C;
53 + color: white;
54 + }
55 + hr.star-primary {
56 + border-color: #2C3E50;
57 + }
58 + hr.star-primary:after {
59 + background-color: white;
60 + color: #2C3E50;
61 + }
62 + header {
63 + text-align: center;
64 + background: #18BC9C;
65 + color: white;
66 + }
67 + header .container {
68 + padding-top: 100px;
69 + padding-bottom: 50px;
70 + }
71 + header .intro .name {
72 + display: block;
73 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
74 + text-transform: uppercase;
75 + font-weight: 700;
76 + font-size: 2em;
77 + }
78 + header .intro .skills {
79 + font-size: 1.25em;
80 + font-weight: 300;/*how much bold*/
81 + }
82 + @media (min-width: 768px) {/* if minimum width exceeds then perform*/
83 + header .container {
84 + padding-top: 200px;
85 + padding-bottom: 100px;
86 + }
87 + header .intro .name {
88 + font-size: 4.75em;
89 + }
90 + header .intro .skills {
91 + font-size: 1.75em;
92 + }
93 + }
94 + .navbar-custom {
95 + background: #2C3E50;
96 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
97 + text-transform: uppercase;
98 + font-weight: 700;
99 + border: none;
100 + }
101 +
102 + .navbar-custom .navbar-nav {
103 + letter-spacing: 1px;
104 + }
105 + .navbar-custom .navbar-nav li a {
106 + color: white;
107 + }
108 + .navbar-custom .navbar-nav li a:hover {
109 + color: #18BC9C;
110 + outline: none;
111 + }
112 + .navbar-custom .navbar-nav li a:focus,
113 + .navbar-custom .navbar-nav li a:active {
114 + color: white;
115 + }
116 + .navbar-custom .navbar-nav li.active a {
117 + color: white;
118 + background: #18BC9C;
119 + }
120 + .navbar-custom .navbar-nav li.active a:hover,
121 + .navbar-custom .navbar-nav li.active a:focus,
122 + .navbar-custom .navbar-nav li.active a:active {
123 + color: white;
124 + background: #18BC9C;
125 + }
126 + .navbar-custom .navbar-toggle {
127 + color: white;
128 + text-transform: uppercase;
129 + font-size: 10px;
130 + border-color: white;
131 + }
132 + .navbar-custom .navbar-toggle:hover,
133 + .navbar-custom .navbar-toggle:focus {
134 + background-color: #18BC9C;
135 + color: white;
136 + border-color: #18BC9C;
137 + }
138 + footer {
139 + color: white;
140 + }
141 + footer h3 {
142 + margin-bottom: 30px;
143 + }
144 + footer .footer-above {
145 + padding-top: 50px;
146 + background-color: #2C3E50;
147 + }
148 + footer .footer-col {
149 + margin-bottom: 50px;
150 + }
151 + footer .footer-below {
152 + padding: 25px 0;
153 + background-color: #233140;
154 + }
155 + /* 내비 */
156 +
157 +
158 +
159 +
160 + /* 그라디언트 배경 */
161 +* {
162 + box-sizing: border-box;
163 + margin: 0;
164 + padding: 0;
165 +}
166 +
167 +body {
168 + width: 100vw;
169 + height: 200vh;
170 + padding: 1rem;
171 + font-family: Avenir, sans-serif;
172 + font-size: 112.5%;
173 + color: #124;
174 + background-image: radial-gradient(rgba(255, 185, 65, 0.7), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(255, 186, 186, 0.7), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(114, 215, 52, 0.7), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.7), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0) 40vw);
175 + background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
176 + background-size: 80vw 80vw;
177 + background-repeat: no-repeat;
178 +}
179 +/* 그라디언트 배경 */
180 +
...\ No newline at end of file ...\ No newline at end of file
1 +/* 기존것 */
1 .audio { 2 .audio {
2 align-content: center; 3 align-content: center;
3 margin-right: auto; 4 margin-right: auto;
...@@ -25,7 +26,7 @@ ...@@ -25,7 +26,7 @@
25 -ms-flex-align: center; 26 -ms-flex-align: center;
26 -webkit-align-items: center; 27 -webkit-align-items: center;
27 align-items: center; 28 align-items: center;
28 - box-shadow: 0px 2px 10px 0px #848484; 29 + box-shadow: 0px 5px 18px -7px #848484;
29 } 30 }
30 31
31 .swiper-slide img{ 32 .swiper-slide img{
...@@ -159,9 +160,9 @@ img { ...@@ -159,9 +160,9 @@ img {
159 } 160 }
160 161
161 @media (max-width:767px) { 162 @media (max-width:767px) {
162 - .slideshow__slide { 163 +.slideshow__slide {
163 padding: var(--slide-padding-y) var(--slide-padding-x); 164 padding: var(--slide-padding-y) var(--slide-padding-x);
164 - } 165 +}
165 } 166 }
166 167
167 @media (min-width:768px) and (max-width:1023px) { 168 @media (min-width:768px) and (max-width:1023px) {
...@@ -230,4 +231,199 @@ img { ...@@ -230,4 +231,199 @@ img {
230 flex: 0 0 auto 231 flex: 0 0 auto
231 } 232 }
232 233
234 +.swiper-button-next {
235 + color: rgb(255, 89, 189);
236 +}
237 +
238 +.swiper-button-prev {
239 + color: rgb(255, 89, 189);
240 +}
233 241
242 +.swiper-pagination-bullet-active {
243 + background-color: rgb(255, 89, 189);
244 +}
245 +/* 기존것 */
246 +
247 +
248 +
249 +/* 내비 */
250 +body {
251 + font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
252 + overflow-x: hidden;
253 +}
254 +.center
255 +{
256 + text-align: center;
257 +}
258 +p
259 +{
260 + font-size: 20px;
261 +}
262 +a,
263 +a:hover,
264 +a:focus,
265 +a:active,{
266 + color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
267 + outline: none; /*gives outline to an element*/
268 +}
269 +h2,
270 +h3,
271 +{
272 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
273 + text-transform: uppercase;
274 + font-weight: 700;
275 + font-size: 30px;
276 +}
277 +hr.star-light,
278 +hr.star-primary {
279 + padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
280 + border: none;
281 + border-top: solid 5px;
282 + text-align: center;
283 + max-width: 250px;
284 + margin: 25px auto 30px;
285 +}
286 +hr.star-light:after,
287 +hr.star-primary:after {
288 + content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
289 + font-family: FontAwesome;
290 + display: inline-block;
291 + position: relative;
292 + top: -0.8em;
293 + font-size: 2em;
294 + padding: 0 0.25em;
295 +}
296 +hr.star-light {
297 + border-color: white; /*gives border white*/
298 +}
299 +hr.star-light:after {
300 + background-color: #18BC9C;
301 + color: white;
302 +}
303 +hr.star-primary {
304 + border-color: #2C3E50;
305 +}
306 +hr.star-primary:after {
307 + background-color: white;
308 + color: #2C3E50;
309 +}
310 +header {
311 + text-align: center;
312 + background: #18BC9C;
313 + color: white;
314 +}
315 +header .container {
316 + padding-top: 100px;
317 + padding-bottom: 50px;
318 +}
319 +header .intro .name {
320 + display: block;
321 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
322 + text-transform: uppercase;
323 + font-weight: 700;
324 + font-size: 2em;
325 +}
326 +header .intro .skills {
327 + font-size: 1.25em;
328 + font-weight: 300;/*how much bold*/
329 +}
330 +@media (min-width: 768px) {/* if minimum width exceeds then perform*/
331 + header .container {
332 + padding-top: 200px;
333 + padding-bottom: 100px;
334 + }
335 + header .intro .name {
336 + font-size: 4.75em;
337 + }
338 + header .intro .skills {
339 + font-size: 1.75em;
340 + }
341 +}
342 +.navbar-custom {
343 + background: #2C3E50;
344 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
345 + text-transform: uppercase;
346 + font-weight: 700;
347 + border: none;
348 +}
349 +}
350 +.navbar-custom .navbar-nav {
351 + letter-spacing: 1px;
352 +}
353 +.navbar-custom .navbar-nav li a {
354 + color: white;
355 +}
356 +.navbar-custom .navbar-nav li a:hover {
357 + color: #18BC9C;
358 + outline: none;
359 +}
360 +.navbar-custom .navbar-nav li a:focus,
361 +.navbar-custom .navbar-nav li a:active {
362 + color: white;
363 +}
364 +.navbar-custom .navbar-nav li.active a {
365 + color: white;
366 + background: #18BC9C;
367 +}
368 +.navbar-custom .navbar-nav li.active a:hover,
369 +.navbar-custom .navbar-nav li.active a:focus,
370 +.navbar-custom .navbar-nav li.active a:active {
371 + color: white;
372 + background: #18BC9C;
373 +}
374 +.navbar-custom .navbar-toggle {
375 + color: white;
376 + text-transform: uppercase;
377 + font-size: 10px;
378 + border-color: white;
379 +}
380 +.navbar-custom .navbar-toggle:hover,
381 +.navbar-custom .navbar-toggle:focus {
382 + background-color: #18BC9C;
383 + color: white;
384 + border-color: #18BC9C;
385 +}
386 +footer {
387 + color: white;
388 +}
389 +footer h3 {
390 + margin-bottom: 30px;
391 +}
392 +footer .footer-above {
393 + padding-top: 50px;
394 + background-color: #2C3E50;
395 +}
396 +footer .footer-col {
397 + margin-bottom: 50px;
398 +}
399 +footer .footer-below {
400 + padding: 25px 0;
401 + background-color: #233140;
402 +}
403 +/* 내비 */
404 +
405 +
406 +
407 +
408 +
409 +
410 +/* 그라디언트 배경 */
411 +* {
412 + box-sizing: border-box;
413 + margin: 0;
414 + padding: 0;
415 +}
416 +
417 +body {
418 + width: 100vw;
419 + height: 200vh;
420 + padding: 1rem;
421 + font-family: Avenir, sans-serif;
422 + font-size: 112.5%;
423 + color: #124;
424 + background-image: radial-gradient(rgba(255, 185, 65, 0.7), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(255, 186, 186, 0.7), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(114, 215, 52, 0.7), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.7), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0) 40vw);
425 + background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
426 + background-size: 80vw 80vw;
427 + background-repeat: no-repeat;
428 +}
429 +/* 그라디언트 배경 */
......
This diff is collapsed. Click to expand it.
1 +.swiper-container {
2 + width: 100%;
3 + height: 70%;
4 +}
5 +
6 +.swiper-slide {
7 + text-align: center;
8 + font-size: 18px;
9 + background: #fff; /* Center slide text vertically */
10 + display: -webkit-box;
11 + display: -ms-flexbox;
12 + display: -webkit-flex;
13 + display: flex;
14 + -webkit-box-pack: center;
15 + -ms-flex-pack: center;
16 + -webkit-justify-content: center;
17 + justify-content: center;
18 + -webkit-box-align: center;
19 + -ms-flex-align: center;
20 + -webkit-align-items: center;
21 + align-items: center;
22 + box-shadow: 0px 2px 10px 0px #848484;
23 +}
24 +
25 +.swiper-slide img{
26 + display: block;
27 + width: 100%;
28 + height: auto;
29 + object-fit: cover;
30 +}
31 +
32 +.swiper-slide:nth-child(2n) {
33 + width: 20%;
34 +}
35 +
36 +.swiper-slide:nth-child(3n) {
37 + width: 40%;
38 +}
39 +
40 +img {
41 + border: 0;
42 + content: normal!important;
43 + -webkit-user-select: none;
44 + -moz-user-select: none;
45 + -ms-user-select: none;
46 + user-select: none
47 +}
48 +
49 +*,
50 +:after,
51 +:before {
52 + -webkit-box-sizing: border-box;
53 + box-sizing: border-box
54 +}
55 +
56 +
57 +/* swiper container and slider styles here */
58 +
59 +.swiper-container {
60 + margin-left: auto;
61 + margin-right: auto;
62 + position: relative;
63 + overflow: hidden;
64 + z-index: 1
65 +}
66 +
67 +.swiper-wrapper {
68 + position: relative;
69 + width: 100%;
70 + height: 100%;
71 + z-index: 1;
72 + display: -webkit-box;
73 + display: -ms-flexbox;
74 + display: -webkit-flex;
75 + display: flex;
76 + -webkit-transition-property: -webkit-transform;
77 + -o-transition-property: transform;
78 + transition-property: transform;
79 + transition-property: transform, -webkit-transform;
80 + -webkit-box-sizing: content-box;
81 + box-sizing: content-box
82 +}
83 +
84 +.swiper-slide {
85 + -webkit-flex-shrink: 0;
86 + -ms-flex: 0 0 auto;
87 + -ms-flex-negative: 0;
88 + flex-shrink: 0;
89 + width: 100%;
90 + height: 100%;
91 + position: relative
92 +}
93 +
94 +.slideshow {
95 + height: 80vh;
96 + display: -webkit-box;
97 + display: -webkit-flex;
98 + display: -ms-flexbox;
99 + display: flex;
100 + -webkit-box-orient: vertical;
101 + -webkit-box-direction: normal;
102 + -webkit-flex-direction: column;
103 + -ms-flex-direction: column;
104 + flex-direction: column;
105 +}
106 +
107 +.slideshow__area {
108 + background: var(--bg-color-2);
109 + position: relative;
110 + -webkit-box-flex: 1;
111 + -webkit-flex: 1 1 auto;
112 + -ms-flex: 1 1 auto;
113 + flex: 1 1 auto
114 +}
115 +
116 +.slideshow__el {
117 + position: absolute;
118 + top: 0;
119 + left: 0;
120 + height: 100%;
121 + width: 100%
122 +}
123 +
124 +.slideshow__el[data-cursor=prev]:not([data-progress="0"]) {
125 + cursor: w-resize
126 +}
127 +
128 +.slideshow__el[data-cursor=next]:not([data-progress="1"]) {
129 + cursor: e-resize
130 +}
131 +
132 +.slideshow__slide {
133 + width: auto;
134 + max-width: 100%;
135 + display: -webkit-box;
136 + display: -webkit-flex;
137 + display: -ms-flexbox;
138 + display: flex;
139 + padding: 0 var(--slide-padding-x);
140 + -webkit-box-orient: vertical;
141 + -webkit-box-direction: normal;
142 + -webkit-flex-direction: column;
143 + -ms-flex-direction: column;
144 + flex-direction: column;
145 + -webkit-box-pack: center;
146 + -webkit-justify-content: center;
147 + -ms-flex-pack: center;
148 + justify-content: center;
149 + -webkit-box-align: center;
150 + -webkit-align-items: center;
151 + -ms-flex-align: center;
152 + align-items: center
153 +}
154 +
155 +@media (max-width:767px) {
156 + .slideshow__slide {
157 + padding: var(--slide-padding-y) var(--slide-padding-x);
158 + }
159 +}
160 +
161 +@media (min-width:768px) and (max-width:1023px) {
162 + .slideshow__slide {
163 + padding: var(--slide-padding-y) var(--slide-padding-x);
164 + }
165 +}
166 +
167 +@media (min-width:1024px) {
168 + .slideshow__slide {
169 + padding: var(--slide-padding-y) var(--slide-padding-x);
170 + }
171 +}
172 +
173 +.slideshow__slide .caption, .slideshow__slide .caption2 {
174 + display: none
175 +}
176 +
177 +.slideshow__slide img {
178 + width: auto;
179 + height: auto;
180 + max-height: 100%;
181 + max-width: 100%;
182 + display: block;
183 + opacity: 0;
184 + -webkit-transition: none;
185 + -o-transition: none;
186 + transition: none
187 +}
188 +
189 +.slideshow__slide img.lazyloaded {
190 + opacity: 1
191 +}
192 +
193 +
194 +/* this is styling responsible responsive behavior for images in slide */
195 +
196 +.responsive-img {
197 + position: relative;
198 + width: 100%;
199 + height: 100%;
200 + max-width: 100%;
201 + display: -webkit-box;
202 + display: -webkit-flex;
203 + display: -ms-flexbox;
204 + display: flex;
205 + -webkit-box-pack: center;
206 + -webkit-justify-content: center;
207 + -ms-flex-pack: center;
208 + justify-content: center;
209 + -webkit-box-align: center;
210 + -webkit-align-items: center;
211 + -ms-flex-align: center;
212 + align-items: center
213 +}
214 +
215 +.responsive-img img {
216 + width: auto;
217 + height: auto;
218 + max-height: 100%;
219 + max-width: 100%;
220 + display: block;
221 + -webkit-box-flex: 0;
222 + -webkit-flex: 0 0 auto;
223 + -ms-flex: 0 0 auto;
224 + flex: 0 0 auto
225 +}
...\ No newline at end of file ...\ No newline at end of file
1 +
2 +/* ========
3 +Debugger plugin, simple demo plugin to console.log some of callbacks
4 +======== */
5 +function myPlugin({ swiper, extendParams, on }) {
6 + extendParams({
7 + debugger: false,
8 + });
9 +
10 + on('init', () => {
11 + if (!swiper.params.debugger) return;
12 + console.log('init');
13 + });
14 + on('click', (swiper, e) => {
15 + if (!swiper.params.debugger) return;
16 + console.log('click');
17 + });
18 + on('tap', (swiper, e) => {
19 + if (!swiper.params.debugger) return;
20 + console.log('tap');
21 + });
22 + on('doubleTap', (swiper, e) => {
23 + if (!swiper.params.debugger) return;
24 + console.log('doubleTap');
25 + });
26 + on('sliderMove', (swiper, e) => {
27 + if (!swiper.params.debugger) return;
28 + console.log('sliderMove');
29 + });
30 + on('slideChange', () => {
31 + audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause();
32 + audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0;
33 + audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play();
34 + if (!swiper.params.debugger) return;
35 + console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
36 + });
37 + on('slideChangeTransitionStart', () => {
38 + if (!swiper.params.debugger) return;
39 + console.log('slideChangeTransitionStart');
40 + });
41 + on('slideChangeTransitionEnd', () => {
42 + if (!swiper.params.debugger) return;
43 + console.log('slideChangeTransitionEnd');
44 + });
45 + on('transitionStart', () => {
46 + if (!swiper.params.debugger) return;
47 + console.log('transitionStart');
48 + });
49 + on('transitionEnd', () => {
50 + if (!swiper.params.debugger) return;
51 + console.log('transitionEnd');
52 + });
53 + on('fromEdge', () => {
54 + if (!swiper.params.debugger) return;
55 + console.log('fromEdge');
56 + });
57 + on('reachBeginning', () => {
58 + if (!swiper.params.debugger) return;
59 + console.log('reachBeginning');
60 + });
61 + on('reachEnd', () => {
62 + if (!swiper.params.debugger) return;
63 + console.log('reachEnd');
64 + });
65 +
66 + }
67 +
68 + // Install Plugin To Swiper
69 + Swiper.use([myPlugin]);
70 +
71 +
72 + let swiper = new Swiper('.swiper-container', {
73 + loop: true,
74 + centeredSlides: true,
75 + slidesPerView: '5',
76 + navigation: {
77 + nextEl: '.swiper-button-next',
78 + prevEl: '.swiper-button-prev',
79 + },
80 + effect: 'coverflow',
81 + coverflowEffect: {
82 + rotate: 10,
83 + depth: 100,
84 + slideShadows: true,
85 + // modifier:1,
86 + // stretch:50
87 + },
88 + pagination: {
89 + el: '.swiper-pagination',
90 + type: 'bullets',
91 + clickable: true,
92 + },
93 + spaceBetween: 30,
94 + keyboard: {
95 + enabled: true,
96 + },
97 + mousewheel: true,
98 + // Enable debugger
99 + debugger: true,
100 + });
...\ No newline at end of file ...\ No newline at end of file
1 +/* 내비 */
2 +body {
3 + font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
4 + overflow-x: hidden;
5 +}
6 +.center
7 +{
8 + text-align: center;
9 +}
10 +p
11 +{
12 + font-size: 20px;
13 +}
14 +a,
15 +a:hover,
16 +a:focus,
17 +a:active,{
18 + color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
19 + outline: none; /*gives outline to an element*/
20 +}
21 +h2,
22 +h3,
23 +{
24 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
25 + text-transform: uppercase;
26 + font-weight: 700;
27 + font-size: 30px;
28 +}
29 +hr.star-light,
30 +hr.star-primary {
31 + padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
32 + border: none;
33 + border-top: solid 5px;
34 + text-align: center;
35 + max-width: 250px;
36 + margin: 25px auto 30px;
37 +}
38 +hr.star-light:after,
39 +hr.star-primary:after {
40 + content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
41 + font-family: FontAwesome;
42 + display: inline-block;
43 + position: relative;
44 + top: -0.8em;
45 + font-size: 2em;
46 + padding: 0 0.25em;
47 +}
48 +hr.star-light {
49 + border-color: white; /*gives border white*/
50 +}
51 +hr.star-light:after {
52 + background-color: #18BC9C;
53 + color: white;
54 +}
55 +hr.star-primary {
56 + border-color: #2C3E50;
57 +}
58 +hr.star-primary:after {
59 + background-color: white;
60 + color: #2C3E50;
61 +}
62 +header {
63 + text-align: center;
64 + background: #18BC9C;
65 + color: white;
66 +}
67 +header .container {
68 + padding-top: 100px;
69 + padding-bottom: 50px;
70 +}
71 +header .intro .name {
72 + display: block;
73 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
74 + text-transform: uppercase;
75 + font-weight: 700;
76 + font-size: 2em;
77 +}
78 +header .intro .skills {
79 + font-size: 1.25em;
80 + font-weight: 300;/*how much bold*/
81 +}
82 +@media (min-width: 768px) {/* if minimum width exceeds then perform*/
83 + header .container {
84 + padding-top: 200px;
85 + padding-bottom: 100px;
86 + }
87 + header .intro .name {
88 + font-size: 4.75em;
89 + }
90 + header .intro .skills {
91 + font-size: 1.75em;
92 + }
93 +}
94 +.navbar-custom {
95 + background: #2C3E50;
96 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
97 + text-transform: uppercase;
98 + font-weight: 700;
99 + border: none;
100 +}
101 +.navbar-custom .navbar-nav {
102 + letter-spacing: 1px;
103 +}
104 +.navbar-custom .navbar-nav li a {
105 + color: white;
106 +}
107 +.navbar-custom .navbar-nav li a:hover {
108 + color: #18BC9C;
109 + outline: none;
110 +}
111 +.navbar-custom .navbar-nav li a:focus,
112 +.navbar-custom .navbar-nav li a:active {
113 + color: white;
114 +}
115 +.navbar-custom .navbar-nav li.active a {
116 + color: white;
117 + background: #18BC9C;
118 +}
119 +.navbar-custom .navbar-nav li.active a:hover,
120 +.navbar-custom .navbar-nav li.active a:focus,
121 +.navbar-custom .navbar-nav li.active a:active {
122 + color: white;
123 + background: #18BC9C;
124 +}
125 +.navbar-custom .navbar-toggle {
126 + color: white;
127 + text-transform: uppercase;
128 + font-size: 10px;
129 + border-color: white;
130 +}
131 +.navbar-custom .navbar-toggle:hover,
132 +.navbar-custom .navbar-toggle:focus {
133 + background-color: #18BC9C;
134 + color: white;
135 + border-color: #18BC9C;
136 +}
137 +footer {
138 + color: white;
139 +}
140 +footer h3 {
141 + margin-bottom: 30px;
142 +}
143 +footer .footer-above {
144 + padding-top: 50px;
145 + background-color: #2C3E50;
146 +}
147 +footer .footer-col {
148 + margin-bottom: 50px;
149 +}
150 +footer .footer-below {
151 + padding: 25px 0;
152 + background-color: #233140;
153 +}
154 +/* 내비 */
155 +
...@@ -2,40 +2,45 @@ ...@@ -2,40 +2,45 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css"> 7 + <link rel="stylesheet" href="/EMOJI-HUMAN.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
8 -/* 9 +
9 - <DIV style="position:absolute; left: 241px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html"> About us? </A></div>
10 - <DIV style="position:absolute; left: 964px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html"> Emoti</A></div>
11 - <DIV style="position:absolute; left: 1269px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html"> Emossage</A></div>
12 - */
13 - <style>
14 - body {
15 - background-image: url("emojihuman-04.png");
16 - background-repeat: no-repeat;
17 - background-size: 100%;
18 - font-family: Noto Sans KR, regular;
19 - text-align: center;
20 - }
21 - h1 {font-size: 50px;
22 - letter-spacing: 10px;}
23 - p1 {font-size: 24px;}
24 - p2 {font-size: 14px}
25 - p2.small {line-height: 0.7;}
26 - </style>
27 - <div style="height: 100px; overflow: auto">
28 - </div>
29 </head> 10 </head>
30 11
31 -<body>
32 - <h1>Emoji Human,<span> Who are you?</span></h1>
33 - <p1>이모지 인간의 정체가 궁금해요.</p1>
34 - <br>
35 - <p2>
36 - <p class="small"> 이모지일까요, 인간일까요?<br>
37 - 직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
38 - </p>
39 12
13 +<body style="margin: 0 auto">
14 +
15 + <!-- 내비게이션 -->
16 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
17 + <!--css link-->
18 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
19 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
20 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
21 +
22 + <body id="page-top">
23 + <!--creating a navigation bar-->
24 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
25 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
26 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
27 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
28 + <span></span> Menu <i class="fa fa-bars"></i>
29 + </button>
30 + </div><!--end of button-->
31 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
32 + <ul class="nav navbar-nav">
33 + <li><a href="/index.html">Home</a></li>
34 + </ul>
35 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
36 + <li> <a href="/About Us/About Us.html">About Us</a></li>
37 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
38 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
39 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
40 + </ul>
41 + </div><!--end of collapse-->
42 + </div>
43 + </nav>
44 + <!-- 내비게이션 -->
40 45
41 </body> 46 </body>
......
File mode changed
1 +ref: refs/heads/master
1 # EMOJI-HUMAN 1 # EMOJI-HUMAN
2 2
3 옥타린 전시회 3 옥타린 전시회
4 +
5 +by:
6 +
7 +* 송민겸
8 +* 김유진
......
1 +[core]
2 + repositoryformatversion = 0
3 + filemode = false
4 + bare = true
5 + symlinks = false
6 + ignorecase = true
7 +[remote "bare"]
8 + url = odd-munne@
9 + fetch = +refs/heads/*:refs/remotes/bare/*
1 +Unnamed repository; edit this file 'description' to name the repository.
1 +var options = {
2 + invertX: false,
3 + invertY: false,
4 + limitX: 40,
5 + limitY: 40
6 +}
7 +
8 +var emoji = document.getElementById('emoji');
9 +var parallax = new Parallax(emoji, options);
...\ No newline at end of file ...\ No newline at end of file
1 +#!/bin/sh
2 +#
3 +# An example hook script to check the commit log message taken by
4 +# applypatch from an e-mail message.
5 +#
6 +# The hook should exit with non-zero status after issuing an
7 +# appropriate message if it wants to stop the commit. The hook is
8 +# allowed to edit the commit message file.
9 +#
10 +# To enable this hook, rename this file to "applypatch-msg".
11 +
12 +. git-sh-setup
13 +commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
14 +test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
15 +:
1 +#!/bin/sh
2 +#
3 +# An example hook script to check the commit log message.
4 +# Called by "git commit" with one argument, the name of the file
5 +# that has the commit message. The hook should exit with non-zero
6 +# status after issuing an appropriate message if it wants to stop the
7 +# commit. The hook is allowed to edit the commit message file.
8 +#
9 +# To enable this hook, rename this file to "commit-msg".
10 +
11 +# Uncomment the below to add a Signed-off-by line to the message.
12 +# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
13 +# hook is more suited to it.
14 +#
15 +# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
16 +# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"
17 +
18 +# This example catches duplicate Signed-off-by lines.
19 +
20 +test "" = "$(grep '^Signed-off-by: ' "$1" |
21 + sort | uniq -c | sed -e '/^[ ]*1[ ]/d')" || {
22 + echo >&2 Duplicate Signed-off-by lines.
23 + exit 1
24 +}
1 +#!/usr/bin/perl
2 +
3 +use strict;
4 +use warnings;
5 +use IPC::Open2;
6 +
7 +# An example hook script to integrate Watchman
8 +# (https://facebook.github.io/watchman/) with git to speed up detecting
9 +# new and modified files.
10 +#
11 +# The hook is passed a version (currently 2) and last update token
12 +# formatted as a string and outputs to stdout a new update token and
13 +# all files that have been modified since the update token. Paths must
14 +# be relative to the root of the working tree and separated by a single NUL.
15 +#
16 +# To enable this hook, rename this file to "query-watchman" and set
17 +# 'git config core.fsmonitor .git/hooks/query-watchman'
18 +#
19 +my ($version, $last_update_token) = @ARGV;
20 +
21 +# Uncomment for debugging
22 +# print STDERR "$0 $version $last_update_token\n";
23 +
24 +# Check the hook interface version
25 +if ($version ne 2) {
26 + die "Unsupported query-fsmonitor hook version '$version'.\n" .
27 + "Falling back to scanning...\n";
28 +}
29 +
30 +my $git_work_tree = get_working_dir();
31 +
32 +my $retry = 1;
33 +
34 +my $json_pkg;
35 +eval {
36 + require JSON::XS;
37 + $json_pkg = "JSON::XS";
38 + 1;
39 +} or do {
40 + require JSON::PP;
41 + $json_pkg = "JSON::PP";
42 +};
43 +
44 +launch_watchman();
45 +
46 +sub launch_watchman {
47 + my $o = watchman_query();
48 + if (is_work_tree_watched($o)) {
49 + output_result($o->{clock}, @{$o->{files}});
50 + }
51 +}
52 +
53 +sub output_result {
54 + my ($clockid, @files) = @_;
55 +
56 + # Uncomment for debugging watchman output
57 + # open (my $fh, ">", ".git/watchman-output.out");
58 + # binmode $fh, ":utf8";
59 + # print $fh "$clockid\n@files\n";
60 + # close $fh;
61 +
62 + binmode STDOUT, ":utf8";
63 + print $clockid;
64 + print "\0";
65 + local $, = "\0";
66 + print @files;
67 +}
68 +
69 +sub watchman_clock {
70 + my $response = qx/watchman clock "$git_work_tree"/;
71 + die "Failed to get clock id on '$git_work_tree'.\n" .
72 + "Falling back to scanning...\n" if $? != 0;
73 +
74 + return $json_pkg->new->utf8->decode($response);
75 +}
76 +
77 +sub watchman_query {
78 + my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
79 + or die "open2() failed: $!\n" .
80 + "Falling back to scanning...\n";
81 +
82 + # In the query expression below we're asking for names of files that
83 + # changed since $last_update_token but not from the .git folder.
84 + #
85 + # To accomplish this, we're using the "since" generator to use the
86 + # recency index to select candidate nodes and "fields" to limit the
87 + # output to file names only. Then we're using the "expression" term to
88 + # further constrain the results.
89 + my $last_update_line = "";
90 + if (substr($last_update_token, 0, 1) eq "c") {
91 + $last_update_token = "\"$last_update_token\"";
92 + $last_update_line = qq[\n"since": $last_update_token,];
93 + }
94 + my $query = <<" END";
95 + ["query", "$git_work_tree", {$last_update_line
96 + "fields": ["name"],
97 + "expression": ["not", ["dirname", ".git"]]
98 + }]
99 + END
100 +
101 + # Uncomment for debugging the watchman query
102 + # open (my $fh, ">", ".git/watchman-query.json");
103 + # print $fh $query;
104 + # close $fh;
105 +
106 + print CHLD_IN $query;
107 + close CHLD_IN;
108 + my $response = do {local $/; <CHLD_OUT>};
109 +
110 + # Uncomment for debugging the watch response
111 + # open ($fh, ">", ".git/watchman-response.json");
112 + # print $fh $response;
113 + # close $fh;
114 +
115 + die "Watchman: command returned no output.\n" .
116 + "Falling back to scanning...\n" if $response eq "";
117 + die "Watchman: command returned invalid output: $response\n" .
118 + "Falling back to scanning...\n" unless $response =~ /^\{/;
119 +
120 + return $json_pkg->new->utf8->decode($response);
121 +}
122 +
123 +sub is_work_tree_watched {
124 + my ($output) = @_;
125 + my $error = $output->{error};
126 + if ($retry > 0 and $error and $error =~ m/unable to resolve root .* directory (.*) is not watched/) {
127 + $retry--;
128 + my $response = qx/watchman watch "$git_work_tree"/;
129 + die "Failed to make watchman watch '$git_work_tree'.\n" .
130 + "Falling back to scanning...\n" if $? != 0;
131 + $output = $json_pkg->new->utf8->decode($response);
132 + $error = $output->{error};
133 + die "Watchman: $error.\n" .
134 + "Falling back to scanning...\n" if $error;
135 +
136 + # Uncomment for debugging watchman output
137 + # open (my $fh, ">", ".git/watchman-output.out");
138 + # close $fh;
139 +
140 + # Watchman will always return all files on the first query so
141 + # return the fast "everything is dirty" flag to git and do the
142 + # Watchman query just to get it over with now so we won't pay
143 + # the cost in git to look up each individual file.
144 + my $o = watchman_clock();
145 + $error = $output->{error};
146 +
147 + die "Watchman: $error.\n" .
148 + "Falling back to scanning...\n" if $error;
149 +
150 + output_result($o->{clock}, ("/"));
151 + $last_update_token = $o->{clock};
152 +
153 + eval { launch_watchman() };
154 + return 0;
155 + }
156 +
157 + die "Watchman: $error.\n" .
158 + "Falling back to scanning...\n" if $error;
159 +
160 + return 1;
161 +}
162 +
163 +sub get_working_dir {
164 + my $working_dir;
165 + if ($^O =~ 'msys' || $^O =~ 'cygwin') {
166 + $working_dir = Win32::GetCwd();
167 + $working_dir =~ tr/\\/\//;
168 + } else {
169 + require Cwd;
170 + $working_dir = Cwd::cwd();
171 + }
172 +
173 + return $working_dir;
174 +}
1 +#!/bin/sh
2 +#
3 +# An example hook script to prepare a packed repository for use over
4 +# dumb transports.
5 +#
6 +# To enable this hook, rename this file to "post-update".
7 +
8 +exec git update-server-info
1 +#!/bin/sh
2 +#
3 +# An example hook script to verify what is about to be committed
4 +# by applypatch from an e-mail message.
5 +#
6 +# The hook should exit with non-zero status after issuing an
7 +# appropriate message if it wants to stop the commit.
8 +#
9 +# To enable this hook, rename this file to "pre-applypatch".
10 +
11 +. git-sh-setup
12 +precommit="$(git rev-parse --git-path hooks/pre-commit)"
13 +test -x "$precommit" && exec "$precommit" ${1+"$@"}
14 +:
1 +#!/bin/sh
2 +#
3 +# An example hook script to verify what is about to be committed.
4 +# Called by "git commit" with no arguments. The hook should
5 +# exit with non-zero status after issuing an appropriate message if
6 +# it wants to stop the commit.
7 +#
8 +# To enable this hook, rename this file to "pre-commit".
9 +
10 +if git rev-parse --verify HEAD >/dev/null 2>&1
11 +then
12 + against=HEAD
13 +else
14 + # Initial commit: diff against an empty tree object
15 + against=$(git hash-object -t tree /dev/null)
16 +fi
17 +
18 +# If you want to allow non-ASCII filenames set this variable to true.
19 +allownonascii=$(git config --type=bool hooks.allownonascii)
20 +
21 +# Redirect output to stderr.
22 +exec 1>&2
23 +
24 +# Cross platform projects tend to avoid non-ASCII filenames; prevent
25 +# them from being added to the repository. We exploit the fact that the
26 +# printable range starts at the space character and ends with tilde.
27 +if [ "$allownonascii" != "true" ] &&
28 + # Note that the use of brackets around a tr range is ok here, (it's
29 + # even required, for portability to Solaris 10's /usr/bin/tr), since
30 + # the square bracket bytes happen to fall in the designated range.
31 + test $(git diff --cached --name-only --diff-filter=A -z $against |
32 + LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
33 +then
34 + cat <<\EOF
35 +Error: Attempt to add a non-ASCII file name.
36 +
37 +This can cause problems if you want to work with people on other platforms.
38 +
39 +To be portable it is advisable to rename the file.
40 +
41 +If you know what you are doing you can disable this check using:
42 +
43 + git config hooks.allownonascii true
44 +EOF
45 + exit 1
46 +fi
47 +
48 +# If there are whitespace errors, print the offending file names and fail.
49 +exec git diff-index --check --cached $against --
1 +#!/bin/sh
2 +#
3 +# An example hook script to verify what is about to be committed.
4 +# Called by "git merge" with no arguments. The hook should
5 +# exit with non-zero status after issuing an appropriate message to
6 +# stderr if it wants to stop the merge commit.
7 +#
8 +# To enable this hook, rename this file to "pre-merge-commit".
9 +
10 +. git-sh-setup
11 +test -x "$GIT_DIR/hooks/pre-commit" &&
12 + exec "$GIT_DIR/hooks/pre-commit"
13 +:
1 +#!/bin/sh
2 +
3 +# An example hook script to verify what is about to be pushed. Called by "git
4 +# push" after it has checked the remote status, but before anything has been
5 +# pushed. If this script exits with a non-zero status nothing will be pushed.
6 +#
7 +# This hook is called with the following parameters:
8 +#
9 +# $1 -- Name of the remote to which the push is being done
10 +# $2 -- URL to which the push is being done
11 +#
12 +# If pushing without using a named remote those arguments will be equal.
13 +#
14 +# Information about the commits which are being pushed is supplied as lines to
15 +# the standard input in the form:
16 +#
17 +# <local ref> <local oid> <remote ref> <remote oid>
18 +#
19 +# This sample shows how to prevent push of commits where the log message starts
20 +# with "WIP" (work in progress).
21 +
22 +remote="$1"
23 +url="$2"
24 +
25 +zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
26 +
27 +while read local_ref local_oid remote_ref remote_oid
28 +do
29 + if test "$local_oid" = "$zero"
30 + then
31 + # Handle delete
32 + :
33 + else
34 + if test "$remote_oid" = "$zero"
35 + then
36 + # New branch, examine all commits
37 + range="$local_oid"
38 + else
39 + # Update to existing branch, examine new commits
40 + range="$remote_oid..$local_oid"
41 + fi
42 +
43 + # Check for WIP commit
44 + commit=$(git rev-list -n 1 --grep '^WIP' "$range")
45 + if test -n "$commit"
46 + then
47 + echo >&2 "Found WIP commit in $local_ref, not pushing"
48 + exit 1
49 + fi
50 + fi
51 +done
52 +
53 +exit 0
1 +#!/bin/sh
2 +#
3 +# Copyright (c) 2006, 2008 Junio C Hamano
4 +#
5 +# The "pre-rebase" hook is run just before "git rebase" starts doing
6 +# its job, and can prevent the command from running by exiting with
7 +# non-zero status.
8 +#
9 +# The hook is called with the following parameters:
10 +#
11 +# $1 -- the upstream the series was forked from.
12 +# $2 -- the branch being rebased (or empty when rebasing the current branch).
13 +#
14 +# This sample shows how to prevent topic branches that are already
15 +# merged to 'next' branch from getting rebased, because allowing it
16 +# would result in rebasing already published history.
17 +
18 +publish=next
19 +basebranch="$1"
20 +if test "$#" = 2
21 +then
22 + topic="refs/heads/$2"
23 +else
24 + topic=`git symbolic-ref HEAD` ||
25 + exit 0 ;# we do not interrupt rebasing detached HEAD
26 +fi
27 +
28 +case "$topic" in
29 +refs/heads/??/*)
30 + ;;
31 +*)
32 + exit 0 ;# we do not interrupt others.
33 + ;;
34 +esac
35 +
36 +# Now we are dealing with a topic branch being rebased
37 +# on top of master. Is it OK to rebase it?
38 +
39 +# Does the topic really exist?
40 +git show-ref -q "$topic" || {
41 + echo >&2 "No such branch $topic"
42 + exit 1
43 +}
44 +
45 +# Is topic fully merged to master?
46 +not_in_master=`git rev-list --pretty=oneline ^master "$topic"`
47 +if test -z "$not_in_master"
48 +then
49 + echo >&2 "$topic is fully merged to master; better remove it."
50 + exit 1 ;# we could allow it, but there is no point.
51 +fi
52 +
53 +# Is topic ever merged to next? If so you should not be rebasing it.
54 +only_next_1=`git rev-list ^master "^$topic" ${publish} | sort`
55 +only_next_2=`git rev-list ^master ${publish} | sort`
56 +if test "$only_next_1" = "$only_next_2"
57 +then
58 + not_in_topic=`git rev-list "^$topic" master`
59 + if test -z "$not_in_topic"
60 + then
61 + echo >&2 "$topic is already up to date with master"
62 + exit 1 ;# we could allow it, but there is no point.
63 + else
64 + exit 0
65 + fi
66 +else
67 + not_in_next=`git rev-list --pretty=oneline ^${publish} "$topic"`
68 + /usr/bin/perl -e '
69 + my $topic = $ARGV[0];
70 + my $msg = "* $topic has commits already merged to public branch:\n";
71 + my (%not_in_next) = map {
72 + /^([0-9a-f]+) /;
73 + ($1 => 1);
74 + } split(/\n/, $ARGV[1]);
75 + for my $elem (map {
76 + /^([0-9a-f]+) (.*)$/;
77 + [$1 => $2];
78 + } split(/\n/, $ARGV[2])) {
79 + if (!exists $not_in_next{$elem->[0]}) {
80 + if ($msg) {
81 + print STDERR $msg;
82 + undef $msg;
83 + }
84 + print STDERR " $elem->[1]\n";
85 + }
86 + }
87 + ' "$topic" "$not_in_next" "$not_in_master"
88 + exit 1
89 +fi
90 +
91 +<<\DOC_END
92 +
93 +This sample hook safeguards topic branches that have been
94 +published from being rewound.
95 +
96 +The workflow assumed here is:
97 +
98 + * Once a topic branch forks from "master", "master" is never
99 + merged into it again (either directly or indirectly).
100 +
101 + * Once a topic branch is fully cooked and merged into "master",
102 + it is deleted. If you need to build on top of it to correct
103 + earlier mistakes, a new topic branch is created by forking at
104 + the tip of the "master". This is not strictly necessary, but
105 + it makes it easier to keep your history simple.
106 +
107 + * Whenever you need to test or publish your changes to topic
108 + branches, merge them into "next" branch.
109 +
110 +The script, being an example, hardcodes the publish branch name
111 +to be "next", but it is trivial to make it configurable via
112 +$GIT_DIR/config mechanism.
113 +
114 +With this workflow, you would want to know:
115 +
116 +(1) ... if a topic branch has ever been merged to "next". Young
117 + topic branches can have stupid mistakes you would rather
118 + clean up before publishing, and things that have not been
119 + merged into other branches can be easily rebased without
120 + affecting other people. But once it is published, you would
121 + not want to rewind it.
122 +
123 +(2) ... if a topic branch has been fully merged to "master".
124 + Then you can delete it. More importantly, you should not
125 + build on top of it -- other people may already want to
126 + change things related to the topic as patches against your
127 + "master", so if you need further changes, it is better to
128 + fork the topic (perhaps with the same name) afresh from the
129 + tip of "master".
130 +
131 +Let's look at this example:
132 +
133 + o---o---o---o---o---o---o---o---o---o "next"
134 + / / / /
135 + / a---a---b A / /
136 + / / / /
137 + / / c---c---c---c B /
138 + / / / \ /
139 + / / / b---b C \ /
140 + / / / / \ /
141 + ---o---o---o---o---o---o---o---o---o---o---o "master"
142 +
143 +
144 +A, B and C are topic branches.
145 +
146 + * A has one fix since it was merged up to "next".
147 +
148 + * B has finished. It has been fully merged up to "master" and "next",
149 + and is ready to be deleted.
150 +
151 + * C has not merged to "next" at all.
152 +
153 +We would want to allow C to be rebased, refuse A, and encourage
154 +B to be deleted.
155 +
156 +To compute (1):
157 +
158 + git rev-list ^master ^topic next
159 + git rev-list ^master next
160 +
161 + if these match, topic has not merged in next at all.
162 +
163 +To compute (2):
164 +
165 + git rev-list master..topic
166 +
167 + if this is empty, it is fully merged to "master".
168 +
169 +DOC_END
1 +#!/bin/sh
2 +#
3 +# An example hook script to make use of push options.
4 +# The example simply echoes all push options that start with 'echoback='
5 +# and rejects all pushes when the "reject" push option is used.
6 +#
7 +# To enable this hook, rename this file to "pre-receive".
8 +
9 +if test -n "$GIT_PUSH_OPTION_COUNT"
10 +then
11 + i=0
12 + while test "$i" -lt "$GIT_PUSH_OPTION_COUNT"
13 + do
14 + eval "value=\$GIT_PUSH_OPTION_$i"
15 + case "$value" in
16 + echoback=*)
17 + echo "echo from the pre-receive-hook: ${value#*=}" >&2
18 + ;;
19 + reject)
20 + exit 1
21 + esac
22 + i=$((i + 1))
23 + done
24 +fi
1 +#!/bin/sh
2 +#
3 +# An example hook script to prepare the commit log message.
4 +# Called by "git commit" with the name of the file that has the
5 +# commit message, followed by the description of the commit
6 +# message's source. The hook's purpose is to edit the commit
7 +# message file. If the hook fails with a non-zero status,
8 +# the commit is aborted.
9 +#
10 +# To enable this hook, rename this file to "prepare-commit-msg".
11 +
12 +# This hook includes three examples. The first one removes the
13 +# "# Please enter the commit message..." help message.
14 +#
15 +# The second includes the output of "git diff --name-status -r"
16 +# into the message, just before the "git status" output. It is
17 +# commented because it doesn't cope with --amend or with squashed
18 +# commits.
19 +#
20 +# The third example adds a Signed-off-by line to the message, that can
21 +# still be edited. This is rarely a good idea.
22 +
23 +COMMIT_MSG_FILE=$1
24 +COMMIT_SOURCE=$2
25 +SHA1=$3
26 +
27 +/usr/bin/perl -i.bak -ne 'print unless(m/^. Please enter the commit message/..m/^#$/)' "$COMMIT_MSG_FILE"
28 +
29 +# case "$COMMIT_SOURCE,$SHA1" in
30 +# ,|template,)
31 +# /usr/bin/perl -i.bak -pe '
32 +# print "\n" . `git diff --cached --name-status -r`
33 +# if /^#/ && $first++ == 0' "$COMMIT_MSG_FILE" ;;
34 +# *) ;;
35 +# esac
36 +
37 +# SOB=$(git var GIT_COMMITTER_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
38 +# git interpret-trailers --in-place --trailer "$SOB" "$COMMIT_MSG_FILE"
39 +# if test -z "$COMMIT_SOURCE"
40 +# then
41 +# /usr/bin/perl -i.bak -pe 'print "\n" if !$first_line++' "$COMMIT_MSG_FILE"
42 +# fi
1 +#!/bin/sh
2 +
3 +# An example hook script to update a checked-out tree on a git push.
4 +#
5 +# This hook is invoked by git-receive-pack(1) when it reacts to git
6 +# push and updates reference(s) in its repository, and when the push
7 +# tries to update the branch that is currently checked out and the
8 +# receive.denyCurrentBranch configuration variable is set to
9 +# updateInstead.
10 +#
11 +# By default, such a push is refused if the working tree and the index
12 +# of the remote repository has any difference from the currently
13 +# checked out commit; when both the working tree and the index match
14 +# the current commit, they are updated to match the newly pushed tip
15 +# of the branch. This hook is to be used to override the default
16 +# behaviour; however the code below reimplements the default behaviour
17 +# as a starting point for convenient modification.
18 +#
19 +# The hook receives the commit with which the tip of the current
20 +# branch is going to be updated:
21 +commit=$1
22 +
23 +# It can exit with a non-zero status to refuse the push (when it does
24 +# so, it must not modify the index or the working tree).
25 +die () {
26 + echo >&2 "$*"
27 + exit 1
28 +}
29 +
30 +# Or it can make any necessary changes to the working tree and to the
31 +# index to bring them to the desired state when the tip of the current
32 +# branch is updated to the new commit, and exit with a zero status.
33 +#
34 +# For example, the hook can simply run git read-tree -u -m HEAD "$1"
35 +# in order to emulate git fetch that is run in the reverse direction
36 +# with git push, as the two-tree form of git read-tree -u -m is
37 +# essentially the same as git switch or git checkout that switches
38 +# branches while keeping the local changes in the working tree that do
39 +# not interfere with the difference between the branches.
40 +
41 +# The below is a more-or-less exact translation to shell of the C code
42 +# for the default behaviour for git's push-to-checkout hook defined in
43 +# the push_to_deploy() function in builtin/receive-pack.c.
44 +#
45 +# Note that the hook will be executed from the repository directory,
46 +# not from the working tree, so if you want to perform operations on
47 +# the working tree, you will have to adapt your code accordingly, e.g.
48 +# by adding "cd .." or using relative paths.
49 +
50 +if ! git update-index -q --ignore-submodules --refresh
51 +then
52 + die "Up-to-date check failed"
53 +fi
54 +
55 +if ! git diff-files --quiet --ignore-submodules --
56 +then
57 + die "Working directory has unstaged changes"
58 +fi
59 +
60 +# This is a rough translation of:
61 +#
62 +# head_has_history() ? "HEAD" : EMPTY_TREE_SHA1_HEX
63 +if git cat-file -e HEAD 2>/dev/null
64 +then
65 + head=HEAD
66 +else
67 + head=$(git hash-object -t tree --stdin </dev/null)
68 +fi
69 +
70 +if ! git diff-index --quiet --cached --ignore-submodules $head --
71 +then
72 + die "Working directory has staged changes"
73 +fi
74 +
75 +if ! git read-tree -u -m "$commit"
76 +then
77 + die "Could not update working tree to new HEAD"
78 +fi
1 +#!/bin/sh
2 +#
3 +# An example hook script to block unannotated tags from entering.
4 +# Called by "git receive-pack" with arguments: refname sha1-old sha1-new
5 +#
6 +# To enable this hook, rename this file to "update".
7 +#
8 +# Config
9 +# ------
10 +# hooks.allowunannotated
11 +# This boolean sets whether unannotated tags will be allowed into the
12 +# repository. By default they won't be.
13 +# hooks.allowdeletetag
14 +# This boolean sets whether deleting tags will be allowed in the
15 +# repository. By default they won't be.
16 +# hooks.allowmodifytag
17 +# This boolean sets whether a tag may be modified after creation. By default
18 +# it won't be.
19 +# hooks.allowdeletebranch
20 +# This boolean sets whether deleting branches will be allowed in the
21 +# repository. By default they won't be.
22 +# hooks.denycreatebranch
23 +# This boolean sets whether remotely creating branches will be denied
24 +# in the repository. By default this is allowed.
25 +#
26 +
27 +# --- Command line
28 +refname="$1"
29 +oldrev="$2"
30 +newrev="$3"
31 +
32 +# --- Safety check
33 +if [ -z "$GIT_DIR" ]; then
34 + echo "Don't run this script from the command line." >&2
35 + echo " (if you want, you could supply GIT_DIR then run" >&2
36 + echo " $0 <ref> <oldrev> <newrev>)" >&2
37 + exit 1
38 +fi
39 +
40 +if [ -z "$refname" -o -z "$oldrev" -o -z "$newrev" ]; then
41 + echo "usage: $0 <ref> <oldrev> <newrev>" >&2
42 + exit 1
43 +fi
44 +
45 +# --- Config
46 +allowunannotated=$(git config --type=bool hooks.allowunannotated)
47 +allowdeletebranch=$(git config --type=bool hooks.allowdeletebranch)
48 +denycreatebranch=$(git config --type=bool hooks.denycreatebranch)
49 +allowdeletetag=$(git config --type=bool hooks.allowdeletetag)
50 +allowmodifytag=$(git config --type=bool hooks.allowmodifytag)
51 +
52 +# check for no description
53 +projectdesc=$(sed -e '1q' "$GIT_DIR/description")
54 +case "$projectdesc" in
55 +"Unnamed repository"* | "")
56 + echo "*** Project description file hasn't been set" >&2
57 + exit 1
58 + ;;
59 +esac
60 +
61 +# --- Check types
62 +# if $newrev is 0000...0000, it's a commit to delete a ref.
63 +zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
64 +if [ "$newrev" = "$zero" ]; then
65 + newrev_type=delete
66 +else
67 + newrev_type=$(git cat-file -t $newrev)
68 +fi
69 +
70 +case "$refname","$newrev_type" in
71 + refs/tags/*,commit)
72 + # un-annotated tag
73 + short_refname=${refname##refs/tags/}
74 + if [ "$allowunannotated" != "true" ]; then
75 + echo "*** The un-annotated tag, $short_refname, is not allowed in this repository" >&2
76 + echo "*** Use 'git tag [ -a | -s ]' for tags you want to propagate." >&2
77 + exit 1
78 + fi
79 + ;;
80 + refs/tags/*,delete)
81 + # delete tag
82 + if [ "$allowdeletetag" != "true" ]; then
83 + echo "*** Deleting a tag is not allowed in this repository" >&2
84 + exit 1
85 + fi
86 + ;;
87 + refs/tags/*,tag)
88 + # annotated tag
89 + if [ "$allowmodifytag" != "true" ] && git rev-parse $refname > /dev/null 2>&1
90 + then
91 + echo "*** Tag '$refname' already exists." >&2
92 + echo "*** Modifying a tag is not allowed in this repository." >&2
93 + exit 1
94 + fi
95 + ;;
96 + refs/heads/*,commit)
97 + # branch
98 + if [ "$oldrev" = "$zero" -a "$denycreatebranch" = "true" ]; then
99 + echo "*** Creating a branch is not allowed in this repository" >&2
100 + exit 1
101 + fi
102 + ;;
103 + refs/heads/*,delete)
104 + # delete branch
105 + if [ "$allowdeletebranch" != "true" ]; then
106 + echo "*** Deleting a branch is not allowed in this repository" >&2
107 + exit 1
108 + fi
109 + ;;
110 + refs/remotes/*,commit)
111 + # tracking branch
112 + ;;
113 + refs/remotes/*,delete)
114 + # delete tracking branch
115 + if [ "$allowdeletebranch" != "true" ]; then
116 + echo "*** Deleting a tracking branch is not allowed in this repository" >&2
117 + exit 1
118 + fi
119 + ;;
120 + *)
121 + # Anything else (is there anything else?)
122 + echo "*** Update hook: unknown type of update to ref $refname of type $newrev_type" >&2
123 + exit 1
124 + ;;
125 +esac
126 +
127 +# --- Finished
128 +exit 0
1 +/*-----------배경 그라디언트-----------*/
1 #gradient-bg{ 2 #gradient-bg{
2 width: 100%; 3 width: 100%;
3 height: 100vh; 4 height: 100vh;
4 background: rgb(255, 255, 255); 5 background: rgb(255, 255, 255);
5 background-image: 6 background-image:
6 - radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%), 7 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
7 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%), 8 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
8 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%), 9 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
9 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%); 10 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
10 animation: colorChange 6s infinite alternate-reverse; 11 animation: colorChange 6s infinite alternate-reverse;
11 -
12 } 12 }
13 13
14 @keyframes colorChange { 14 @keyframes colorChange {
...@@ -114,3 +114,389 @@ ...@@ -114,3 +114,389 @@
114 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);} 114 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);}
115 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);} 115 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);}
116 } 116 }
117 +/*-----------배경 그라디언트-----------*/
118 +
119 +:root {
120 + --FACE_WIDTH: 450px;
121 + --FACE_HEIGHT: 450px;
122 + --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
123 + --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
124 + --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
125 + --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
126 + --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
127 + --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
128 + --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
129 + --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
130 + --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
131 + --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
132 + --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
133 + --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
134 + --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
135 +}
136 +
137 +/* 이모지 얼굴 */
138 +body {
139 + display: flex;
140 + align-items: center;
141 + justify-content: center;
142 + height: 100vh;
143 + }
144 +
145 + #emoji {
146 + position: relative;
147 + width: var(--FACE_WIDTH);
148 + height: var(--FACE_HEIGHT);
149 + transform: translate3d(0, 0, 0);
150 + }
151 +
152 + .layer {
153 + position: absolute;
154 + width: 100%;
155 + height: 100%;
156 + }
157 +
158 + .face {
159 + position: absolute;
160 + top: 0;
161 + right: 0;
162 + bottom: 0;
163 + left: 0;
164 + margin: auto;
165 + width: var(--FACE_WIDTH);
166 + height: var(--FACE_HEIGHT);
167 + background-color: #FECA32;
168 + border-radius: 100%;
169 + box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
170 + }
171 +
172 + .shine {
173 + position: absolute;
174 + top: 0;
175 + right: 0;
176 + bottom: 0;
177 + left: 0;
178 + margin: auto;
179 + width: var(--SHINE_WIDTH);
180 + height: var(--SHINE_HEIGHT);
181 + background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
182 + border-radius: 100%;
183 + opacity: 0.8;
184 + }
185 +
186 + .eye {
187 + width: var(--EYE_WIDTH);
188 + height: var(--EYE_HEIGHT);
189 + background-color: #A1620F;
190 + border-radius: 100%;
191 + box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
192 + -webkit-animation: blink 5s infinite;
193 + animation: blink 5s infinite;
194 + }
195 + .eye.left {
196 + position: absolute;
197 + top: 0;
198 + right: var(--EYE_LEFT_RIGHT);
199 + bottom: var(--EYE_LEFT_BOTTOM);
200 + left: 0;
201 + margin: auto;
202 + }
203 + .eye.right {
204 + position: absolute;
205 + top: 0;
206 + right: 0;
207 + bottom: var(--EYE_RIGHT_BOTTOM);
208 + left: var(--EYE_RIGHT_LEFT);
209 + margin: auto;
210 + }
211 +
212 + .mouth {
213 + position: absolute;
214 + top: var(--MOUTH_TOP);
215 + right: 0;
216 + bottom: 0;
217 + left: 0;
218 + margin: auto;
219 + overflow: hidden;
220 + width: var(--MOUTH_WIDTH);
221 + height: var(--MOUTH_HEIGHT);
222 + transform: translate3d(0, 0, 0);
223 + }
224 + .mouth:before {
225 + position: absolute;
226 + top: 0;
227 + right: 0;
228 + bottom: var(--MOUTH_BEFORE_BOTTOM);
229 + left: 0;
230 + margin: auto;
231 + content: "";
232 + width: 100%;
233 + height: 100%;
234 + background-color: #6E440B;
235 + border-radius: 100%;
236 + box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
237 + transform: scale(1);
238 + }
239 + .mouth:after {
240 + position: absolute;
241 + top: 0;
242 + right: 0;
243 + bottom: var(--MOUTH_AFTER_BOTTOM);
244 + left: 0;
245 + margin: auto;
246 + content: "";
247 + width: calc(100% - 20px);
248 + height: 100%;
249 + background-color: #FECA32;
250 + border-radius: 100%;
251 + box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
252 + transform-origin: 50% 100%;
253 + transform: scale(1.6);
254 + }
255 +
256 + @-webkit-keyframes blink {
257 + 0%, 96% {
258 + transform: scaleY(1);
259 + }
260 + 98% {
261 + transform: scaleY(0.1);
262 + }
263 + 100% {
264 + transform: scaleY(1);
265 + }
266 + }
267 +
268 + @keyframes blink {
269 + 0%, 96% {
270 + transform: scaleY(1);
271 + }
272 + 98% {
273 + transform: scaleY(0.1);
274 + }
275 + 100% {
276 + transform: scaleY(1);
277 + }
278 + }
279 + /* 이모지 얼굴 */
280 +
281 +/* 내비 */
282 +body {
283 + font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
284 + overflow-x: hidden;
285 +}
286 +.center
287 +{
288 + text-align: center;
289 +}
290 +p
291 +{
292 + font-size: 20px;
293 +}
294 +a,
295 +a:hover,
296 +a:focus,
297 +a:active,{
298 + color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
299 + outline: none; /*gives outline to an element*/
300 +}
301 +h2,
302 +h3,
303 +{
304 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
305 + text-transform: uppercase;
306 + font-weight: 700;
307 + font-size: 30px;
308 +}
309 +hr.star-light,
310 +hr.star-primary {
311 + padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
312 + border: none;
313 + border-top: solid 5px;
314 + text-align: center;
315 + max-width: 250px;
316 + margin: 25px auto 30px;
317 +}
318 +hr.star-light:after,
319 +hr.star-primary:after {
320 + content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
321 + font-family: FontAwesome;
322 + display: inline-block;
323 + position: relative;
324 + top: -0.8em;
325 + font-size: 2em;
326 + padding: 0 0.25em;
327 +}
328 +hr.star-light {
329 + border-color: white; /*gives border white*/
330 +}
331 +hr.star-light:after {
332 + background-color: #18BC9C;
333 + color: white;
334 +}
335 +hr.star-primary {
336 + border-color: #2C3E50;
337 +}
338 +hr.star-primary:after {
339 + background-color: white;
340 + color: #2C3E50;
341 +}
342 +header {
343 + text-align: center;
344 + background: #18BC9C;
345 + color: white;
346 +}
347 +header .container {
348 + padding-top: 100px;
349 + padding-bottom: 50px;
350 +}
351 +header .intro .name {
352 + display: block;
353 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
354 + text-transform: uppercase;
355 + font-weight: 700;
356 + font-size: 2em;
357 +}
358 +header .intro .skills {
359 + font-size: 1.25em;
360 + font-weight: 300;/*how much bold*/
361 +}
362 +@media (min-width: 768px) {/* if minimum width exceeds then perform*/
363 + header .container {
364 + padding-top: 200px;
365 + padding-bottom: 100px;
366 + }
367 + header .intro .name {
368 + font-size: 4.75em;
369 + }
370 + header .intro .skills {
371 + font-size: 1.75em;
372 + }
373 +}
374 +.navbar-custom {
375 + background: #2C3E50;
376 + font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
377 + text-transform: uppercase;
378 + font-weight: 700;
379 + border: none;
380 +}
381 +}
382 +.navbar-custom .navbar-nav {
383 + letter-spacing: 1px;
384 +}
385 +.navbar-custom .navbar-nav li a {
386 + color: white;
387 +}
388 +.navbar-custom .navbar-nav li a:hover {
389 + color: #18BC9C;
390 + outline: none;
391 +}
392 +.navbar-custom .navbar-nav li a:focus,
393 +.navbar-custom .navbar-nav li a:active {
394 + color: white;
395 +}
396 +.navbar-custom .navbar-nav li.active a {
397 + color: white;
398 + background: #18BC9C;
399 +}
400 +.navbar-custom .navbar-nav li.active a:hover,
401 +.navbar-custom .navbar-nav li.active a:focus,
402 +.navbar-custom .navbar-nav li.active a:active {
403 + color: white;
404 + background: #18BC9C;
405 +}
406 +.navbar-custom .navbar-toggle {
407 + color: white;
408 + text-transform: uppercase;
409 + font-size: 10px;
410 + border-color: white;
411 +}
412 +.navbar-custom .navbar-toggle:hover,
413 +.navbar-custom .navbar-toggle:focus {
414 + background-color: #18BC9C;
415 + color: white;
416 + border-color: #18BC9C;
417 +}
418 +footer {
419 + color: white;
420 +}
421 +footer h3 {
422 + margin-bottom: 30px;
423 +}
424 +footer .footer-above {
425 + padding-top: 50px;
426 + background-color: #2C3E50;
427 +}
428 +footer .footer-col {
429 + margin-bottom: 50px;
430 +}
431 +footer .footer-below {
432 + padding: 25px 0;
433 + background-color: #233140;
434 +}
435 +/* 내비 */
436 +
437 +
438 +
439 +
440 +/* 이모지 레인 */
441 +body{
442 + margin: 0;
443 + padding: 0;
444 + width: 100%;
445 + height: 100vh;
446 + background: #000;
447 + font-family: 'Oswald', sans-serif;
448 +}
449 +
450 +#text {
451 + display: flex;
452 + height: 100vh;
453 + align-items: center;
454 + justify-content: center;
455 + text-align: center;
456 +}
457 +
458 +#container {
459 + left: 0px;
460 + top: -100px;
461 + height: calc(100vh + 100px);
462 + overflow: hidden;
463 + position: relative;
464 +}
465 +
466 +#animate{
467 + margin: 0 auto;
468 + width: 20px;
469 + overflow: visible;
470 + position: relative;
471 +}
472 +
473 +#all{
474 + overflow: hidden;
475 + height: 100vh;
476 + width: 100%;
477 + position: fixed;
478 +}
479 +
480 +#footer{
481 + color: #ffc0cb;
482 + text-decoration: none;
483 + position: fixed;
484 + width: 752px;
485 + bottom: 20px;
486 + align-content: center;
487 + float: none;
488 + margin-left: calc(50% - 376px);
489 +}
490 +
491 +#a, p{
492 + text-decoration: none;
493 + color: #FFFFFF;
494 + letter-spacing: 6px;
495 + transition: all 0.5s ease-in-out;
496 + width: auto;
497 + margin: 0 auto;
498 + text-align: center;
499 + align-items: center;
500 +}
501 +
502 +/* 이모지 레인 */
......
...@@ -2,26 +2,93 @@ ...@@ -2,26 +2,93 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css"> 7 + <link rel="stylesheet" href="/index.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
9 + <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
8 </head> 10 </head>
9 11
10 -<body> 12 +<body style="margin: 0 auto">
11 13
12 - <!-- partial:index.partial.html --> 14 + <!-- 큰 묶음은 배경임 -->
13 <div id="gradient-bg"> 15 <div id="gradient-bg">
16 +
17 + <!-- 내비게이션 -->
18 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
19 + <!--css link-->
20 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
21 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
22 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
23 +
24 + <body id="page-top">
25 + <!--creating a navigation bar-->
26 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
27 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
28 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
29 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
30 + <span></span> Menu <i class="fa fa-bars"></i>
31 + </button>
32 + </div><!--end of button-->
33 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
34 + <ul class="nav navbar-nav">
35 + <li><a href="/index.html">Home</a></li>
36 + </ul>
37 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
38 + <li> <a href="/About Us/About Us.html">About Us</a></li>
39 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
40 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
41 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
42 + </ul>
14 </div> 43 </div>
15 - <!-- partial --> 44 + </div>
16 - <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script> 45 + </nav>
46 + <!-- 내비게이션 -->
17 47
18 - <button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
19 - <button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
20 - <button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
21 - <button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
22 48
23 - <br /> 49 + <!-- 이모지 얼굴 -->
24 - <hr /> 50 + <div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
51 + <ul id="emoji">
52 + <li class="layer" data-depth="0.2">
53 + <div class="face"></div>
54 + </li>
55 + <li class="layer" data-depth="0.3">
56 + <div class="shine"></div>
57 + </li>
58 + <li class="layer" data-depth="0.8">
59 + <div class="eye left"></div>
60 + </li>
61 + <li class="layer" data-depth="0.8">
62 + <div class="eye right"></div>
63 + </li>
64 + <li class="layer" data-depth="0.8">
65 + <div class="mouth"></div>
66 + </li>
67 + </ul>
25 68
69 + <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script>src="/face.js"></script>
70 + </div>
71 + <!-- 이모지 얼굴 -->
26 72
73 + <!-- 이모지 레인 -->
74 + <div style="z-index: 1;">
75 + <link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet">
76 + <div id="all">
77 + <div id="container">
78 + <div id="animate">
79 + </div>
80 + </div>
81 + </div>
82 +
83 + <div id="footer" style="">
84 + <p>W e l c o m e &nbsp;&nbsp;t o &nbsp;&nbsp;E M O J I &nbsp;&nbsp;H U M A N &nbsp;&nbsp;W o r l d</p>
85 + </div>
86 +
87 + <script src="/index.js"></script>
88 + </div>
89 + <!-- 이모지 레인 -->
90 +
91 + </div>
92 + <script src="/index.js"></script>
93 + <!-- 큰 묶음은 배경임 -->
27 </body> 94 </body>
......
1 -//the only purpose of this is to generate the CSS keyframes 1 +// 배경 그라디언트
2 -
3 var str = 0; 2 var str = 0;
4 var num = 100; 3 var num = 100;
5 var porcents = 100; 4 var porcents = 100;
...@@ -12,3 +11,75 @@ var str = 0; ...@@ -12,3 +11,75 @@ var str = 0;
12 num = num - 0.5; 11 num = num - 0.5;
13 porcents = porcents -1; 12 porcents = porcents -1;
14 } 13 }
14 +// 배경 그라디언트
15 +
16 +
17 +
18 +
19 +// 이모지 레인
20 + var container = document.getElementById('animate');
21 + var emoji = ['🍹', '🐻', '✌', '🍒', '🥕', '🎸', '🍭', '💖', '🥰', '🎵', '🌏', '🍰', '🎃', '🎅', '🌈', '🌷', '🥳', '🦄', '🍀', '👻', '🌴', '🐬', '🎁'];
22 + var circles = [];
23 +
24 + for (var i = 0; i < 15; i++) {
25 + addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
26 + addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
27 + addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
28 + addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
29 + addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
30 + addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
31 + addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
32 + addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
33 + }
34 +
35 +
36 +
37 + function addCircle(delay, range, color) {
38 + setTimeout(function() {
39 + var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
40 + x: -0.15 + Math.random() * 0.3,
41 + y: 1 + Math.random() * 1
42 + }, range);
43 + circles.push(c);
44 + }, delay);
45 + }
46 +
47 + function Circle(x, y, c, v, range) {
48 + var _this = this;
49 + this.x = x;
50 + this.y = y;
51 + this.color = c;
52 + this.v = v;
53 + this.range = range;
54 + this.element = document.createElement('span');
55 + /*this.element.style.display = 'block';*/
56 + this.element.style.opacity = 0;
57 + this.element.style.position = 'absolute';
58 + this.element.style.fontSize = '26px';
59 + this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
60 + this.element.innerHTML = c;
61 + container.appendChild(this.element);
62 +
63 + this.update = function() {
64 + if (_this.y > 800) {
65 + _this.y = 80 + Math.random() * 4;
66 + _this.x = _this.range[0] + Math.random() * _this.range[1];
67 + }
68 + _this.y += _this.v.y;
69 + _this.x += _this.v.x;
70 + this.element.style.opacity = 1;
71 + this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
72 + this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
73 + this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
74 + };
75 + }
76 +
77 + function animate() {
78 + for (var i in circles) {
79 + circles[i].update();
80 + }
81 + requestAnimationFrame(animate);
82 + }
83 +
84 + animate();
85 +// 이모지 레인
......
1 +# git ls-files --others --exclude-from=.git/info/exclude
2 +# Lines that start with '#' are comments.
3 +# For a project mostly in C, the following would be a good set of
4 +# exclude patterns (uncomment them if you want to use them):
5 +# *.[oa]
6 +# *~