Skip to content

Commit

Permalink
ざっくりとデザインあててみた
Browse files Browse the repository at this point in the history 
Chrome、Safari、Firefoxでは確認してる。
IEがちょっとまずいかも。
  • Loading branch information
@ukstudio @yoshiori
ukstudio authored and yoshiori committed May 28, 2010
1 parent 920372f commit 6606efc
Show file tree
Hide file tree
Showing 4 changed files with 341 additions and 1 deletion.
97 changes: 97 additions & 0 deletions css/style.css
View file
@@ -0,0 +1,97 @@
* {
margin:0 ;
padding: 0;
}

header,footer,article,section,hgroup,nav,figure { display: block; }

body {
font-size: 0.9em;
font-family: Helvetica, "Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ", "ＭＳ Ｐゴシック","Lucida Sans Unicode",Arial,Verdana,sans-serif;
color: #333;
}

a img { border: none; }

a {color: #0063dc;}
a:visited {color: #0063dc;}
a:hover {
background-color: #0063dc;
color: #fff;
text-decoration: none;
}

h1 {
color: #0063dc;
font-size: 3em;
padding: 0.5em 0 0;
}

h2 {
color: #ff0084;
font-size: 2em;
font-weight: normal;
border-bottom: 3px solid #a9cde4;
margin-top: 1em;
margin-bottom: 0.5em;
}

p {
line-height: 1.5em;
padding: 0.5em 0 0.5em 0;
}

table {
width: 90%;
text-align: left;
margin: 0 auto;
border-collapse: collapse;
border-left: 5px solid #0063dc;
border-top: 1px dotted #999;
border-bottom: 1px dotted #999;
}

table th {
width: 20%;
background-color: #eee;
border-bottom: 1px dotted #999;
padding: 1ex;
}

table td {
border-bottom: 1px dotted #999;
padding: 1ex;
}

section#container{
width: 70%;
margin: 0 auto;
}


div#registration{
background-color: #0063dc;
border: 1px solid #fff;

padding: 12px 20px 0 40px;
position: fixed;
left: -20px;
top: 200px;
width: 380px;
height: 60px;
z-index: 999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: right;
}

div#registration a {
font-size: 3em;
color: #ff0084;
}

footer p {
width: 100%;
text-align: center;
}
80 changes: 79 additions & 1 deletion html/index.html
View file
@@ -1 +1,79 @@
coming soon
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='utf-8'>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<title>Keccon2010</title>
</head>
<body>
<div id='registration'>
<a href='#'>REGISTRATION</a>
</div>
<section id='container'>
<header><h1>Keccon2010</h1></header>
<article>
<h2>開催概要</h2>
<table>
<tr>
<th>日時</th>
<td>2010/07/03</td>
</tr>
<tr>
<th>会場</th>
<td>目黒雅叙園</td>
</tr>
<tr>
<th>会費</th>
<td>100万ギル</td>
</tr>
</table>
</article>

<article>
<h2>タイムテーブル</h2>
<table>
<tr>
<th>プログラム</th>
<th>時間</th>
<th>概要</th>
</tr>
<tr>
<td>基調講演</td>
<td>10:00 - 11:00</td>
<td>誰かによる基調講演</td>
</tr>
<tr>
<td>新郎挨拶</td>
<td>11:00 - 12:00</td>
<td>新郎による挨拶</td>
</tr>
</table>
</article>

<article>
<h2>Contents</h2>
<p><a href='#'>リンク</a></p>
<p>テキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキスト</a></p>
<p>テキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキスト</a></p>
<p>テキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキストテキスト テキスト テキスト</a></p>
</article>

<footer>
<p>Copyright 2010 - keccon2010.appspot.com</p>
</footer>
</section>

<script src='js/jquery-1.4.2.min.js'></script>
<script src='js/jquery.scrollTo-min.js'></script>
<script>
$(document).ready(function(){
$('#registration').hover(function(){
$(this).stop().animate({'left':-20},'slow');
},function(){
$(this).stop().animate({'left':-410},'slow');
});
setTimeout(function(){$('#registration').animate({'left':-410},'slow');},2000);
});
</script>
</body>
</html>

0 comments on commit 6606efc

Please sign in to comment.