송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
5cb62b2a 1 parent 14b512a6

temp

Expand all
Inline Side-by-side
Showing 56 changed files with 1321 additions and 0 deletions
/*---------텍스트 부분---------*/
#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 {
overflow: hidden;
font-family: Noto Sans KR, Bold;
}
/* Scroll down */
#container{
width:100%;
height:100vh;
overflow: auto;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.list{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: center;
}
/* .list:nth-child(1){
background-color: rgb(0, 0, 0);
background-size: cover;
background-attachment: fixed;
background-position: center;
} */
.list:nth-child(1){
background-color: #25fdcb;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.list:nth-child(2){
background-color: #000000;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.list:nth-child(3){
background-color: #eeff2e;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
/*---------scroll snap 부분---------*/
/*---------프로필 부분---------*/
body, ul, h2, p {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
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;
}
.team-item img {
width: 100%;
}
.profile {
background-color: #222;
position: relative;
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 */
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
.profile_red {
color: #ff4949;
}
.profile_beige {
color: beige;
}
.profile_green {
color: darkseagreen;
}
.profile_pink {
color: pink;
}
.profile_purple {
color: violet;
}
.profile-contents {
position: absolute;
left: 0;
bottom: 0;
padding: 10px;
}
.profile-contents h2 {
font-size: 17px;
}
.profile-contents h2 span {
display: block;
font-size: 10px;
}
.profile-contents p {
color: white;
font-size: 10px;
min-width: 140px;
max-height: 0;
overflow: hidden;
line-height: 1.2;
transition: all 1s;
opacity: 0;
}
.team-item:hover .profile-contents p {
opacity: 1;
transition-delay: .4s;
max-height: 6em;
margin-top: 0.4em;
}
/*---------프로필 부분---------*/
<!doctype html>
<html>
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.css">
</head>
<body>
<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>
</div>
<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>
</div>
</div>
<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>
</div>
</div>
<div>
</body>
</html>
function createRipple(y, x) {
const ripple = `<div class="circle" style="top:${y}px;left:${x}px;"></div>`;
console.log(x);
const _ripple = $(ripple);
$('.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
```
Liam
CEO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
Coco
Mood Maker
Olivia
Designer
James
Front-end
Ella
Back-end
```
\ No newline at end of file
<!DOCTYPE html>
<html lang="ko">
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
<style>
body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
</style>
<div style="height: 100px; overflow: auto">
</div>
</head>
<body>
<form action="#">
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br> </p2>
</p>
</header>
<div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<div>
<label class="desc" id="title3" for="Field3">
Email
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</form>
</body>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
@media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
\ No newline at end of file
window.onload = function() {
// Get the window displayed in the iframe.
var receiver = document.getElementById('receiver').contentWindow;
// Get a reference to the 'Send Message' button.
var btn = document.getElementById('send');
// A function to handle sending messages.
function sendMessage(e) {
// Prevent any default browser behaviour.
e.preventDefault();
// Send a message with the text 'Hello Treehouse!' to the new window.
receiver.postMessage('Hello Treehouse!', 'https://odd-mune.github.io');
}
// Add an event listener that will execute the sendMessage() function
// when the send button is clicked.
btn.addEventListener('click', sendMessage);
}
.audio {
align-content: center;
margin-right: auto;
margin-left: auto;
}
.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
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.css">
<style>
body {
background-image: url("shrink-05.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
font-size: 25pt;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
}
</style>
<div style="height: 100px; overflow: auto">
</div>
</head>
<body>
<h1>MBTI + EMOJI<span>= EMOTI</span></h1>
<p1>MBTI가 이모지라면? 그건 바로 EMOTI!</p1>
<br>
<p2>
<p class="small"> 당신의 mbti가 이모지로 어떻게 바뀌었을지,<br>
아래의 카드에서 한 번 찾아보세요!<br> </p2>
</p>
<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>
<!-- If we need pagination -->
<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 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>
</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
/* Javascrip 코드 */
const audios = [
document.getElementById("istp_audio"),
document.getElementById("istj_audio"),
document.getElementById("isfp_audio"),
document.getElementById("isfj_audio"),
document.getElementById("intp_audio"),
document.getElementById("intj_audio"),
document.getElementById("infp_audio"),
document.getElementById("infj_audio"),
document.getElementById("estp_audio"),
document.getElementById("estj_audio"),
document.getElementById("esfp_audio"),
document.getElementById("esfj_audio"),
document.getElementById("entp_audio"),
document.getElementById("entj_audio"),
document.getElementById("enfp_audio"),
document.getElementById("enfj_audio"),
];
const numMbtis = 16;
/* ========
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
<!DOCTYPE html>
<html lang="ko">
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
/*
<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>
</head>
<body>
<h1>Emoji Human,<span> Who are you?</span></h1>
<p1>이모지 인간의 정체가 궁금해요.</p1>
<br>
<p2>
<p class="small"> 이모지일까요, 인간일까요?<br>
직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
</p>
</body>
# EMOJI-HUMAN
옥타린 전시회
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
</head>
<body>
<!-- partial:index.partial.html -->
<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>
<br />
<hr />
</body>
//the only purpose of this is to generate the CSS keyframes
var str = 0;
var num = 100;
var porcents = 100;
for (let i = 0; i < 101; i++) {
console.log(""+ porcents +"% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) "+ num +"%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) "+ num +"%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) "+ num +"%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) "+ num +"%);}");
str = str + i;
num = num - 0.5;
porcents = porcents -1;
}
\ No newline at end of file
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type

85.3 KB

86.5 KB

86.5 KB

83.2 KB

85.4 KB

86.3 KB

84.2 KB

75.8 KB

77.9 KB

80.5 KB

80.2 KB

81.3 KB

81.3 KB
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type

75.5 KB

59.9 KB
No preview for this file type
No preview for this file type
No preview for this file type
button
{
margin: 30px;
border: 3x solid black;
background-color: yellow;
color: black;
padding: 5px;
border-radius: 8px;
}
<a href="#" class="button1">About Us</a>
.button1 {
box-shadow: 5px 10px 14px 2px #9fb4f2;
background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
background-color:#7892c2;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:20px;
font-weight:bold;
padding:13px 32px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
.About Us:hover {
background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
background-color:#476e9e;
}
.About Us:active {
position:relative;
top:1px;
}