Skip to content

Commit 42581a3

Browse files
afshinmafshinm
committed
First commit
1 parent 804ea94 commit 42581a3

11 files changed

+10113
-0
lines changed

‎example/css/bootstrap-responsive.css

Lines changed: 1109 additions & 0 deletions
Large diffs are not rendered by default.

‎example/css/bootstrap-responsive.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/css/bootstrap.css

Lines changed: 6158 additions & 0 deletions
Large diffs are not rendered by default.

‎example/css/bootstrap.min.css

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/img/glyphicons-halflings-white.png

8.57 KB
Loading

‎example/img/glyphicons-halflings.png

12.5 KB
Loading

‎example/index.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Intro.js | A better way for new feature introduction and step-by-step users guide </title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Intro.js - A better way for new feature introduction and step-by-step users guide for your website and project.">
8+
<meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
9+
10+
<!-- Le styles -->
11+
<link href="css/bootstrap.css" rel="stylesheet">
12+
<!-- Add IntroJs style -->
13+
<link href="../introjs.css" rel="stylesheet">
14+
<style type="text/css">
15+
body {
16+
padding-top: 20px;
17+
font-family: "Myriad Pro", Verdana, Arial, Tahoma;
18+
padding-bottom: 40px;
19+
}
20+
21+
/* Custom container */
22+
.container-narrow {
23+
margin: 0 auto;
24+
max-width: 700px;
25+
}
26+
.container-narrow > hr {
27+
margin: 30px 0;
28+
}
29+
30+
/* Main marketing message and sign up button */
31+
.jumbotron {
32+
margin: 60px 0;
33+
text-align: center;
34+
}
35+
.jumbotron h1 {
36+
font-size: 72px;
37+
line-height: 1;
38+
}
39+
.jumbotron .btn {
40+
font-size: 21px;
41+
padding: 14px 24px;
42+
}
43+
44+
/* Supporting marketing content */
45+
.marketing {
46+
margin: 60px 0;
47+
}
48+
.marketing p + h4 {
49+
margin-top: 28px;
50+
}
51+
</style>
52+
<link href="css/bootstrap-responsive.css" rel="stylesheet">
53+
54+
</head>
55+
56+
<body>
57+
58+
<div class="container-narrow">
59+
60+
<div class="masthead">
61+
<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
62+
<li><a href="https://github.com/usablica/intro.js"><i class='icon-black icon-download-alt'></i> Download</a></li>
63+
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
64+
<li><a href="https://twitter.com/usablica">@usablica</a></li>
65+
</ul>
66+
<h3 class="muted">Intro.js</h3>
67+
</div>
68+
69+
<hr>
70+
71+
<div class="jumbotron">
72+
<h1 data-step="1" data-intro="Hello all! :) This is the name of project, IntroJs.">Intro<span style="font-weight: normal;">.js</span></h1>
73+
<p class="lead" data-step="4" data-intro="Let's try it. It's free and open-source.">A better way for new feature introduction and step-by-step users guide for your website and project.</p>
74+
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
75+
</div>
76+
77+
<hr>
78+
79+
<div class="row-fluid marketing">
80+
<div class="span6" data-step="2" data-intro="Ok, wasn't that fun?">
81+
<h4>Easy to Use</h4>
82+
<p>Just include the js and css files and add <code>data-step</code> and <code>data-intro</code> to your code.</p>
83+
84+
<h4>Fast & Small</h4>
85+
<p><strong>4 KB</strong> JavaScript and <strong>1 KB</strong> CSS. That's all.</p>
86+
87+
<h4>Free & Open-Source</h4>
88+
<p>Free and open-source to commercial use. Published under MIT license.</p>
89+
</div>
90+
91+
<div class="span6" data-step="3" data-intro="More features, more fun.">
92+
<h4>Keyboard + Mouse navigating</h4>
93+
<p>Ability to navigating with Mouse and Keyboard arrows, <code>←</code>, <code>→</code> and <code>ESC</code> to exit.</p>
94+
95+
<h4>Browsers Compatibllity</h4>
96+
<p>Currently for Modern Browsers only, but I'll try to make it compatible for old browsers also in next versions.</p>
97+
98+
<h4>Developed with <3</h4>
99+
<p>With <3 in <a href='http://usabli.ca/' target="_blank" title="usabli.ca group">usabli.ca</a>, Tehran.</p>
100+
</div>
101+
</div>
102+
103+
<hr>
104+
105+
<div class="footer">
106+
<p>&copy; <a href='http://usabli.ca/' target="_blank" title="usabli.ca group">usabli.ca</a> 2013 - A weekend project by <a href="http://afshinm.name/" target="_blank">Afshin Mehrabani</a></p>
107+
</div>
108+
109+
</div>
110+
<script type="text/javascript" src="../intro.js"></script>
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)