Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- ===== -->
<!-- MODAL -->
<!-- ===== -->

<div id="modal">
	<span class="close">&times;</span>
	<!-- vidEmbedFrame holds video -->
	<iframe id="vidEmbedFrame"
		src="" 
		allowfullscreen></iframe>
	
	<div id="statsFrame">
		<div id="statsContain">
			<!-- dataDiplay contains all the modules with data -->
			<div id="dataDisplay">
				<div class="dataModule">
					<h4>How many used form?</h4>
					<p>240</p>
				</div>
				<div class="dataModule">
					<h4>How many used form?</h4>
					<p>240</p>
				</div>
				<div class="dataModule">
					<h4>How many used form?</h4>
					<p>240</p>
				</div>
			</div>
			
			<div id="statsFilter">
				<span href="#">filterOne
				</span><span href="#">filterTwo
				</span><span href="#">filterThree
				</span><span href="#">filterFour
				</span>
			</div>
		</div>
	</div>
</div>

<!-- ============== -->
<!-- ACTUAL CONTENT -->
<!-- ============== -->

<h1>Motor Claims Journey</h1>

<div class="container">
	<!-- first row of container -->
	<div class="row row-1">
		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-1-1">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-1-1"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->

		<hr>

		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-1-2">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-1-2"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here 
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->

		<hr>

		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-1-3">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-1-3"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->

		<hr>

		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-1-4">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-1-4"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->
		
		<!-- hidden elements for positioining -->
			<hr class="hidden">
		<div class="circle outer hidden"></div> <!-- /circle outer -->

	</div> <!-- /row-1 -->
	
	<!-- ================= -->
	<!-- middle connecting -->
	<!-- ================= -->
	<div id="vert-1" class="vert-contain">
		<div class="vert-top"></div>
		<div class="vert-bot"></div>
	</div>
	
	<div id="vert-2" class="vert-contain">
		<div class="vert-top"></div>
		<div class="vert-bot"></div>
	</div>
	
	<!-- ===== -->
	<!-- ROW 2 -->
	<!-- ===== -->
	<div class="row row-2">
		<!-- hidden elements for positioining -->
		<div class="circle outer hidden"></div> <!-- /circle outer -->
			<hr class="hidden">
		<div class="circle outer hidden"></div> <!-- /circle outer -->
			<hr class="hidden">
		
		<!-- beginning of nodes with info -->
		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-2-1">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-2-1"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->

		<hr>
		
		<!-- beginning of nodes with info -->
		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-2-2">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-2-2"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->
		
		<hr>

		<div class="circle outer">
			<!-- hidden for checkbox hack -->
			<input type="checkbox" id="circle-2-3">
			<!-- displayed circle -->
			<label class="circle inner" for="circle-2-3"></label>
			<!-- top ball for hover effect -->
			<div class="circle top"></div>
			<!-- Actual information for display -->
			<h3>TITLE</h3>
			<article>
				<p>
					Describe here
				</p>
				<p>
	<a href="#" target="_blank">View Video</a> / <a href="#">View Stats</a>
				</p>
			</article>
		</div> <!-- /circle outer -->


	
</div> <!-- /container -->
            
          
!
            
              // line for testing
// * {	background: rgba( 0, 0, 0, 0.1 )}

// ========= //
// VARIABLES //
// ========= //

