Skip to content

Instantly share code, notes, and snippets.

@closer

closer/gist:863496

Created March 10, 2011 02:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save closer/863496 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save closer/863496 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="shift_jis">
<title>無題ドキュメント</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
height:100%;
}
#main {
min-height:100%;
}
#header {
background-color:#000;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(219,219,219)),
color-stop(0.9, rgb(255,255,255))
);
padding-bottom:30px;
border-bottom:1px solid #FFF;
-webkit-box-shadow:0px 2px 5px #999;
}
#header h1 {
font-size:200%;
margin:0;
padding:1.0em;
}
#header h1 a {
color:#666;
text-decoration:none;
}
#content {
margin:-45px 20px 20px;
padding:15px;
padding-bottom:300px;
}
#content > * {
z-index:2;
}
#content:before {
z-index:0;
content:"";
display:block;
height:50px;
border:1px solid #FFF;
margin:0 -15px -50px;
border-radius:5px;
-webkit-box-shadow:0px -1px 2px #999;
background:#FFF;
}
#content:after {
z-index:0;
content:"";
display:block;
height:50px;
border:1px solid #FFF;
margin:0 -15px 25px;
border-radius:5px;
-webkit-box-shadow:0px 1px 2px #999;
background:#FFF;
}
#content h2 {
border:1px solid #999;
text-shadow: 0 2px 0 #fcf9ee, 0 4px 0 rgba(0, 0, 0, .15);
padding:10px 0;
}
#footer {
margin-top:-320px;
padding:20px;
height:259px;
background-color:#000;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(0,0,0)),
color-stop(0.9, rgb(64,64,64))
);
color:#999;
-webkit-box-shadow:0px -2px 5px #999;
border-top:1px solid #FFF;
position:relative;
}
#footer a {
color:#999;
}
#footer .jumpToTop {
position:absolute;
right:10px;
top:-10px;
margin:0;
padding:0;
}
#footer .jumpToTop a {
border:1px solid #CCC;
border-top-left-radius: 7px;
display:block;
background:#333;
padding:5px 10px;
font-size:12px;
color:#FFF;
text-decoration:none;
-webkit-box-shadow:1px 1px 3px #000;
}
#footer .box {
width:30%;
height:230px;
float:left;
text-align:center;
}
#footer .box:nth-child(2) {
width:40%;
}
#footer .box ul {
text-align:left;
}
#footer .copyright {
clear:both;
font-size:10px;
text-align:center;
letter-spacing:1px;
color:#222;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header">
<h1><a href="#">TEST</a></h1>
</div>
<div id="content">
<h2>テスト</h2>
<p>あああ</p>
<h2>テストです。This is test.</h2>
</div>
</div>
<div id="footer">
<p class="jumpToTop"><a href="#header">return to top</a></p>
<div class="boxlist">
<div class="box">
<p>footer1</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<div class="box">
<p>footer2</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
<div class="box">
<p>footer3</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>
</div>
<p class="copyright">(C) 2011 Eido NABESHIMA. All rights reserved.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment