diff --git a/demo/demo.js b/demo/demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb72b85f80544bfeacefd638930aa72be328053b
--- /dev/null
+++ b/demo/demo.js
@@ -0,0 +1,63 @@
+/* eslint-disable */
+const sholo = new Sholo({
+ animate: true,
+ opacity: 0.8,
+ padding: 5,
+});
+
+sholo.defineSteps([
+ {
+ element: '.section__header',
+ popover: {
+ title: 'Adding Introductions',
+ description: 'You can use it to add popovers on top of the website',
+ position: 'bottom',
+ },
+ },
+ {
+ element: '.btn__example',
+ popover: {
+ title: 'Adding Introductions',
+ description: 'You can use it to add popovers on top of the website',
+ position: 'left',
+ },
+ },
+ {
+ element: '.btn__light',
+ popover: {
+ title: 'Adding Introductions',
+ description: 'You can use it to add popovers on top of the website',
+ position: 'rig',
+ },
+ },
+ {
+ element: '.section__how',
+ popover: {
+ title: 'Just Specify the Item',
+ description: 'All you have to do is provide the query selector of element to highlight',
+ position: 'right',
+ },
+ },
+ {
+ element: '.section__purpose',
+ popover: {
+ title: 'Automatically Position',
+ description: 'It can automatically position too if you dont provide',
+ },
+ },
+ {
+ element: '.section__examples',
+ },
+ {
+ element: '.section__contributing',
+ popover: {
+ title: 'Automatically Position',
+ description: 'It can automatically position too if you dont provide',
+ },
+ },
+]);
+
+document.querySelector('.btn__example')
+ .addEventListener('click', () => {
+ sholo.start();
+ });
diff --git a/index.html b/index.html
index 3c887d74187e376b3a0ff37168448762bcf57178..5a55ef04ab8cafa581640d20c6627c3f5a5fdd47 100644
--- a/index.html
+++ b/index.html
@@ -56,70 +56,6 @@
-
+