Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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 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.

HTML

              
                <div id="body" onLoad="document.getElementById('txtInput').focus()">
	    <span id="lblTitleMessage" class="form-control clearfix" style="min-height:5vh;height:unset;border-radius:0;">
	    	<div class='text-muted motd' id="motd">Ubiquitous Ambiguity - By: Shaun Fox</div>
			<div class='col-lg-12 text-right text-muted'>
			<button id='btnGallery' class='btn btn-sm btn-default clearfix' type='button' data-toggle='collapse' data-target='#navbarResponsive' 
			aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation' onClick='toggleGallery(this)'>
			View Gallery</button>
			</div>
	    </span>
		
		<div class="consoleArea">
	
			<div class="col-md-6">
				<a id="navLink1" class="hidden-md hidden-lg btn btn-default btn-block" onClick="navigate('start',this)">
				  CONSOLE
				</a>
				<div id="start">
					<input type="hidden" name="totalInputCounter" id="totalInputCounter" value="0" />
					<input type="hidden" name="invalidInputCounter" id="invalidInputCounter" value="0" />
					<div id="public_console" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;btnOne&#39;)" style="margin-top:0;">
		
						<blockquote class="consoleOutput blockquote-reverse" id="scrollDown"><span id="lblOne"><hr class='CRhr'/><hr class='CRhr'/><span class='small'>An observation can be said to consist of three parts:<br/>The observer, the observed, and the act of observation. <br/>An observation in the absense of everything might be something like a reflection, or a dream...Or perhaps just a word.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></span><hr class='CRhr'/><hr class='CRhr'/><span class='small'>For your consideration, this site includes several examples of my work with various methods of creative development, and my understanding of various technologies.</span></span></blockquote>
						<input name="txtInput" type="text" id="txtInput" class="form-control" name="txtInput" PlaceHolder="Enter an access code or system command" style="width:100%;height:5vh;" />
				    	<input type="submit" name="btnOne" value="" id="btnOne" style="display:none;" />
					
	</div>
				    
				    
				</div>
			</div>
			<div class="col-md-6">
				<a id="navLink2" class="hidden-md hidden-lg btn btn-default btn-block" onClick="navigate('galleryArea',this)">
				  GALLERY
				</a>
				<div id="galleryArea">
				<div>
					<img src="images/product1.gif" alt="Promotional Image" />
					<div>
						<p>Fullscreen 'Trap-Door' Website</p>
						<p>Website Template</p>
						<a href="link to project">Project Code</a>
						<p>Full-screen, mobile friendly website template with CSS-driven animation which creates a unique layered effect during navigation.</p>
					</div>
				</div>
				<div>
					<img src="images/product.gif" alt="Promotional Image" />
					<div>
						<p>Title of project</p>
						<p>Type of project</p>
						<a href="link to project">Link to project</a>
						<p>Verbose description of project details. Lorem ipsum is what they say.</p>
					</div>
				</div>
			</div>
				<a id="navLink3" class="hidden-md hidden-lg btn btn-default btn-block" onClick="navigate('copyText',this)">
				  PUBLIC KEY
				</a>
				<textarea readonly id="copyText" class="form-control keyArea expanded" OnClick='copyToClipboard()'>-----BEGIN PGP PUBLIC KEY BLOCK-----
Comment: Expires:	2/14/2021 12:00 PM
Comment: Type:	2048-bit RSA
Comment: Fingerprint:	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
zbHsLhfWtcYk
=V3Se
-----END PGP PUBLIC KEY BLOCK-----</textarea>
<small id="copyNote" class="form-text text-muted" style="margin-left:20px;z-index:31;" OnClick='copyToClipboard()'>Click anywhere on this key to copy it to your clipboard</small>
			</div>
		
</div>
</div>
              
            
!

