Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="main">
	<h1>בריתות <br />
		THE COVENANTS</h1>
</div>

<div class="main">
<div class="lines">
	<div class="line-cov6"></div>
	<div class="line-cov5"></div>
	<div class="line-cov4"></div>
	<div class="line-cov3">
		<div class="split"></div>
	</div>
	<div class="line-cov2"></div>
	<div class="line-cov1"></div>
</div>
</div>
<div class="main">
<div class="flex-container">
	<div class="chapter cov1 ch1">
		<p>בראשית <br />Genesis</p>
	</div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="chapter cov1"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov1 open">
		<p>Covenant with Noah.</p>
		<p>Genesis 9:9-11</p>
	</div>
	<div class="chapter cov1"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov2 open">
		<p>Covenant with Abraham.</p>
		<p>Genesis 17:2-7</p>
	</div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov2"></div>
	<div class="chapter cov3 ch1">
		<p>שמות <br />Exodus</p>
	</div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov3 open">
		<p>Covenant with Israel.</p>
		<p>Exodus 19:5-6</p>
	</div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
	<div class="chapter cov3"></div>
		<div class="chapter gradient-to-phin noclick"></div>
	<div class="chapter cov4 ch1">
		<p>במדבר <br />Numbers</p>
	</div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="chapter cov4"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov4 open">
		<p>Covenant with Phinehas.</p>
		<p>Numbers 25:10-13</p>
	</div>
	<div class="chapter gradient-to-david noclick"></div>
	<div class="chapter cov5 ch1">
		<p>שמואל ב א׳ <br />2 Samuel</p>
	</div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov5 open">
		<p>Covenant with David.</p>
		<p>2 Samuel 7:13-16</p>
	</div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter gradient-to-jer noclick"></div>
	<div class="chapter cov5 ch1">
		<p>ירמיהו <br />Jeremiah</p>
	</div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5 divorce">
		<p>God divorced the House of Israel.</p>
		<p>Jeremiah 3:8</p>
	</div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="icon prophesy"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov5 open">
		<p>Renewed covenant prophesied.</p>
		<p>Jeremiah 31:31</p>
	</div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter cov5"></div>
	<div class="chapter gradient-to-matt noclick"></div>
	<div class="chapter cov6 ch1">
		<p class="long">הבשורה של מתיו <br />Gospel of Matthew</p>
	</div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6 death">
		<p>Yeshua came to die for the House of Israel and release them from the law of divorce.</p>
		<p>Matthew 15:24 <br />
		Deut. 24:1-4<br />
		Romans 7:1-4</p>
	</div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="icon"><SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <Path fill-rule="evenodd" d="M7.481 7c0-.633.16-.971.345-1.157.186-.185.525-.343 1.155-.343H15.027c-.091.18-.165.363-.226.544-.32.96-.32 2.06-.32 2.672V17c0 .634-.158.972-.342 1.157-.185.185-.523.343-1.158.343-.34 0-.93-.326-1.26-.99-.292-.59-.343-1.406.352-2.3a.75.75 0 00-.592-1.21h-4V7zM15.2 19.218c-.565.565-1.352.782-2.218.782h-7c-1.1 0-2.142-.788-2.644-1.83-.532-1.106-.494-2.535.552-3.88a.75.75 0 01.592-.29h1.5V7c0-.867.22-1.654.786-2.218C7.332 4.217 8.118 4 8.98 4H17.75c.729 0 1.335.228 1.814.618.466.38.772.883.974 1.38.4.981.462 2.1.462 2.752a.75.75 0 01-.75.75h-4.269V17c0 .866-.217 1.653-.782 2.218zm-4.82-1.04c.054.11.115.217.181.322H5.981c-.4 0-.982-.337-1.293-.982-.25-.52-.307-1.229.183-2.018h5.347a3.416 3.416 0 00.16 2.677zM15.992 8h3.473c-.043-.471-.135-.989-.317-1.436-.14-.346-.32-.61-.533-.784-.201-.164-.47-.28-.866-.28H17.482c-.396 0-.638.115-.807.263-.184.161-.336.41-.45.755-.154.46-.21.99-.232 1.482zm-3.012-1h-4v1h4V7zm-4 2h4v1h-4V9zm4 2h-4v1h4v-1z"/>
</SVG></div>
	<div class="chapter cov6 open">
		<p>Renewed covenant with Israel.</p>
		<p>Matthew 26:26-28<br />
		Hebrews 8:8</p>
	</div>
	<div class="chapter cov6"></div>
	<div class="chapter cov6"></div>
	<div class="chapter gradient-to-future noclick"></div>
