forked from smorcuend/HTML5-SKELETON
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (108 loc) · 6.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html class="no-js" lang="en"><!-- the "no-js" class is for Modernizr. -->
<head id="www-sitename-com" data-template-set="html5-skeleton">
<meta charset="UTF-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5-SKELETON Template</title>
<meta name="author" content="Your Name Here">
<meta name="keywords" content="Your keywords here">
<meta name="description" content="Your page description here">
<!-- Google will often use this as its description of your page/site. Make it good. -->
<meta name="google-site-verification" content="">
<!-- Speaking of Google, don't forget to set your site up: http://google.com/webmasters -->
<!-- Dublin Core Metadata : http://dublincore.org/ -->
<meta name="DC.title" content="Project Name">
<meta name="DC.subject" content="What you're about.">
<meta name="DC.creator" content="Who made this site.">
<!-- Mobile Viewport Fix
j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
device-width : Occupy full width of the screen in its current orientation
initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!--link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"-->
<link rel="shortcut icon" href="img/favicon.ico" type="image/vnd.microsoft.icon">
<!-- This is the traditional favicon.
- size: 16x16 or 32x32
- transparency is OK
- see wikipedia for info on browser support: http://mky.be/favicon/ -->
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- The is the icon for iOS's Web Clip.
- size: 57x57 for older iPhones, 72x72 for iPads, 114x114 for iPhone4's retina display (IMHO, just go ahead and use the biggest one)
- To prevent iOS from applying its styles to the icon name it thusly: apple-touch-icon-precomposed.png
- Transparency is not recommended (iOS will put a black BG behind the icon) -->
<!-- Using local fonts? make sure to read up http://www.red-team-design.com/google-font-api-and-typekit-solutions-vs-font-face -->
<!-- Google Web fonts example: load from Google server. You can use directly in your css -->
<link href='http://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css'>
<!-- CSS: screen, mobile & print are all in the same file -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- all our JS is at the bottom of the page, except for Modernizr. -->
<script type="text/javascript" src="js/modernizr.custom-2.6.2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
<!-- Asynchronous google analytics; this is the official snippet.
Replace UA-XXXXXX-XX with your site's ID and uncomment to enable. -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31122385-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="wrapper">
<header>
<img src="img/html5_skeleton.png" alt="HTML5-SKELETON logo" class="img_title inline">
<h1 class="inline">HTML5-SKELETON Template</h1>
<img src="img/html5_skeleton.png" alt="HTML5-SKELETON logo" class="img_title inline">
<nav>
<ul>
<li><a href="">Nav Link 1</a></li>
<li><a href="">Nav Link 2</a></li>
<li><a href="">Nav Link 3</a></li>
</ul>
</nav>
</header>
<div class="wrapper_content">
<section>
<article>
<header>
<hgroup>
<h1>Article header title</h1>
<h2>Article header sub title</h2>
</hgroup>
</header>
<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>
<footer>
<p>Article footer</p>
</footer>
</article>
</section>
<aside>
<h2>Sidebar Content</h2>
<nav>
<ul>
<li><a href="">Nav Link 1</a></li>
<li><a href="">Nav Link 2</a></li>
<li><a href="">Nav Link 3</a></li>
</ul>
</nav>
</aside>
</div>
<footer class="clearfix">
<p><small>HTML5 SKELETON. Initially designed by <a href="http://smorcuend.es">smorcuend</a> <span style="-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); display: inline-block;"> © </span> <span id="copyright_year"></span> - All rights reversed.</small></p>
</footer>
<!--Fork me on Github -->
<a href="https://github.com/smorcuend/HTML5-SKELETON"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- here comes the javascript -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<!-- this is where we put our custom functions -->
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>