// Max & min window width
$max-width: 1700px;
$min-width: 550px;
// manual count
$tot-dots: 5;
$tot-hr: 4;
// Colors
$main-color: rgb(249,249,249);
$red: rgb(217,83,79);
$low-op: 0.4;
$high-op: 0.7;
// Border styles
$border-width: 4px;
$thick-border: $border-width solid $main-color;
// Circles vars
$dot-size: 50px;
$mid-dot: $dot-size /2;
$top-ball-size: 16px; // if calculated-animation breaks
$inner-size: 65%;
$inner-pos: (100% - $inner-size) / 2 ;
// Article sizes
$article-height: 130px;
$article-width: 250px;
$entire-info-height: $article-height + 80px;
// connector vars
$hr-width: calc( (100% - #{$dot-size} * #{$tot-dots}) / #{$tot-hr}); // full parent width, minus total width of dots, divided between number of hr - creates equal widths in container
$curve: 50px;
// Animation
$animate-time: 1s;

// ====== //
// Mixins //
// ====== //

@mixin show-info{
	~ .top{
		height: $top-ball-size;
		width: $top-ball-size;
		top: -( $article-height + $top-ball-size + $border-width );
	}
	~ h3{
		bottom: $dot-size + $article-height + $top-ball-size;
	}
	~ article{
		/* show text */
		height: $article-height;
		opacity: 1;
		padding-top: 5px;
	}
}

@mixin addTextShadow{
	text-shadow: 1px 1px 1px #555;
}

/* ====== */
/* STYLES */
/* ====== */

html {
	background: {
		image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/996046/Background.jpg");
		repeat: repeat-y;
		position: center center;
		attachment: fixed;
		size: cover;
	}
	color: $main-color;
	font-family: arial;
}

h1 {
	text-align: center;
	margin: 50px;
	@include addTextShadow;
}

h3 {
	position: absolute;
	margin: 0;
	width: 100px;
	bottom: $dot-size;
	left: -30px;
	text-align: center;
	transition: bottom $animate-time;
	@include addTextShadow;
}

a {
	color: whitesmoke;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		color: blanchedalmond;
	}
}

/* Hide elements but keep width for positioining */
.hidden{
	visibility: hidden;
}

/* modal styles */
#modal{
	//display: none;
	display: none;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	z-index: 10;
	height: 100vh;
	width: 100vw;
	text-align: center;
	/* fallback color  */
	background-color: rgb(0,0,0);
	/* color w/ opacity */
	background-color: rgba(0,0,0,0.4);
	.close{
		cursor: pointer;
		position: fixed;
		right: -1px;
		top: 0;
		height: 25px;
		width: 25px;
		padding: 5px;
		font-size: 40px;
		line-height: 25px;
		text-align: center;
		border: $red 1px solid;
		&:hover{
			background: $red;
		}
	}
	#vidEmbedFrame {
		position: fixed;
		visibility: hidden;
		width: 95%;
		height: 90%;
		max-width: 1000px;
		max-height: 563px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 0px;
		margin: 0 auto;
		box-shadow: 0px 0px 30px #555,
								6px 6px 10px #333;
	}
	#statsFrame {
		@extend #vidEmbedFrame;
		background: rgba(7, 7, 7, 0.7);
		#statsContain {
			position: relative;
			height: 100%;
			width: 100%;
			#dataDisplay {
				position: absolute;
				display: flex;
				flex-flow: row wrap;
				width: 100%;
				height: 85%;
				.dataModule{
					position: relative;
					width: 49%;
					height: 49%;
					margin: auto;
					p {
						margin: 0px;
						font-size: 300%;
						font-weight: bold;
					}
				}
			}
			#statsFilter {
				position: absolute;
				width: 100%;
				height: 50px;
				bottom: 0;
				span {
					// position: absolute;
					cursor: pointer;
					display: inline-block;
					box-sizing: border-box;
					line-height: 50px;
					width: 25%;
					height: 100%;
					border-right: 2px solid black;
					border-top: 2px solid black;
					&:last-child {
						border-right: none;
					}
				}
			}
		}
	}
}

/* used to position all content */
.container{
	position: relative;
	width: 90%;
	margin: 0 auto;
	@media screen and (max-width: $min-width){
	/* if window width drops below min-width, set width percentage manually */
			/* Set width: 90% of max-width */
			width: ($min-width * 0.9);
			/* set left & right margin: 5% of max-width either side */
			margin: 0 ($min-width * 0.05);
	}
	@media screen and (min-width: $max-width){
	/* if window width rises above max-width, set width percentage manually */
			/* set width: 90% of max-width */
			width: ($max-width * 0.9);
	}
}

