송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
송민겸
78b97ace 1 parent 04a4aef7

final merge

Expand all
Inline Side-by-side
Showing 11 changed files with 671 additions and 145 deletions
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
......@@ -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
......
......@@ -36,14 +36,14 @@
여러분만의 이모지 편지를 적어보세요<br> </p2>
</p>
</header>
<div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<div>
<label class="desc" id="title3" for="Field3">
Email
......@@ -52,7 +52,7 @@
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="Field4">
Message
......@@ -65,10 +65,10 @@
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</div>
</form>
</body>
......
This diff is collapsed. Click to expand it.
......@@ -29,8 +29,10 @@
</head>
<!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
<body>
<h1>MBTI + EMOJI<span>= EMOTI</span></h1>
<p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
<br>
......@@ -38,74 +40,106 @@
<p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
아래의 카드에서 한 번 찾아보세요!<br> </p2>
</p>
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</nav>
<!-- 내비게이션 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="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
......
......@@ -117,4 +117,4 @@ let swiper = new Swiper('.swiper-container', {
mousewheel: true,
// Enable debugger
debugger: true,
});
\ No newline at end of file
});
......
......@@ -2,6 +2,7 @@
<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">
......@@ -36,6 +37,29 @@
<p class="small"> 이모지일까요, 인간일까요?<br>
직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
</p>
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</nav>
<!-- 내비게이션 -->
</body>
......
/*-----------배경 그라디언트-----------*/
#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 {
......@@ -113,4 +113,390 @@
2% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51%);}
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%);}
}
\ No newline at end of file
}
/*-----------배경 그라디언트-----------*/
: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;
}
/* 이모지 레인 */
\ No newline at end of file
......
......@@ -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>
<!-- partial:index.partial.html -->
<body style="margin: 0 auto">
<!-- 큰 묶음은 배경임 -->
<div id="gradient-bg">
</div>
<!-- partial -->
<script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
<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>
<!-- 내비게이션 -->
<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>
<!-- 내비게이션 -->
<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>
<!-- 이모지 얼굴 -->
</body>
<!-- 이모지 레인 -->
<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>
\ No newline at end of file
......
//the only purpose of this is to generate the CSS keyframes
// 배경 그라디언트
var str = 0;
var num = 100;
var porcents = 100;
......@@ -11,4 +10,76 @@ var str = 0;
str = str + i;
num = num - 0.5;
porcents = porcents -1;
}
\ No newline at end of file
}
// 배경 그라디언트
// 이모지 레인
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();
// 이모지 레인
\ No newline at end of file
......