CSS

              
                body
{
  font: small-caps bold Georgia, fantasy; /* fallback for older browsers */
  font: ultra-condensed small-caps bold Georgia, fantasy;
  font-family: "Lucida Console", Monaco, monospace;
  background-color: #E3E3E3;
}
span.msg
{
  color: #EE3333;
  font-weight: normal;
  font-size: small;
  font-style: italic;
  margin-top: 2vh;
  margin-left: 1vh;
  width: 100%;
}
.CRhr
{
  margin-top:2px;
  margin-bottom:2px;
}
.w-100
{
  width: 100%;
}
.m-bottom
{
  margin-bottom: 15px;
}
#copyText:hover
{
  background-color: #EBEBEB;
  color:black;
}
#galleryArea
{
  height:74vh;
  width:96%;
  margin-top:16vh;
  position: absolute;
  padding: 6px 0px;
  /*border: 1px solid grey;*/
  overflow-x: hidden;
  overflow-y: scroll;
  border:1px solid #CCC;
  background-color: white;
  border-radius: 4px; 
}
#galleryArea > div
{
  border: 1px solid #CCC;
  background-color: white;
  padding: 6px 12px;
  margin:6px 12px 12px;
  cursor: pointer;
}
#galleryArea > div:hover
{
  background-color: #EBEBEB;
}
#galleryArea > div > div
{
  margin-left: 290px;
  min-height: 150px;
}
#galleryArea > div > img
{
  position:absolute;
  border: 1px solid #EBEBEB;
  height: 150px;
  width: 275px;
}
#galleryArea > div > div > p:nth-child(2)
{
  color:#777;
  margin-bottom: 6px;
}
#galleryArea > div > div > p:nth-child(1)
{
  font-size: larger;
  margin-bottom: 6px;
}
#galleryArea > div > div > p:nth-child(4)
{
  color: #777;
  margin-top: 6px;
  font-size: small; 
}
.motd
{
  font-weight: bolder;
  line-height:30px;
  height:30px;
  word-break: break-all;
  position:absolute;
  display:inline;
  width:95%;
  overflow:hidden;
}
.consoleOutput, .consoleOutput span, #txtInput
{
  background-color:#151515;
  color:#33AA33;
}
#copyText
{
  z-index: 30;
}
#start
{
  overflow: hidden;
  height: 95%;
}
#copyNote
{
  color:#000;
  font-weight: bold;
}










/*LARGE SCREENS*/
@media (min-width: 992px)
{
  .consoleOutput
  {
    overflow-y:scroll;
    padding:0;
    margin:0;
    width:100%;
    height:85vh;
  }
  #copyText
  {
    position: absolute;
    cursor: pointer;
    white-space: pre;
    -moz-transition: height .6s ease;
    -webkit-transition: height .6s ease;
    -o-transition: height .6s ease;
    transition: height .6s ease;
    height:12vh;
    width:96%;
  }
  #copyText.expanded
  {
    height:90vh;
  }
  #copyNote
  {
    -moz-transition: all .6s ease;
    -webkit-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
    position: absolute;
    margin-top:12vh;
    /*top:6px;*/
    height:2vh;
    line-height:1.8vh;
  }
  #copyNote.collapsedView
  {
    margin-top: 12vh;
    top: 2px;
  }
}



















/*MEDIUM SCREENS*/
@media (max-width: 992px)
{
  .btn-block
  {
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-weight: 600;
  }
  .btn-block
  {
    margin: 6px 0px;
  }
  .btn-block.selected
  {
    background-color: #ADADAD;
    border:1px solid grey;
  }
  .motd
  {
    text-align: center;
  }
  .consoleOutput
  {
    overflow-y:scroll;
    height:60vh;
    padding:0;
    margin:0;
    width:100%;
  } 
  #start
  {
    height:65vh;
  }
  #copyText
  {
    height:50vh;
    white-space: pre;
    margin-top: 2vh;
    cursor: pointer;
  }
  #galleryArea
  {
    position: inherit;
    padding: 6px 0px;
    border:0;
    margin:0;
    background-color: white;
    width:100%;
    height:65vh;
  }
  #btnGallery
  {
    display: none;
  }
  #copyText.collapsed, #start.collapsed, #galleryArea.collapsed
  {
    height:0px;
    margin:0;
    padding:0;
    /*display: none;*/
    overflow: hidden;
    border: 0;
  }
  #copyText, #start, #galleryArea
  {
    -moz-transition: height .6s ease;
    -webkit-transition: height .6s ease;
    -o-transition: height .6s ease;
    transition: height .6s ease;
  }
}

















