<iframe width="854" height="480" src="https://www.youtube.com/embed/영상코드" frameborder="0" allowfullscreen></iframe>
<!DOCTYPE html>
<html>
<!-- Author information
* html, css, javascript
* written by hepheir@gmail.com
*
* site designed by
* dfc7936@naver.com & hepheir@gmail.com
*
-->
<head>
<meta charset="utf-8">
<meta name="author" content="hepheir">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>UNIT & MMC</title>
<script>
var delayTime = 720; // 요소들이 나타나는데에 걸리는 시간 (단위: ms = 1/1000 second)
function performance(){
$('div.MMC_logo').delay(1000).fadeIn(delayTime);
$('p.menu_1').delay(1000 + delayTime).fadeIn(delayTime);
$('p.menu_2').delay(1000 + delayTime * 2).fadeIn(delayTime);
$('p.menu_3').delay(1000 + delayTime * 3).fadeIn(delayTime);
$('p.MMC_desc_1').delay(1000 + delayTime * 4).fadeIn(delayTime * 2);
$('p.MMC_desc_2').delay(1000 + delayTime * 4).fadeIn(delayTime * 2);
$('p.MMC_desc_3').delay(1000 + delayTime * 4).fadeIn(delayTime * 2);
}
</script>
</head>
<body>
<div id="background">
<div class="shadow"></div>
</div>
<div id="bodyWrap">
<div class="bodyClearfix">
<header>
<div class="MMC_logo hidden"></div>
<nav class="menu">
<table class="menu">
<td class="menu_Ltd"><a title="예매하기" href="/book">
<p class="menu_text menu_1 hidden">ticketing</p>
</a></td>
<td class="menu_td"><a title="상영작/연극 소개" href="/info">
<p class="menu_text menu_2 hidden">introduce</p>
</a></td>
<td class="menu_Rtd"><a title="비트랑 클라우드와는 클라스가 다른 보정 최강 자율동아리" href="http://project-unit.tistory.com" target="_blank">
<p class="menu_text menu_3 hidden">unit</p>
</a></td>
</table>
</nav>
</header>
</div>
<div id="MMC_desc">
<p class="MMC_desc_1 hidden">movie</p>
<p class="MMC_desc_2 hidden">manufactur<a href="./easter.html">i</a>ng</p>
<p class="MMC_desc_3 hidden">club</p>
</div>
</div>
<script>
performance();
</script>
</body>
</html>
@charset "UTF-8";
.hidden{
display:none;
}
html{
width: 100%;
height: 100%;
font-size: 18px;
}
body{
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
p{
margin:0;
padding: 0;
line-height: 1.2em;
}
p.menu_text{
text-transform: uppercase;
font-family: "Adobe 고딕 Std", arial;
letter-spacing: -0.1em;
}
#background{
width: 100%;
height: 100%;
position: fixed;
background-image: url('./images/Background.jpg');
background-size: cover;
background-position: center;
-webkit-filter: blur(3px);
}
.shadow{
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
#bodyWrap{
position: fixed;
margin: 0 calc(100% / 9) 0 calc(100% / 9);
width: calc(700% / 9);
height:100%;
color: white;
}
div.bodyClearfix{
height: calc(90% - 6em);
min-height: 110px;
}
div.MMC_logo{
width: 36px;
height: 36px;
padding: 32px calc(50% - 18px) 12px calc(50% - 18px);
background-image: url('./images/MMC_logo.png');
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
}
.menu{
width: 100%;
}
td.menu_td{
width: calc(100% / 3);
text-align: center;
}
td.menu_Ltd{
width: calc(100% / 9 * 2);
text-align: left;
}
td.menu_Rtd{
width: calc(100% / 9 * 2);
text-align: right;
}
#MMC_desc{
text-transform: uppercase;
font-family: arial;
min-height: 6em;
font-size: 1.8em;
font-weight: 500;
text-shadow: 2px 2px 4px black;
}
