/
referance.html
executable file
·200 lines (192 loc) · 9.07 KB
/
referance.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New design for mobifreaks</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0" />
<link rel="stylesheet" href="style.css"/>
<link href="http://mobifreaks.com/wp-content/demos/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrap">
<header class="header">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt=""/></a></div>
<div class="menu-but"><a href="#menu"><img src="images/menu.png"/></a></div>
<br class="clearfix"/>
</header>
<hr class="separator"/>
<div class="container">
<div class="content">
<h1>Referance Page</h1>
<p>This give quick referance to all basic html element supported by this design like headings, paragraphs, list, typography, blockquotes, forms etc,..</p>
<hr class="separator"/>
<h2>Headings</h2>
<p>Heading and thier 6 levels</p>
<hr class="separator"/>
<h1>Heading lvl 1</h1>
<h2>Heading lvl 2</h2>
<h3>Heading lvl 3</h3>
<h4>Heading lvl 4</h4>
<h5>Heading lvl 5</h5>
<h6>Heading lvl 6</h6>
<hr class="separator"/>
<h2>Paragraphs</h2>
<p>Example of small, medium and large type of paragraphs</p>
<hr class="separator"/>
<p>Combination of dummy text</p>
<p>She must have hidden the plans in the <a href="">escape</a> pod. Send a detachment down to retrieve them, and see to it personally, Co mmander. There'll be no one to stop us this time! The plans you refer to will soon be back in our hands. Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense.</p>
<p>Still, she's got a lot of spirit. I don't know, what do you think? Your eyes can deceive you. Don't trust them. In my experience, there is no such thing as luck. Partially, but it also obeys your commands. I find your lack of faith disturbing.</p>
<p>Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money. Ye-ha! Still, she's got a lot of spirit. I don't know, what do you think?</p>
<hr class="separator"/>
<h2>Text Formatting</h2>
<p>Example of bold, strong, italic, Emphasized, small, deleted, inserted, superscripted, subscripted, code, keyboard, SAMP, variable, quoted, cite, defination, abbrevation, address, pre, blockquote etc,..</p>
<hr class="separator"/>
<p>Bold <b>Design Name</b></p>
<p>Strong <strong>Design Name</strong></p>
<p>Italic <i>Design Name</i></p>
<p>Emphasized <em>Design Name</em></p>
<p>Small text <small>Design Name</small></p>
<p>Deleted <del>Design Name</del></p>
<p>Inserted <ins>Design Name</ins></p>
<p>Superscripted <sup>Design Name</sup></p>
<p>Subscripted <sub>Design Name</sub></p>
<p>Code style <code>Design Name</code></p>
<p>Keyboard style <kbd>Design Name</kbd></p>
<p>Sample output from a computer program <samp>Design Name</samp></p>
<p>Variable <var>Design Name</var></p>
<p>Quoted <q>Design Name</q></p>
<p>Title of the work <cite>Design Name</cite></p>
<p>Defination term <dfn>Design Name</dfn></p>
<p>Abbrevated Text <abbr title="Abbrevation for design name">Design Name</abbr></p>
<h3>Address</h3>
<address>Design Name<br/>by <a href="http://mobifreaks.com">Mobifreaks</a><br/>support[-at-]mobifreaks.com</address>
<h2 class="underline">Pre</h2>
<pre>This is just a pre formatted text</pre>
<h2 class="underline">Blockquote</h2>
<blockquote><p>Blockquoted text.Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money. Ye-ha! Still, she's got a lot of spirit. I don't know, what do you think?</p></blockquote>
<h2 class="underline">HTML IMages</h2>
<img src="http://lorempixel.com/268/160" alt=""/>
<h2 class="underline">Unordered list</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<h2 class="underline">Ordered list</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<h2 class="underline">Defination list</h2>
<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>
<hr class="separator" />
<h2>Navigation</h2>
<hr class="separator" />
<h5>Vertical</h5>
<nav class="vertical">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<h5>Horizontal</h5>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<hr class="separator" />
<h2>Form Elements</h2>
<p>Example of text, password, radio, checkbox, dropdown, textarea, submit buttons etc,..</p>
<hr class="separator" />
<form action="#" method="post" class="label-top">
<div>
<h4>Text Field</h4>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Password Field</h4>
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" tabindex="1" />
</div>
<div class="inline">
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" tabindex="3" value="choice-1" />
</div>
<div>
<h4>Dropdown Choice</h4>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<div class="inline">
<input type="checkbox" name="checkbox" id="checkbox" />
<label for="checkbox" class="inline">Checkbox:</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</div>
<hr class="separator"/>
<aside>
<a name="menu"></a>
<ul class="menu">
<li class="icon home"><a href="index.html">Home</a></li>
<li class="icon info"><a href="about.html">About</a></li>
<li class="icon gear"><a href="services.html">Services</a></li>
<li class="icon bubble"><a href="contact.html">Contact Us</a></li>
<li class="icon add"><a href="referance.html">Referance</a></li>
</ul>
</aside>
</div>
<hr class="separator"/>
<footer class="footer">
<p>© 2012 YourDomain.com • All Rights Reserved</p>
<div class="social">
<a href="#"><img src="images/facebook.png" alt=""></a>
<a href="#"><img src="images/twitter.png" alt=""></a>
<a href="#"><img src="images/gplus.png" alt=""></a>
</div>
</footer>
<div class="copy">Design by <a href="http://mobifreaks.com">Mobifreaks</a>.com</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/slider.min.js"></script>
<script>
$(function () {
// Slideshow 1
$("#slider").responsiveSlides({
maxwidth: 800,
speed: 800
});
});
</script>
</body>
</html>