송민겸 / EMOJI-HUMAN

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

final merge

Inline Side-by-side
Showing 11 changed files with 1471 additions and 476 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 {
......@@ -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;
}
/* 내비 */
\ No newline at end of file
......
<!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>
\ No newline at end of file
......
......@@ -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
......
/* 기존것 */
.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;
}
/* 그라디언트 배경 */
\ No newline at end of file
......
......@@ -29,6 +29,8 @@
</head>
<!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
<body>
<h1>MBTI + EMOJI<span>= EMOTI</span></h1>
......@@ -39,73 +41,105 @@
아래의 카드에서 한 번 찾아보세요!<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
......
......@@ -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">
......@@ -37,5 +38,28 @@
직접 대화하면서<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 {
......@@ -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;
}
/* 이모지 레인 */
\ 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>
<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>
\ 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;
......@@ -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();
// 이모지 레인
\ No newline at end of file
......