</div>
</div>

<div class="main">
	<span>Horizontal lines show the covenants stacking one upon the other.<br />
	Each vertical marker represents a chapter from the Bible.</span>
</div>

<div class="main">
<div class="columns">
	<div class="col one">
		<h2>FIRST COVENANT</h2>
		<span>Genesis 9:9-11</span>
		<p>And I, behold, I establish my covenant with you, and with your seed after you; And with every living creature that is with you, of the fowl, of the cattle, and of every beast of the earth with you; from all that go out of the ark, to every beast of the earth. And I will establish my covenant with you, neither shall all flesh be cut off any more by the waters of a flood; neither shall there any more be a flood to destroy the earth.</p>
	</div>
	<div class="col two">
		<h2>SECOND COVENANT</h2>
		<span>Genesis 17:2-7</span>
		<p>And I will make my covenant between me and thee, and will multiply thee exceedingly. [...] As for me, behold, my covenant is with thee, and thou shalt be a father of many nations. [...] And I will make thee exceeding fruitful, and I will make nations of thee, and kings shall come out of thee. And I will establish my covenant between me and thee and thy seed after thee in their generations for an everlasting covenant, to be a God unto thee, and to thy seed after thee.</p>
	</div>
	<div class="col three">
		<h2>THIRD COVENANT</h2>
		<span>Exodus 19:5-6</span>
		<p>Now therefore, if ye will obey my voice indeed, and keep my covenant, then ye shall be a peculiar treasure unto me above all people: for all the earth is mine: And ye shall be unto me a kingdom of priests, and an holy nation. These are the words which thou shalt speak unto the children of Israel.</p>
	</div>
	<div class="col four">
		<h2>FOURTH COVENANT</h2>
		<span>Numbers 25:10-13</span>
		<p>And the Lord spake unto Moses, saying, Phinehas, the son of Eleazar, the son of Aaron the priest, hath turned my wrath away from the children of Israel, while he was zealous for my sake among them, that I consumed not the children of Israel in my jealousy. Wherefore say, Behold, I give unto him my covenant of peace: And he shall have it, and his seed after him, even the covenant of an everlasting priesthood; because he was zealous for his God, and made an atonement for the children of Israel.</p>
	</div>
	<div class="col five">
		<h2>FIFTH COVENANT</h2>
		<span>2 Samuel 7:13-16</span>
		<p>He shall build an house for my name, and I will stablish the throne of his kingdom for ever. I will be his father, and he shall be my son. If he commit iniquity, I will chasten him with the rod of men, and with the stripes of the children of men: But my mercy shall not depart away from him, as I took it from Saul, whom I put away before thee. And thine house and thy kingdom shall be established for ever before thee: thy throne shall be established for ever.</p>
	</div>
	<div class="col six">
		<h2>SIXTH COVENANT</h2>
		<span>Matthew 26:26-28</span>
		<p>And as they were eating, Jesus took bread, and blessed it, and brake it, and gave it to the disciples, and said, Take, eat; this is my body. And he took the cup, and gave thanks, and gave it to them, saying, Drink ye all of it; For this is my blood of the new testament, which is shed for many for the remission of sins.</p>
		<span>Hebrews 8:8</span>
		<p>For finding fault with them, he saith, Behold, the days come, saith the Lord, when I will make a new covenant with the house of Israel and with the house of Judah:</p>
	</div>
</div>
</div>

<div class="main">
<div class="columns">
	<div class="col one">
		<h2>2150 BCE</h2>
		<span>FOR THE</span>
		<h3>ENTIRE WORLD</h3>
		<span>THROUGH</span>
		<h3>Noah</h3>
		<p>Unconditional.</p>
	</div>
	<div class="col two">
		<h2>1903 BCE</h2>
		<span>FOR AN</span>
		<h3>ENTIRE LINEAGE</h3>
		<span>THROUGH</span>
		<h3>Abraham</h3>
		<p>Unconditional.</p>
	</div>
	<div class="col three">
		<h2>1280 BCE</h2>
		<span>FOR AN</span>
		<h3>ENTIRE KINGDOM</h3>
		<span>THROUGH</span>
		<h3>Moses</h3>
		<p class="conditional">Conditional.</p>
		<p class="pink">Leviticus 26:3</p>
		<p class="pink">If ye walk in my statutes, and keep my commandments, and do them;</p>
	</div>
	<div class="col four">
		<h2>1241 BCE</h2>
		<span>FOR AN</span>
		<h3>ENTIRE PRIESTHOOD</h3>
		<span>THROUGH</span>
		<h3>Phinehas</h3>
		<p>Unconditional.</p>
	</div>
	<div class="col five">
		<h2>970 BCE</h2>
		<span>FOR AN</span>
		<h3>ENTIRE KINGSHIP</h3>
		<span>THROUGH</span>
		<h3>David</h3>
		<p>Unconditional.</p>
	</div>
	<div class="col six">
		<h2>27 CE</h2>
		<span>FOR A</span>
		<h3>RESTORED KINGDOM</h3>
		<span>THROUGH</span>
		<h3>Yeshua</h3>
		<p class="conditional">Conditional.</p>
		<p class="pink">John 15:10</p>
		<p class="pink">If ye keep my commandments, ye shall abide in my love; even as I have kept my Father's commandments, and abide in his love.</p>
	</div>
