송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
1e9fe00c 1 parent cdeb05a3

2/1트

Expand all
Inline Side-by-side
Showing 37 changed files with 1522 additions and 852 deletions
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - iOS 10 chat bubbles Pure CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section>
<!-- 1번 대화 -->
<div class="from-them">
<p>안녕하세요!!<br>
저는 이모지 인간이라고 해요 @.@ <br>
당신을 만나게 되어서 매우 반가워요 :)
</p>
</div>
<div class="clear"></div>
<div class="from-me slam">
<p>말풍선을 눌러 이모지 인간에게 인사하기</p>
</div>
<div class="clear"></div>
<!-- 1번 대화 -->
<!-- 2번 대화 -->
<div class="from-me gentle">
<p>이모지 인간은 뭔가요...?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>이모지 인간은 말그대로
“이모지”로 이루어진 인격체입니다.
여러분이 알고 계시는 다양한 이모지들이 있죠?
저는 그 어떤 모습의 이모지든 다 될 수 있어요.
이모지 자체가 저의 몸이라고 생각하시면 됩니다.
예를 들어, 옆의 태양이나 파라솔까지도요!
(하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
</div>
<!-- 2번 대화 -->
<!-- 3번 대화 -->
<div class="from-me gentle">
<p>어...이모지 인간은 어떻게 생겨났나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>요즘 10대-20대들은 SNS 사용시,
주로 이모지를 사용하여 대화를 하곤 합니다.
문자로 길게 설명을 하는 것보다 표정이나 감정들을
직관적으로 전달할 수 있는 이모지가
더 간편하기에 그렇습니다.
이에 현대인들의 일상은 이모지로 가득 찬,
“<이모지 인간>이 아닐까”
하는 발상에서 제가 생겨나게 되었답니다.</p>
</div>
<!-- 3번 대화 -->
<!-- 4번 대화 -->
<div class="from-me gentle">
<p>그럼 이모지 인간은 뭘할 수 있나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>첫째, 저와의 간단한 대화!
둘째, 이모지로 보내는 문자!
셋째, 이모지 MBTI 카드!</p>
</div>
<div class="from-them">
<p>첫번째...보다는
두번째와 세번째에 대한 설명을 더 해볼께요...
이모지로 보내는 문자는 Emo-ssage라고 해요.
아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
대화 중 일부를 이모지로 채워줄 거랍니다.
작성이 완료되면 여러분만의 emo-ssage를
이미지로 저장할 수 있어요!</p>
</div>
<div class="from-them">
<p>이모지 MBTI 카드는 EMOTI라고 해요.
여러 이모지들을 활용해서 각 16개 mbti
고유의 이모지들을 탄생시켰어요.
아, 그리고 각 mbti 카드를 넘길 때마다
어울리는 노래도 흘러나온답니다! </p>
</div>
<!-- 4번 대화 -->
<!-- 5번 대화 -->
<div class="from-me gentle">
<p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>This page cannot be found</p>
</div>
<!-- 5번 대화 -->
</section>
<script src="./script.js"></script>
</body>
</html>
//extends from ios 7 chat bubbles
//https://codepen.io/samuelkraft/pen/Farhl
//cmd/ctrl + shift + 5 rerun preview
\ No newline at end of file
body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
}
section {
max-width: 450px;
margin: 50px auto;
}
section div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
.clear {
clear: both;
}
.from-me {
position: relative;
padding: 10px 20px;
color: white;
background: #0B93F6;
border-radius: 25px;
float: right;
}
.from-me:before {
content: "";
position: absolute;
z-index: -1;
bottom: -2px;
right: -7px;
height: 20px;
border-right: 20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-me:after {
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -56px;
width: 26px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
.from-them {
position: relative;
padding: 10px 20px;
background: #E5E5EA;
border-radius: 25px;
color: black;
float: left;
}
.from-them:before {
content: "";
position: absolute;
z-index: 2;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-them:after {
content: "";
position: absolute;
z-index: 3;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Fun with background gradients</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<nav>Global navigation</nav>
<header>
<h1>Fun with background gradients</h1>
<p>Just a bit of fun while wondering about using simple and subtle CSS gradients for backgrounds...</p>
</header>
<main>
<ul class="cards">
<li class="card -red">
<div class="card--image">✤</div><h2>Red</h2>
<p>Red is the color at the long wavelength end of the visible spectrum of light, next to orange and opposite violet.</p>
</li>
<li class="card -green">
<div class="card--image">✦</div>
<h2>Green</h2>
<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>
</li>
<li class="card -blue">
<div class="card--image">❖</div>
<h2>Blue</h2>
<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>
</li>
</ul>
</main>
<!-- partial -->
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 200vh;
padding: 1rem;
font-family: Avenir, sans-serif;
font-size: 112.5%;
color: #124;
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);
background-position: -40vw 14rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
background-size: 80vw 80vw;
background-repeat: no-repeat;
}
nav {
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 1.5rem 1rem;
background-color: white;
border-top: 4px solid #c080c0;
}
header {
max-width: 600px;
margin: 24vh auto;
}
h1 {
font-size: 3.2rem;
font-weight: 900;
line-height: 1.1;
}
h1 + p {
margin-top: 1rem;
}
main {
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
.cards {
display: flex;
flex-direction: column;
margin: -1rem;
list-style: none;
}
@media (min-width: 600px) {
.cards {
flex-direction: row;
}
}
.card {
flex: 1;
margin: 1rem;
padding: 1rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 0 6rem rgba(0, 0, 0, 0.1);
}
.card * {
margin-bottom: 1rem;
}
.card--image {
font-size: 6rem;
line-height: 1;
}
.card.-red .card--image {
color: #ff8080;
}
.card.-green .card--image {
color: #80c080;
}
.card.-blue .card--image {
color: #8080ff;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Animated - SVG Scrolling Mouse Icon</title>
<!-- 헤더, 콘텐츠 틀 -->
<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">
<!-- 메세지 버블 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- 헤더 틀 -->
<div class="hero">
<h1>Emoji Human,<br>Who are you?</h1>
<a class="scroll-link" href="#content">
<svg class="mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 130" preserveAspectRatio="xMidYMid meet">
<g fill="none" fill-rule="evenodd">
<rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36"/>
<circle class="scroll" cx="36.5" cy="31.5" r="4.5" fill="#FFF"/>
</g>
</svg>
</a>
</div>
<!-- 헤더 틀 -->
<!-- 콘텐츠 틀 -->
<div id="content" class="content">
<!-- 메세지 버블 -->
<section>
<!-- 1번 대화 -->
<div class="from-them">
<p>안녕하세요!!<br>
저는 이모지 인간이라고 해요 @.@ <br>
당신을 만나게 되어서 매우 반가워요 :)
</p>
</div>
<div class="clear"></div>
<div class="from-me slam">
<p>말풍선을 눌러 이모지 인간에게 인사하기</p>
</div>
<div class="clear"></div>
<!-- 1번 대화 -->
<!-- 2번 대화 -->
<div class="from-me gentle">
<p>이모지 인간은 뭔가요...?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>이모지 인간은 말그대로
“이모지”로 이루어진 인격체입니다.
여러분이 알고 계시는 다양한 이모지들이 있죠?
저는 그 어떤 모습의 이모지든 다 될 수 있어요.
이모지 자체가 저의 몸이라고 생각하시면 됩니다.
예를 들어, 옆의 태양이나 파라솔까지도요!
(하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
</div>
<!-- 2번 대화 -->
<!-- 3번 대화 -->
<div class="from-me gentle">
<p>어...이모지 인간은 어떻게 생겨났나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>요즘 10대-20대들은 SNS 사용시,
주로 이모지를 사용하여 대화를 하곤 합니다.
문자로 길게 설명을 하는 것보다 표정이나 감정들을
직관적으로 전달할 수 있는 이모지가
더 간편하기에 그렇습니다.
이에 현대인들의 일상은 이모지로 가득 찬,
“<이모지 인간>이 아닐까”
하는 발상에서 제가 생겨나게 되었답니다.</p>
</div>
<!-- 3번 대화 -->
<!-- 4번 대화 -->
<div class="from-me gentle">
<p>그럼 이모지 인간은 뭘할 수 있나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>첫째, 저와의 간단한 대화!
둘째, 이모지로 보내는 문자!
셋째, 이모지 MBTI 카드!</p>
</div>
<div class="from-them">
<p>첫번째...보다는
두번째와 세번째에 대한 설명을 더 해볼께요...
이모지로 보내는 문자는 Emo-ssage라고 해요.
아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
대화 중 일부를 이모지로 채워줄 거랍니다.
작성이 완료되면 여러분만의 emo-ssage를
이미지로 저장할 수 있어요!</p>
</div>
<div class="from-them">
<p>이모지 MBTI 카드는 EMOTI라고 해요.
여러 이모지들을 활용해서 각 16개 mbti
고유의 이모지들을 탄생시켰어요.
아, 그리고 각 mbti 카드를 넘길 때마다
어울리는 노래도 흘러나온답니다! </p>
</div>
<!-- 4번 대화 -->
<!-- 5번 대화 -->
<div class="from-me gentle">
<p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>This page cannot be found</p>
</div>
<!-- 5번 대화 -->
</section>
<script src="./script.js"></script>
<!-- 메세지 버블 -->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src="./script.js"></script>
<!-- 콘텐츠 틀 -->
</body>
</html>
jQuery(document).ready(function($){
$('a.scroll-link').click(function(e){
e.preventDefault();
$id = $(this).attr('href');
$('body,html').animate({
scrollTop: $($id).offset().top -20
}, 750);
});
});
\ No newline at end of file
/* 헤더, 콘텐츠 틀 */
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700|Source+Sans+Pro");
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Source Sans Pro", sans-serif;
font-size: 16px;
line-height: 1.618;
}
h1,
h2 {
font-family: "Playfair Display", serif;
line-height: 1.2;
margin-bottom: 1rem;
letter-spacing: 1px;
}
h1 {
font-size: 3rem;
max-width: 35rem;
text-align: center;
}
h2 {
font-size: 2.5rem;
}
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 12rem 2rem;
color: white;
background-image: linear-gradient(to bottom, #45484d 0%, black 100%), url("https://source.unsplash.com/random/1920x1080/?sky");
background-blend-mode: multiply;
background-size: cover;
}
.mouse {
max-width: 2.5rem;
width: 100%;
height: auto;
}
.scroll {
-webkit-animation-name: scroll;
animation-name: scroll;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
animation-timing-function: cubic-bezier(0.65, -0.55, 0.25, 1.5);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
transform-origin: 50% 20.5px;
will-change: transform, opacity;
opacity: 1;
}
.scroll-link {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
@-webkit-keyframes scroll {
0%, 20% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(36px) scaleY(2);
opacity: 0;
}
}
@keyframes scroll {
0%, 20% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(36px) scaleY(2);
opacity: 0;
}
}
.content {
min-height: 100vh;
max-width: 28rem;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
/* 헤더, 콘텐츠 틀 */
/* 메세지 버블 */
body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
}
section {
max-width: 450px;
margin: 50px auto;
}
section div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
.clear {
clear: both;
}
.from-me {
position: relative;
padding: 10px 20px;
color: white;
background: #0B93F6;
border-radius: 25px;
float: right;
}
.from-me:before {
content: "";
position: absolute;
z-index: -1;
bottom: -2px;
right: -7px;
height: 20px;
border-right: 20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-me:after {
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -56px;
width: 26px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
.from-them {
position: relative;
padding: 10px 20px;
background: #E5E5EA;
border-radius: 25px;
color: black;
float: left;
}
.from-them:before {
content: "";
position: absolute;
z-index: 2;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-them:after {
content: "";
position: absolute;
z-index: 3;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
/* 메세지 버블 */
\ No newline at end of file
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
.center
{
text-align: center;
}
p
{
font-size: 20px;
}
a,
a:hover,
a:focus,
a:active {
color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
outline: none; /*gives outline to an element*/
}
h2,
h3
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
}
hr.star-light,
hr.star-primary {
padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
border: none;
border-top: solid 5px;
text-align: center;
max-width: 250px;
margin: 25px auto 30px;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -0.8em;
font-size: 2em;
padding: 0 0.25em;
}
hr.star-light {
border-color: white; /*gives border white*/
}
hr.star-light:after {
background-color: #18BC9C;
color: white;
}
hr.star-primary {
border-color: #2C3E50;
}
hr.star-primary:after {
background-color: white;
color: #2C3E50;
}
header {
text-align: center;
background: #18BC9C;
color: white;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
}
header .intro .skills {
font-size: 1.25em;
font-weight: 300;/*how much bold*/
}
@media (min-width: 768px) {/* if minimum width exceeds then perform*/
header .container {
padding-top: 200px;
padding-bottom: 100px;
}
header .intro .name {
font-size: 4.75em;
}
header .intro .skills {
font-size: 1.75em;
}
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border: none;
}
.navbar-custom .navbar-nav {
letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
color: white;
}
.navbar-custom .navbar-nav li a:hover {
color: #18BC9C;
outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
color: white;
}
.navbar-custom .navbar-nav li.active a {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-toggle {
color: white;
text-transform: uppercase;
font-size: 10px;
border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #18BC9C;
color: white;
border-color: #18BC9C;
}
footer {
color: white;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2C3E50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
/* 내비 */
/* 그라디언트 배경 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 200vh;
padding: 1rem;
font-family: Avenir, sans-serif;
font-size: 112.5%;
color: #124;
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);
background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
background-size: 80vw 80vw;
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
\ No newline at end of file
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/index.css">
<!-- <link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css"> -->
<link rel="stylesheet" href="/EMO-SSAGE/emossage.css">
<script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<style>
body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
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>
<body>
<form action="#">
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
</p>
</header>
<!-- <div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<div>
<label class="desc" id="title3" for="Field3">
Email
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div> -->
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<button type="button" onclick="convertToEmoji()">Submit</button>
</div>
</div>
<div>
<label class="desc" id="title5" for="Field5">
Result
</label>
<div>
<textarea id="Field5" name="Field5" readonly spellcheck="true" style="height: fit-content;"></textarea>
</div>
</div>
</form>
</body>
\ No newline at end of file
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
@media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
......@@ -82,7 +82,7 @@ body {
/*---------요소들 부분---------*/
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
@import url("/external/cardo_rubik");
:root {
--d: 700ms;
--e: cubic-bezier(0.19, 1, 0.22, 1);
......@@ -117,7 +117,7 @@ body {
}
@media (min-width: 800px) {
.page-content {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
}
}
......@@ -191,14 +191,14 @@ body {
}
.title {
font-size: 1.3rem;
font-size: 30px;
font-weight: bold;
line-height: 1.2;
font-family: Noto Sans KR;
}
.copy {
font-family: var(--font-serif);
font-size: 1.125rem;
font-size: 15px;
font-style: italic;
line-height: 1.35;
}
......@@ -210,7 +210,7 @@ body {
}
.content {
transform: translateY(calc(100% - 4.5rem));
transform: translateY(calc(100% - 10rem));
}
.content > *:not(.title) {
opacity: 0;
......@@ -253,7 +253,7 @@ body {
/* text fade in */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
@import url(/external/raleway);
.animated{
-webkit-animation-fill-mode:both;
......@@ -322,6 +322,7 @@ body {
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
line-height: 15px;
}
#p4{
font-size: 15px;
......
......@@ -6,10 +6,10 @@
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/About Us/About Us.css">
<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">
<link rel="stylesheet" href="/external/reset.min.css">
<!-- 손흔들 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="/external/ajax/normalize.min.css">
</head>
......@@ -18,18 +18,21 @@
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<link rel="stylesheet" href="/external/font-awesome.min.css">
<!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<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-->
<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">
<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-->
......@@ -37,7 +40,8 @@
<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-->
<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>
......@@ -54,14 +58,22 @@
<div class="one">
<div class="wave"><span>👋</span></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
<br>
<p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
<br>
<br>
<br>
<p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p>
<p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p>
......@@ -73,21 +85,22 @@
<div class="list">
<div class="two">
<div style="float: left; width: 40%;">
<div style="float: left; width: 30%;">
<img src="/src/song.png" style="display: block; margin: 0 auto;">
</div>
<!-- 요소들 -->
<div style="float: left; width: 60%;">
<div style="float: left; width: 70%;">
<main class="page-content">
<!-- 1번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Me</h2>
<p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
네, 아무튼 열심히 노력해보았습니다. ^^
<p class="copy">안녕하세요<br>인간 흠터레스팅 송민겸입니다.<br>
저는 현재 경희대학교 디지털콘텐츠학과<br> 휴학 중인 (현)백수입니다. ㅋㅋ
<br>23년 새해를 맞아 갓-생을<br>살기 위해 노력하고 있지만...<br>
네, 아무튼 열심히 노력하고 있습니다. ^^
<br>저는 참고로 ENTJ입니다.<br>전국 모든 ENTJ 홧팅~
</p>
</div>
</div>
......@@ -96,10 +109,10 @@
<div class="content">
<h2 class="title">Interest</h2>
<p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
<p class="copy">휴학을 한 후의 제 관심사는<br>해외 여행과 진로 고민입니다.
<br>놀 수 있을 때 많이 놀러 다니고 싶어서<br>여행으로 탕진을 실천하고 있습니다.
<br>또 최근에는 UX/UI 디자인과 개발에<br>관심이 생겨서 이런 홈페이지도
<br>만들게 되었어욤! 이러다가 개발의<br>길을 걷게 되고...
</p>
</div>
......@@ -110,8 +123,7 @@
<h2 class="title">Summary</h2>
<p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ.
반박시 내 마음 찢어짐 ㅠ
첫 개발이라서 아직 많이 미숙하고 고치고 싶은 부분이 많지만, 모두들 재밌게 봐주셨으면 해요! 감사합니다!!
</p>
</div>
......@@ -129,8 +141,8 @@
<div class="three">
<!-- 요소들 -->
<div style="float: left; width: 64%;">
<main class="page-content">
<div style="float: left; width: 70%;">
<main class="page-content" style="justify-content: end;">
<!-- 1번칸 -->
<div class="card">
<div class="content">
......@@ -148,7 +160,7 @@
</div>
<!-- 2번칸 -->
<div class="card">
<<div class="content">
<div class="content">
<h2 class="title">Interest</h2>
<p class="copy">현재 관심 분야는
3D,
......@@ -180,17 +192,15 @@
(ex : 개발...)
이렇게 탄생한
>>>이모지 인간<<<
재밌게 즐겨주시길
바라요!
</p>
>>>이모지 인간<<< 재밌게 즐겨주시길 바라요! </p>
</div>
</div>
</main>
</div>
<!-- 요소들 -->
<div style="float: left; width: 36%;">
<div style="float: left; width: 30%;">
<img src="/src/kim.png" style="display: block; margin: 0 auto;">
</div>
......@@ -198,5 +208,6 @@
</div>
<!-- 3페이지 -->
</body>
</body>
</html>
\ No newline at end of file
......
/
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
.center
{
}
.center
{
text-align: center;
}
p
{
}
p
{
font-size: 20px;
}
a,
a:hover,
a:focus,
a:active,{
}
a,
a:hover,
a:focus,
a:active,{
color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
outline: none; /*gives outline to an element*/
}
h2,
h3,
{
}
h2,
h3,
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
}
hr.star-light,
hr.star-primary {
}
hr.star-light,
hr.star-primary {
padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
border: none;
border-top: solid 5px;
text-align: center;
max-width: 250px;
margin: 25px auto 30px;
}
hr.star-light:after,
hr.star-primary:after {
}
hr.star-light:after,
hr.star-primary:after {
content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
font-family: FontAwesome;
display: inline-block;
......@@ -44,42 +45,42 @@ body {
top: -0.8em;
font-size: 2em;
padding: 0 0.25em;
}
hr.star-light {
}
hr.star-light {
border-color: white; /*gives border white*/
}
hr.star-light:after {
}
hr.star-light:after {
background-color: #18BC9C;
color: white;
}
hr.star-primary {
}
hr.star-primary {
border-color: #2C3E50;
}
hr.star-primary:after {
}
hr.star-primary:after {
background-color: white;
color: #2C3E50;
}
header {
}
header {
text-align: center;
background: #18BC9C;
color: white;
}
header .container {
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro .name {
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
}
header .intro .skills {
}
header .intro .skills {
font-size: 1.25em;
font-weight: 300;/*how much bold*/
}
@media (min-width: 768px) {/* if minimum width exceeds then perform*/
}
@media (min-width: 768px) {/* if minimum width exceeds then perform*/
header .container {
padding-top: 200px;
padding-bottom: 100px;
......@@ -90,74 +91,76 @@ body {
header .intro .skills {
font-size: 1.75em;
}
}
.navbar-custom {
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border: none;
}
.navbar-custom .navbar-nav {
}
}
.navbar-custom .navbar-nav {
letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
}
.navbar-custom .navbar-nav li a {
color: white;
}
.navbar-custom .navbar-nav li a:hover {
}
.navbar-custom .navbar-nav li a:hover {
color: #18BC9C;
outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
color: white;
}
.navbar-custom .navbar-nav li.active a {
}
.navbar-custom .navbar-nav li.active a {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-toggle {
}
.navbar-custom .navbar-toggle {
color: white;
text-transform: uppercase;
font-size: 10px;
border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #18BC9C;
color: white;
border-color: #18BC9C;
}
footer {
}
footer {
color: white;
}
footer h3 {
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
}
footer .footer-above {
padding-top: 50px;
background-color: #2C3E50;
}
footer .footer-col {
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
/* 내비 */
}
/* 내비 */
/* 그라디언트 배경 */
/* 그라디언트 배경 */
* {
box-sizing: border-box;
margin: 0;
......@@ -178,3 +181,86 @@ body {
}
/* 그라디언트 배경 */
/* text fade in */
@import url(/external/raleway);
.animated{
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
.animated2{
animation-delay:.5s;
-webkit-animation-delay:.5s;
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
} 100% {
opacity: 1;
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
0%{
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
}
}
/* text fade in */
/* 텍스트 */
#p1 {
font-size: 50px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p2{
font-size: 20px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p3{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p4{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
/* 텍스트 */
\ No newline at end of file
......
......@@ -2,21 +2,35 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
<link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css">
<script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<style>
body {
/* body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
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>
......@@ -25,33 +39,64 @@
</head>
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<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>
<!-- 내비게이션 -->
<form action="#">
<header>
<!-- <header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br> </p2>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
</p>
</header>
</header> -->
<div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<p id="p1" class="animated fadeOutUp">Message + EMOJI<span>= Emossage</p>
<br>
<p id="p2" class="animated fadeOutUp">Emoti는 이모지 중심 메세지입니다</p>
<br>
<br>
<br>
<p id="p3" class="animated2 fadeIn">글자 중 일부가 이모지로 변환됩니다.</p>
<p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p>
<div>
<label class="desc" id="title3" for="Field3">
Email
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="Field4">
......@@ -59,16 +104,23 @@
</label>
<div>
<textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
<textarea style="resize: none;" id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
<button type="button" onclick="convertToEmoji()">Submit</button>
</div>
</div>
</form>
<div>
<label class="desc" id="title5" for="Field5">
Result
</label>
<div>
<textarea style="resize: none;" id="Field5" name="Field5" readonly spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
</div>
</form>
</body>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -7,7 +7,7 @@
.swiper-container {
width: 100%;
height: 70%;
height: auto;
}
.swiper-slide {
......@@ -427,3 +427,87 @@ body {
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
/* text fade in */
@import url(/external/raleway);
.animated{
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
.animated2{
animation-delay:.5s;
-webkit-animation-delay:.5s;
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
} 100% {
opacity: 1;
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
0%{
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
}
}
/* text fade in */
/* 텍스트 */
#p1 {
font-size: 50px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p2{
font-size: 20px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p3{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p4{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
/* 텍스트 */
\ No newline at end of file
......
......@@ -16,11 +16,11 @@
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
......@@ -46,6 +46,7 @@
</nav>
<!-- 내비게이션 -->
<br>
<br>
<br>
......@@ -53,22 +54,19 @@
<br>
<br>
<br>
<p id="p1" class="animated fadeOutUp">MBTI+EMOJI=EMOTI</p>
<br>
<p id="p2" class="animated fadeOutUp">MBTI가 이모지라면? 그건 바로 EMOTI!</p>
<br>
<br>
<br>
<p id="p3" class="animated2 fadeIn">당신의 MBTI가 이모지로 어떻게 바뀌었을지</p>
<p id="p4" class="animated2 fadeIn">아래의 카드에서 한 번 찾아보세요!</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="swiper-container">
......
......@@ -18,6 +18,7 @@ const audios = [
document.getElementById("enfj_audio"),
];
const numMbtis = 16;
const slidesPerView = 5;
/* ========
Debugger plugin, simple demo plugin to console.log some of callbacks
......@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) {
console.log('sliderMove');
});
on('slideChange', () => {
audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause();
audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0;
audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play();
audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].pause();
audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].currentTime = 0;
audios[(swiper.activeIndex + numMbtis - slidesPerView) % numMbtis].play();
if (!swiper.params.debugger) return;
console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
});
......@@ -92,7 +93,7 @@ Swiper.use([myPlugin]);
let swiper = new Swiper('.swiper-container', {
loop: true,
centeredSlides: true,
slidesPerView: '5',
slidesPerView: slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
......
......@@ -14,12 +14,12 @@ p
a,
a:hover,
a:focus,
a:active,{
a:active {
color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
outline: none; /*gives outline to an element*/
}
h2,
h3,
h3
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
......@@ -153,3 +153,323 @@ footer .footer-below {
}
/* 내비 */
/* 배경 스크롤 */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 50%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
/* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
/* background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
}
/* 글자 */
#p1 {
top: 38%;
left: 50%;
z-index: 2;
font-size: 50px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
line-height: 50px;
}
#p2{
top: 48%;
left: 50%;
z-index: 2;
font-size: 20px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p3{
top: 54%;
left: 50%;
z-index: 2;
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
line-height: 23px;
}
#p4{
top: 54%;
left: 50%;
z-index: 2;
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
line-height: 15px;
}
/*
section h1 {
position: absolute;
top: 38%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
font : 500px;
font-family: Noto Sans KR;
text-align: center;
white-space: nowrap;
}
section h2 {
position: absolute;
top: 48%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 23px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h3 {
position: absolute;
top: 54%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 13px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
line-height: 16px;
} */
/* 스크롤 글자 */
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: rgb(255, 255, 255);
font : normal 400 15px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
/* transition: opacity .3s; */
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 40px;
}
#section01 a span {
position: absolute;
top: 0;
/* left: 50%; */
width: 24px;
height: 24px;
/* margin-left: -12px; */
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
/* 메세지 버블 */
/* body {
font-family: "Helvetica Neue";
font-size: 20px;
font-weight: normal;
} */
/*
section {
max-width: 450px;
margin: 50px auto;
} */
section div {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 20px;
line-height: 24px;
}
.clear {
clear: both;
}
.from-me {
position: relative;
padding: 10px 20px;
color: white;
background: #0B93F6;
border-radius: 25px;
float: right;
right: 400px;
}
.from-me:before {
content: "";
position: absolute;
z-index: -1;
bottom: -2px;
right: -7px;
height: 20px;
border-right: 20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-me:after {
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -56px;
width: 26px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
.from-them {
position: relative;
padding: 10px 20px;
background: #E5E5EA;
border-radius: 25px;
color: black;
float: left;
left: 400px;
}
.from-them:before {
content: "";
position: absolute;
z-index: 2;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.from-them:after {
content: "";
position: absolute;
z-index: 3;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
/* 메세지 버블 */
/* text fade in */
@import url(/external/raleway);
.animated{
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
.animated2{
animation-delay:.5s;
-webkit-animation-delay:.5s;
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
} 100% {
opacity: 1;
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
0%{
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
}
}
/* text fade in */
/* 그라디언트 배경 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 200vh;
padding: 1rem;
font-family: Avenir, sans-serif;
font-size: 112.5%;
color: #124;
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);
background-position: -30vw -30rem, 50% -20rem, 60vw -15rem, -10vw calc(-35rem + 20vw), 30vw calc(-40rem + 20vw);
background-size: 80vw 80vw;
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
div p {
margin: 0 0 0px;
}
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
// 배경 스크롤 스크립트
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
// 배경 스크롤 스크립트
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
\ No newline at end of file
!function(t,i,e){"use strict";function s(t,i){this.element=t,this.layers=t.getElementsByClassName("layer");var e={calibrateX:this.data(this.element,"calibrate-x"),calibrateY:this.data(this.element,"calibrate-y"),invertX:this.data(this.element,"invert-x"),invertY:this.data(this.element,"invert-y"),limitX:this.data(this.element,"limit-x"),limitY:this.data(this.element,"limit-y"),scalarX:this.data(this.element,"scalar-x"),scalarY:this.data(this.element,"scalar-y"),frictionX:this.data(this.element,"friction-x"),frictionY:this.data(this.element,"friction-y"),originX:this.data(this.element,"origin-x"),originY:this.data(this.element,"origin-y")};for(var s in e)null===e[s]&&delete e[s];this.extend(this,r,i,e),this.calibrationTimer=null,this.calibrationFlag=!0,this.enabled=!1,this.depths=[],this.raf=null,this.bounds=null,this.ex=0,this.ey=0,this.ew=0,this.eh=0,this.ecx=0,this.ecy=0,this.erx=0,this.ery=0,this.cx=0,this.cy=0,this.ix=0,this.iy=0,this.mx=0,this.my=0,this.vx=0,this.vy=0,this.onMouseMove=this.onMouseMove.bind(this),this.onDeviceOrientation=this.onDeviceOrientation.bind(this),this.onOrientationTimer=this.onOrientationTimer.bind(this),this.onCalibrationTimer=this.onCalibrationTimer.bind(this),this.onAnimationFrame=this.onAnimationFrame.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.initialise()}var n="Parallax",o=30,r={relativeInput:!1,clipRelativeInput:!1,calibrationThreshold:100,calibrationDelay:500,supportDelay:500,calibrateX:!1,calibrateY:!0,invertX:!0,invertY:!0,limitX:!1,limitY:!1,scalarX:10,scalarY:10,frictionX:.1,frictionY:.1,originX:.5,originY:.5};s.prototype.extend=function(){if(arguments.length>1)for(var t=arguments[0],i=1,e=arguments.length;e>i;i++){var s=arguments[i];for(var n in s)t[n]=s[n]}},s.prototype.data=function(t,i){return this.deserialize(t.getAttribute("data-"+i))},s.prototype.deserialize=function(t){return"true"===t?!0:"false"===t?!1:"null"===t?null:!isNaN(parseFloat(t))&&isFinite(t)?parseFloat(t):t},s.prototype.camelCase=function(t){return t.replace(/-+(.)?/g,function(t,i){return i?i.toUpperCase():""})},s.prototype.transformSupport=function(s){for(var n=i.createElement("div"),o=!1,r=null,a=!1,h=null,l=null,p=0,c=this.vendors.length;c>p;p++)if(null!==this.vendors[p]?(h=this.vendors[p][0]+"transform",l=this.vendors[p][1]+"Transform"):(h="transform",l="transform"),n.style[l]!==e){o=!0;break}switch(s){case"2D":a=o;break;case"3D":if(o){var m=i.body||i.createElement("body"),u=i.documentElement,y=u.style.overflow;i.body||(u.style.overflow="hidden",u.appendChild(m),m.style.overflow="hidden",m.style.background=""),m.appendChild(n),n.style[l]="translate3d(1px,1px,1px)",r=t.getComputedStyle(n).getPropertyValue(h),a=r!==e&&r.length>0&&"none"!==r,u.style.overflow=y,m.removeChild(n)}}return a},s.prototype.ww=null,s.prototype.wh=null,s.prototype.wcx=null,s.prototype.wcy=null,s.prototype.wrx=null,s.prototype.wry=null,s.prototype.portrait=null,s.prototype.desktop=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),s.prototype.vendors=[null,["-webkit-","webkit"],["-moz-","Moz"],["-o-","O"],["-ms-","ms"]],s.prototype.motionSupport=!!t.DeviceMotionEvent,s.prototype.orientationSupport=!!t.DeviceOrientationEvent,s.prototype.orientationStatus=0,s.prototype.transform2DSupport=s.prototype.transformSupport("2D"),s.prototype.transform3DSupport=s.prototype.transformSupport("3D"),s.prototype.propertyCache={},s.prototype.initialise=function(){this.transform3DSupport&&this.accelerate(this.element);var i=t.getComputedStyle(this.element);"static"===i.getPropertyValue("position")&&(this.element.style.position="relative"),this.updateLayers(),this.updateDimensions(),this.enable(),this.queueCalibration(this.calibrationDelay)},s.prototype.updateLayers=function(){this.layers=this.element.getElementsByClassName("layer"),this.depths=[];for(var t=0,i=this.layers.length;i>t;t++){var e=this.layers[t];this.transform3DSupport&&this.accelerate(e),e.style.position=t?"absolute":"relative",e.style.display="block",e.style.left=0,e.style.top=0,this.depths.push(this.data(e,"depth")||0)}},s.prototype.updateDimensions=function(){this.ww=t.innerWidth,this.wh=t.innerHeight,this.wcx=this.ww*this.originX,this.wcy=this.wh*this.originY,this.wrx=Math.max(this.wcx,this.ww-this.wcx),this.wry=Math.max(this.wcy,this.wh-this.wcy)},s.prototype.updateBounds=function(){this.bounds=this.element.getBoundingClientRect(),this.ex=this.bounds.left,this.ey=this.bounds.top,this.ew=this.bounds.width,this.eh=this.bounds.height,this.ecx=this.ew*this.originX,this.ecy=this.eh*this.originY,this.erx=Math.max(this.ecx,this.ew-this.ecx),this.ery=Math.max(this.ecy,this.eh-this.ecy)},s.prototype.queueCalibration=function(t){clearTimeout(this.calibrationTimer),this.calibrationTimer=setTimeout(this.onCalibrationTimer,t)},s.prototype.enable=function(){this.enabled||(this.enabled=!0,this.orientationSupport?(this.portrait=null,t.addEventListener("deviceorientation",this.onDeviceOrientation),setTimeout(this.onOrientationTimer,this.supportDelay)):(this.cx=0,this.cy=0,this.portrait=!1,t.addEventListener("mousemove",this.onMouseMove)),t.addEventListener("resize",this.onWindowResize),this.raf=requestAnimationFrame(this.onAnimationFrame))},s.prototype.disable=function(){this.enabled&&(this.enabled=!1,this.orientationSupport?t.removeEventListener("deviceorientation",this.onDeviceOrientation):t.removeEventListener("mousemove",this.onMouseMove),t.removeEventListener("resize",this.onWindowResize),cancelAnimationFrame(this.raf))},s.prototype.calibrate=function(t,i){this.calibrateX=t===e?this.calibrateX:t,this.calibrateY=i===e?this.calibrateY:i},s.prototype.invert=function(t,i){this.invertX=t===e?this.invertX:t,this.invertY=i===e?this.invertY:i},s.prototype.friction=function(t,i){this.frictionX=t===e?this.frictionX:t,this.frictionY=i===e?this.frictionY:i},s.prototype.scalar=function(t,i){this.scalarX=t===e?this.scalarX:t,this.scalarY=i===e?this.scalarY:i},s.prototype.limit=function(t,i){this.limitX=t===e?this.limitX:t,this.limitY=i===e?this.limitY:i},s.prototype.origin=function(t,i){this.originX=t===e?this.originX:t,this.originY=i===e?this.originY:i},s.prototype.clamp=function(t,i,e){return t=Math.max(t,i),t=Math.min(t,e)},s.prototype.css=function(t,i,s){var n=this.propertyCache[i];if(!n)for(var o=0,r=this.vendors.length;r>o;o++)if(n=null!==this.vendors[o]?this.camelCase(this.vendors[o][1]+"-"+i):i,t.style[n]!==e){this.propertyCache[i]=n;break}t.style[n]=s},s.prototype.accelerate=function(t){this.css(t,"transform","translate3d(0,0,0)"),this.css(t,"transform-style","preserve-3d"),this.css(t,"backface-visibility","hidden")},s.prototype.setPosition=function(t,i,e){i+="px",e+="px",this.transform3DSupport?this.css(t,"transform","translate3d("+i+","+e+",0)"):this.transform2DSupport?this.css(t,"transform","translate("+i+","+e+")"):(t.style.left=i,t.style.top=e)},s.prototype.onOrientationTimer=function(){this.orientationSupport&&0===this.orientationStatus&&(this.disable(),this.orientationSupport=!1,this.enable())},s.prototype.onCalibrationTimer=function(){this.calibrationFlag=!0},s.prototype.onWindowResize=function(){this.updateDimensions()},s.prototype.onAnimationFrame=function(){this.updateBounds();var t=this.ix-this.cx,i=this.iy-this.cy;(Math.abs(t)>this.calibrationThreshold||Math.abs(i)>this.calibrationThreshold)&&this.queueCalibration(0),this.portrait?(this.mx=this.calibrateX?i:this.iy,this.my=this.calibrateY?t:this.ix):(this.mx=this.calibrateX?t:this.ix,this.my=this.calibrateY?i:this.iy),this.mx*=this.ew*(this.scalarX/100),this.my*=this.eh*(this.scalarY/100),isNaN(parseFloat(this.limitX))||(this.mx=this.clamp(this.mx,-this.limitX,this.limitX)),isNaN(parseFloat(this.limitY))||(this.my=this.clamp(this.my,-this.limitY,this.limitY)),this.vx+=(this.mx-this.vx)*this.frictionX,this.vy+=(this.my-this.vy)*this.frictionY;for(var e=0,s=this.layers.length;s>e;e++){var n=this.layers[e],o=this.depths[e],r=this.vx*o*(this.invertX?-1:1),a=this.vy*o*(this.invertY?-1:1);this.setPosition(n,r,a)}this.raf=requestAnimationFrame(this.onAnimationFrame)},s.prototype.onDeviceOrientation=function(t){if(!this.desktop&&null!==t.beta&&null!==t.gamma){this.orientationStatus=1;var i=(t.beta||0)/o,e=(t.gamma||0)/o,s=this.wh>this.ww;this.portrait!==s&&(this.portrait=s,this.calibrationFlag=!0),this.calibrationFlag&&(this.calibrationFlag=!1,this.cx=i,this.cy=e),this.ix=i,this.iy=e}},s.prototype.onMouseMove=function(t){var i=t.clientX,e=t.clientY;!this.orientationSupport&&this.relativeInput?(this.clipRelativeInput&&(i=Math.max(i,this.ex),i=Math.min(i,this.ex+this.ew),e=Math.max(e,this.ey),e=Math.min(e,this.ey+this.eh)),this.ix=(i-this.ex-this.ecx)/this.erx,this.iy=(e-this.ey-this.ecy)/this.ery):(this.ix=(i-this.wcx)/this.wrx,this.iy=(e-this.wcy)/this.wry)},t[n]=s}(window,document),function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i){var e=(new Date).getTime(),s=Math.max(0,16-(e-t)),n=window.setTimeout(function(){i(e+s)},s);return t=e+s,n}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}();
\ No newline at end of file
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
/* greek-ext */
@font-face {
font-family: 'Cardo';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97I8x3F5O.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Cardo';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97IAx3F5O.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Cardo';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97I0x3F5O.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cardo';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cardo/v19/wlpxgwjKBV1pqhv97IMx3A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nMrXyi0A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nFrXyi0A.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nDrXyi0A.woff2) format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nPrXyi0A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/rubik/v23/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlbHYjedg.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlSHYjedg.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlZHYjedg.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjedg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
\ No newline at end of file
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCAIT5lu.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCkIT5lu.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCIIT5lu.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 900;
src: url(https://fonts.gstatic.com/s/raleway/v28/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
\ No newline at end of file
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
......@@ -6,7 +6,7 @@
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/index.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/external/reset.min.css">
</head>
<body style="margin: 0 auto">
......@@ -15,11 +15,11 @@
<div id="gradient-bg">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
......@@ -66,13 +66,13 @@
</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script src="/face.js"></script>
<script src='/external/ajax/parallax.min.js'></script><script src="/face.js"></script>
</div>
<!-- 이모지 얼굴 -->
<!-- 이모지 레인 -->
<div style="z-index: 1;">
<link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet">
<link href="/external/oswald" rel="stylesheet">
<div id="all">
<div id="container">
<div id="animate">
......