/*EX-EX-SMALL SCREENS -  smaller than bootstrap xs*/
@media (max-width: 600px)
{
  #galleryArea > div > img
  {
    position:inherit;
  }
  #galleryArea > div > div
  {
    margin-left: 0px;
  }
  #copyText
  {
    height:45vh;
  }
}

              
            
!

JS

              
                function copyToClipboard() {
	  var copyText = document.getElementById("copyText");
	  copyText.select();
	  document.execCommand("copy");
	  alert("Key has been copied to your clipboard");
	}
	function scrollDown() {
		var windowWidth = $(window).width();
		// window.setTimeout(function(){
			if(!$("#start").hasClass("collapsed")){$("#scrollDown").scrollTop(function() { return this.scrollHeight; });}
		// },600);
		// $('.btn-block').removeClass('selected');
        // var copyNote = document.getElementById("copyNote");
		$('#copyNote').hide();
		if(windowWidth > 972){
	        //copyNote.innerHTML = "Click anywhere on this key to copy it<br/>Send correspondence to Mr.Shaun.Fox@gmail.com";
	        // copyNote.innerHTML = "Click anywhere on this key to copy it to your clipboard";
			$('#motd').text("Ubiquitous Ambiguity - An Interactive Web Experience By Shaun Fox");
			$('#start').removeClass('collapsed');
			$('#galleryArea').removeClass('collapsed');
			$('#copyText').removeClass('collapsed');
			$('#copyNote').show();
		} else {
	        //copyNote.innerHTML = "Click anywhere on the key above to copy it; Send correspondence to Mr.Shaun.Fox@gmail.com";
			/* Small Screens / Mobile View */
			$('#motd').text("Ubiquitous Ambiguity");
			var sel = $('.btn-block').hasClass('selected');
			if(sel){
				$('#start, #galleryArea, #copyText').addClass('collapsed');
				// $('#start, #galleryArea, #copyText').hide();
				// $('.btn-block.selected').first().next().show();
				$('.btn-block.selected').first().next().removeClass('collapsed');
				if(!($('#copyText').hasClass('collapsed'))){$('#copyNote').show();}
			}
			else{
				$('#navLink1').addClass('selected');
				// $('#start').show();
				$('#start').removeClass('collapsed');
				$('#galleryArea').addClass('collapsed');
				$('#copyText').addClass('collapsed');
			}
		}
	}
	function toggleGallery(btn) {
		let key = document.getElementById("copyText");
		key.classList.toggle("expanded");
        const expanded = key.classList.contains("expanded");
        var copyNote = $('#copyNote');//document.getElementById("copyNote");
        copyNote.removeClass("collapsedView");
        if(expanded){
            btn.innerHTML = "View Gallery";
	        //copyNote.innerHTML = "Click anywhere on this key to copy it<br/>Send correspondence to Mr.Shaun.Fox@gmail.com";
            // copyNote.innerHTML = "Click anywhere on this key to copy it to your clipboard";
        }
        else{
            copyNote.addClass("collapsedView");
			// window.setTimeout(function(){
	        //copyNote.innerHTML = "Click anywhere on the key above to copy it<br/>Send correspondence to Mr.Shaun.Fox@gmail.com";
            //copyNote.innerHTML = "Click anywhere on the key above to copy it to your clipboard";
			// },1000);
            btn.innerHTML = "Hide Gallery";
        }
	}
	function navigate(elem,btn){
		let el = $('#'+elem);
		$('#start').addClass('collapsed');
		$('#galleryArea').addClass('collapsed');
		$('#copyText').addClass('collapsed');
		// $('#start').hide();
		// $('#galleryArea').hide();
		// $('#copyText').hide();
		// el.show();
		el.removeClass('collapsed');
		$('.btn-block').removeClass('selected');
		$(btn).addClass('selected');
		scrollDown();
	}
	$(document).ready(function() {scrollDown();});
	$(window).resize(function(){scrollDown();})
              
            
!
999px

Console