Reading Position Indicator
How do I make an reading position indicator?
Uses semantically accurate HTML5 progress element to build the indicator.. What is a reading position indicator? How do you make a reading position indicator? This script and codes were developed by Pankaj Parashar on 12 August 2022, Friday.
Reading Position Indicator Previews
Reading Position Indicator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reading Position Indicator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
*, *::after, *::before { box-sizing: border-box;
}
progress { /* Positioning */ position: fixed; left: 0; top: 0; /* Dimensions */ width: 100%; height: .25em; /* Reset the apperance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of the default border in Firefox/Opera. */ border: none; /* For Firefox/IE10+ */ background-color: transparent; /* For IE10+, color of the progress bar */ color: red;
}
progress::-webkit-progress-bar { background-color: transparent;
}
.flat::-webkit-progress-value { background-color: red;
}
.flat::-moz-progress-bar { background-color: red;
}
.single::-webkit-progress-value { background-color: transparent; background-image: -webkit-linear-gradient(left, transparent, red);
}
.single::-moz-progress-bar { background-color: transparent; background-image: -moz-linear-gradient(left, transparent, red);
}
.multiple::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(left, green, red);
}
.multiple::-moz-progress-bar { background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -moz-linear-gradient(left, green, red);
}
.progress-container { width: 100%; background-color: transparent; position: fixed; top: 0; left: 0; height: .25em; display: block;
}
.progress-bar { background-color: red; width: 50%; display: block; height: inherit;
}
body { font-family: 'Raleway', sans-serif; width: 100%; max-width: 800px; padding: 12.5em 0 0; margin: 0 auto; line-height: 2; letter-spacing: 1px; text-align: justify;
}
section { margin: 0 auto; width: 100%; padding: 2.5em 0; text-align: center; background: #1F282D; position: fixed; top: 0; left: 0;
}
nav { position: relative; z-index: 1;
}
a { position: relative; display: inline-block; margin: 10px; outline: none; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); font-size: 1em; padding: 5px 0px 0px; width: auto; color: #9ab; font-weight: 700; transition: color 0.3s; border-bottom: 2px solid transparent;
}
a:hover, a:focus, .active { color: #fff; cursor: pointer; border-bottom: 2px solid #fff;
}
p { text-indent: 50px;
}
p:first-of-type { text-indent: 0;
}
img { width: 100%; margin: 2.5em 0; display: block;
}
blockquote { background-color: yellow; margin: 0; text-align: center; font-weight: bold; margin-bottom: 2.5em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <nav> <a id="flat">Flat</a> <a id="single">Single Color gradient</a> <a id="multiple">Multi Color Gradient</a> <a id="semantic">Semantic Colors</a> </nav>
</section>
<progress value="0" id="progressBar"> <div class="progress-container"> <span class="progress-bar"></span> </div>
</progress>
<article> <blockquote>Scroll through the page and keep an eye on the top of the webpage.</blockquote> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eum debitis veniam corrupti molestias quos natus veritatis earum iure fugiat voluptates voluptate suscipit consequatur sequi nobis quasi dolorum. Cum aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam non quae nulla saepe ad libero dolorum officiis et nam? Rerum accusamus autem error fugit omnis velit nisi deserunt rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo molestiae adipisci ipsam fuga voluptatem nemo quaerat amet possimus corporis inventore nobis quos laborum libero natus assumenda omnis molestias animi eum!</p> <p><img src="http://res.cloudinary.com/dw9fem4ki/image/upload/v1398533313/herb-lubalin-large_opxpwv.jpg"></p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Reading Position Indicator - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
*, *::after, *::before { box-sizing: border-box;
}
progress { /* Positioning */ position: fixed; left: 0; top: 0; /* Dimensions */ width: 100%; height: .25em; /* Reset the apperance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of the default border in Firefox/Opera. */ border: none; /* For Firefox/IE10+ */ background-color: transparent; /* For IE10+, color of the progress bar */ color: red;
}
progress::-webkit-progress-bar { background-color: transparent;
}
.flat::-webkit-progress-value { background-color: red;
}
.flat::-moz-progress-bar { background-color: red;
}
.single::-webkit-progress-value { background-color: transparent; background-image: -webkit-linear-gradient(left, transparent, red);
}
.single::-moz-progress-bar { background-color: transparent; background-image: -moz-linear-gradient(left, transparent, red);
}
.multiple::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(left, green, red);
}
.multiple::-moz-progress-bar { background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -moz-linear-gradient(left, green, red);
}
.progress-container { width: 100%; background-color: transparent; position: fixed; top: 0; left: 0; height: .25em; display: block;
}
.progress-bar { background-color: red; width: 50%; display: block; height: inherit;
}
body { font-family: 'Raleway', sans-serif; width: 100%; max-width: 800px; padding: 12.5em 0 0; margin: 0 auto; line-height: 2; letter-spacing: 1px; text-align: justify;
}
section { margin: 0 auto; width: 100%; padding: 2.5em 0; text-align: center; background: #1F282D; position: fixed; top: 0; left: 0;
}
nav { position: relative; z-index: 1;
}
a { position: relative; display: inline-block; margin: 10px; outline: none; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); font-size: 1em; padding: 5px 0px 0px; width: auto; color: #9ab; font-weight: 700; transition: color 0.3s; border-bottom: 2px solid transparent;
}
a:hover, a:focus, .active { color: #fff; cursor: pointer; border-bottom: 2px solid #fff;
}
p { text-indent: 50px;
}
p:first-of-type { text-indent: 0;
}
img { width: 100%; margin: 2.5em 0; display: block;
}
blockquote { background-color: yellow; margin: 0; text-align: center; font-weight: bold; margin-bottom: 2.5em;
}Reading Position Indicator - Script Codes JS Codes
$(document).ready(function(){ var getMax = function(){ return $(document).height() - $(window).height(); } var getValue = function(){ return $(window).scrollTop(); } if('max' in document.createElement('progress')){ // Browser supports progress element var progressBar = $('progress'); // Set the Max attr for the first time progressBar.attr({ max: getMax() }); $(document).on('scroll', function(){ // On scroll only Value attr needs to be calculated progressBar.attr({ value: getValue() }); }); $(window).resize(function(){ // On resize, both Max/Value attr needs to be calculated progressBar.attr({ max: getMax(), value: getValue() }); }); } else { var progressBar = $('.progress-bar'), max = getMax(), value, width; var getWidth = function(){ // Calculate width in percentage value = getValue(); width = (value/max) * 100; width = width + '%'; return width; } var setWidth = function(){ progressBar.css({ width: getWidth() }); } $(document).on('scroll', setWidth); $(window).on('resize', function(){ // Need to reset the Max attr max = getMax(); setWidth(); }); }
});
$(document).ready(function(){ $('#flat').addClass("active"); $('#progressBar').addClass('flat'); $('#flat').on('click', function(){ $('#progressBar').removeClass().addClass('flat'); $('a').removeClass(); $(this).addClass('active'); $(this).preventDefault(); }); $('#single').on('click', function(){ $('#progressBar').removeClass().addClass('single'); $('a').removeClass(); $(this).addClass('active'); $(this).preventDefault(); }); $('#multiple').on('click', function(){ $('#progressBar').removeClass().addClass('multiple'); $('a').removeClass(); $(this).addClass('active'); $(this).preventDefault(); }); $('#semantic').on('click', function(){ $('#progressBar').removeClass().addClass('semantic'); $('a').removeClass(); $(this).addClass('active'); $(this).preventDefault(); alert('hello'); }); $(document).on('scroll', function(){ maxAttr = $('#progressBar').attr('max'); valueAttr = $('#progressBar').attr('value'); percentage = (valueAttr/maxAttr) * 100; if(percentage<49){ document.styleSheets[0].addRule('.semantic', 'color: red'); document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: red'); document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: red'); } else if(percentage<98){ document.styleSheets[0].addRule('.semantic', 'color: orange'); document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: orange'); document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: orange'); } else { document.styleSheets[0].addRule('.semantic', 'color: green'); document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: green'); document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: green'); } });
});
| Developer | Pankaj Parashar |
| Username | pankajparashar |
| Uploaded | August 12, 2022 |
| Rating | 4.5 |
| Size | 5,454 Kb |
| Views | 34,408 |
Do you need developer help for Reading Position Indicator?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Pankaj Parashar (pankajparashar) Script Codes
| Name | Size |
| Neat hover animations on buttons | 2,697 Kb |
| Todo App using React.js | 2,487 Kb |
| Password strength meter | 2,776 Kb |
| Canvas Polar Clock | 2,882 Kb |
| OSX-style Disk Usage | 3,849 Kb |
| A Pen by Pankaj Parashar | 9,016 Kb |
| HTML5 Meter Element | 2,732 Kb |
| Skillset using HTML5 progress bars with CSS3 animations | 5,923 Kb |
| Minimal business card | 2,447 Kb |
| 3D Pie Chart using amCharts.js | 1,958 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
| Colorful Sliders | Chanrith | 1,246 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| Flat UI Button | Honchoman | 2,289 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Price Comparison Table | Orrinward | 3,459 Kb |
| SVG Scalable Text | Said_FD | 1,451 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| UI Challenge - Budget Selector | AgentRR007 | 3,547 Kb |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!