송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
e121f239 1 parent 1e9fe00c

2트

Inline Side-by-side
Showing 10 changed files with 90 additions and 70 deletions
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
......@@ -82,7 +82,7 @@ body {
/*---------요소들 부분---------*/
@import url("/external/cardo_rubik");
@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);
......@@ -157,25 +157,24 @@ body {
top: 0;
left: 0;
width: 100%;
height: 200%;
height: 150%;
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";
background-image: url("me1.png");
}
.card:nth-child(2):before {
background-image: src="/src/song.png";
background-image: url("interest1.png");
}
.card:nth-child(3):before {
background-image: src="/src/song.png";
}
.card:nth-child(4):before {
background-image: src="/src/song.png";
background-image: url("summary1.png");
}
.content {
position: relative;
display: flex;
......@@ -191,14 +190,14 @@ body {
}
.title {
font-size: 30px;
font-size: 1.3rem;
font-weight: bold;
font-family: Noto Sans KR;
line-height: 1.2;
}
.copy {
font-family: var(--font-serif);
font-size: 15px;
font-size: 1.125rem;
font-style: italic;
line-height: 1.35;
}
......@@ -210,7 +209,7 @@ body {
}
.content {
transform: translateY(calc(100% - 10rem));
transform: translateY(calc(100% - 4.5rem));
}
.content > *:not(.title) {
opacity: 0;
......@@ -253,7 +252,7 @@ body {
/* text fade in */
@import url(/external/raleway);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
.animated{
-webkit-animation-fill-mode:both;
......@@ -322,7 +321,6 @@ body {
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
line-height: 15px;
}
#p4{
font-size: 15px;
......@@ -330,6 +328,7 @@ body {
font-family: Noto Sans KR;
text-align: center;
}
/* 텍스트 */
......@@ -376,7 +375,7 @@ span {
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Noto Sans KR, Bold;
overflow-x: hidden;
}
.center
......@@ -391,13 +390,13 @@ a,
a:hover,
a:focus,
a:active,{
color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
color: none;/*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;
font-family: Noto Sans KR, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
......@@ -422,31 +421,33 @@ hr.star-primary:after {
padding: 0 0.25em;
}
hr.star-light {
border-color: white; /*gives border white*/
border-color: none; /*gives border white*/
}
hr.star-light:after {
background-color: #18BC9C;
color: white;
background-color: none;
color: none;
}
hr.star-primary {
border-color: #2C3E50;
border-color: none;
}
hr.star-primary:after {
background-color: white;
color: #2C3E50;
background-color: none;
color: none;
}
header {
text-align: center;
background: #18BC9C;
color: white;
background: none;
color: none;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
background: none;
color: none;
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans KR, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
......@@ -468,8 +469,8 @@ header .intro .skills {
}
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: none;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
border: none;
......@@ -478,53 +479,53 @@ header .intro .skills {
letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
color: white;
color: none;
}
.navbar-custom .navbar-nav li a:hover {
color: #18BC9C;
color: none;
outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
color: white;
color: none;
}
.navbar-custom .navbar-nav li.active a {
color: white;
background: #18BC9C;
color: none;
background: none;
}
.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;
color: none;
background: none;
}
.navbar-custom .navbar-toggle {
color: white;
color:none;
text-transform: uppercase;
font-size: 10px;
border-color: white;
border-color: none;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #18BC9C;
color: white;
border-color: #18BC9C;
background-color: none;
color: none;
border-color: none;
}
footer {
color: white;
color: none;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2C3E50;
background-color: none;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
background-color: none;
}
/* 내비 */
......
......@@ -6,10 +6,10 @@
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/About Us/About Us.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/external/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!-- 손흔들 -->
<link rel="stylesheet" href="/external/ajax/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
......@@ -18,12 +18,12 @@
<body>
<!-- 내비게이션 -->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="/external/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<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-->
......@@ -38,7 +38,7 @@
</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>
<li><a href="/index.html">Home></script> </a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll">
<!--second UL to go to right having proprty to scroll page-->
......@@ -69,11 +69,12 @@
<br>
<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>
......@@ -85,22 +86,22 @@
<div class="list">
<div class="two">
<div style="float: left; width: 30%;">
<div style="float: left; width: 40%;">
<img src="/src/song.png" style="display: block; margin: 0 auto;">
<h3>Song Min Gyeom </h3>
</div>
<!-- 요소들 -->
<div style="float: left; width: 70%;">
<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">안녕하세요<br>인간 흠터레스팅 송민겸입니다.<br>
저는 현재 경희대학교 디지털콘텐츠학과<br> 휴학 중인 (현)백수입니다. ㅋㅋ
<br>23년 새해를 맞아 갓-생을<br>살기 위해 노력하고 있지만...<br>
네, 아무튼 열심히 노력하고 있습니다. ^^
<br>저는 참고로 ENTJ입니다.<br>전국 모든 ENTJ 홧팅~
<p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
네, 아무튼 열심히 노력해보았습니다. ^^
</p>
</div>
</div>
......@@ -109,10 +110,10 @@
<div class="content">
<h2 class="title">Interest</h2>
<p class="copy">휴학을 한 후의 제 관심사는<br>해외 여행과 진로 고민입니다.
<br>놀 수 있을 때 많이 놀러 다니고 싶어서<br>여행으로 탕진을 실천하고 있습니다.
<br>또 최근에는 UX/UI 디자인과 개발에<br>관심이 생겨서 이런 홈페이지도
<br>만들게 되었어욤! 이러다가 개발의<br>길을 걷게 되고...
<p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
</p>
</div>
......@@ -123,7 +124,8 @@
<h2 class="title">Summary</h2>
<p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
첫 개발이라서 아직 많이 미숙하고 고치고 싶은 부분이 많지만, 모두들 재밌게 봐주셨으면 해요! 감사합니다!!
근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ.
반박시 내 마음 찢어짐 ㅠ
</p>
</div>
......@@ -141,7 +143,7 @@
<div class="three">
<!-- 요소들 -->
<div style="float: left; width: 70%;">
<div style="float: left; width: 64%;">
<main class="page-content" style="justify-content: end;">
<!-- 1번칸 -->
<div class="card">
......@@ -155,7 +157,7 @@
작업들을 시도중입니다.
제 개인 작업물이
보고 싶으시다면,
옆 계정에 놀러와주세요! </p>
@supernonvan49 계정에 놀러와주세요! </p>
</div>
</div>
<!-- 2번칸 -->
......@@ -200,10 +202,12 @@
<!-- 요소들 -->
<div style="float: left; width: 30%;">
<div style="float: right; width: 36%;">
<img src="/src/kim.png" style="display: block; margin: 0 auto;">
<h3> Yujin Kim </h3>
</div>
</div>
</div>
<!-- 3페이지 -->
......
......@@ -98,7 +98,11 @@
<p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p>
<div>
<br>
<br>
<br>
<br>
<div style="position: relative; left: 37.5%; top: 50%;">
<label class="desc" id="title4" for="Field4">
Message
</label>
......@@ -112,7 +116,7 @@
</div>
</div>
<div>
<div style="position: relative; left: 37.5%; top: 50%;">
<label class="desc" id="title5" for="Field5">
Result
</label>
......
......@@ -93,6 +93,14 @@
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="from-them">
<p>안녕하세요!!<br>
저는 이모지 인간이라고 해요 @.@ <br>
......
......@@ -80,7 +80,7 @@
</div>
</div>
<div id="footer" style="">
<div id="footer" style="display: contents;">
<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>
......