송민겸 / EMOJI-HUMAN

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

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

Inline Side-by-side
Showing 50 changed files with 3738 additions and 533 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 - Scroll text</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="l">
Designing. Designing. Designing. Designing. Designing. Designing.
</div>
<div class="r">
Designing. Designing. Designing. Designing. Designing. Designing.
</div>
<!-- partial -->
</body>
</html>
body{
display:flex;
align-items:center;
font-family:sans-serif;
flex-direction:column;
height:100vh;
font-size:6rem;
-webkit-text-stroke: 1px white;
-webkit-text-fill-color: black;
-webkit-animation: fill 0.5s infinite alternate;
background:black;
width:100vw;
overflow-x:hidden;
justify-content:center;
}
.l{
width:fit-content;
white-space:nowrap;
animation: example 10s linear 0.5s infinite;
}
.r{
width:fit-content;
white-space:nowrap;
animation: example2 10s linear 0.5s infinite;
}
@keyframes example2 {
0% {
margin-right:0%;
opacity:0%;
}
10%{
opacity:100%;
}
90%{
opacity:100%;
}
100% {
margin-right:-100%;
opacity:0%;
}
}
@keyframes example {
0% {
margin-left:0%;
opacity:0%;
}
10%{
opacity:100%;
}
90%{
opacity:100%;
}
100% {
margin-left:-100%;
opacity:0%;
}
}
\ 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
/*---------텍스트 부분---------*/
#p1{
font-size: 200%;
color: rgb(235, 123, 123);
font-family: Noto Sans KR;
text-align: center;
}
#p2{
font-size: 200%;
color: rgb(235, 123, 123);
font-family: Noto Sans KR;
text-align: center;
}
#p3{
font-size: 200%;
color: rgb(235, 123, 123);
font-family: Noto Sans KR;
text-align: center;
}
#p4{
font-size: 200%;
color: rgb(235, 123, 123);
font-family: Noto Sans KR;
text-align: center;
}
#p5{
font-size: 200%;
color: rgb(235, 123, 123);
font-family: Noto Sans KR;
text-align: center;
}
/*---------텍스트 부분---------*/
/*---------버튼 부분---------*/
@keyframes fall {
from {
top: -10px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
top: 110vh;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.confetti {
position: absolute;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
transition: all 0.1s ease;
pointer-events: none;
width: 10px;
height: 10px;
font-size: 25px;
animation: fall 2s cubic-bezier(0.05, 0.46, 1, 1);
}
.mui-button {
position: relative;
padding: 0;
margin: 0;
width: 150px;
height: 50px;
border: none;
background: #F85F73;
color: #FBE8D3;
box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0);
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.mui-button:hover {
box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
-ms-transform: scale(0.98);
-o-transform: scale(0.98);
transform: scale(0.98);
background: #ec5a6d;
cursor: pointer;
}
.mui-button:active, .mui-button:focus {
outline: none;
}
.mui-button .ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
@keyframes ripple {
from {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: scale(250);
-moz-transform: scale(250);
-ms-transform: scale(250);
-o-transform: scale(250);
transform: scale(250);
}
}
.mui-button .ripple .circle {
position: absolute;
background: rgba(251, 232, 211, 0.2);
border: 1px solid transparent;
border-radius: 50%;
pointer-events: none;
animation: ripple 0.75s 1;
top: 50%;
left: 50%;
}
.mui-button p {
z-index: 1;
}
/*---------버튼 부분---------*/
/*---------scroll snap 부분---------*/
body {
......@@ -163,155 +29,501 @@ body {
background-position: center;
} */
.list:nth-child(1){
background-color: #25fdcb;
/* .list:nth-child(1){
background-image: url("/src/background-01.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.list:nth-child(2){
background-color: #000000;
background-color: #ffffff;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.list:nth-child(3){
background-color: #eeff2e;
background-color: #ffffff;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
} */
/*---------scroll snap 부분---------*/
/*---------프로필 부분---------*/
body, ul, h2, p {
/* 그라디언트 배경 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
}
li {
list-style-type: none;
}
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;
}
/* 그라디언트 배경 */
body {
background-color: #111;
color: #999;
}
.wrapper {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.team {
display: flex;
justify-content: center;
align-items: center;
}
.team-item {
flex-basis: 100px;
flex-shrink: 0;
margin: 0 4px;
opacity: 0.4;
transition: all .4s;
}
.team-item:hover {
opacity: 1;
flex-basis: 160px;
margin: 0 20px;
}
/*---------요소들 부분---------*/
@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
:root {
--d: 700ms;
--e: cubic-bezier(0.19, 1, 0.22, 1);
--font-sans: "Noto Sans KR";
}
.team-item img {
width: 100%;
}
* {
box-sizing: border-box;
}
.profile {
background-color: #222;
html, body {
height: 100%;
}
body {
display: grid;
place-items: center;
}
.page-content {
display: grid;
grid-gap: 1rem;
padding: 1rem;
max-width: 1024px;
margin: 0 auto;
font-family: var(--font-sans);
}
@media (min-width: 600px) {
.page-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 800px) {
.page-content {
grid-template-columns: repeat(4, 1fr);
}
}
.card {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.profile:before {
content: ' ';
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.95+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f2000000',GradientType=0 ); /* IE6-9 */
padding: 1rem;
width: 100%;
text-align: center;
color: whitesmoke;
background-color: whitesmoke;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
@media (min-width: 600px) {
.card {
height: 350px;
}
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
width: 100%;
height: 110%;
background-size: cover;
background-position: 0 0;
transition: transform calc(var(--d) * 1.5) var(--e);
pointer-events: none;
}
.card:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%;
pointer-events: none;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
transform: translateY(-50%);
transition: transform calc(var(--d) * 2) var(--e);
}
.card:nth-child(1):before {
background-image: src="/src/song.png";
}
.card:nth-child(2):before {
background-image: src="/src/song.png";
}
.card:nth-child(3):before {
background-image: src="/src/song.png";
}
.card:nth-child(4):before {
background-image: src="/src/song.png";
}
.profile_red {
color: #ff4949;
}
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 1rem;
transition: transform var(--d) var(--e);
z-index: 1;
}
.content > * + * {
margin-top: 1rem;
}
.profile_beige {
color: beige;
}
.title {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.2;
}
.profile_green {
color: darkseagreen;
}
.copy {
font-family: var(--font-serif);
font-size: 1.125rem;
font-style: italic;
line-height: 1.35;
}
.profile_pink {
color: pink;
}
.profile_purple {
color: violet;
}
@media (hover: hover) and (min-width: 600px) {
.card:after {
transform: translateY(0);
}
.profile-contents {
position: absolute;
left: 0;
bottom: 0;
padding: 10px;
.content {
transform: translateY(calc(100% - 4.5rem));
}
.content > *:not(.title) {
opacity: 0;
transform: translateY(1rem);
transition: transform var(--d) var(--e), opacity var(--d) var(--e);
}
.card:hover,
.card:focus-within {
align-items: center;
}
.card:hover:before,
.card:focus-within:before {
transform: translateY(-4%);
}
.card:hover:after,
.card:focus-within:after {
transform: translateY(-50%);
}
.card:hover .content,
.card:focus-within .content {
transform: translateY(0);
}
.card:hover .content > *:not(.title),
.card:focus-within .content > *:not(.title) {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--d) / 8);
}
.card:focus-within:before, .card:focus-within:after,
.card:focus-within .content,
.card:focus-within .content > *:not(.title) {
transition-duration: 0s;
}
}
/*---------요소들 부분---------*/
/* text fade in */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
.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;
}
}
.profile-contents h2 {
font-size: 17px;
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.profile-contents h2 span {
display: block;
font-size: 10px;
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.profile-contents p {
color: white;
font-size: 10px;
min-width: 140px;
max-height: 0;
overflow: hidden;
line-height: 1.2;
transition: all 1s;
@-webkit-keyframes fadeIn {
0%{
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
}
}
/* text fade in */
.team-item:hover .profile-contents p {
opacity: 1;
transition-delay: .4s;
max-height: 6em;
margin-top: 0.4em;
/* 텍스트 */
#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;
}
/* 텍스트 */
/* 손흔들 */
.wave {
font-size: 120px;
position: relative;
}
span {
transform: translate(-50%, 0) rotate(-10deg);
transform-origin: 100% 100%;
left: 50%;
display: block;
position: absolute;
-webkit-animation: wave 350ms ease-in-out infinite alternate;
animation: wave 350ms ease-in-out infinite alternate;
}
@-webkit-keyframes wave {
0% {
transform: translate(-50%, 0) rotate(15deg);
}
100% {
transform: translate(-50%, 0) rotate(-10deg);
}
}
@keyframes wave {
0% {
transform: translate(-50%, 0) rotate(15deg);
}
100% {
transform: translate(-50%, 0) rotate(-10deg);
}
}
/* 손흔들 */
/* 내비 */
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;
}
/* 내비 */
......
<!doctype html>
<html>
<head>
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.css">
</head>
<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="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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-->
<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>
</div>
</nav>
<!-- 내비게이션 -->
<body>
<!-- 1페이지 -->
<div id="container">
<div class="list">
<div class="one">
<p id="p1">Hello, Humans!</p>
<p id="p2">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
<br/>
<p id="p3">우리는 이모지 인간이 아닙니다.<br/>
진짜 인간이에요!
</p>
<p id="p4">버튼을 눌러 인사해주세요! 😬</p>
<button class="mui-button">
<div class="ripple"></div>
<p id="p5">click me!</p>
</button>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.js"></script>
<div class="wave"><span>👋</span></div>
<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>
</div>
</div>
<!-- 1페이지 -->
<!-- 2페이지 -->
<div class="list">
<div class ="two">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png" style="display: block; margin: 0 auto;">
<div class="wrapper">
<ul class="team">
<li class="team-item">
<div class="profile profile_red">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Liam <span>CEO</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_beige">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Coco <span>Mood Maker</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_green">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Olivia <span>Designer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_pink">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.pngg">
<div class="profile-contents">
<h2>James <span>Front-end</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_purple">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Ella <span>Back-end</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
</ul>
<div class="two">
<div style="float: left; width: 40%;">
<img src="/src/song.png" style="display: block; margin: 0 auto;">
</div>
<!-- 요소들 -->
<div style="float: left; width: 60%;">
<main class="page-content">
<!-- 1번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Me</h2>
<p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
네, 아무튼 열심히 노력해보았습니다. ^^
</p>
</div>
</div>
<!-- 2번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Interest</h2>
<p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
</p>
</div>
</div>
<!-- 3번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Summary</h2>
<p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ.
반박시 내 마음 찢어짐 ㅠ
</p>
</div>
</div>
</main>
</div>
<!-- 요소들 -->
</div>
</div>
<!-- 2페이지 -->
<!-- 3페이지 -->
<div class="list">
<div class="three">
<div class="wrapper">
<ul class="team">
<li class="team-item">
<div class="profile profile_red">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Liam <span>CEO</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_beige">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Coco <span>Mood Maker</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_green">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Olivia <span>Designer</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_pink">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>James <span>Front-end</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
<li class="team-item">
<div class="profile profile_purple">
<img src="https://odd-mune.github.io/EMOJI-HUMAN/src/song.png">
<div class="profile-contents">
<h2>Ella <span>Back-end</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus</p>
</div>
</div>
</li>
</ul>
<!-- 요소들 -->
<div style="float: left; width: 64%;">
<main class="page-content">
<!-- 1번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Me</h2>
<p class="copy">안녕하세요,
한국 살고 있는
김유진이라고 합니다.
디지털 콘텐츠에 대해
공부하면서 다양한
작업들을 시도중입니다.
제 개인 작업물이
보고 싶으시다면,
옆 계정에 놀러와주세요! </p>
</div>
</div>
<!-- 2번칸 -->
<div class="card">
<<div class="content">
<h2 class="title">Interest</h2>
<p class="copy">현재 관심 분야는
3D,
특수효과,
UI&UX,
콘텐츠 기획
등 다양합니다.
궁금한 분야들이 많아서
이들을 각각
경험하고 공부해보는
과정에 있습니다.
(미래에 무슨 일을
하고 있을지 궁금하네요...)
</p>
</div>
</div>
<!-- 3번칸 -->
<div class="card">
<div class="content">
<h2 class="title">Summary</h2>
<p class="copy">그런 의미에서 이번
이모지 인간 프로젝트는
제게 큰 도움이 된
작업이었습니다.
색다른 시도와 고민도 많이 했고,
그 과정에서 새롭게 배우게 된
부분들도 많았습니다.
(ex : 개발...)
이렇게 탄생한
>>>이모지 인간<<<
재밌게 즐겨주시길
바라요!
</p>
</div>
</main>
</div>
<div>
</body>
<!-- 요소들 -->
<div style="float: left; width: 36%;">
<img src="/src/kim.png" style="display: block; margin: 0 auto;">
</div>
</div>
</div>
<!-- 3페이지 -->
</body>
</html>
......
......@@ -5,59 +5,3 @@ function createRipple(y, x) {
$('.ripple').append(_ripple);
setTimeout(() => _ripple.remove(), 900);
}
function confetti() {
[{
bg: '#b00b00',
position: Math.random() * $('html').width() },
{
bg: '#de1e7e',
position: Math.random() * $('html').width() },
{
bg: '#BADA55',
position: Math.random() * $('html').width() },
{
bg: '#F0FEAF',
position: Math.random() * $('html').width() },
{
bg: '#ac1d1c',
position: Math.random() * $('html').width() },
{
bg: '#facade',
position: Math.random() * $('html').width() },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '😜' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🌵' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🤑' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🐻' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '💰' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🍍' }].
map(options => {
const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
$('body').append(c);
setTimeout(() => c.remove(), 1900);
});
}
$('.mui-button').mousedown(e => {
const offset = $(e.target).offset();
createRipple(e.pageY - offset.top, e.pageX - offset.left);
confetti();
});
\ No newline at end of file
......
This diff could not be displayed because it is too large.
/* 내비 */
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
/* 기존것 */
.audio {
align-content: center;
margin-right: auto;
......@@ -25,7 +26,7 @@
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-shadow: 0px 2px 10px 0px #848484;
box-shadow: 0px 5px 18px -7px #848484;
}
.swiper-slide img{
......@@ -159,9 +160,9 @@ img {
}
@media (max-width:767px) {
.slideshow__slide {
.slideshow__slide {
padding: var(--slide-padding-y) var(--slide-padding-x);
}
}
}
@media (min-width:768px) and (max-width:1023px) {
......@@ -230,4 +231,199 @@ img {
flex: 0 0 auto
}
.swiper-button-next {
color: rgb(255, 89, 189);
}
.swiper-button-prev {
color: rgb(255, 89, 189);
}
.swiper-pagination-bullet-active {
background-color: rgb(255, 89, 189);
}
/* 기존것 */
/* 내비 */
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;
}
/* 그라디언트 배경 */
......
......@@ -8,104 +8,119 @@
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.css">
<style>
body {
background-image: url("shrink-05.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
font-size: 25pt;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
}
</style>
<div style="height: 100px; overflow: auto">
</div>
<link rel="stylesheet" href="/EMO-TI/EMO-TI.css">
</head>
<body>
<!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
<h1>MBTI + EMOJI<span>= EMOTI</span></h1>
<p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
<br>
<p2>
<p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
아래의 카드에서 한 번 찾아보세요!<br> </p2>
</p>
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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-->
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</nav>
<!-- 내비게이션 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTP.jpg"></div> <!-- 0 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTJ.jpg"></div> <!-- 1 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFP.jpg"></div> <!-- 2 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFJ.jpg"></div> <!-- 3 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTP.jpg"></div> <!-- 4 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTJ.jpg"></div> <!-- 5 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFP.jpg"></div> <!-- 6 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFJ.jpg"></div> <!-- 7 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTP.jpg"></div> <!-- 8 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTJ.jpg"></div> <!-- 9 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFP.jpg"></div> <!-- 10 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFJ.jpg"></div> <!-- 11 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTP.jpg"></div> <!-- 12 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTJ.jpg"></div> <!-- 13 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFP.jpg"></div> <!-- 14 -->
<div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFJ.jpg"></div> <!-- 15 -->
<div class="swiper-slide"><img src="/src/ISTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ISTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ISFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ISFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/INTP.jpg"></div>
<div class="swiper-slide"><img src="/src/INTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/INFP.jpg"></div>
<div class="swiper-slide"><img src="/src/INFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ESTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ESTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ESFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ESFJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ENTP.jpg"></div>
<div class="swiper-slide"><img src="/src/ENTJ.jpg"></div>
<div class="swiper-slide"><img src="/src/ENFP.jpg"></div>
<div class="swiper-slide"><img src="/src/ENFJ.jpg"></div>
</div>
<!-- If we need pagination -->
<br>
<br>
<br>
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.js" type="module"></script>
<!-- </div> -->
<script src="/EMO-TI/EMO-TI.js" type="module"></script>
<div style="align-content: center;">
<audio id="istp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Burn The House Down.mp3" loop controls hidden></audio>
<audio id="istj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Rise.mp3" loop controls hidden></audio>
<audio id="isfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/비밀의 화원.mp3" loop controls hidden></audio>
<audio id="isfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/always ill care.mp3" loop controls hidden></audio>
<audio id="intp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Like That.mp3" loop controls hidden></audio>
<audio id="intj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Va Va Vis.mp3" loop controls hidden></audio>
<audio id="infp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio>
<audio id="infj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Shining.mp3" loop controls hidden></audio>
<audio id="estp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Break The Rules.mp3" loop controls hidden></audio>
<audio id="estj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Kings Queens.mp3" loop controls hidden></audio>
<audio id="esfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Beautiful Beautiful.mp3" loop controls hidden></audio>
<audio id="esfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Slow Ride.mp3" loop controls hidden></audio>
<audio id="entp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/불꽃놀이.mp3" loop controls hidden></audio>
<audio id="entj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Boss Bitch.mp3" loop controls hidden></audio>
<audio id="enfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Moonshot.mp3" loop controls hidden></audio>
<audio id="enfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Island Island.mp3" loop controls hidden></audio>
<audio id="istp_audio" src="/src/Burn The House Down.mp3" loop controls hidden></audio>
<audio id="istj_audio" src="/src/Rise.mp3" loop controls hidden></audio>
<audio id="isfp_audio" src="/src/비밀의 화원.mp3" loop controls hidden></audio>
<audio id="isfj_audio" src="/src/always ill care.mp3" loop controls hidden></audio>
<audio id="intp_audio" src="/src/Like That.mp3" loop controls hidden></audio>
<audio id="intj_audio" src="/src/Va Va Vis.mp3" loop controls hidden></audio>
<audio id="infp_audio" src="/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio>
<audio id="infj_audio" src="/src/Shining.mp3" loop controls hidden></audio>
<audio id="estp_audio" src="/src/Break The Rules.mp3" loop controls hidden></audio>
<audio id="estj_audio" src="/src/Kings Queens.mp3" loop controls hidden></audio>
<audio id="esfp_audio" src="/src/Beautiful Beautiful.mp3" loop controls hidden></audio>
<audio id="esfj_audio" src="/src/Slow Ride.mp3" loop controls hidden></audio>
<audio id="entp_audio" src="/src/불꽃놀이.mp3" loop controls hidden></audio>
<audio id="entj_audio" src="/src/Boss Bitch.mp3" loop controls hidden></audio>
<audio id="enfp_audio" src="/src/Moonshot.mp3" loop controls hidden></audio>
<audio id="enfj_audio" src="/src/Island Island.mp3" loop controls hidden></audio>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
\ No newline at end of file
......
.swiper-container {
width: 100%;
height: 70%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff; /* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
box-shadow: 0px 2px 10px 0px #848484;
}
.swiper-slide img{
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.swiper-slide:nth-child(2n) {
width: 20%;
}
.swiper-slide:nth-child(3n) {
width: 40%;
}
img {
border: 0;
content: normal!important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
*,
:after,
:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
/* swiper container and slider styles here */
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
z-index: 1
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative
}
.slideshow {
height: 80vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.slideshow__area {
background: var(--bg-color-2);
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto
}
.slideshow__el {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
.slideshow__el[data-cursor=prev]:not([data-progress="0"]) {
cursor: w-resize
}
.slideshow__el[data-cursor=next]:not([data-progress="1"]) {
cursor: e-resize
}
.slideshow__slide {
width: auto;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0 var(--slide-padding-x);
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media (max-width:767px) {
.slideshow__slide {
padding: var(--slide-padding-y) var(--slide-padding-x);
}
}
@media (min-width:768px) and (max-width:1023px) {
.slideshow__slide {
padding: var(--slide-padding-y) var(--slide-padding-x);
}
}
@media (min-width:1024px) {
.slideshow__slide {
padding: var(--slide-padding-y) var(--slide-padding-x);
}
}
.slideshow__slide .caption, .slideshow__slide .caption2 {
display: none
}
.slideshow__slide img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
display: block;
opacity: 0;
-webkit-transition: none;
-o-transition: none;
transition: none
}
.slideshow__slide img.lazyloaded {
opacity: 1
}
/* this is styling responsible responsive behavior for images in slide */
.responsive-img {
position: relative;
width: 100%;
height: 100%;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.responsive-img img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
\ No newline at end of file
/* ========
Debugger plugin, simple demo plugin to console.log some of callbacks
======== */
function myPlugin({ swiper, extendParams, on }) {
extendParams({
debugger: false,
});
on('init', () => {
if (!swiper.params.debugger) return;
console.log('init');
});
on('click', (swiper, e) => {
if (!swiper.params.debugger) return;
console.log('click');
});
on('tap', (swiper, e) => {
if (!swiper.params.debugger) return;
console.log('tap');
});
on('doubleTap', (swiper, e) => {
if (!swiper.params.debugger) return;
console.log('doubleTap');
});
on('sliderMove', (swiper, e) => {
if (!swiper.params.debugger) return;
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();
if (!swiper.params.debugger) return;
console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
});
on('slideChangeTransitionStart', () => {
if (!swiper.params.debugger) return;
console.log('slideChangeTransitionStart');
});
on('slideChangeTransitionEnd', () => {
if (!swiper.params.debugger) return;
console.log('slideChangeTransitionEnd');
});
on('transitionStart', () => {
if (!swiper.params.debugger) return;
console.log('transitionStart');
});
on('transitionEnd', () => {
if (!swiper.params.debugger) return;
console.log('transitionEnd');
});
on('fromEdge', () => {
if (!swiper.params.debugger) return;
console.log('fromEdge');
});
on('reachBeginning', () => {
if (!swiper.params.debugger) return;
console.log('reachBeginning');
});
on('reachEnd', () => {
if (!swiper.params.debugger) return;
console.log('reachEnd');
});
}
// Install Plugin To Swiper
Swiper.use([myPlugin]);
let swiper = new Swiper('.swiper-container', {
loop: true,
centeredSlides: true,
slidesPerView: '5',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'coverflow',
coverflowEffect: {
rotate: 10,
depth: 100,
slideShadows: true,
// modifier:1,
// stretch:50
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
spaceBetween: 30,
keyboard: {
enabled: true,
},
mousewheel: true,
// Enable debugger
debugger: true,
});
\ 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;
}
/* 내비 */
......@@ -2,40 +2,45 @@
<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">
/*
<DIV style="position:absolute; left: 241px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html"> About us? </A></div>
<DIV style="position:absolute; left: 964px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html"> Emoti</A></div>
<DIV style="position:absolute; left: 1269px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html"> Emossage</A></div>
*/
<style>
body {
background-image: url("emojihuman-04.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {font-size: 50px;
letter-spacing: 10px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
</style>
<div style="height: 100px; overflow: auto">
</div>
<link rel="stylesheet" href="/EMOJI-HUMAN.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
</head>
<body>
<h1>Emoji Human,<span> Who are you?</span></h1>
<p1>이모지 인간의 정체가 궁금해요.</p1>
<br>
<p2>
<p class="small"> 이모지일까요, 인간일까요?<br>
직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
</p>
<body style="margin: 0 auto">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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-->
<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>
<!-- 내비게이션 -->
</body>
......
File mode changed
ref: refs/heads/master
# EMOJI-HUMAN
옥타린 전시회
by:
* 송민겸
* 김유진
......
[core]
repositoryformatversion = 0
filemode = false
bare = true
symlinks = false
ignorecase = true
[remote "bare"]
url = odd-munne@
fetch = +refs/heads/*:refs/remotes/bare/*
Unnamed repository; edit this file 'description' to name the repository.
var options = {
invertX: false,
invertY: false,
limitX: 40,
limitY: 40
}
var emoji = document.getElementById('emoji');
var parallax = new Parallax(emoji, options);
\ No newline at end of file
#!/bin/sh
#
# An example hook script to check the commit log message taken by
# applypatch from an e-mail message.
#
# The hook should exit with non-zero status after issuing an
# appropriate message if it wants to stop the commit. The hook is
# allowed to edit the commit message file.
#
# To enable this hook, rename this file to "applypatch-msg".
. git-sh-setup
commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
:
#!/bin/sh
#
# An example hook script to check the commit log message.
# Called by "git commit" with one argument, the name of the file
# that has the commit message. The hook should exit with non-zero
# status after issuing an appropriate message if it wants to stop the
# commit. The hook is allowed to edit the commit message file.
#
# To enable this hook, rename this file to "commit-msg".
# Uncomment the below to add a Signed-off-by line to the message.
# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
# hook is more suited to it.
#
# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"
# This example catches duplicate Signed-off-by lines.
test "" = "$(grep '^Signed-off-by: ' "$1" |
sort | uniq -c | sed -e '/^[ ]*1[ ]/d')" || {
echo >&2 Duplicate Signed-off-by lines.
exit 1
}
#!/usr/bin/perl
use strict;
use warnings;
use IPC::Open2;
# An example hook script to integrate Watchman
# (https://facebook.github.io/watchman/) with git to speed up detecting
# new and modified files.
#
# The hook is passed a version (currently 2) and last update token
# formatted as a string and outputs to stdout a new update token and
# all files that have been modified since the update token. Paths must
# be relative to the root of the working tree and separated by a single NUL.
#
# To enable this hook, rename this file to "query-watchman" and set
# 'git config core.fsmonitor .git/hooks/query-watchman'
#
my ($version, $last_update_token) = @ARGV;
# Uncomment for debugging
# print STDERR "$0 $version $last_update_token\n";
# Check the hook interface version
if ($version ne 2) {
die "Unsupported query-fsmonitor hook version '$version'.\n" .
"Falling back to scanning...\n";
}
my $git_work_tree = get_working_dir();
my $retry = 1;
my $json_pkg;
eval {
require JSON::XS;
$json_pkg = "JSON::XS";
1;
} or do {
require JSON::PP;
$json_pkg = "JSON::PP";
};
launch_watchman();
sub launch_watchman {
my $o = watchman_query();
if (is_work_tree_watched($o)) {
output_result($o->{clock}, @{$o->{files}});
}
}
sub output_result {
my ($clockid, @files) = @_;
# Uncomment for debugging watchman output
# open (my $fh, ">", ".git/watchman-output.out");
# binmode $fh, ":utf8";
# print $fh "$clockid\n@files\n";
# close $fh;
binmode STDOUT, ":utf8";
print $clockid;
print "\0";
local $, = "\0";
print @files;
}
sub watchman_clock {
my $response = qx/watchman clock "$git_work_tree"/;
die "Failed to get clock id on '$git_work_tree'.\n" .
"Falling back to scanning...\n" if $? != 0;
return $json_pkg->new->utf8->decode($response);
}
sub watchman_query {
my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
or die "open2() failed: $!\n" .
"Falling back to scanning...\n";
# In the query expression below we're asking for names of files that
# changed since $last_update_token but not from the .git folder.
#
# To accomplish this, we're using the "since" generator to use the
# recency index to select candidate nodes and "fields" to limit the
# output to file names only. Then we're using the "expression" term to
# further constrain the results.
my $last_update_line = "";
if (substr($last_update_token, 0, 1) eq "c") {
$last_update_token = "\"$last_update_token\"";
$last_update_line = qq[\n"since": $last_update_token,];
}
my $query = <<" END";
["query", "$git_work_tree", {$last_update_line
"fields": ["name"],
"expression": ["not", ["dirname", ".git"]]
}]
END
# Uncomment for debugging the watchman query
# open (my $fh, ">", ".git/watchman-query.json");
# print $fh $query;
# close $fh;
print CHLD_IN $query;
close CHLD_IN;
my $response = do {local $/; <CHLD_OUT>};
# Uncomment for debugging the watch response
# open ($fh, ">", ".git/watchman-response.json");
# print $fh $response;
# close $fh;
die "Watchman: command returned no output.\n" .
"Falling back to scanning...\n" if $response eq "";
die "Watchman: command returned invalid output: $response\n" .
"Falling back to scanning...\n" unless $response =~ /^\{/;
return $json_pkg->new->utf8->decode($response);
}
sub is_work_tree_watched {
my ($output) = @_;
my $error = $output->{error};
if ($retry > 0 and $error and $error =~ m/unable to resolve root .* directory (.*) is not watched/) {
$retry--;
my $response = qx/watchman watch "$git_work_tree"/;
die "Failed to make watchman watch '$git_work_tree'.\n" .
"Falling back to scanning...\n" if $? != 0;
$output = $json_pkg->new->utf8->decode($response);
$error = $output->{error};
die "Watchman: $error.\n" .
"Falling back to scanning...\n" if $error;
# Uncomment for debugging watchman output
# open (my $fh, ">", ".git/watchman-output.out");
# close $fh;
# Watchman will always return all files on the first query so
# return the fast "everything is dirty" flag to git and do the
# Watchman query just to get it over with now so we won't pay
# the cost in git to look up each individual file.
my $o = watchman_clock();
$error = $output->{error};
die "Watchman: $error.\n" .
"Falling back to scanning...\n" if $error;
output_result($o->{clock}, ("/"));
$last_update_token = $o->{clock};
eval { launch_watchman() };
return 0;
}
die "Watchman: $error.\n" .
"Falling back to scanning...\n" if $error;
return 1;
}
sub get_working_dir {
my $working_dir;
if ($^O =~ 'msys' || $^O =~ 'cygwin') {
$working_dir = Win32::GetCwd();
$working_dir =~ tr/\\/\//;
} else {
require Cwd;
$working_dir = Cwd::cwd();
}
return $working_dir;
}
#!/bin/sh
#
# An example hook script to prepare a packed repository for use over
# dumb transports.
#
# To enable this hook, rename this file to "post-update".
exec git update-server-info
#!/bin/sh
#
# An example hook script to verify what is about to be committed
# by applypatch from an e-mail message.
#
# The hook should exit with non-zero status after issuing an
# appropriate message if it wants to stop the commit.
#
# To enable this hook, rename this file to "pre-applypatch".
. git-sh-setup
precommit="$(git rev-parse --git-path hooks/pre-commit)"
test -x "$precommit" && exec "$precommit" ${1+"$@"}
:
#!/bin/sh
#
# An example hook script to verify what is about to be committed.
# Called by "git commit" with no arguments. The hook should
# exit with non-zero status after issuing an appropriate message if
# it wants to stop the commit.
#
# To enable this hook, rename this file to "pre-commit".
if git rev-parse --verify HEAD >/dev/null 2>&1
then
against=HEAD
else
# Initial commit: diff against an empty tree object
against=$(git hash-object -t tree /dev/null)
fi
# If you want to allow non-ASCII filenames set this variable to true.
allownonascii=$(git config --type=bool hooks.allownonascii)
# Redirect output to stderr.
exec 1>&2
# Cross platform projects tend to avoid non-ASCII filenames; prevent
# them from being added to the repository. We exploit the fact that the
# printable range starts at the space character and ends with tilde.
if [ "$allownonascii" != "true" ] &&
# Note that the use of brackets around a tr range is ok here, (it's
# even required, for portability to Solaris 10's /usr/bin/tr), since
# the square bracket bytes happen to fall in the designated range.
test $(git diff --cached --name-only --diff-filter=A -z $against |
LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
then
cat <<\EOF
Error: Attempt to add a non-ASCII file name.
This can cause problems if you want to work with people on other platforms.
To be portable it is advisable to rename the file.
If you know what you are doing you can disable this check using:
git config hooks.allownonascii true
EOF
exit 1
fi
# If there are whitespace errors, print the offending file names and fail.
exec git diff-index --check --cached $against --
#!/bin/sh
#
# An example hook script to verify what is about to be committed.
# Called by "git merge" with no arguments. The hook should
# exit with non-zero status after issuing an appropriate message to
# stderr if it wants to stop the merge commit.
#
# To enable this hook, rename this file to "pre-merge-commit".
. git-sh-setup
test -x "$GIT_DIR/hooks/pre-commit" &&
exec "$GIT_DIR/hooks/pre-commit"
:
#!/bin/sh
# An example hook script to verify what is about to be pushed. Called by "git
# push" after it has checked the remote status, but before anything has been
# pushed. If this script exits with a non-zero status nothing will be pushed.
#
# This hook is called with the following parameters:
#
# $1 -- Name of the remote to which the push is being done
# $2 -- URL to which the push is being done
#
# If pushing without using a named remote those arguments will be equal.
#
# Information about the commits which are being pushed is supplied as lines to
# the standard input in the form:
#
# <local ref> <local oid> <remote ref> <remote oid>
#
# This sample shows how to prevent push of commits where the log message starts
# with "WIP" (work in progress).
remote="$1"
url="$2"
zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
while read local_ref local_oid remote_ref remote_oid
do
if test "$local_oid" = "$zero"
then
# Handle delete
:
else
if test "$remote_oid" = "$zero"
then
# New branch, examine all commits
range="$local_oid"
else
# Update to existing branch, examine new commits
range="$remote_oid..$local_oid"
fi
# Check for WIP commit
commit=$(git rev-list -n 1 --grep '^WIP' "$range")
if test -n "$commit"
then
echo >&2 "Found WIP commit in $local_ref, not pushing"
exit 1
fi
fi
done
exit 0
#!/bin/sh
#
# Copyright (c) 2006, 2008 Junio C Hamano
#
# The "pre-rebase" hook is run just before "git rebase" starts doing
# its job, and can prevent the command from running by exiting with
# non-zero status.
#
# The hook is called with the following parameters:
#
# $1 -- the upstream the series was forked from.
# $2 -- the branch being rebased (or empty when rebasing the current branch).
#
# This sample shows how to prevent topic branches that are already
# merged to 'next' branch from getting rebased, because allowing it
# would result in rebasing already published history.
publish=next
basebranch="$1"
if test "$#" = 2
then
topic="refs/heads/$2"
else
topic=`git symbolic-ref HEAD` ||
exit 0 ;# we do not interrupt rebasing detached HEAD
fi
case "$topic" in
refs/heads/??/*)
;;
*)
exit 0 ;# we do not interrupt others.
;;
esac
# Now we are dealing with a topic branch being rebased
# on top of master. Is it OK to rebase it?
# Does the topic really exist?
git show-ref -q "$topic" || {
echo >&2 "No such branch $topic"
exit 1
}
# Is topic fully merged to master?
not_in_master=`git rev-list --pretty=oneline ^master "$topic"`
if test -z "$not_in_master"
then
echo >&2 "$topic is fully merged to master; better remove it."
exit 1 ;# we could allow it, but there is no point.
fi
# Is topic ever merged to next? If so you should not be rebasing it.
only_next_1=`git rev-list ^master "^$topic" ${publish} | sort`
only_next_2=`git rev-list ^master ${publish} | sort`
if test "$only_next_1" = "$only_next_2"
then
not_in_topic=`git rev-list "^$topic" master`
if test -z "$not_in_topic"
then
echo >&2 "$topic is already up to date with master"
exit 1 ;# we could allow it, but there is no point.
else
exit 0
fi
else
not_in_next=`git rev-list --pretty=oneline ^${publish} "$topic"`
/usr/bin/perl -e '
my $topic = $ARGV[0];
my $msg = "* $topic has commits already merged to public branch:\n";
my (%not_in_next) = map {
/^([0-9a-f]+) /;
($1 => 1);
} split(/\n/, $ARGV[1]);
for my $elem (map {
/^([0-9a-f]+) (.*)$/;
[$1 => $2];
} split(/\n/, $ARGV[2])) {
if (!exists $not_in_next{$elem->[0]}) {
if ($msg) {
print STDERR $msg;
undef $msg;
}
print STDERR " $elem->[1]\n";
}
}
' "$topic" "$not_in_next" "$not_in_master"
exit 1
fi
<<\DOC_END
This sample hook safeguards topic branches that have been
published from being rewound.
The workflow assumed here is:
* Once a topic branch forks from "master", "master" is never
merged into it again (either directly or indirectly).
* Once a topic branch is fully cooked and merged into "master",
it is deleted. If you need to build on top of it to correct
earlier mistakes, a new topic branch is created by forking at
the tip of the "master". This is not strictly necessary, but
it makes it easier to keep your history simple.
* Whenever you need to test or publish your changes to topic
branches, merge them into "next" branch.
The script, being an example, hardcodes the publish branch name
to be "next", but it is trivial to make it configurable via
$GIT_DIR/config mechanism.
With this workflow, you would want to know:
(1) ... if a topic branch has ever been merged to "next". Young
topic branches can have stupid mistakes you would rather
clean up before publishing, and things that have not been
merged into other branches can be easily rebased without
affecting other people. But once it is published, you would
not want to rewind it.
(2) ... if a topic branch has been fully merged to "master".
Then you can delete it. More importantly, you should not
build on top of it -- other people may already want to
change things related to the topic as patches against your
"master", so if you need further changes, it is better to
fork the topic (perhaps with the same name) afresh from the
tip of "master".
Let's look at this example:
o---o---o---o---o---o---o---o---o---o "next"
/ / / /
/ a---a---b A / /
/ / / /
/ / c---c---c---c B /
/ / / \ /
/ / / b---b C \ /
/ / / / \ /
---o---o---o---o---o---o---o---o---o---o---o "master"
A, B and C are topic branches.
* A has one fix since it was merged up to "next".
* B has finished. It has been fully merged up to "master" and "next",
and is ready to be deleted.
* C has not merged to "next" at all.
We would want to allow C to be rebased, refuse A, and encourage
B to be deleted.
To compute (1):
git rev-list ^master ^topic next
git rev-list ^master next
if these match, topic has not merged in next at all.
To compute (2):
git rev-list master..topic
if this is empty, it is fully merged to "master".
DOC_END
#!/bin/sh
#
# An example hook script to make use of push options.
# The example simply echoes all push options that start with 'echoback='
# and rejects all pushes when the "reject" push option is used.
#
# To enable this hook, rename this file to "pre-receive".
if test -n "$GIT_PUSH_OPTION_COUNT"
then
i=0
while test "$i" -lt "$GIT_PUSH_OPTION_COUNT"
do
eval "value=\$GIT_PUSH_OPTION_$i"
case "$value" in
echoback=*)
echo "echo from the pre-receive-hook: ${value#*=}" >&2
;;
reject)
exit 1
esac
i=$((i + 1))
done
fi
#!/bin/sh
#
# An example hook script to prepare the commit log message.
# Called by "git commit" with the name of the file that has the
# commit message, followed by the description of the commit
# message's source. The hook's purpose is to edit the commit
# message file. If the hook fails with a non-zero status,
# the commit is aborted.
#
# To enable this hook, rename this file to "prepare-commit-msg".
# This hook includes three examples. The first one removes the
# "# Please enter the commit message..." help message.
#
# The second includes the output of "git diff --name-status -r"
# into the message, just before the "git status" output. It is
# commented because it doesn't cope with --amend or with squashed
# commits.
#
# The third example adds a Signed-off-by line to the message, that can
# still be edited. This is rarely a good idea.
COMMIT_MSG_FILE=$1
COMMIT_SOURCE=$2
SHA1=$3
/usr/bin/perl -i.bak -ne 'print unless(m/^. Please enter the commit message/..m/^#$/)' "$COMMIT_MSG_FILE"
# case "$COMMIT_SOURCE,$SHA1" in
# ,|template,)
# /usr/bin/perl -i.bak -pe '
# print "\n" . `git diff --cached --name-status -r`
# if /^#/ && $first++ == 0' "$COMMIT_MSG_FILE" ;;
# *) ;;
# esac
# SOB=$(git var GIT_COMMITTER_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
# git interpret-trailers --in-place --trailer "$SOB" "$COMMIT_MSG_FILE"
# if test -z "$COMMIT_SOURCE"
# then
# /usr/bin/perl -i.bak -pe 'print "\n" if !$first_line++' "$COMMIT_MSG_FILE"
# fi
#!/bin/sh
# An example hook script to update a checked-out tree on a git push.
#
# This hook is invoked by git-receive-pack(1) when it reacts to git
# push and updates reference(s) in its repository, and when the push
# tries to update the branch that is currently checked out and the
# receive.denyCurrentBranch configuration variable is set to
# updateInstead.
#
# By default, such a push is refused if the working tree and the index
# of the remote repository has any difference from the currently
# checked out commit; when both the working tree and the index match
# the current commit, they are updated to match the newly pushed tip
# of the branch. This hook is to be used to override the default
# behaviour; however the code below reimplements the default behaviour
# as a starting point for convenient modification.
#
# The hook receives the commit with which the tip of the current
# branch is going to be updated:
commit=$1
# It can exit with a non-zero status to refuse the push (when it does
# so, it must not modify the index or the working tree).
die () {
echo >&2 "$*"
exit 1
}
# Or it can make any necessary changes to the working tree and to the
# index to bring them to the desired state when the tip of the current
# branch is updated to the new commit, and exit with a zero status.
#
# For example, the hook can simply run git read-tree -u -m HEAD "$1"
# in order to emulate git fetch that is run in the reverse direction
# with git push, as the two-tree form of git read-tree -u -m is
# essentially the same as git switch or git checkout that switches
# branches while keeping the local changes in the working tree that do
# not interfere with the difference between the branches.
# The below is a more-or-less exact translation to shell of the C code
# for the default behaviour for git's push-to-checkout hook defined in
# the push_to_deploy() function in builtin/receive-pack.c.
#
# Note that the hook will be executed from the repository directory,
# not from the working tree, so if you want to perform operations on
# the working tree, you will have to adapt your code accordingly, e.g.
# by adding "cd .." or using relative paths.
if ! git update-index -q --ignore-submodules --refresh
then
die "Up-to-date check failed"
fi
if ! git diff-files --quiet --ignore-submodules --
then
die "Working directory has unstaged changes"
fi
# This is a rough translation of:
#
# head_has_history() ? "HEAD" : EMPTY_TREE_SHA1_HEX
if git cat-file -e HEAD 2>/dev/null
then
head=HEAD
else
head=$(git hash-object -t tree --stdin </dev/null)
fi
if ! git diff-index --quiet --cached --ignore-submodules $head --
then
die "Working directory has staged changes"
fi
if ! git read-tree -u -m "$commit"
then
die "Could not update working tree to new HEAD"
fi
#!/bin/sh
#
# An example hook script to block unannotated tags from entering.
# Called by "git receive-pack" with arguments: refname sha1-old sha1-new
#
# To enable this hook, rename this file to "update".
#
# Config
# ------
# hooks.allowunannotated
# This boolean sets whether unannotated tags will be allowed into the
# repository. By default they won't be.
# hooks.allowdeletetag
# This boolean sets whether deleting tags will be allowed in the
# repository. By default they won't be.
# hooks.allowmodifytag
# This boolean sets whether a tag may be modified after creation. By default
# it won't be.
# hooks.allowdeletebranch
# This boolean sets whether deleting branches will be allowed in the
# repository. By default they won't be.
# hooks.denycreatebranch
# This boolean sets whether remotely creating branches will be denied
# in the repository. By default this is allowed.
#
# --- Command line
refname="$1"
oldrev="$2"
newrev="$3"
# --- Safety check
if [ -z "$GIT_DIR" ]; then
echo "Don't run this script from the command line." >&2
echo " (if you want, you could supply GIT_DIR then run" >&2
echo " $0 <ref> <oldrev> <newrev>)" >&2
exit 1
fi
if [ -z "$refname" -o -z "$oldrev" -o -z "$newrev" ]; then
echo "usage: $0 <ref> <oldrev> <newrev>" >&2
exit 1
fi
# --- Config
allowunannotated=$(git config --type=bool hooks.allowunannotated)
allowdeletebranch=$(git config --type=bool hooks.allowdeletebranch)
denycreatebranch=$(git config --type=bool hooks.denycreatebranch)
allowdeletetag=$(git config --type=bool hooks.allowdeletetag)
allowmodifytag=$(git config --type=bool hooks.allowmodifytag)
# check for no description
projectdesc=$(sed -e '1q' "$GIT_DIR/description")
case "$projectdesc" in
"Unnamed repository"* | "")
echo "*** Project description file hasn't been set" >&2
exit 1
;;
esac
# --- Check types
# if $newrev is 0000...0000, it's a commit to delete a ref.
zero=$(git hash-object --stdin </dev/null | tr '[0-9a-f]' '0')
if [ "$newrev" = "$zero" ]; then
newrev_type=delete
else
newrev_type=$(git cat-file -t $newrev)
fi
case "$refname","$newrev_type" in
refs/tags/*,commit)
# un-annotated tag
short_refname=${refname##refs/tags/}
if [ "$allowunannotated" != "true" ]; then
echo "*** The un-annotated tag, $short_refname, is not allowed in this repository" >&2
echo "*** Use 'git tag [ -a | -s ]' for tags you want to propagate." >&2
exit 1
fi
;;
refs/tags/*,delete)
# delete tag
if [ "$allowdeletetag" != "true" ]; then
echo "*** Deleting a tag is not allowed in this repository" >&2
exit 1
fi
;;
refs/tags/*,tag)
# annotated tag
if [ "$allowmodifytag" != "true" ] && git rev-parse $refname > /dev/null 2>&1
then
echo "*** Tag '$refname' already exists." >&2
echo "*** Modifying a tag is not allowed in this repository." >&2
exit 1
fi
;;
refs/heads/*,commit)
# branch
if [ "$oldrev" = "$zero" -a "$denycreatebranch" = "true" ]; then
echo "*** Creating a branch is not allowed in this repository" >&2
exit 1
fi
;;
refs/heads/*,delete)
# delete branch
if [ "$allowdeletebranch" != "true" ]; then
echo "*** Deleting a branch is not allowed in this repository" >&2
exit 1
fi
;;
refs/remotes/*,commit)
# tracking branch
;;
refs/remotes/*,delete)
# delete tracking branch
if [ "$allowdeletebranch" != "true" ]; then
echo "*** Deleting a tracking branch is not allowed in this repository" >&2
exit 1
fi
;;
*)
# Anything else (is there anything else?)
echo "*** Update hook: unknown type of update to ref $refname of type $newrev_type" >&2
exit 1
;;
esac
# --- Finished
exit 0
/*-----------배경 그라디언트-----------*/
#gradient-bg{
width: 100%;
height: 100vh;
background: rgb(255, 255, 255);
background-image:
radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),
radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
animation: colorChange 6s infinite alternate-reverse;
}
@keyframes colorChange {
......@@ -114,3 +114,389 @@
1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);}
0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);}
}
/*-----------배경 그라디언트-----------*/
:root {
--FACE_WIDTH: 450px;
--FACE_HEIGHT: 450px;
--SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
--SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
--EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
--EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
--EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
--EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
--MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
--MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
--MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
--MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
--MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
}
/* 이모지 얼굴 */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#emoji {
position: relative;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
transform: translate3d(0, 0, 0);
}
.layer {
position: absolute;
width: 100%;
height: 100%;
}
.face {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
background-color: #FECA32;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
}
.shine {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--SHINE_WIDTH);
height: var(--SHINE_HEIGHT);
background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
border-radius: 100%;
opacity: 0.8;
}
.eye {
width: var(--EYE_WIDTH);
height: var(--EYE_HEIGHT);
background-color: #A1620F;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
}
.eye.left {
position: absolute;
top: 0;
right: var(--EYE_LEFT_RIGHT);
bottom: var(--EYE_LEFT_BOTTOM);
left: 0;
margin: auto;
}
.eye.right {
position: absolute;
top: 0;
right: 0;
bottom: var(--EYE_RIGHT_BOTTOM);
left: var(--EYE_RIGHT_LEFT);
margin: auto;
}
.mouth {
position: absolute;
top: var(--MOUTH_TOP);
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
width: var(--MOUTH_WIDTH);
height: var(--MOUTH_HEIGHT);
transform: translate3d(0, 0, 0);
}
.mouth:before {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_BEFORE_BOTTOM);
left: 0;
margin: auto;
content: "";
width: 100%;
height: 100%;
background-color: #6E440B;
border-radius: 100%;
box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
transform: scale(1);
}
.mouth:after {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_AFTER_BOTTOM);
left: 0;
margin: auto;
content: "";
width: calc(100% - 20px);
height: 100%;
background-color: #FECA32;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
transform-origin: 50% 100%;
transform: scale(1.6);
}
@-webkit-keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
@keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* 이모지 얼굴 */
/* 내비 */
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;
}
/* 내비 */
/* 이모지 레인 */
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: #000;
font-family: 'Oswald', sans-serif;
}
#text {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
#container {
left: 0px;
top: -100px;
height: calc(100vh + 100px);
overflow: hidden;
position: relative;
}
#animate{
margin: 0 auto;
width: 20px;
overflow: visible;
position: relative;
}
#all{
overflow: hidden;
height: 100vh;
width: 100%;
position: fixed;
}
#footer{
color: #ffc0cb;
text-decoration: none;
position: fixed;
width: 752px;
bottom: 20px;
align-content: center;
float: none;
margin-left: calc(50% - 376px);
}
#a, p{
text-decoration: none;
color: #FFFFFF;
letter-spacing: 6px;
transition: all 0.5s ease-in-out;
width: auto;
margin: 0 auto;
text-align: center;
align-items: center;
}
/* 이모지 레인 */
......
......@@ -2,26 +2,93 @@
<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="/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">
</head>
<body>
<body style="margin: 0 auto">
<!-- partial:index.partial.html -->
<!-- 큰 묶음은 배경임 -->
<div id="gradient-bg">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/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-->
<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>
<!-- partial -->
<script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
</div>
</nav>
<!-- 내비게이션 -->
<button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
<button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
<button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
<button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
<br />
<hr />
<!-- 이모지 얼굴 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
<ul id="emoji">
<li class="layer" data-depth="0.2">
<div class="face"></div>
</li>
<li class="layer" data-depth="0.3">
<div class="shine"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye left"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye right"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="mouth"></div>
</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/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">
<div id="all">
<div id="container">
<div id="animate">
</div>
</div>
</div>
<div id="footer" style="">
<p>W e l c o m e &nbsp;&nbsp;t o &nbsp;&nbsp;E M O J I &nbsp;&nbsp;H U M A N &nbsp;&nbsp;W o r l d</p>
</div>
<script src="/index.js"></script>
</div>
<!-- 이모지 레인 -->
</div>
<script src="/index.js"></script>
<!-- 큰 묶음은 배경임 -->
</body>
......
//the only purpose of this is to generate the CSS keyframes
// 배경 그라디언트
var str = 0;
var num = 100;
var porcents = 100;
......@@ -12,3 +11,75 @@ var str = 0;
num = num - 0.5;
porcents = porcents -1;
}
// 배경 그라디언트
// 이모지 레인
var container = document.getElementById('animate');
var emoji = ['🍹', '🐻', '✌', '🍒', '🥕', '🎸', '🍭', '💖', '🥰', '🎵', '🌏', '🍰', '🎃', '🎅', '🌈', '🌷', '🥳', '🦄', '🍀', '👻', '🌴', '🐬', '🎁'];
var circles = [];
for (var i = 0; i < 15; i++) {
addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
}
function addCircle(delay, range, color) {
setTimeout(function() {
var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
x: -0.15 + Math.random() * 0.3,
y: 1 + Math.random() * 1
}, range);
circles.push(c);
}, delay);
}
function Circle(x, y, c, v, range) {
var _this = this;
this.x = x;
this.y = y;
this.color = c;
this.v = v;
this.range = range;
this.element = document.createElement('span');
/*this.element.style.display = 'block';*/
this.element.style.opacity = 0;
this.element.style.position = 'absolute';
this.element.style.fontSize = '26px';
this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
this.element.innerHTML = c;
container.appendChild(this.element);
this.update = function() {
if (_this.y > 800) {
_this.y = 80 + Math.random() * 4;
_this.x = _this.range[0] + Math.random() * _this.range[1];
}
_this.y += _this.v.y;
_this.x += _this.v.x;
this.element.style.opacity = 1;
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
};
}
function animate() {
for (var i in circles) {
circles[i].update();
}
requestAnimationFrame(animate);
}
animate();
// 이모지 레인
......
# git ls-files --others --exclude-from=.git/info/exclude
# Lines that start with '#' are comments.
# For a project mostly in C, the following would be a good set of
# exclude patterns (uncomment them if you want to use them):
# *.[oa]
# *~