</div>
</div>

<div class="quote">
	<h3 class="hebrew" style="margin-top:30px; color:#A8EAF3;">ושכנתי בתוך בני ישראל והייתי להם לאלהים</h3>
	<span>Exodus 29:45</span>
</div>

<div class="main promises">
	<h2>PROMISES</h2>
	<p>Each covenant comes with promises.</p>
	<div class="columns">
		<div class="col">
			<h3>1ST</h3>
			<p>No further destruction by a flood.<br /><span>Genesis 9:11</span></p>
		</div>
		<div class="col">
			<h3>2ND</h3>
			<p>Multiply seed exeedingly.<br /><span>Genesis 17:2</span></p> 
			<p>Nations and kings will come from Abraham.<br /><span>Genesis 17:6</span></p>
		</div>
	</div>
	<div class="columns">
		<div class="col">
			<h3>3RD</h3>
			<p>Rain in due season.<br /><span>Leviticus 26:4</span></p> 
			<p>Land shall yield her increase.<br /><span>Leviticus 26:4</span></p> 
			<p>Trees yield fruit.<br /><span>Leviticus 26:4</span></p> 
			<p>Harvest enough for storing.<br /><span>Leviticus 26:5</span></p> 
			<p>Store enough for sowing.<br /><span>Leviticus 26:5</span></p>
			<p>Eat until full.<br /><span>Leviticus 26:5</span></p>
			<p>Dwell in safety.<br /><span>Leviticus 26:6</span></p>
			<p>Peace in the land.<br /><span>Leviticus 26:6</span></p>
			<p>No fear of danger.<br /><span>Leviticus 26:6</span></p>
			<p>No evil beasts in the land.<br /><span>Leviticus 26:6</span></p>
			<p>No war in the land.<br /><span>Leviticus 26:6</span></p>
			<p>Enemies will run away and die.<br /><span>Leviticus 26:7</span></p>
			<p>Receive God's respect.<br /><span>Leviticus 26:9</span></p>
			<p>Be fruitful and multiply.<br /><span>Leviticus 26:9</span></p>
			<p>God will set Tabernacle among the people.<br /><span>Leviticus 26:11</span></p>
			<p>Blessed will be short and long term storage.<br /><span>Leviticus 26:10</span></p>
			<p>God will not abhor the people.<br /><span>Leviticus 26:11</span></p>
			<p>God will walk among the people.<br /><span>Leviticus 26:12</span></p>
			<p>The nation will be above other nations.<br /><span>Deuteronomy 28:1</span></p>
			<p>Blessed in the city.<br /><span>Deuteronomy 28:3</span></p>
			<p>Blessed in the field.<br /><span>Deuteronomy 28:3</span></p>
			<p>Blessed offspring.<br /><span>Deuteronomy 28:4</span></p>
			<p>Blessed crops.<br /><span>Deuteronomy 28:4</span></p>
			<p>Blessed livestock.<br /><span>Deuteronomy 28:4</span></p>
			<p>Blessed livestock offspring.<br /><span>Deuteronomy 28:4</span></p>
			<p>Blessed coming in and going out.<br /><span>Deuteronomy 28:6</span></p>
			<p>Blessed labors.<br /><span>Deuteronomy 28:8</span></p>
			<p>Established as a holy people.<br /><span>Deuteronomy 28:9</span></p>
			<p>All others will fear the people.<br /><span>Deuteronomy 28:10</span></p>
			<p>Become lenders and not borrowers.<br /><span>Deuteronomy 28:12</span></p>
			<p>No sickness or disease.<br /><span>Deuteronomy 7:15</span></p>
			<p>Fulfill all our days.<br /><span>Deuteronomy 4:40</span></p>
			<p>Multiplied herds, flocks, silver, and gold.<br /><span>Deuteronomy 8:13</span></p>
		</div>
	</div>
	<div class="columns">
		<div class="col">
			<h3>4TH</h3>
			<p>An everlasting priesthood through Phinehas.<br /><span>Numbers 25:13</span></p>
		</div>
		<div class="col">
			<h3>5TH</h3>
			<p>David's throne and kingdom will endure forever.<br /><span>2 Samuel 7:16</span></p>
		</div>
		<div class="col">
			<h3>6TH</h3>
			<p>Reunified 12 tribes of Israel.<br /><span>Ezekiel 37:19,22; Hosea 3:5</span></p>
			<p>Redemption.<br /><span>Luke 1:68</span></p>
			<p>New betrothal.<br /><span>Hosea 2:19-20</span></p>
			<p>Holy Spirit poured out.<br /><span>Ezekiel 26:26-27; Joel 2:28</span></p>
		</div>
	</div>
