DestinyLuong/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Gravity Starter Code</title>
    </head>
    <body>
        <img id="pic" src="https://s-media-cache-ak0.pinimg.com/236x/24/2d/2e/242d2e2f40995f6f6ef2cd10a245c196.jpg">
        <div id="ground"></div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js
//sets element to the variable $pic
var $pic = $("#pic");

$pic.click(function(){
    var picTop = $("$pic").offset();
    var picBottom = picTop + $("$pic").top();
   //Your code goes here
  $("$pic").css("top", $("$pic").offset().top + 20px);
});

## styles.css
    #pic {
        position: absolute;
        width: 50px;
        width: 60px;
        left: 50%;
        top: 5%;
    }

    #ground {
        position: absolute;
        background-color: black;
        width: 100%;
        height: 20px;
        top: 95%;
    }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Gravity Starter Code</title>
	</head>
	<body>
	<img id="pic" src="https://s-media-cache-ak0.pinimg.com/236x/24/2d/2e/242d2e2f40995f6f6ef2cd10a245c196.jpg">
	<div id="ground"></div>
	</body>
	</html>
	//sets element to the variable $pic
	var $pic = $("#pic");

	$pic.click(function(){
	var picTop = $("$pic").offset();
	var picBottom = picTop + $("$pic").top();
	//Your code goes here
	$("$pic").css("top", $("$pic").offset().top + 20px);
	});
	#pic {
	position: absolute;
	width: 50px;
	width: 60px;
	left: 50%;
	top: 5%;
	}

	#ground {
	position: absolute;
	background-color: black;
	width: 100%;
	height: 20px;
	top: 95%;
	}