article {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	/* use calc() due to differing units */
	bottom: calc( 100% + #{$border-width} );
	left: calc( 50% - #{$border-width} /2 );
	width: $article-width;
	border-left: solid $border-width $main-color;
	overflow: hidden;
	background: rgba(0,0,0, 0.3);
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	z-index: 1;
	// hide text
	height: 0;
	padding: 0 10px;
	margin: 0;
	transition: height $animate-time;
	p {
		margin: 5px 0px;
		/* width is entire width of parent to prevent text-align problems */
		width: 100%;
	}
	/* make last element of last row display right of border to prevent going off screen*/
	.row-2 .outer:last-child & {
		/* align text to right */
		text-align: right;
		/* shift  text to other side */
		/* use calc() due to different units */
		left: calc(-#{$article-width} + 56%);
		/* clear and change border to other side */
		border-left: none;
		border-right: solid 4px $main-color;
		/* clear radius then set left side instead */
		border-radius: 0;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
	}
}

hr {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	width: $hr-width;
	height: $mid-dot;
	/* clear borders then assign to bottom */
	border: none;
	border-bottom: $thick-border;
}

/* connecting vert line styles */
.vert-contain {
	position: absolute;
	box-sizing: border-box;
	top: $mid-dot - $border-width;
	height: $entire-info-height + $dot-size + $border-width;
	width: $hr-width;
	&#vert-1{
		/* 
			# position by multiplying how many elements preceed it
			# use calc() due to different units
			# First line calcs number of preceeding dots;
			# Second line calcs hr-width then times how many proceed it;
			# This is not DRY code as there is a variable but this method allows for dynamic hr width and prevents breaking of code in IE-11 where it would resolve as a calc within a calc
		*/
		left: calc(	#{$dot-size} * 2 +
						( (100% - #{$dot-size} * #{$tot-dots}) / #{$tot-hr} ) * 1); 
	}
	&#vert-2{
		/* 
			# position by multiplying how many elements preceed it
			# use calc() due to different units
			# First line calcs number of preceeding dots;
			# Second line calcs hr-width then times how many proceed it;
			# This is not DRY code as there is a variable but this method allows for dynamic hr width and prevents breaking of code in IE-11 where it would resolve as a calc within a calc
		*/
		left: calc(	#{$dot-size} * 4 + 
						( (100% - #{$dot-size} * #{$tot-dots}) / #{$tot-hr} ) * 3);
	}
	& .vert-top {
		position: absolute;
		height: 50%;
		width: 50%;
		top: 0;
		left: 0;
		border-right: $thick-border;
		border-top: $thick-border;
		border-top-right-radius: $curve;
	}
	& .vert-bot {
		box-sizing:border-box;
		position: absolute;
		height: 50%;
		width: 50%;
		bottom: 0;
		right: 0;
		border-left: $thick-border;
		border-bottom: $thick-border;
		border-bottom-left-radius: $curve;
	}
}

/* for checkbox hack */
input[type=checkbox] {
	visibility: hidden;
	&:checked {
		@include show-info;
		& + label.circle.inner {
		opacity: 1;
		}
	}
}

/* Circle styles */
.row {
	display: flex;
	position: relative;
	margin-top: $entire-info-height;
	.circle {
		position: relative;
		border-radius: 50%;
		box-sizing: border-box;
		&.outer{
			display: inline-block;
			min-height: $dot-size;
			min-width: $dot-size;
			border: $thick-border;
			box-shadow: 1px 1px 1px #777;
		}
		&.inner{
			position: absolute;
			cursor: pointer;
			width: $inner-size;
			height: $inner-size;
			top: $inner-pos;
			left: $inner-pos;
			background: $main-color;
			opacity: $low-op;
			margin: 0;
			&:hover{
				opacity: $high-op;
			} /* end hover actions */
		}
		&.top{
			position: absolute;
			background-color: $main-color;
			left: 21px;
			transform: translatex( -50% );
			/* to animate */
			height: 0;
			width: 0;
			top: 0;
			transition: height $animate-time, 
									width $animate-time, 
									top $animate-time;
		}
	} /* end circle styles */
}
            
          
!
            
              /* 
Research for AJAX to excel data: https://github.com/SheetJS/js-xlsx 
*/

/* ================ */
/* GLOBAL VARIABLES */
/* ================ */

var modal = document.getElementById("modal"),
		checkboxArr = document.querySelectorAll("input[type=checkbox]"),
		title = document.getElementsByTagName("h3"),
		desc = document.querySelectorAll("article > p:first-child"),
		videoHref = document.querySelectorAll("article > p > a:first-child"),
		statsHref = document.querySelectorAll("article > p > a:last-child"),
		// Data to update 
		info = [], // end of data arr
		// DATA FOR GENERIC TESTING
		genericInfo = [
			{
				title : "Something Great",
				desc : "Th’art nesh thee nay lad soft lad wacken thi sen up t’foot o’ our stairs. Nay lad where’s tha bin.",
				// Your Welcome!!!
				videoHref : "https://www.youtube.com/embed/Cpcv-g9TEPI?start=36&autoplay=1",
			},
			{
				title : "Some Tech",
				desc : "Zombie ipsum reversus ab viral, nam rick grimes. De carne lumbering animata corpora quaeritis.",
				// rick roll 8-bit
				videoHref : "https://www.youtube.com/embed/OA3tnx5GFVA?autoplay=1",
			},
			{
				title : "Method",
				desc : "Spicy jalapeno bacon ipsum dolorea ullamco, spare ribs dolore meatloaf salami laborum.",
				// heyah
				videoHref : "https://www.youtube.com/embed/ZZ5LpwO-An4?autoplay=1",
			},
			{
				title : "Process",
				desc : "Lie on your belly and purr when you are asleep i'm going to lap some water out of my master's cup.",
				// moonmen
				videoHref : "https://www.youtube.com/embed/TgqiSBxvdws?start=48&autoplay=1",
			},
			{
				title : "Next Step",
				desc : "Cookie cookie halvah wafer gingerbread dessert gummi bears gummi bears. Cupcake halvah gummi bears.",
				// Shiny
				videoHref : "https://www.youtube.com/embed/qsXeDzIzhYI?autoplay=1",
			}
		];

/* ========= */
/* FUNCTIONS */
/* ========= */

// add an event function
function addEvent( id, event, func ){
	// get element by Id or element
	var element = document.getElementById(id) || id;
	// check and anssign appropriate event handler
	if( element.attachEvent ){
		/* return */ element.attachEvent( 'on' + event, func );
	} else {
		/* return */ element.addEventListener( event, func, false );
	}
}

function addEventToList( classArr, event, func ){
	for( var i=0; i < classArr.length; i++ ){
		addEvent( classArr[i], event, func );
	}
}

function showModal(evt){
	var modal = document.getElementById("modal");
	// prevent default
	evt.preventDefault();
	// show modal
	modal.style.display = "flex";
}

function showVideo(evt){
			// get link from element
	var vidLink = evt.target.href,
		vidParams = "?embed=true&autoscale=true",
		vidFullLink = vidLink + vidParams,
		vidEmbedFrame = document.getElementById("vidEmbedFrame");
	// show modal
	showModal(evt);
	// set vidEmbedFrame to visible & set src of iframe
	vidEmbedFrame.style.visibility = "visible";
	vidEmbedFrame.src = vidLink;
}

function showStats(evt){
			// get link from element
	var statsFrame = document.getElementById("statsFrame");
	// show modal
	showModal(evt);
	// set stats frame to visible
	statsFrame.style.visibility = "visible";
}

function hideModal(){
	var modal = document.getElementById("modal"),
		vidEmbedFrame = document.getElementById("vidEmbedFrame"),
		statsFrame = document.getElementById("statsFrame");
	// clear src to pause video
	vidEmbedFrame.src = "";
	// hide elements
	vidEmbedFrame.style.visibility = "hidden";
	statsFrame.style.visibility = "hidden";
	modal.style.display = "none";
}

function limitActiveInfoNodes(){
	// check current state of checkbox
	var thisState = this.checked;
	// set all to flase
	for( var x=0; x < checkboxArr.length; x++ ){
		checkboxArr[x].checked = false;
	}
	// set clicked box to origional state
	this.checked = thisState;
}

///////////////////////////
/* update info functions */

function getGenericInfo( type ){
	var max = genericInfo.length,
		i = Math.floor( Math.random() * max );
	return genericInfo[i][type];
}

function updateValues( target, attr ){
	// use window object to obtain var with string arg
	var el = window[target];
	//iterate through, assigning data
	for(var i = 0; i < el.length; i++){
		el[i][attr] = info[i] && info[i][target] ? info[i][target] : getGenericInfo( target );
	}
}

function updateText( target ){
	return updateValues( target, "innerHTML" );
}

function updateHref ( target ){
	return updateValues( target, "href" );
}

/* =================== */
/* ADD EVENT LISTENERS */
/* =================== */

// hide modal on click
addEvent( modal, 
				 "click", 
				 hideModal );
// add function for only one info at time
addEventToList( checkboxArr,
							 "change", 
							 limitActiveInfoNodes );
// show modal when video link clicked
addEventToList( videoHref,
							 "click", 
							 showVideo );
// show modal when stats link clicked
addEventToList( statsHref,
							 "click", 
							 showStats );

/* call update info functions */
updateText("title");
updateText("desc");
updateHref("videoHref");
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console