</div>

<div class="main">
<div class="columns">
	<div class="col one">
		<h2>BUILT AND OFFERED ANIMALS ON AN ALTAR</h2>
		<span>Genesis 8:20</span>
		<p>And Noah builded an altar unto the Lord; and took of every clean beast, and of every clean fowl, and offered burnt offerings on the altar.</p>
		<div class="stat">Death occurred in the process
			<p class="number">15+</p>
		</div>
		<div class="stat">God covered the world in
			<p class="bigtext">water</p>
		</div>
	</div>
	<div class="col one">
		<h2>CUT ANIMALS IN HALF AS GOD WALKED BETWEEN THEM</h2>
		<span>Genesis 15:9-10,17</span>
		<p>And he said unto him, Take me an heifer of three years old, and a she goat of three years old, and a ram of three years old, and a turtledove, and a young pigeon. And he took unto him all these, and divided them in the midst, and laid each piece one against another: but the birds divided he not.[...] 
And it came to pass, that, when the sun went down, and it was dark, behold a smoking furnace, and a burning lamp that passed between those pieces.</p>
		<div class="stat">Death occurred in the process
			<p class="number">5</p>
		</div>
		<div class="stat">God covered Abraham in
			<p class="bigtext">darkness</p>
		</div>
	</div>
	<div class="col one">
		<h2>WALKED INTO A CLOUD OF FIRE AND SMOKE</h2>
		<span>Exodus 24:16-18</span>
		<p>And the glory of the Lord abode upon mount Sinai, and the cloud covered it six days: and the seventh day he called unto Moses out of the midst of the cloud. And the sight of the glory of the Lord was like devouring fire on the top of the mount in the eyes of the children of Israel. And Moses went into the midst of the cloud, and gat him up into the mount: and Moses was in the mount forty days and forty nights.</p>
		<div class="stat">Death occurred in the process
			<p class="number">4+</p>
		</div>
		<div class="stat">God covered the mountain in
			<p class="bigtext">fire/smoke</p>
		</div>
	</div>
	<div class="col one">
		<h2>KILLED AN INSRAELITE MAN AND MEDIANITE WOMAN</h2>
		<span>Numbers 25:7-8</span>
		<p>And when Phinehas, the son of Eleazar, the son of Aaron the priest, saw it, he rose up from among the congregation, and took a javelin in his hand; And he went after the man of Israel into the tent, and thrust both of them through, the man of Israel, and the woman through her belly. So the plague was stayed from the children of Israel.</p>
		<div class="stat">Death occurred in the process
			<p class="number">2</p>
		</div>
		<div class="stat">God covered Israel in a
			<p class="bigtext">plague</p>
		</div>
	</div>
	<div class="col one">
		<h2>COMMANDED THE BUILDING OF THE TEMPLE</h2>
		<span>2 Samuel 7:2,5,13</span>
		<p>That the king said unto Nathan the prophet, See now, I dwell in an house of cedar, but the ark of God dwelleth within curtains.[...] 
