EMO-TI.html
6.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.css">
<style>
body {
background-image: url("shrink-05.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
font-size: 25pt;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
}
</style>
<div style="height: 100px; overflow: auto">
</div>
</head>
<!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
<body>
<h1>MBTI + EMOJI<span>= EMOTI</span></h1>
<p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
<br>
<p2>
<p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
아래의 카드에서 한 번 찾아보세요!<br> </p2>
</p>
<body id="page-top">
<!--creating a navigation bar-->
<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-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</nav>
<!-- 내비게이션 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/src/ISTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ISTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ISFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ISFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/INTP.jpg"></div>
<div class="swiper-slide"><img src="/src/INTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/INFP.jpg"></div>
<div class="swiper-slide"><img src="/src/INFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ESTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ESTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ESFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ESFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ENTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ENTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ENFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ENFJ.jpg"></div>
</div>
<!-- If we need pagination -->
<br>
<br>
<br>
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- </div> -->
<script src="/EMO-TI/EMO-TI.js" type="module"></script>
<div style="align-content: center;">
<audio id="istp_audio" src="/src/Burn The House Down.mp3" loop controls hidden></audio>
<audio id="istj_audio" src="/src/Rise.mp3" loop controls hidden></audio>
<audio id="isfp_audio" src="/src/비밀의 화원.mp3" loop controls hidden></audio>
<audio id="isfj_audio" src="/src/always ill care.mp3" loop controls hidden></audio>
<audio id="intp_audio" src="/src/Like That.mp3" loop controls hidden></audio>
<audio id="intj_audio" src="/src/Va Va Vis.mp3" loop controls hidden></audio>
<audio id="infp_audio" src="/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio>
<audio id="infj_audio" src="/src/Shining.mp3" loop controls hidden></audio>
<audio id="estp_audio" src="/src/Break The Rules.mp3" loop controls hidden></audio>
<audio id="estj_audio" src="/src/Kings Queens.mp3" loop controls hidden></audio>
<audio id="esfp_audio" src="/src/Beautiful Beautiful.mp3" loop controls hidden></audio>
<audio id="esfj_audio" src="/src/Slow Ride.mp3" loop controls hidden></audio>
<audio id="entp_audio" src="/src/불꽃놀이.mp3" loop controls hidden></audio>
<audio id="entj_audio" src="/src/Boss Bitch.mp3" loop controls hidden></audio>
<audio id="enfp_audio" src="/src/Moonshot.mp3" loop controls hidden></audio>
<audio id="enfj_audio" src="/src/Island Island.mp3" loop controls hidden></audio>
</div>
</body>
</html>