-
Notifications
You must be signed in to change notification settings - Fork 0
/
full_width.html
203 lines (200 loc) · 11.3 KB
/
full_width.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Pixopolus Template - Full Width</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Template based on Bootstrap">
<meta name="author" content="Pixel-Coder">
<!-- the styles -->
<link href="css/supersized.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/colorbox.css" rel="stylesheet" media="screen">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
<div class="spinner"></div>
<!--+++++++++++- header+++++++++++-->
<header>
<nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="brand" href="index.html"><img src="img/logo.png" alt="Pixopulus" class="logo"></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="index.html"><span class="current"><i class="icon-home"></i></span> Home</a></li>
<li class="divider-vertical"></li>
<li><a href="portfolio_iso.html"><span class="current"><i class="icon-picture"></i></span> Portfolio</a>
<li class="divider-vertical"></li>
<li><a href="aboutus.html"><span class="current"><i class="icon-group"></i></span> About us</a></li>
<li class="divider-vertical"></li>
<li><a href="service.html"><span class="current"><i class="icon-check"></i></span> Service </a></li>
<li class="divider-vertical"></li>
<li><a href="contact.html"><span class="current"><i class="icon-envelope-alt"></i></span> Contact</a></li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog List</a></li>
<li><a href="post-blog.html">Blog Post</a></li>
<li class="active"><a href="full_width.html">Full Width Page</a></li>
<li><a href="columns.html">Columns Example</a></li>
<li class="divider"></li>
<li class="nav-header">Extra</li>
<li><a href="font_awesome.html">Font Awesome</a></li>
<li><a href="list-styles.html">List Styles</a></li>
<li><a href="box_tables.html">Box / Tables</a></li>
<li><a href="404.html">404 Page</a></li>
<li><a href="elements.html">Elements and Typo</a></li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</nav>
</header>
<!--+++++++++++- end header+++++++++++-->
<!--+++++++++++- content++++++++++++++-->
<div id="wrapper" >
<div id="page">
<div class="header">
<div class="container clearfix">
<div class="row">
<div class="span12">
<!-- Portfolio title -->
<h1>Full Width<span class="raleway"> <span class="pink">//</span> Example Page, just needs your content.</span></h1>
</div>
</div>
</div>
</div>
<div class="container contentStart">
<div class="row">
<div class="span12">
<figure> <img src="img/fullpage.jpg" alt=""> </figure>
</div>
</div>
<div class="row contentStart">
<div class="span12">
<h1>HTML Ipsum Presents</h1>
<p><strong><span class="dropcap">P</span>ellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<dl>
<dt>Definition list</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
<dt>Lorem ipsum dolor sit amet</dt>
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!--+++++++++++- end content++++++++++++++-->
<footer>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div class="container">
<div id="controls">
<div id="credits_footer"><small>Pixopolus ©2013 by<a href="http://www.pixelcoder.eu" data-container="body" class="tooltips" data-placement="top" data-trigger="hover" data-title="Your Company" target="_blank"> pixelcoder.eu</a></small></div>
<div id="social"><small> Follow us: </small><a class="facebook tooltips" data-container="body" data-placement="top" data-trigger="hover" data-title="Facebook" href=""><i class="icon-facebook-sign icon-large"></i></a> <a class="google tooltips" data-container="body" data-placement="top" data-trigger="hover" data-title="Google+" href=""><i class="icon-google-plus-sign icon-large"></i></a> <a class="twitter tooltips" data-container="body" data-placement="top" data-trigger="hover" data-title="Twitter" href=""><i class="icon-twitter-sign icon-large"></i></a> <a class="pinterest tooltips" data-container="body" data-placement="top" data-trigger="hover" data-title="Pinterest" href=""><i class="icon-pinterest-sign icon-large"></i></a> </div>
<a id="tray-button" class="tooltips" data-container="body" data-placement="top" data-trigger="hover" data-title="open slides"><i class="icon-folder-close-alt icon-large"></i></a> </div>
</div>
</div>
</footer>
<!-- the javascript on bottom to improve loading speed================================================== -->
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.24376.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.ui.map.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/custom.js"></script> <!-- put inside custom.js all your javascript code, you can change the fullscreen slider images here also.-->
<script type="text/javascript" src="js/jquery.ui.totop.min.js"></script>
<script type="text/javascript">if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");} </script>
<script>
jQuery(window).load(function() {
$x = $(window).width();
if($x > 1024)
{
jQuery(".container .row").preloader(); }
jQuery('.spinner').animate({'opacity':0},1000,'easeOutCubic',function (){jQuery(this).css('display','none')});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
</body>
</html>