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

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

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

              
                <div class="container">
  <div class="cup">
    <div class="coffee"> </div>
  </div>
  <div class="holder"></div>
  <div class="holder2"> </div>
  <div class="straw"> 
    <div class="inner"> </div>
  </div>
  
  <div class="laptop"> 
    <div class="monitor">
      <div class="screen"> 
        <div class="element"> </div>
      </div>
      <div class="stand"> 
        <div class="base"> </div>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  background-color: #F4C95D;
  font-size: 13px;
}

.container {
  position: absolute;
  top: 70px; left: 50px;
  font-family: 'Roboto', sans-serif;
}

.cup {
  position: absolute;
  top: 50px; left: 90px;
  width: 50px;
  height: 60px;
  background-color: #A5AA52;
  border-radius: 5px;
  overflow: hidden;
}

.coffee {
  position: absolute;
  top: 5px; left: 3px;
  width: 45px;
  height: 52px;
  background-color: #5A3A31;
  border-radius: 5px;
  overflow: hidden;
  animation: 8s drop linear infinite;
}

.holder {
  z-index: -1;
  position: absolute;
  left: 70px; top: 60px;
  width: 30px;
  height: 30px;
  background-color: #A5AA52;
  border-radius: 100%;
}

.holder2 {
  position: absolute;
  left: 80px; top: 70px;
  width: 10px;
  height: 10px;
  background-color: #F4C95D;
  border-radius: 100%;
}

.monitor {
  position: absolute;
  left: 300px;
  width: 250px;
  height: 160px;
  background-color: #444;
  border-radius: 10px;
  border: none;
}

.screen {
  position: absolute;
  top: 9px; left: 10px;
  width: 230px;
  height: 140px;
  background-color: #EEE;
  border-radius: 10px;
  border: 1px solid #999;
}

.stand {
  position: absolute;
  top: 160px; left: 110px;
  width: 30px;
  height: 20px;
  background-color: #444;
}

.base {
  position: absolute;
  top: 20px; left: -20px;
  width: 70px;
  height: 10px;
  background-color: #444;
  border-radius: 2px;
}

.inner {
  position: absolute;
  top: 10px; left: 10px;
  width: 230px;
  height: 140px;
  background-color: #FFF;
/*   border: 3px solid #999; */
  border-radius: 5px;
}

.straw {
  z-index: -1;
  position: absolute;
  top: 74px; left: 139px;
  width: 200px;
  height: 7px;
  background-color: #EAE6E5;
}

.inner {
  position: absolute;
  width: 200px;
  height: 7px;
  top: 0; left: 0;
  background-color: #5A3A31;
  width: 10px;
  animation: 3s move linear infinite;
}

.move {
  opacity: 1;
    height: 50px;
    transition: height 2.2s ease-out, transform 1.3s;
}

 @keyframes move { 
  100% {width: 200px}
} 

