"Resonsive Features Comparison table without JS"
Bootstrap 3.3.0 Snippet by lelelaileabc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: