cm85
cm85
Reputation Top 1%
Carlo Moscatiello
Hello World!
4 Snippets  (176th place)
Published
2 Channels
Created
2 Channels
Following
7907 points  (15th place)
Reputation
Junior Code Generator
Serious Code Generator
Junior Publisher
Junior Topic Creator
Junior Topic Hub
Junior Trend Maker
Junior Judge
Serious Judge
Junior Popular Coder
Junior Autobiographer
Senior Autobiographer
Junior Famous Coder
Junior Wise Coder

Recent Snippets See all snippets by cm85

public by cm85  423208  13  6  1

Living The Herbal Life

Living The Herbal Life. Your World Revolves Around....
<html>
		<head>
				<style>
						
						body {
		/* The universe is black */
		background-color: black;
		width: 100%;
		height: 100%;
}

#sun {
		/* Style your sun */
		position: absolute;
		top: 50%;
		left: 50%;

		height: 100px;
		width: 100px;
		margin-top: -50px; 
		margin-left: -50px;

		border-color: #dddd00;
		border-width: 8px;
		border-style: solid;
		border-radius: 50%;

		box-shadow: 0 0 128px orangered;
}

#earth {
		position: absolute;
		top: 0;
		left: 50%;

		height: 50px;
		width: 50px;
		margin-left: -25px;
		margin-top: -25px;
}

#earth-orbit {
		position: absolute;
		top: 50%;
		left: 50%;

		width: 300px;
		height: 300px;
		margin-top: -150px;
		margin-left: -150px;
		
		-webkit-animation: spin-right 10s linear infinite;
		-moz-animation: spin-right 10s linear infinite;
		animation: spin-right 10s linear infinite;
}

@-webkit-keyframes spin-right {
	100% {
			-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin-right {
		100% {
				-webkit-transform: rotate(360deg);
		}
}
				</style>
		</head>
		
		<body>
		
				<!-- Right below is an image of the sun -->
				<img id='sun' src="https://dl.dropboxusercontent.com/u/200015521/Image%20URL%20Links/Marijuana-Leaf.png">
				
				<!-- Insert the 'earth' on the next line -->
				<div id='earth-orbit'>
						<img id='earth' src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Carlo.png">
				</div>
				
		</body>
		</html>

                                                
;

public by cm85  347558  7  7  0

Useful HTML Footer

Very Useful HTML Footer: footer.html
<p align="center">
  <b>© Peppino's Menu's</b><br>
  <a href="https://github.com/cm85/Peppinos/wiki/Peppino's-Lunch-Menu">Lunch Menu</a> |
  <a href="https://github.com/cm85/Peppinos/wiki/Peppino's-Catering-Menu">Catering Menu</a> |
  <a href="https://github.com/cm85/Peppinos/wiki/Peppino's-Main-Menu">Main Menu</a>
  <br><br>
  <img src="https://dl.dropboxusercontent.com/u/200015521/Image%20URL%20Links/Peppino%3Bs%20Logo.png">
</p>

                        
;

public by cm85  3478  3  6  1

The Orbiting Planet

The Earth Orbiting The Sun: HTML & CSS
<html>
		<head>
				<style>
						
						body {
		/* The universe is black */
		background-color: black;
		width: 100%;
		height: 100%;
}

#sun {
		/* Style your sun */
		position: absolute;
		top: 50%;
		left: 50%;

		height: 100px;
		width: 100px;
		margin-top: -50px; 
		margin-left: -50px;

		border-color: #dddd00;
		border-width: 8px;
		border-style: solid;
		border-radius: 50%;

		box-shadow: 0 0 128px orangered;
}

#earth {
		position: absolute;
		top: 0;
		left: 50%;

		height: 50px;
		width: 50px;
		margin-left: -25px;
		margin-top: -25px;
}

#earth-orbit {
		position: absolute;
		top: 50%;
		left: 50%;

		width: 300px;
		height: 300px;
		margin-top: -150px;
		margin-left: -150px;
		
		-webkit-animation: spin-right 10s linear infinite;
		-moz-animation: spin-right 10s linear infinite;
		animation: spin-right 10s linear infinite;
}

@-webkit-keyframes spin-right {
	100% {
			-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin-right {
		100% {
				-webkit-transform: rotate(360deg);
		}
}
				</style>
		</head>
		
		<body>
		
				<!-- Right below is an image of the sun -->
				<img id='sun' src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Sun.jpg">
				
				<!-- Insert the 'earth' on the next line -->
				<div id='earth-orbit'>
						<img id='earth' src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Earth.jpg">
				</div>
				
		</body>
		</html>

                                    
;

public by cm85  1719  6  7  -1

LMAO HAHA Laughing Face...

Live View: http://cmlife.co/LMAO-html-Preview
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: black;
      }
      #container {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
    <script defer="defer">
      var sw = 578;
      var sh = 400;
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 400
      });
      var layer = new Kinetic.Layer({
        y: -30 
      });

      var leftEye = new Kinetic.Blob({
        x: 150,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10     
      });
      
      var rightEye = new Kinetic.Blob({
        x: sw - 250,
        points: [0, 200, 50, 190, 100, 200, 50, 210],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10     
      });
      
      var nose = new Kinetic.Spline({
        points: [240, 280, sw/2, 300, sw-240,280],
        tension: 0.5,
        stroke: 'green',
        strokeWidth: 10
      });
      
      var mouth = new Kinetic.Blob({
        points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
        tension: 0.5,
        stroke: 'red',
        strokeWidth: 10
      });

      layer.add(leftEye)
           .add(rightEye)
           .add(nose)
           .add(mouth);

      stage.add(layer);
      
      // tweens
      
      var leftEyeTween = new Kinetic.Tween({
        node: leftEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      }); 
      
      var rightEyeTween = new Kinetic.Tween({
        node: rightEye,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [0, 200, 50, 150, 100, 200, 50, 200]
      });
      
      var noseTween = new Kinetic.Tween({
        node: nose,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        y: -100,
        points: [220, 280, sw/2, 200, sw-220,280]
      }); 
         
      var mouthTween = new Kinetic.Tween({
        node: mouth,
        duration: 1,
        easing: Kinetic.Easings.ElasticEaseOut,
        points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
      }); 

        var open = false;
        
        setInterval(function () {
            if (open) {
        leftEyeTween.reverse();
        rightEyeTween.reverse();
        noseTween.reverse();
        mouthTween.reverse();
        open = false;
            } else {
        leftEyeTween.play();
        rightEyeTween.play();
        noseTween.play();
        mouthTween.play();
        open = true;
            }
        }, 500)

   

    </script>
  </body>
</html>
;