File size: 3,101 Bytes
5f830d1 c8e4236 5f830d1 0c119f7 5f830d1 c8e4236 5f830d1 b4b2753 5f830d1 c8e4236 b4b2753 c8e4236 b4b2753 0c119f7 b4b2753 5f830d1 d86254c 1809cfd 22c7264 b1c5f8c 0c119f7 22fca24 b1c5f8c 8755ee2 22c7264 5f830d1 |
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 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sholo</title>
<link rel="stylesheet" href="./assets/styles/css/demo.css">
</head>
<body>
<div class="page-wrap">
<section class="section__header" data-sholo="Hey welcome to presenter!">
<h1>Sholo</h1>
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
<a href="#" class="btn btn__dark">Show an Example</a>
<a href="#" class="btn btn__light">Learn More</a>
</section>
<section class="section__purpose">
<h1>Whats does it do?</h1>
<p>Let's you bring any component on the page into the spotlight.</p>
<p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
</section>
<section class="section__how">
<h1>How does it do that?</h1>
<p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some element</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__examples">
<h1>Can you show some Examples?</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__learn">
<h1>I want to learn more</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__contributing">
<h1>Contributing</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
</div>
<script src="./assets/scripts/dist/sholo.js"></script>
<script>
const sholo = new Sholo({
animate: true,
opacity: 0.8,
padding: 0
});
sholo.highlight('.section__header');
</script>
</body>
</html> |