Go and tell my servant David, Thus saith the Lord, Shalt thou build me an house for me to dwell in?[...] 
He shall build an house for my name, and I will establish the throne of his kingdom for ever.</p>
		<div class="stat">Death occurred in the process
			<p class="number">0</p>
		</div>
		<div class="stat">God filled the temple in
			<p class="bigtext">smoke</p>
		</div>
	</div>
	<div class="col one">
		<h2>DIED AND RESURRECTED REDEEMING A PEOPLE</h2>
		<span>Romans 7:4</span>
		<p>Wherefore, my brethren, ye also are become dead to the law by the body of Christ; that ye should be married to another, even to him who is raised from the dead, that we should bring forth fruit unto God.</p>
		<div class="stat">Death occurred in the process
			<p class="number">1</p>
		</div>
		<div class="stat">God covered the world in
			<p class="bigtext">darkness</p>
		</div>
	</div>
</div>
</div>

<div class="main">
	<h2>SIGNS</h2>
	<p>Each covenant comes with a sign. <span> John 3:14 & Hosea 6:2; 2 Samuel 7:13; Numbers 25:13; Exodus 31:13; Genesis 17:11; Genesis 9:13;</span></p>
	<p class="super cov6"><span>6th</span>Death & Resurrection</p>
	<p class="super cov5"><span>5th</span>David's throne</p>
	<p class="super cov4"><span>4th</span>Priesthood</p>
	<p class="super cov3"><span>3rd</span>Sabbaths</p>
	<p class="super cov2"><span>2nd</span>Circumcision</p>
	<p class="super cov1"><span>1st</span>Rainbow</p>
</div>
!

CSS 

              
                //Colors
$cov1: #E65DAD; //purple
$cov2: #5BCAE6; //blue
$cov3: #67E65D; //green
$cov-proph: #F3A8A8; //red
$cov4: #E6DF5D; //yellow
$cov5: #E65D5D; //red
$cov6: #FFFFFF; //white

* { box-sizing: border-box; }
body { background: #1E1A20; font-size: 0.8rem; font-family: 'Source Code Pro', monospace; font-weight: 200; padding-bottom: 100px; margin: 0; }
html.sr .chapter { visibility: hidden; } //scrollreveal

.main {
	padding-left: 30px;
	position: relative;
	max-width: 100%;
	margin: 50px 0;
}

h1 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
	font-size: 2.2rem;
	z-index: 3;
}

h2 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
	font-size: 2rem;
	border-top: 1px solid #fff;
	margin: 20px 0 10px;
	line-height: 1.2;
}
h3 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: 100;
	font-size: 2rem;
	margin: 0;
}

.pink {
	color: $cov1;
}

.stat {
	border-top: 1px solid #fff;
	text-transform: uppercase;
	margin: 20px 0 0;
	padding-top: 10px;
	
	.number {
		font-family: 'Oswald', sans-serif;
		font-size: 5rem;
		font-weight: 600;
		margin: 0;
		line-height: 1.4;
	}
	
	.bigtext {
		font-family: 'Oswald', sans-serif;
		font-size: 2.8rem;
		font-weight: 600;
		margin: 0;
		line-height: 1.4;
		text-transform: uppercase;
	}
}

.muted {
	color: rgba(255,255,255,0.5);
}

p { 
	padding-left: 0;
	list-style-position: inside;
	margin-top: 0px;
	color: #fff;
	font-size: 0.8rem;
	
	&.super {
		font-size: 5rem;
		font-family: 'Oswald', sans-serif;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0;
		line-height: .87;
		
		&.cov1 { color: $cov1; }
		&.cov2 { color: $cov2; }
		&.cov3 { color: $cov3; }
		&.cov4 { color: $cov4; }
		&.cov5 { color: $cov5; }
		&.cov6 { color: $cov6; }
	}
}

.lines {
	margin-top: 50px;
	
	> div {
		margin-bottom: 5px;
	}
	.line-cov1 {
		height: 2px;
		width: 5885px; //5500 total
		margin-left: 115px;
		background: $cov1;
	}
	.line-cov2 {
		height: 2px;
		width: 5575px;
		margin-left: 425px;
		background: $cov2;
	}
	.line-cov3 {
		height: 2px;
		width: 4835px;
		margin-left: 1165px;
		background: $cov3;
		position: relative;
		
		.split {
			position: absolute;
			display: block;
			height: 1px;
			width: 1595px;
			margin-left: 2595px;
			border-bottom: 2px dashed #1E1A20;
			top: 0;
		}
	}
	.line-cov4 {
		height: 2px;
		width: 3940px;
		margin-left: 2060px;
		background: $cov4;
	}
	.line-cov5 {
		height: 2px;
		width: 3240px;
		margin-left: 2760px;
		background: $cov5;
	}
	.line-cov6 {
		height: 2px;
		width: 645px;
		margin-left: 5355px;
		background: $cov6;
	}
}


