-
Notifications
You must be signed in to change notification settings - Fork 1
/
side_notes.html
272 lines (211 loc) · 13.1 KB
/
side_notes.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE HTML>
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!-- Meta information -->
<meta charset="utf-8">
<title> Brandspace - Text with Side Notes - by pixelentity</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<!-- favicon & idevice homepage thumb -->
<link rel="shortcut icon" href="favicon.jpg">
<!--CSS Compressor-->
<!--Replace all css import statements with 1 of these options - see help file for more info.-->
<!-- option 1 -->
<!--<link rel="stylesheet" href="packs/jscsscomp.php?q=pack.css" />-->
<!-- option 2 -->
<!--<link rel="stylesheet" href="packs/pack.css" />-->
<!--end css compressor-->
<!-- main stylesheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/960.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prettyPhoto.css" />
<!-- color stylesheet -->
<!--<link rel="stylesheet" href="css/dark.css" />-->
<!--Js Compressor-->
<!--Replace all js import statements with 1 of these options - see help file for more info.-->
<!-- option 1 -->
<!--<script type="text/javascript" src="packs/jscsscomp.php?q=pack.js"></script>-->
<!-- option 2 -->
<!--<script type="text/javascript" src="packs/pack.js"></script>-->
<!--end js compressor-->
<!-- import jQuery -->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fetch-tweets.js"></script>
<!--import custom js file -->
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.utils.geom.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.utils.ticker.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.transform.js"></script>
<script type="text/javascript" src="js/jquery.pixelentity.kenburns.js"></script>
<script type="text/javascript" src="js/jquery.vid.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/twitter.js"></script>
<script type="text/javascript" src="js/tagrotator.js"></script>
<script type="text/javascript" src="js/faq.js"></script>
<script type="text/javascript" src="js/contact.js"></script>
<script type="text/javascript" src="js/newsletter.js"></script>
<script type="text/javascript" src="js/gmap.js"></script>
<script type="text/javascript" src="js/longinfo.js"></script>
<script type="text/javascript" src="js/prettyPhoto.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
<script type="text/javascript" src="js/video.js"></script>
<!-- font replacement -->
<script type="text/javascript" src="js/cufon_ie9.js"></script>
<script type="text/javascript" src="js/ArdleysHand_500.font.js"></script>
<script type="text/javascript" src="js/Gotham_Narrow_Light_300.font.js"></script>
<script type="text/javascript">
Cufon.replace('h2', { fontFamily: 'ArdleysHand' });
Cufon.replace('span.noteMarker', { fontFamily: 'ArdleysHand' });
Cufon.replace('h3', { fontFamily: 'Gotham Narrow Light' });
Cufon.replace('#tagline h4', { fontFamily: 'Gotham Narrow Light' });
</script>
<!--end font replacement-->
</head>
<body class="clearfix" id="sideNotes">
<div id="siteWrapper" class="container_16">
<div id="main">
<div id="header" class="grid_16">
<!--logo-->
<a href="index.html" title="Home"><h1 id="logoHead" class="grid_5">Brandspace</h1></a>
<h2>home</h2>
<!--main navigation-->
<ul id="mainNav">
<li class="menu grid_2"><a class="selected" href="side_notes.html" title="About">About</a>
<ul class="subMenu">
<li><a href="testimonial.html" title="Testimonials">Testimonial</a></li>
<li><a class="selected" href="side_notes.html" title="Text with Side Notes">Text & Side Notes</a></li>
<li><a href="full_width.html" title="Full Width Page">Full Width Page</a></li>
<li><a href="minimal_text.html" title="Minimal Text Page">Minimal Text</a></li>
</ul>
</li>
<li class="menu grid_2"><a href="#" title="News">News</a>
<ul class="subMenu">
<li><a href="services.html" title="Services Page">Our Services</a></li>
<li><a href="blog_main.html" title="Main Blog Page">Blog Main</a></li>
<li><a href="blog_post.html" title="Long Blog Article">Long Article</a></li>
<li><a href="blog_post_minimal.html" title="Minimal Blog Post">Minimal Post</a></li>
</ul>
</li>
<li class="menu grid_2"><a href="portfolio_categories.html" title="Our Work">Our Work</a>
<ul class="subMenu">
<li><a href="portfolio_categories.html" title="Portfolio Main">Portfolio</a></li>
<li><a href="portfolio_category_single.html" title="Single Category Page">Web Category</a></li>
<li><a href="portfolio_project.html" title="Single Project Page">Project Page</a></li>
<li><a href="#" title="Dark Skin">Dark Skin</a></li>
</ul>
</li>
<li class="menu grid_2 navLast"><a href="#" title="Support">Contact</a>
<ul class="subMenu">
<li><a href="get_a_quote.html" title="Contact Us or Request a Quotation">Email / Quote</a></li>
<li><a href="faq.html" title="Frequently Asked Questions">FAQ</a></li>
<li><a href="404.html" title="Frequently Asked Questions">404</a></li>
</ul>
</li>
</ul>
</div>
<!-- end header -->
<!-- tagline-->
<div id="tagline" class="grid_16" data-delay="6">
<h4 class="currentSlogan left">Welcome to the <a href="#">Side Notes</a> page. This is one of our favourite page templates. Perfect for descriptions which need clarifications or accompanying diagrams.</h4>
<h4 class="left">This is a jQuery tagline rotator. Easily set the text alingment to the <a href="#">left</a>, <a href="#">right</a> or <a href="#">center</a> on a phrase by phrase basis. This one is aligned left.</h4>
<h4 class="right">Use this area to make <a href="#">ANNOUNCEMENTS</a> about news items, blog posts, special offers etc. Each page may have as many taglines as you wish.</h4>
<h4 class="center singleLine">Setting the delay time for the rotation is as simple as changing the <a href="#">"data-delay"</a> attribute in the page's html markup. </h4>
<h4 class="center">This intelligent tagline rotator supports the use of <a href="#">link tags</a>. To all ow users to click these links, the rotator <a href="#">pauses</a> once a user rolls over the tagline with their mouse. </h4>
</div>
<!--end tagline-->
<!--testimonial sidebar-->
<div id="sidebar" class="grid_7">
<ul class="notes">
<li>
<h2>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#" title="Side Note Link">Phasellus hendrerit.</a></h2>
</li>
<li>
<h2>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>
</li>
</ul>
<a href="#"><img src="img/side_notes/notes_image.jpg" alt="Notes Image" /></a>
<h2>Image Caption</h2>
<ul class="notes last">
<li>
<h2>3. Lorem ipsum dolor sit amet, consectetuer adipiscing <a href="#" title="Side Note Link">elit</a>. Phasellus hendrerit.</h2>
</li>
</ul>
</div>
<!--end sidebar-->
<!--main content-->
<div id="mainContent" class="grid_9">
<h1>Plain Text Page With Side Notes</h1>
<h2>Side Notes</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.<span class="noteMarker"> See (1)</span></p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu ugue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elen hendrerit tortor.<span class="noteMarker"> See (2)</span>. Sed semper lorem at felis.Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Nullam mollis. Ut justo.</p>
<p class="narrow">Morbi interdum mollis sapien. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipisin, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae. Sed semper lorem at felis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.<span class="noteMarker"> See (3)</span>. Ut justo. Suspendisse potenti. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu ugue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
</div>
<!--end main content-->
<!--connect bar-->
<div id="connect" class="grid_16">
<!--social media icons-->
<h2>Hang With Us</h2>
<ul id="socialMedia">
<li><a class="first" href="#">1</a></li>
<li><a class="second" href="#">2</a></li>
<li><a class="third" href="#">3</a></li>
<li><a class="fourth" href="#">4</a></li>
<li><a class="fifth" href="#">5</a></li>
</ul>
<!--newsletter signup form-->
<div id="newsletter" data-default="youremail@yourdomain.com" data-subscribed="Thank you for subscribing.">
<form action="#" method="POST">
<input type="text" name="email" value="youremail@yourdomain.com" />
<input type="submit" value="submit" />
</form>
<h2>Sign Up to Our Newsletter!</h2>
</div>
</div>
<!--end connect bar-->
</div> <!-- end site wrapper -->
</div>
<!--footer-->
<div id="footer" class="container_16">
<!--footer info-->
<div id="footInfo" class="grid_7">
<img id="footLogo" src="img/logo/logoFoot_02.png"/>
<p>Lorem ipsum dolor sit amet, consectetuer.</p>
<p>Quick contact - <a href="#">hello@emailaddress.com</a></p>
<p id="phone">+353 (0) 123 456 78</p>
<span>Copyright info here. Made by</span><h2><a href="http://themeforest.net/user/pixelentity">pixelentity</a></h2>
</div>
<!--end footer info-->
<!--twitter widget-->
<div id="twitter" data-username="envato">
<h3>Tweet Widget</h3>
<span>loading...</span>
<h4>line</h4>
<p>Loading latest tweet - follow us here <a href="http://www.twitter.com/pixelentity">@pixelentity</a></p>
</div>
<!--end twitter widget-->
<!--latest from blog-->
<div id="blogLatest">
<h3>Latest Article</h3>
<span>Feb 03 2011</span>
<a id="commentsNum" href="#">25</a>
<h4>line</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volut mattis eros. Nullam malesuada erat ut.....</p>
<a id="blogLink" href="blog_main.html"><h2>Go To The Blog</h2></a>
</div>
<!--end latest from blog-->
</div>
<!--end footer-->
</body>
</html>