cm85
cm85
Reputation Top 1%
Carlo Moscatiello
Hello World!
4 Snippets
Published
2 Channels
Created
2 Channels
Following
7907 points
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  423262  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  347580  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  3502  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  1765  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>
;