@keyframes drop {
  100% { top: 57px; height: 0}
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.element {
  position: absolute;
  top:20px; left: 15px;
  width: 180px;
}
              
            
!

JS

              
                //Typed.js by Matt Boldt

!function($){

	"use strict";

	var Typed = function(el, options){

		// chosen element to manipulate text
		this.el = $(el);
		// options
		this.options = $.extend({}, $.fn.typed.defaults, options);

		// text content of element
		this.text = this.el.text();

		// typing speed
		this.typeSpeed = this.options.typeSpeed;

		// amount of time to wait before backspacing
		this.backDelay = this.options.backDelay;

		// input strings of text
		this.strings = this.options.strings;

		// character number position of current string
		this.strPos = 0;

		// current array position
		this.arrayPos = 0;

		// current string based on current values[] array position
		this.string = this.strings[this.arrayPos];

		// number to stop backspacing on.
		// default 0, can change depending on how many chars
		// you want to remove at the time
		this.stopNum = 0;

		// Looping logic
		this.loop = this.options.loop;
		this.loopCount = this.options.loopCount;
		this.curLoop = 1;
		if (this.loop === false){
			// number in which to stop going through array
			// set to strings[] array (length - 1) to stop deleting after last string is typed
			this.stopArray = this.strings.length-1;
		}
		else{
			this.stopArray = this.strings.length;
		}

		// All systems go!
		this.init();
		this.build();
	}

		Typed.prototype =  {

			constructor: Typed

			, init: function(){
				// begin the loop w/ first current string (global self.string)
				// current string will be passed as an argument each time after this
				this.typewrite(this.string, this.strPos);
			}

			, build: function(){
				//this.el.after("<span id=\"typed-cursor\">|</span>");
			}

			// pass current string state to each function
			, typewrite: function(curString, curStrPos){

				// varying values for setTimeout during typing
				// can't be global since number changes each time loop is executed
				var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
				var self = this;

				// ------------- optional ------------- //
				// backpaces a certain string faster
				// ------------------------------------ //
				// if (self.arrayPos == 1){
				// 	self.backDelay = 50;
				// }
				// else{ self.backDelay = 500; }

				// containg entire typing function in a timeout
				setTimeout(function() {

					// make sure array position is less than array length
					if (self.arrayPos < self.strings.length){

						// start typing each new char into existing string
						// curString is function arg
						self.el.text(self.text + curString.substr(0, curStrPos));

						// check if current character number is the string's length
						// and if the current array position is less than the stopping point
						// if so, backspace after backDelay setting
						if (curStrPos > curString.length && self.arrayPos < self.stopArray){
							clearTimeout(clear);
							var clear = setTimeout(function(){
								self.backspace(curString, curStrPos);
							}, self.backDelay);
						}

						// else, keep typing
						else{
							// add characters one by one
							curStrPos++;
							// loop the function
							self.typewrite(curString, curStrPos);
							// if the array position is at the stopping position
							// finish code, on to next task
							if (self.loop === false){
								if (self.arrayPos === self.stopArray && curStrPos === curString.length){
									// animation that occurs on the last typed string
									// fires callback function
									var clear = self.options.callback();
									clearTimeout(clear);
								}
							}
						}
					}
					// if the array position is greater than array length
					// and looping is active, reset array pos and start over.
					else if (self.loop === true && self.loopCount === false){
						self.arrayPos = 0;
						self.init();
					}
						else if(self.loopCount !== false && self.curLoop < self.loopCount){
							self.arrayPos = 0;
							self.curLoop = self.curLoop+1;
							self.init();
						}

				// humanized value for typing
				}, humanize);

			}

			, backspace: function(curString, curStrPos){

				// varying values for setTimeout during typing
				// can't be global since number changes each time loop is executed
				var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
				var self = this;

				setTimeout(function() {

					// ----- this part is optional ----- //
					// check string array position
					// on the first string, only delete one word
					// the stopNum actually represents the amount of chars to
					// keep in the current string. In my case it's 14.
					// if (self.arrayPos == 1){
					//	self.stopNum = 14;
					// }
					//every other time, delete the whole typed string
					// else{
					//	self.stopNum = 0;
					// }

					// ----- continue important stuff ----- //
					// replace text with current text + typed characters
					self.el.text(self.text + curString.substr(0, curStrPos));

					// if the number (id of character in current string) is
					// less than the stop number, keep going
					if (curStrPos > self.stopNum){
						// subtract characters one by one
						curStrPos--;
						// loop the function
						self.backspace(curString, curStrPos);
					}
					// if the stop number has been reached, increase
					// array position to next string
					else if (curStrPos <= self.stopNum){
						clearTimeout(clear);
						var clear = self.arrayPos = self.arrayPos+1;
						// must pass new array position in this instance
						// instead of using global arrayPos
						self.typewrite(self.strings[self.arrayPos], curStrPos);
					}

				// humanized value for typing
				}, humanize);

			}

		}

	$.fn.typed = function (option) {
	    return this.each(function () {
	      var $this = $(this)
	        , data = $this.data('typed')
	        , options = typeof option == 'object' && option
	      if (!data) $this.data('typed', (data = new Typed(this, options)))
	      if (typeof option == 'string') data[option]()
	    });
	}

	$.fn.typed.defaults = {
		strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
		// typing and backspacing speed
		typeSpeed: 0,
		// time before backspacing
		backDelay: 500,
		// loop
		loop: false,
		// false = infinite
		loopCount: false,
		// ending callback function
		callback: function(){ null }
	}


}(window.jQuery);
  $(function(){
      $(".element").typed({
        strings: ["<html> More coffee, more coffee </html>", " Coffee makes great code!","<html> More coffee, more coffee </html> //script $('.cup').addClass('coffee)"],
        typeSpeed: 0
      });
  });
              
            
!
999px

Console