<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<section class="features_table">
<div class="container ">
<div class="col-sm-8 col-8 col-xs-12 no-padding">
<div class="features-table">
<ul>
<h1>Features</h1>
<li>Use individual PNGs (or JSON spritesheets) from any source to animate </li>
<li>Animate with bones or by controlling images directly</li>
<li>Adjust pivot points for each image</li>
<li>Scale and rotate any object per frame</li>
<li>Set the opacity of any object per frame</li>
<li>Basic easing features</li>
<li>Advanced easing curve options</li>
<li>Create multiple “entities” (animation sets) per file</li>
<li>Onion skinning to see previous and up-coming key-frames</li>
<li>Basic IK (inverse kinematics) support</li>
<li>Full IK support and IK locking (forward kinematics) </li>
<li>Use animations within animations to make complex scenes easily</li>
<li>Advanced automated control features for animations within animations</li>
<li>Create character variations by swapping image sets (Character maps)</li>
<li>Trigger and preview sound effects at any point in the timeline</li>
<li>Lip-sync via Papagayo</li>
<li> Export animations as PNG images, strips, sheets or Gif Animations </li>
<li>Add custom watermarks while exporting images or Gifs</li>
<li>Automatically import sequential images as animated sprites</li>
<li>Create named collision rectangles per frame</li>
<li>Automatically import sequential images as animated sprites</li>
<li> Create named action points per frame and set their angle </li>
<li>Create horizontal and vertical guidelines on the canvas</li>
<li>Lock or hide individual objects to protect or hide things as you work</li>
<li>Set “animated” variables for your character anywhere in the timeline</li>
<li>Create “Triggers” anywhere in the timeline to initiate actions in-game</li>
<li>Set “Tags” to any part of the timeline to designate “state changes”</li>
<li>Merge separate Spriter projects into one (Great for teams making games)</li>
<li>Auto update detection</li>
<li>Auto save feature</li>
<li>Deformable sprites (image warping) COMING SOON</li>
<li>Over 260 Free Spriter Animations (for use in your games royalty free)</li>
</ul>
</div>
</div>
<div class="col-sm-2 col-2 col-xs-12 no-padding">
<div class="features-table-free">
<ul>
<h1>Free</h1>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-times"></i></li>
<li><i class="fa fa-times"></i></li>
</ul>
</div>
</div>
<div class="col-sm-2 col-2 col-xs-12 no-padding">
<div class="features-table-paid">
<ul>
<h1>Pro</h1>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
<li><i class="fa fa-check"></i></li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
.features_table h1{
font-size:25px !important;
}
li{
list-style:none;
}
h1{
font-size:21px !important;
}
.features-table li {
background: #da9748 none repeat scroll 0 0;
border-bottom: 2px solid #e5a253;
color: #f1f1f1;
font-size: 16px;
padding: 15px 24px;
}
.features-table li:hover{
background: #e5a253;
cursor:pointer;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.features-table-free li, .features-table-paid li {
background: #efefef none repeat scroll 0 0;
border-bottom: 2px solid #d4d4d4;
text-align:center;
padding: 16.4px 21px;
cursor:pointer;
}
.features-table-free h1, .features-table-paid h1 {
text-align: center;
}
.features-table-free li:hover, .features-table-paid li:hover {
background: #dedede none repeat scroll 0 0;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.features_table h1 {
font-size: 23px !important;
}
.features-table h1, .features-table-free h1, .features-table-paid h1 {
background: #6b6b6b none repeat scroll 0 0;
color: #fff;
font-weight: 600;
margin: 0;
padding: 19px 21px;
text-transform: uppercase;
}
.features-table h1 {
border-top-left-radius: 20px;
text-align:center;
}
.features-table-paid h1 {
border-top-right-radius: 20px;
}
.features-table-free li {
border-right: 2px solid #d4d4d4;
}
.fa.fa-check {
color: #2cc14f;
}
.fa.fa-times {
color: #BA5340;
}
.fa{
font-size:30px;
}
.no-padding{
padding:0;
}
ul{
padding:0;
}
body {
counter-reset: section; /* Set the section counter to 0 */
}
.features-table li::before {
counter-increment: section; /* Increment the section counter*/
content: "" counter(section) ": "; /* Display the counter */
}