<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script src= "https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.blast.js"></script>
<style>
 body{
 	 padding-left: 30px;	
 }
  .draggable { 
  	font-size: 18px;
  	line-height: 2.5rem;
  	width: 150px;
  	 height: 150px; 
  	 /* padding-left: 20px; */
  	 /* margin-left:40px; */
  	 /* padding: 0.5em;  */
  	}
  </style>
<script>
	
	$(function() {
    $( ".draggable" ).draggable();
  });
  </script>
</head>
<body>
  <h2> (re)Created poem constructed via a python script.</h2><h4> Sources: Octavia Butler, Hafiz, Malcolm X.</h4> <h4> Click and drag words to (re)Construct your own poem!</h4> 
<div>
<div id = quell> <p>The intelligent and the brave 
<br>Open every closet in the future and evict 
<br>the mind's ghosts who have the bad habit 
<br>of barfing everywhere
<br>God is Infinite Potential:
<br>God is Change
<br>rest all your elaborate plans and tactics 
<br>or Knowing Him 
<br>or they are all just frozen spring buds 
<br>Far 
<br>So far from Summer's Divine Gold
<br>Get some fresh air try to smile
<br>You ache with loneliness one night 
<br>So much you weep 
<br>And I say 
<br>Here's a rope 
<br>Tie it around me 
<br> Hafiz 
<br>Will be your companion 
<br>For life
<br>Rest all your elaborate plans and tactics 
<br>For Knowing Him 
<br>For they are all just frozen spring buds 
<br>Far 
<br>So far from Summer's Divine Gold
<br>DROPPING KEYS 
<br>The small man Builds cages for everyone He Knows
<br>God is Power
<br>Without
<br>persistence what remains is
<br> an enthusiasm of the moment
<br>It is Light breaking ground for a great Structure 
<br>That is your Real body-called Truth
<br>nature's non-violent army
<br>capitalist asian brothers
<br>black panther russia
<br>program asia
<br>group outlines can't
<br>transient causes human rights
<br>forty acres human rights
<br>black community religious services
<br>germans atlanta
<br>peer group expand
<br>true history human-rights tree
<br>racist government black nationalism involves
<br>nations-supervised civil rights
<br>prudence political action
<br>white racist government social circle
</p></div>
</div>


<script type="text/javascript" src="blastCode.js"></script>


</body>
</html>
@font-face { font-family: ETBembo;
             src: url("ETBembo-RomanLF.ttf"); }
@font-face { font-family: ETBembo;
             src: url("ETBembo-DisplayItalic.ttf");
             font-weight: normal;
             font-style: italic; }

body { 
  font-family: ETBembo, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  position: absolute;
   background-color: #fffff8;
       color: #111;
  width: 60%;
/*   height: 100%; */
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}
h2{
  font-size: 23px;
  width:60%;
}

h4{
   font-size: 14px;
  width:60%;
}
#cy {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #FEFE91;
  z-index:0;
}
$('#quell').blast({
  delimiter: 'word',
  customClass: "draggable"
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.