.columns {
	margin-top: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	max-width: 100%;
	
	
	.col {
		color: #fff;
		margin: 0 1rem;
		flex: 1 1 0;
		
		&:first-child {
			margin-left: 0;
		}
		
		p {
			text-align: justify;
		}
		
		.conditional {
			background: $cov1;
			color: #1E1A20;
			padding: .5rem;
			margin-top: .5rem;
			font-weight: 400;
		}
	}
}

span {
	color: rgba(255,255,255,0.5);
	display: inline-block;
	
	&.small {
		font-size: .8rem;
		font-family: 'Source Code Pro', monospace;
		text-transform: none;
		font-weight: 300;
	}
	
	+ p {
		margin-top: 1rem;
	}
}

.quote {
	margin: 30px 0 50px 30px;
	
	h3 {
		margin: 0;
		font-size: 3rem;
	}
}

.promises {
	.col p {
		color: #A8EAF3;
		display: inline-block;
		font-weight: 400;
		padding: 0 6px;
		position: relative;
		border-left: 2px solid #A8EAF3;
	
		span {
			color: rgba(255,255,255,0.5);
			margin:2px 0 5px 0;
			display: inline-block;
		}
	}
}

.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
	margin: 50px 0px;
}

.icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: #fff;
	
	&.prophesy {
		fill: $cov-proph;
	}
}

.chapter:not(.open) p {
	display: none;
}

.chapter { 
	height: 50px;
	width: 5px;
	display: block;
	margin: 2.5px;
	flex-shrink: 0;
	transition: 0.15s ease-out !important;
	
	p {
		color: #333;
	}
	
	&.ch1 {
		height: 80px;
		position: relative;
		
		p {
			font-size: .8rem;
			position: absolute;
			bottom: -3rem;
			left: -30px;
			color: #fff;
			font-weight: 100;
			text-align: center;
			min-width: 70px;
			white-space: nowrap;
			display: block;
			
			&.long {
				left: -60px;
			}
		}
	}
	
	&.cov1 {
		background: $cov1;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov1;
			height: 55px;
		}
	}
	&.cov2 {
		background: $cov2;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov2;
			height: 55px;
		}
	}
	&.cov3 {
		background: $cov3;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov3;
			height: 55px;
		}
	}
	&.cov-proph {
		background: $cov-proph;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov-proph;
			height: 55px;
		}
	}
	&.cov4 {
		background: $cov4;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov4;
			height: 55px;
		}
	}
	&.cov5 {
		background: $cov5;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov5;
			height: 55px;
		}
	}
	&.cov6 {
		background: $cov6;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov6;
			height: 55px;
		}
	}
	
	&.divorce {
		background: red;
		height: 55px;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px red;
			height: 55px;
		}
	}
	
	&.death {
		background: $cov3;
		height: 55px;
		&:hover:not(.open):not(.ch1) {
			box-shadow: 0 0 0 1px $cov3;
			height: 55px;
		}
		&.open {
			height: 200px;
			box-shadow: 0 0 8px rgba(255,255,255,0.8);
		}
	}
	
	&.open {
		width: 200px;
		height: 150px;
		padding: 1em;
		z-index: 2;
		box-shadow: 0 0 8px 2px rgba(0,0,0,0.8);
		font-weight: 400;
		
		p {
			margin-top: 0;
		}
	}
}

.chapter:not(.noclick) {
	cursor: pointer;
}

.gradient-to-jer {
	background: #e65d5d;
	width: 600px;
}
.gradient-to-phin {
	background: rgb(103,230,93);
  background: linear-gradient(90deg, rgba(103,230,93,1) 0%, rgba(230,223,93,1) 100%);
	width: 200px;
}
.gradient-to-david {
	background: rgb(230,223,93);
  background: linear-gradient(90deg, rgba(230,223,93,1) 0%, rgba(230,93,93,1) 100%);
	width: 400px;
}
.gradient-to-matt {
	background: rgb(230,93,93);
  background: linear-gradient(90deg, rgba(230,93,93,1) 0%, rgba(255,255,255,1) 100%);
	width: 600px;
}
.gradient-to-future {
	background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
	width: 500px;
}
!

JS 

              
                ScrollReveal().reveal('.chapter, .icon', { interval: 0.1 });
ScrollReveal().reveal('.main', { delay: 100 });

$(".chapter").not( ".noclick" ).click(function (o) {
$(this).toggleClass("open");
});
!
999px

Console