Jason Example

by Avinashullal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="PageContent" class="container">
  <div id="Wizard" class="wizard">
    <div class="panel fade-in">
      <div class="panel-body">
        <div id="comments">
          <h3>Questions &amp; Comments</h3>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 24px;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Josefin Sans', Segoe UI, sans-serif;
}

b,
strong,
label {
  font-weight: 600;
}

a:visited {
  color: #337ab7;
  text-decoration: none;
}

#s4-workspace {
  /*background-image: url(../images/background-texture.jpg);*/
  background-color: #222222;
  background: rgba(71, 71, 71, 1);
  background: -moz-linear-gradient(left, rgba(71, 71, 71, 1) 0%, rgba(36, 36, 36, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(71, 71, 71, 1)), color-stop(100%, rgba(36, 36, 36, 1)));
  background: -webkit-linear-gradient(left, rgba(71, 71, 71, 1) 0%, rgba(36, 36, 36, 1) 100%);
  background: -o-linear-gradient(left, rgba(71, 71, 71, 1) 0%, rgba(36, 36, 36, 1) 100%);
  background: -ms-linear-gradient(left, rgba(71, 71, 71, 1) 0%, rgba(36, 36, 36, 1) 100%);
  background: linear-gradient(to right, rgba(71, 71, 71, 1) 0%, rgba(36, 36, 36, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#242424', GradientType=1);
}

#s4-titlerow,
#sideNavBox,
#suiteBar,
#s4-ribbonrow {
  display: none !important;
}

#contentBox {
  margin: 0;
}

.panel {
  border-radius: 0;
  border: 0 !important;
  background-color: #f2f5f7;
  border-radius: 0px 0px 8px 8px;
  -moz-border-radius: 0px 0px 8px 8px;
  -webkit-border-radius: 0px 0px 8px 8px;
  border: 0px solid #000000;
}

.panel-footer {
  padding: 15px;
  background-color: #ffffff;
  border-top: 1px solid #e9ecef;
  border-radius: 0px 0px 8px 8px;
  -moz-border-radius: 0px 0px 8px 8px;
  -webkit-border-radius: 0px 0px 8px 8px;
}

.setup-content {
  display: none;
}

.header {
  padding-bottom: 10px;
}

.header .logo {
  height: 50px;
}

.header h1 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
}

.wizard {
  position: relative;
}

.stepwizard-step p {
  margin-top: 0px;
  color: #fff;
  font-size: 14px;
  margin-bottom:...

JavaScript

var json = [{
  "__metadata": {
    "id": "Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)",
    "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)",
    "etag": "\"1\"",
    "type": "SP.Data.ALWR_x0020_CommentsListItem"
  },
  "FirstUniqueAncestorSecurableObject": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/FirstUniqueAncestorSecurableObject"
    }
  },
  "RoleAssignments": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/RoleAssignments"
    }
  },
  "AttachmentFiles": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/AttachmentFiles"
    }
  },
  "ContentType": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/ContentType"
    }
  },
  "FieldValuesAsHtml": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/FieldValuesAsHtml"
    }
  },
  "FieldValuesAsText": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/FieldValuesAsText"
    }
  },
  "FieldValuesForEdit": {
    "__deferred": {
      "uri": "https://dragonfly.howardhughes.com/sites/testpcorpit/SP/ALWR/_api/Web/Lists(guid'c2044bd1-3ac1-45f9-9254-568531ba7126')/Items(263)/FieldValuesForEdit"
    }
  },
  "File": {
    "__deferred": {
      "uri":...