Oracle HTML slide template

dabblet.css

/* Oracle HTML slide template */
* { font:normal 102%/1.62rem Avenir,Segoe UI,Roboto,sans-serif;	
	text-decoration:none; padding:0; margin:0; box-sizing:border-box;	
	color:#5f5f5f }
em { font-family:Consolas,monospace; font-weight:bold }
html { height:100% }
html, footer { background:#dce3e4 }
body { background:white; margin:1em }
a, :visited, button { color:hsl(211,50%,50%) }
footer strong { color:#f80000 }
li:before { color:white; background:#5f5f5f }
body > * { padding:0 1.62rem }
ol { counter-reset:collection }
li { counter-increment:collection; list-style-type:none;	
	white-space:pre-line }
li:before { content:counter(collection);	
	padding:0 calc(.38rem/2); display:inline-block; 	
	text-align:center; min-width:1.62rem; margin-right:.38rem }
h1 { font-size:2.058rem; padding:1.62rem 1.62rem 1rem }
li :first-child ~ :not(img) { padding-left:2.62rem }
img { margin:1.62rem 0; border:1px solid }

footer { margin-top:3rem; text-align:right; padding-right:0; padding-top:0 }
footer nav { display:inline }
footer a { font-size:.786rem; padding:0 .62rem; line-height:2.62em; display:inline-block }
footer:before { content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="263.42 38.57 136 17"><path fill="white" d="M320.07,49.63h8.64l-4.57-7.35l-8.38,13.29h-3.82l10.2-15.96c0.44-0.64,1.18-1.04,2-1.04 c0.79,0,1.53,0.38,1.96,1.01l10.24,15.99h-3.82l-1.8-2.97h-8.75L320.07,49.63z M359.7,52.6V38.74h-3.24v15.22 c0,0.42,0.16,0.82,0.47,1.13c0.31,0.31,0.72,0.48,1.18,0.48h14.77l1.91-2.97H359.7z M306.13,50.12c3.14,0,5.7-2.54,5.7-5.68 c0-3.14-2.55-5.7-5.7-5.7h-14.17v16.84h3.24V41.71h10.71c1.5,0,2.71,1.22,2.71,2.73s-1.21,2.73-2.71,2.73l-9.13-0.01l9.67,8.42h4.7 l-6.5-5.46H306.13z M272.04,55.57c-4.65,0-8.42-3.76-8.42-8.41c0-4.65,3.77-8.42,8.42-8.42h9.78c4.65,0,8.42,3.78,8.42,8.42 c0,4.65-3.77,8.41-8.42,8.41H272.04z M281.61,52.6c3.01,0,5.45-2.43,5.45-5.44c0-3.01-2.44-5.46-5.45-5.46h-9.35 c-3.01,0-5.45,2.45-5.45,5.46c0,3.01,2.44,5.44,5.45,5.44H281.61z M343.1,55.57c-4.65,0-8.42-3.76-8.42-8.41 c0-4.65,3.78-8.42,8.42-8.42h11.62l-1.89,2.97h-9.51c-3.01,0-5.46,2.45-5.46,5.46c0,3.01,2.45,5.44,5.46,5.44h11.68l-1.91,2.97 L343.1,55.57L343.1,55.57z M382.69,52.6c-2.49,0-4.59-1.67-5.24-3.96h13.84l1.91-2.97h-15.75c0.64-2.28,2.75-3.96,5.24-3.96h9.5 l1.92-2.97h-11.64c-4.65,0-8.42,3.78-8.42,8.42s3.78,8.41,8.42,8.41h9.98l1.91-2.97L382.69,52.6"/></svg>');	
	float:left; padding:10px 16px; margin-top:-15px;	
	display:inline-block; width:88px; background:#f80000;	
	box-shadow:0 5px 10px rgba(0,0,0,.23) inset }

dabblet.html

<h1> Request access to Jira and Confluence </h1>
<ol>
	<li> Go to	<a href="https://oim.oraclecorp.com/identity">https://oim.oraclecorp.com/identity</a>
	<li> Request Access	
		<img src="//placehold.it/350x150">
		Request for Self
		<img src="//placehold.it/350x150">
	<li> Search for <em>JIRA OCDS</em>
	<img src="//placehold.it/150x150">
	<li> Add to Cart	
		Jira ODCS Developers — ALM (Production)	
		Jira ODCS Developers — ALM (Stage)	
		Jira ODCS Users — ALM (Production)	
		Jira ODCS Users — ALM (Stage)	
		<img src="//placehold.it/350x350">
	<li> Search for <em>alm_users</em>
		<img src="//placehold.it/350x150">
	<li> Add to Cart	 
		alm_users_ww_grp — Subscribe to Beehive Group	
		<img src="//placehold.it/350x150">
	<li> Search for <em>Confluence Users</em>	
		<img src="//placehold.it/350x150">
	<li> Add to Cart	
		Confluence Users — ALM (Stage)	Confluence Users — ALM (Production)	
		<img src="//placehold.it/350x150">
	<li> Checkout
		Provide justification or a koan	
		<img src="//placehold.it/350x150">
	<li> Be on the lookout for approvals by email
</ol>

<footer>	
	<nav>        
		<a href=https://oim.oraclecorp.com/identity target=_blank> OIM </a>       
		<a href=https://alm.oraclecorp.com/pstech target=_blank> Developer Cloud </a>        
		<a href=https://jira.oraclecorp.com/jira target=_blank> Jira </a>        
		<a href=https://confluence.oraclecorp.com target=_blank> Confluence </a>	
	</nav>    
	<a href=https://oracle.com/corporate target=_blank>        
		<strong> Integrated Cloud </strong> Applications &amp; Platform Services    </a>
</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}