<!doctype html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="utf-8">
<title>HTML5 헤럴드</title>
<link rel="stylesheet" href="css/styles.css?v=1.0"/>
<script src="js/modernizr-1.7.min.js"></script>
</head>
<body>
<header>
<hgroup>
<h1><a href="index.html">HTML5 <img src="images/logo.png" alt=""> 헤럴드</a></h1>
<h2>HTML5 & CSS3를 이용해 옛 신문 스타일을 재현하다</h2>
</hgroup>
<nav>
<ul>
<li><a href="index.html">홈</a></li>
<li><a href="register.html">등록</a></li>
</ul>
</nav>
<p id="volume">Vol. MMXI</p>
<p id="issue"><time datetime="1904-06-04" pubdate>June 4, 1904</time></p>
</header>
<form id="register" method="post">
<hgroup>
<h1>등록해 주세요!</h1>
<h2>이 멋진 신문을 구독하고 싶습니다.</h2>
</hgroup>
<ul>
<li>
<label for="name">제 이름은요:</label>
<input type="text" id="name" name="name" required>
</li>
<li>
<label for="email">제 이메일 주소는요:</label>
<input type="email" id="email" name="email" required>
</li>
<li> <label for="rememberme">이 컴퓨터에서 제 정보를 기억하도록 합니다</label>
<input type="checkbox" value="yes" id="rememberme">
</li>
<li>
<label for="url">제 웹사이트 주소는요:</label>
<input type="url" id="url" name="url" placeholder="http://example.com">
</li>
<li>
<label for="password">비밀번호는 이것이 좋겠어요:</label>
<p>(최소 6자, 공백없이)</p>
<input type="password" id="password" name="password" required pattern="\S{6,}">
</li>
<li>
<label for="rating">제 HTML5에 대한 지식 수준은요, 1부터 10중에서:</label>
<input min="1" max="10" id="rating" name="rating" type="range">
</li>
<li>
<label for="startdate">이 날짜부터 구독하고 싶어요:</label>
<input type="date" id="startdate" name="startdate" min="1904-03-17" max="1904-05-17" required>
</li>
<li>
<label for="quantity"><cite>HTML5 헤럴드</cite>를 <input type="number" name="quantity" id="quantity" min="1" max="10" value="1">부 받고 싶습니다.</label>
</li>
<li>
<label for="upsell"><cite>CSS3 이야기</cite>에도 함께 등록하겠습니다.</label>
<input id="upsell" name="upsell" type="checkbox">
</li>
</ul>
<input type="submit" id="register-submit" value="입력 정보 보내기"/>
</form>
<footer>
<small>© SitePoint </small>
<p><a href="http://www.sitepoint.com"><img src="images/logo-sp.gif" alt="SitePoint" width="74" height="20"></a></p>
</footer>
<script>
if (!Modernizr.input.placeholder) {
$("input[placeholder], textarea[placeholder]").each(function(){
if ($(this).val() == "") {
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
$(this).removeClass('placeholder');
}
});
$(this).blur(function(){
if ($(this).val() == "") {
$(this).val($(this).attr("placeholder"));
$(this).addClass('placeholder');
}
});
}
});
$('form').submit(function(){
// first do all the checking for required element and form validation.
// only remove placeholders before final submission
var placeheld = $(this).find('[placeholder]');
for (var i = 0; i < placeheld.length; i++) {
if (($(placeheld[i]).val() == $(placeheld[i]).attr('placeholder'))) {
// if not required, set value to empty before submitting
$(placeheld[i]).attr('value', '');
}
}
});
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/rememberMe.js"></script>
</body>
</html>
css
body { font:13px serif; *font-size:10pt; *font:x-small; line-height:1.22; }
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video, a {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent none no-repeat 0 0;
color: #484848;
font-weight: normal;
}
article, aside, figure, footer, header, hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
input, select { vertical-align:middle; font:99% sans-serif; color: #282828;}
pre, code, kbd, samp { font-family: monospace, sans-serif; }/
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }
html { -webkit-font-smoothing: antialiased; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a: active { outline: none; }
a:focus { outline: 1px dotted #f3f3f3; }
ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }
small { font-size:85%; }
strong{ font-weight: bold; }
sub { vertical-align: sub; font-size:10pter; }
sup { vertical-align: super; font-size:10pter; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
::-moz-selection{ background: #484848; color:#fff; text-shadow: none; }
::selection { background:#484848; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #ccc; }
html { overflow-y: scroll; }
button { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES END HERE */
/* @font-face code Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
font-family: 'LeagueGothic';
src: url('../fonts/League_Gothic-webfont.eot');
src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'AcknowledgementMedium';
src: url('../fonts/Acknowledgement-webfont.eot');
src: url('../fonts/Acknowledgement-webfont.eot?#iefix') format('eot'),
url('../fonts/Acknowledgement-webfont.woff') format('woff'),
url('../fonts/Acknowledgement-webfont.ttf') format('truetype'),
url('../fonts/Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg');
font-weight: normal;
font-style: normal;
}
html {
background: transparent url(../images/bg-main.gif) repeat 0 0;
height: 100%;
}
body {
width: 758px;
margin: 6px auto 0 auto;
border-top: solid 1px #8e8e8e;
background: transparent url(../images/bg-texture.png) no-repeat top center;
height: 100%;
color: #666666;
font-size: 13px;
position: relative;
font-family: Times, "Times New Roman", serif;
}
h1 {
text-shadow: #fff 1px 1px;
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
text-transform: uppercase;
line-height: 1;
}
h2 {
background-position: top center;
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
padding: 7px 0 0 0;
}
article h2 {
background-image: url(../images/bg-header.gif);
}
body > header h2 {
text-transform: lowercase;
background-image: none;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
text-shadow: none;
font-weight: normal;
line-height: 2;
}
p {
margin: 0 0 13px 0;
text-align: justify;
line-height: 1em;
}
/* HEADER */
body > header {
border-top: solid 1px #8e8e8e;
border-bottom: solid 1px #8e8e8e;
margin: 1px auto;
padding-top: 8px;
overflow: hidden;
position: relative;
}
header a {
text-decoration: none;
color: #484848;
}
header a img {
position: relative;
top: 8px;
}
header hgroup {
text-align: center;
margin-left: 30px;
}
header h1 {
font-family: "Times New Roman", Times, serif;
font-size: 60px;
position: relative;
}
header h1 span {
position: absolute;
left: 40px;
top: 40%;
font-size: 30%;
}
header p {
position: absolute;
bottom: 0;
line-height: 25px;
font-size: 12px;
margin: 0;
}
#issue {
right: 0;
text-align: right;
}
nav {
border-top: double 3px #8e8e8e;
height: 28px;
}
nav ul {
margin: 1px auto;
height: 28px;
white-space: nowrap;
text-align: center;
width: 10.2em;
}
nav ul li {
width: 5em;
float: left;
}
nav ul li a{
color: #484848;
text-transform: uppercase;
font-size: 13px;
display: block;
line-height: 27px;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:active {
text-decoration: underline;
}
#main {
margin: 1px 0 0 0;
border-top: solid 1px #8e8e8e;
padding: 15px 0;
clear: both;
}
#main > div {
float: left;
}
#main > div:first-of-type, /* both selectors target the same element */
#primary {
width: 375px;
padding-right: 4px;
}
#main > div:nth-of-type(2), /* both selectors target the same element */
#secondary {
width: 130px;
}
#secondary {
width: 130px;
}
#main > div:last-of-type, /* both selectors target the same element */
#tertiary,
aside {
width: 244px;
margin-right:0;
padding-left: 4px;
}
/* The first article */
#primary article .content {
-webkit-columns: 3 9em;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-width: 9em;
-moz-column-gap: 10px;
column-count: 3;
column-width: 9em;
column-gap: 10px;
}
#primary article .content h1 {
-webkit-column-span: all;
-moz-column-span: all;
}
#video {
display: block;
margin-bottom: 12px;
}
#video,
#primary article h1 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
clear:both;
}
#canvasOverlay
{
position:absolute;
top:0px;
left:0px;
/* to avoid seeing the video in color for a second before the JavaScript runs
* show a black background instead*/
background-color: black;
margin-bottom:25px;
}
#secondary article{
padding: 0 4px 0 4px;
float: left;
border-right: solid 1px #979797;
border-left: solid 1px #979797;
}
img[alt~=cat] {
margin: 0 auto 15px;
display: block;
}
#main > div hgroup {
padding: 0 0 10px 0;
margin: 0 0 5px 0;
background: transparent url(../images/bg-subhead.gif) no-repeat bottom center;
}
#main h1 {
font-size: 22px;
margin: 0 0 8px 0;
}
#main > div h2 {
font-size: 14px;
text-transform: none;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-shadow: none;
text-align: center;
}
#main > div:first-of-type h1 {
font-size: 33px;
padding: 0 0 4px 0;
letter-spacing: -1px;
text-align: left;
}
#tertiary article .content {
-webkit-column-count: 2;
-webkit-column-width: 117px;
-webkit-column-gap: 10px;
-moz-column-count: 2;
-moz-column-width: 117px;
-moz-column-gap: 10px;
column-count: 2;
column-width: 117px;
column-gap: 10px;
}
/* advertisements */
aside {
float: left;
width: 246px;
}
aside article {
width: 236px;
border: 1px solid #cccccc;
margin-bottom: 5px;
}
#ad2 {
height: 170px;
background-image:
url(../images/bg-bike.png),
url(../images/gradient.svg);
/* Mozilla gradient syntax */
background-image:
url(../images/bg-bike.png),
-moz-linear-gradient(0% 0% 270deg,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/* W3C gradient syntax for WebKit */
background-image:
url(../images/bg-bike.png),
-webkit-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/* W3C gradient syntax for Opera */
background-image:
url(../images/bg-bike.png),
-o-linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/* Unprefixed W3C syntax */
background-image:
url(../images/bg-bike.png),
linear-gradient(top,
rgba(0,0,0,0.4) 0,
rgba(0,0,0,0) 37%,
rgba(0,0,0,0) 83%,
rgba(0,0,0,0.06) 92%,
rgba(0,0,0,0) 98%);
/* Old WebKit syntax */
background-image:
url(../images/bg-bike.png),
-webkit-gradient(linear,
from(rgba(0,0,0,0.4)),
color-stop(37%, rgba(0,0,0,0)),
color-stop(83%, rgba(0,0,0,0)),
color-stop(92%, rgba(0,0,0,0.16)),
color-stop(98%, rgba(0,0,0,0)));
background-position: 50% 88%, 0 0;
-webkit-transition: background-position 1s linear 250ms;
-moz-transition: background-position 1s linear 250ms;
-o-transition: background-position 1s linear 250ms;
transition: background-position 1s linear 250ms;
}
#ad2 h1 {
color: #484848;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px #FFFFFF;
font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif;
font-size: 42px;
letter-spacing:-1px;
margin: 20px 5px;
text-shadow: #fff 1px 1px;
}
#ad2 a {
text-decoration: none;
}
#ad2:hover {
background-position: 150% 88%, 0 0;
}
aside > article:nth-of-type(3),
#ad3 {
background-image:url(../images/dukes.png);
background-position: bottom left;
-webkit-transition: transform 2s linear 250ms;
-moz-transition: transform 2s linear 250ms;
-o-transition: transform 2s linear 250ms;
transition: transform 2s linear 250ms;
}
#ad1 h1 {
font-family: AcknowledgementMedium;
letter-spacing: 0.1em;
font-size: 36px;
margin: 0 0 0 0;
text-align: center;
}
#ad1 h1:first-letter {
letter-spacing: -0.1em;
}
#ad1 p {
margin: 0;
font-family: AcknowledgementMedium;
text-transform: uppercase;
font-size: 14px;
text-align: center;
}
aside p + a { display: block; text-decoration: none; border: 5px double; color: #ffffff; background-color: #484848; text-align: center; font-size: 28px; margin: 5px 5px 9px 5px; padding: 15px 0; position: relative;
border-radius: 25px;
-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
font-family: AcknowledgementMedium, sans-serif;
}
.draganddrop #mouseContainer
{
text-align:center;
}
.no-draganddrop #mouseContainer
{
visibility:hidden;
height:0px;
}
#ad1 a.wanted:hover {
-webkit-box-shadow: 4px 10px #484848;
-moz-box-shadow: 4px 10px #484848;
box-shadow: 4px 10px #484848;
top: -5px;
left: -2px;
}
#ad3 h1 {
font-size: 20px;
font-family: AcknowledgementMedium;
padding: 0 30px 0 75px;
line-height:1;
color: #999;
margin: 0 0 0 15px;
}
#ad3 h1 span {
font-size: 30px;
color: #999999;
display:inline-block;
-webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out;
-moz-transition: color 0.2s ease-out, -moz-transform 0.2s ease-out;
-o-transition: color 0.2s ease-out, -o-transform 0.2s ease-out;
transition: color 0.2s ease-out, transform 0.2s ease-out;
}
.holding {
/* Firefox */
-moz-transition: all 0.3s ease;
/* WebKit */
-webkit-transition: all 0.3s ease;
/* Opera */
-o-transition: all 0.3s ease;
/* Standard */
transition: all 0.3s ease;
}
#ad3 h1:hover span {
color: #484848;
-webkit-transform:rotate(10deg) translateX(40px) scale(1.5);
-moz-transform:rotate(10deg) translateX(40px) scale(1.5);
-ms-transform:rotate(10deg) translateX(40px) scale(1.5);
-o-transform:rotate(10deg) translateX(40px) scale(1.5);
transform:rotate(10deg) translateX(40px) scale(1.5);
}
#ad3 p {
padding: 5px 3px 0 75px;
font-size: 0.85em;
}
.no-geolocation #ad4 {
display: none;
}
#ad4 h1 {
font-size: 20px;
font-family: AcknowledgementMedium;
text-align:center;
}
#ad4 {
height:140px;
position:relative;
}
#mapDiv {
height: 140px;
width: 236px;
}
#spinner {
position:absolute;
top:8px;
left:55px;
}
/* Forms */
form {
border: solid 2px #888;
border-width: 2px 0;
clear: both;
-moz-box-shadow:
inset 1px 1px 84px rgba(0,0,0,0.24),
inset -1px -1px 84px rgba(0,0,0,0.24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1')"; /* IE8+ */
margin: 1px 0 1px 0;
text-align: center;
padding: 20px;
min-height: 300px;
background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat bottom center;
}
form#geoForm
{
padding: 0px;
border:none;
min-height:0px;
background:none;
filter: none;
-ms-filter:none;
-moz-box-shadow: none;
}
form ul {
list-style-type: none;
margin: 0;
padding: 0;
}
form ul li {
margin-bottom: 40px;
}
label {
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
font-size: 26px;
display:block;
margin: auto;
text-align:center;
}
form p {
text-align: center;
}
input[type=text], input[type=email], input[type=password], input[type=url], textarea {
background-color: transparent;
border: dotted #484848;
border-width: 0 0 1px 0;
display:block;
margin: 10px auto 10px;
font-style:italic;
font-family: Times, "Times New Roman", serif;
padding: 5px 30px 5px 30px;
width: 50%;
}
input#zipcode {
width:25%;
display:inline;
margin-right: 25px;
}
input[type=number] {
width: 3em;
}
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]) {
background: transparent no-repeat top right;
}
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):required {
background-image: url('../images/required.png');
}
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:invalid {
background-image: url('../images/invalid.png');
}
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:valid {
background-image: url('../images/valid.png');
}
:invalid {
box-shadow: none;
}
::-webkit-input-placeholder { color:#333; }
input {
font-size: 20px;
text-align: center;
}
input[type=submit], input[type=button] {
border: none;
-moz-border-radius: 10%;
border-radius: 5px;
background-color: #333;
/* SVG for IE9 and Opera */
background-image: url(../images/button-gradient.svg);
/* Old WebKit */
background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100,
color-stop(0,rgba(144,144,144,1)),
color-stop(1,rgba(72,72,72,1)));
/* W3C for Mozilla */
background-image: -moz-radial-gradient(30% 120%, circle,
rgba(144,144,144,1) 0%,
rgba(72,72,72,1) 50%);
/* W3C for new WebKit */
background-image: -webkit-radial-gradient(30% 120%, circle,
rgba(144,144,144,1) 0%,
rgba(72,72,72,1) 50%);
/* W3C unprefixed */
background-image: radial-gradient(30% 120%, circle,
rgba(144,144,144, 1) 0%,
rgba(72,72,72,1) 50%);
color: #fff;
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
text-transform: uppercase;
font-size: 28px;
padding: 10px 30px;
margin: 10px auto;
opacity: 0.8;
-webkit-transition: opacity .25s linear;
-moz-transition: opacity .25s linear;
}
input[type=submit]:hover {
opacity: 1;
-webkit-transition: opacity .25s linear;
-moz-transition: opacity .25s linear;
}
form h1 {
margin: 0 auto;
font-size: 50px;
font-family: AcknowledgementMedium;
text-align:center;
white-space:nowrap;
background:
url(../images/bg-formtitle-left.png) left 13px no-repeat,
url(../images/bg-formtitle-right.png) right 13px no-repeat;
}
form h2 {
font-size: 20px;
}
form hgroup {
padding-bottom: 50px;
}
/* Page Footer */
body > footer,
#footer {
clear: both;
float: left;
width: 758px;
}
body > footer small {
font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
text-transform: uppercase;
line-height: 32px;
padding: 0 0 0 7px;
letter-spacing: .08em;
text-shadow: rgba(0,0,0,0.4) 1px 1px 4px;
float: left;
}
body > footer p:last-of-type{
float: right;
padding: 5px 0 0 0;
}
body > footer section {
float: left;
}
body > footer h1 {
font-size: 185%;
}
#authors {
padding-top: 10px;
padding-right: 20px;
background: #d1d1d1;
border-top: solid 1px #888;
border-bottom: solid 1px #888;
}
#authors section {
width: 226px;
padding: 0 0 0 20px;
}
#footerinfo {
clear: both;
height: 30px;
width: 100%;
background: transparent;
}
/* PRINT STYLES */
@media print {
* { background: transparent !important; color: #484848 !important; text-shadow: none; }
a, a:visited { color: #484848 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } /* Don't show links for images */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
'html5' 카테고리의 다른 글
| video player play 기능 추가 (0) | 2014.09.16 |
|---|---|
| video player skin (0) | 2014.09.16 |
| html/css #1 (0) | 2014.04.09 |
| video 재생(control을 자바스크립트 버튼 작성) (0) | 2013.02.27 |
| LocalStorage (0) | 2013.02.26 |