<commit_before><?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/functions.php"); echo "\n"; ?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/doctype.php"); echo "\n"; ?>
<head>
    <title>&ldquo;Crayola,&rdquo; work by <NAME></title>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/meta.php"); echo "\n"; ?>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/cssReference.php"); echo "\n"; ?>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/jsReference.php"); echo "\n"; ?>
	<script src="jquery.sexyCycle.js"></script>
	<link href="sexyCycle.css" rel="stylesheet" media="screen, projection" />
    <style>
        .page-title { background-image: url(crayola.png); width: 398px; height: 92px; }
        #project-header hgroup { top: 12px; }  

        .project-image { height: 1551px; background: transparent url(crayola-hero.jpg) no-repeat 50% 0; margin-bottom: 0; }
        .project-url { left: 146px; top: 34px; }
		
		#work-content { border-top: none; background: none; }
		
			.confined { width: 800px; margin: 0 auto; border-top: 1px dotted #7f7f7f; padding: 2em 0; }
			
			.combo { margin-bottom: 2em; }
				.combo h1 { width: 320px; height: 100px; float: left; }
				.combo p { font-size: 15px; margin-left: 320px; color: #777; }				
			
			#lead { margin-bottom: 3em; }
				#lead p { font-size: 22px; }
			
			#components img { float: none; margin-left: 0; margin-right: 0; }
			#components img:hover { cursor: url(sexycycle-cursor.png), auto; }
			#components h1 { background-image: url(components.png); }
			
			#ia-ux { padding-bottom: 1150px; background: transparent url(ia.jpg) no-repeat 50% bottom; }
				#ia-ux h1 { background-image: url(ia-ux.png); }
			
			#responsive { border-top: 1px dotted #7f7f7f; padding: 2em 0 650px; position: relative; }
				#responsive h1 { background-image: url(responsive.png); width: 800px; margin: 0 auto; background-position: 50% 0; height: 65px; }
				#responsive .combo { width: 800px; margin: 0 auto; }
					#responsive .combo p { /*width: 560px;*/ margin: 0; }
				#responsive #tag { border-top: 1px solid #ddd; position: relative; top: 456px; }
					#responsive #tag span { text-align: center; display: block; position: relative; top: -23px; line-height: 1.4; font: normal 20px "urbana-1","urbana-2"; }
						#responsive #tag b { display: block; font-weight: normal; }
						#responsive #tag i { background: #fff; font-style: normal; padding-top: 5px; color: #ccc; }
							#responsive #tag i { padding: 0 0 5px; }
				#responsive #phone { background-image: url(responsive-phone.png); width: 132px; height: 328px; position: absolute; left: 0; bottom: 0; }
				#responsive #desktop { background-image: url(responsive-desktop.png); width: 363px; height: 672px; position: absolute; right: 0; bottom: 0; }
			
				@media screen and (max-width: 1000px) {
					#responsive #tag span { left: -80px; }
				}
			
			#doodads { position: relative; padding-bottom: 280px; }
				#doodads h1 { background-image: url(doodads.png); }
				#doodads p { position: relative; z-index: 2; }
				#doodads img { position: absolute; bottom: 20px; left: -40px; z-index: 1; }
			
			#i3 { background: transparent url(i3-widget.png) no-repeat 50% 90%; padding-bottom: 140px; }
				#i3 h1 { background-image: url(i3.png); }			
				#i3 #i3-roles { background-image: url(roles.png); width: 341px; height: 242px; position: absolute; left: 160px; top: 137px; opacity: 0; z-index: 10; transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; }
				#i3 #i3-activities { background-image: url(activities.png); width: 431px; height: 418px; position: absolute; left: 367px; top: 77px; opacity: 0; z-index: 10; transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; }
				#i3 #i3-roles:hover,  #i3 #i3-activities:hover { opacity: 1; }
				@-webkit-keyframes PULSE {
					0%   { opacity: 1; -webkit-transform: scale(0); }
					100% { opacity: 0.5; -webkit-transform: scale(1); }
					100% { opacity: 0; -webkit-transform: scale(2); }
				}
				.tip { 
					-webkit-transform-origin: 50% 50%;
					width: 22px; height: 22px; border-radius: 22px; background: black; position: absolute; 
					-webkit-animation: PULSE 1s infinite;
					   -moz-animation: PULSE 1s infinite;
						-ms-animation: PULSE 1s infinite;
				}
				#tip1 { left: 379px; top: 238px; }
				#tip2 { left: 718px; top: 240px; }
				
			#oops { background: transparent url(oops.png) no-repeat 50% bottom; padding: 60px 0 540px; text-align: center; position: relative; }
				.project-url { left: 110px; top: 190px; }
				
                
    </style>
</head>

<body id="work">	
	
	<?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/header.php"); echo "\n"; ?>
	
	<div id="work-area-wrap">
	    
	    <section id="work-area" class="wrap800">
	        
	        <nav class="breadcrumbs">	            
	            <ul>
	                <li id="breadcrumbs-home"><a href="/">Home</a></li>
	                <li id="breadcrumbs-work"><a href="/work/">Work</a></li>
	            </ul>
	        </nav><!-- .breadcrumbs -->
	        
	        <div id="project-header">
    	        <hgroup>
        	        <h1 class="page-title phark">Crayola</h1>
        	        <h2 class="project-subtitle">Free the &ldquo;What If&rdquo;</h2>        	    
        	    </hgroup>
<commit_msg>Crayola case study updates [deploy:live]<commit_after><?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/functions.php"); echo "\n"; ?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/doctype.php"); echo "\n"; ?>
<head>
    <title>&ldquo;Crayola,&rdquo; work by <NAME></title>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/meta.php"); echo "\n"; ?>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/cssReference.php"); echo "\n"; ?>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/jsReference.php"); echo "\n"; ?>
	<script src="jquery.sexyCycle.js"></script>
	<link href="sexyCycle.css" rel="stylesheet" media="screen, projection" />
    <style>
        .page-title { background-image: url(crayola.png); width: 398px; height: 92px; }
        #project-header hgroup { top: 12px; }  

        .project-image { height: 1551px; background: transparent url(crayola-hero.jpg) no-repeat 50% 0; margin-bottom: 0; }
        .project-url { left: 146px; top: 34px; }
		
		#work-content { border-top: none; background: none; }
		
			.confined { width: 800px; margin: 0 auto; border-top: 1px dotted #7f7f7f; padding: 2em 0; }
			
			.combo { margin-bottom: 2em; }
				.combo h1 { width: 320px; height: 100px; float: left; }
				.combo p { font-size: 15px; margin-left: 320px; color: #777; }				
			
			#lead { margin-bottom: 3em; }
				#lead p { font-size: 22px; }
			
			#components img { float: none; margin-left: 0; margin-right: 0; }
			#components img:hover { cursor: url(sexycycle-cursor.png), auto; }
			#components h1 { background-image: url(components.png); }
			
			#ia-ux { padding-bottom: 1150px; background: transparent url(ia.jpg) no-repeat 50% bottom; }
				#ia-ux h1 { background-image: url(ia-ux.png); }
			
			#responsive { border-top: 1px dotted #7f7f7f; padding: 2em 0 650px; position: relative; margin-bottom: -50px; }
				#responsive h1 { background-image: url(responsive.png); width: 800px; margin: 0 auto; background-position: 50% 0; height: 65px; }
				#responsive .combo { width: 800px; margin: 0 auto; }
					#responsive .combo p { /*width: 560px;*/ margin: 0; }
				#responsive #tag { border-top: 1px solid #ddd; position: relative; top: 456px; }
					#responsive #tag span { text-align: center; display: block; position: relative; top: -23px; line-height: 1.4; font: normal 20px "urbana-1","urbana-2"; }
						#responsive #tag b { display: block; font-weight: normal; }
						#responsive #tag i { background: #fff; font-style: normal; padding-top: 5px; color: #ccc; }
							#responsive #tag i { padding: 0 0 5px; }
				#responsive #phone { background-image: url(responsive-phone.png); width: 132px; height: 328px; position: absolute; left: 0; bottom: 0; }
				#responsive #desktop { background-image: url(responsive-desktop.png); width: 363px; height: 672px; position: absolute; right: 0; bottom: 0; }
			
				@media screen and (max-width: 1000px) {
					#responsive #tag span { left: -80px; }
				}
			
			#doodads { position: relative; padding-bottom: 280px; border-top: none;}
				#doodads h1 { background-image: url(doodads.png); }
				#doodads p { position: relative; z-index: 2; }
				#doodads img { position: absolute; bottom: 20px; left: -40px; z-index: 1; }
			
			#i3 { background: transparent url(i3-widget.png) no-repeat 50% 90%; padding-bottom: 140px; }
				#i3 h1 { background-image: url(i3.png); }			
				#i3 #i3-roles { background-image: url(roles.png); width: 341px; height: 242px; position: absolute; left: 160px; top: 137px; opacity: 0; z-index: 10; transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; }
				#i3 #i3-activities { background-image: url(activities.png); width: 431px; height: 418px; position: absolute; left: 367px; top: 77px; opacity: 0; z-index: 10; transition: all 0.25s linear; -moz-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -o-transition: all 0.25s linear; }
				#i3 #i3-roles:hover,  #i3 #i3-activities:hover { opacity: 1; }
				@-webkit-keyframes PULSE {
					0%   { opacity: 1; -webkit-transform: scale(0); }
					100% { opacity: 0.5; -webkit-transform: scale(1); }
					100% { opacity: 0; -webkit-transform: scale(2); }
				}
				.tip { 
					-webkit-transform-origin: 50% 50%;
					width: 22px; height: 22px; border-radius: 22px; background: black; position: absolute; 
					-webkit-animation: PULSE 1s infinite;
					   -moz-animation: PULSE 1s infinite;
						-ms-animation: PULSE 1s infinite;
				}
				#tip1 { left: 379px; top: 238px; }
				#tip2 { left: 718px; top: 240px; }
				
			#oops { background: transparent url(oops.png) no-repeat 50% bottom; padding: 60px 0 540px; text-align: center; position: relative; }
				#oops .project-url { left: 110px; top: 190px; }
                
    </style>
</head>

<body id="work">	
	
	<?php require($_SERVER["DOCUMENT_ROOT"]."/_inc/header.php"); echo "\n"; ?>
	
	<div id="work-area-wrap">
	    
	    <section id="work-area" class="wrap800">
	        
	        <nav class="breadcrumbs">	            
	            <ul>
	                <li id="breadcrumbs-home"><a href="/">Home</a></li>
	                <li id="breadcrumbs-work"><a href="/work/">Work</a></li>
	            </ul>
	        </nav><!-- .breadcrumbs -->
	        
	        <div id="project-header">
    	        <hgroup>
        	        <h1 class="page-title phark">Crayola</h1>
        	        <h2 class="project-subtitle">Free the &ldquo;What If&rdquo;</h2>        	    
        	    </hgroup>

{'fraction_non_alphanumeric': 0.16711021382031752, 'fraction_numerical': 0.04973846012664036, 'mean_word_length': 3.0407860585836115, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6591978', 'n_tokens_mistral': 4677, 'n_tokens_neox': 3738, 'n_words': 979}