송민겸 / 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 1596 additions and 937 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;
......
This diff is collapsed. Click to expand it.
/
/* 내비 */
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;
}
/* 내비 */
/* 그라디언트 배경 */
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;
......@@ -177,4 +180,87 @@ body {
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
\ No newline at end of file
/* 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,73 +2,125 @@
<html lang="ko">
<head>
<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">
<style>
body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<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 {
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>
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>
<!-- 내비게이션 -->
<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>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
</p>
</header> -->
<p id="p1" class="animated fadeOutUp">Message + EMOJI<span>= Emossage</p>
<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" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</form>
<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>
</body>
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea style="resize: none;" 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 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">
......