create new template with grapesjs

[vibern0]

https://grapesjs.com/demo.html

[vibern0]

<div data-gjs="navbar" class="navbar">
  <div class="navbar-container">
    <a href="/" class="navbar-brand"></a>
    <div id="i4lw8" class="navbar-burger">
      <div class="navbar-burger-line">
      </div>
      <div class="navbar-burger-line">
      </div>
      <div class="navbar-burger-line">
      </div>
    </div>
    <div data-gjs="navbar-items" class="navbar-items-c">
      <nav data-gjs="navbar-menu" class="navbar-menu">
        <a href="#" class="navbar-menu-link">Home</a>
        <a href="#" class="navbar-menu-link">About</a>
        <a href="#" class="navbar-menu-link">Contact</a>
      </nav>
    </div>
  </div>
</div>
<section id="content" class="flex-sect">
  <div id="iriff">
    <span id="ic6el" class="gjs-lory-prev"></span>
    <span id="i9enh" class="gjs-lory-next"></span>
  </div>
  <div id="idsf5z" class="container-width">
    <div class="row">
      <div class="cell" id="izof">
      </div>
      <div class="cell" id="iv83">
        <div id="igl4g">ERC20
        </div>
        <div id="is0yh">
          <span id="iossq">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit nisi, pretium a est ac, ultrices ultricies tellus. Ut aliquet nisi erat, luctus ullamcorper felis ultricies nec. Mauris porta turpis a odio porttitor, a sagittis mi pharetra. In tincidunt risus nec faucibus condimentum. In consequat mauris justo, ac sagittis dui cursus quis. Maecenas ac neque at sapien placerat interdum. Praesent neque orci, pulvinar et dui eget, blandit luctus diam.</span>
        </div>
        <div data-tabs="1" id="i9vuh">
          <nav data-tab-container="1" class="tab-container">
            <a href="#tab1" data-tab="1" class="tab" id="i78vj">Tab 1</a>
            <a href="#tab2" data-tab="1" class="tab" id="iavbl">Tab 2</a>
            <a href="#tab3" data-tab="1" class="tab">Tab 3</a>
          </nav>
          <div id="tab1" data-tab-content="1" class="tab-content">
            <div class="row" id="iao24">
              <div class="cell">
                <div id="iiwgj">allowance ( owner address, spender address, ) -&gt; uint256
                </div>
                <div id="ieiqv">Approve the passed address to spend the specified amount of tokens on behalf of msg.sender. Beware that changing an allowance with this method brings the risk that someone may use both the old and the new allowance by unfortunate transaction ordering. One possible solution to mitigate this race condition is to first reduce the spender&#039;s allowance to 0 and set the desired value afterwards: https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729
                </div>
              </div>
            </div>
          </div>
          <div id="tab2" data-tab-content="1" class="tab-content">
            <div>Tab 2 Content
            </div>
          </div>
          <div id="tab3" data-tab-content="1" class="tab-content">
            <div>Tab 3 Content
            </div>
          </div>
        </div>
      </div>
      <div class="cell">
      </div>
    </div>
  </div>
</section>
<script>var items = document.querySelectorAll('#i4lw8');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var e,t=0,n=function(){
        var e,t=document.createElement("void"),n={
          transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};
        for(e in n)if(void 0!==t.style[e])return n[e]}
      (),r=function(e){
        var t=window.getComputedStyle(e),n=t.display,r=(t.position,t.visibility,t.height,parseInt(t["max-height"]));
        if("none"!==n&&"0"!==r)return e.offsetHeight;
        e.style.height="auto",e.style.display="block",e.style.position="absolute",e.style.visibility="hidden";
        var i=e.offsetHeight;
        return e.style.height="",e.style.display="",e.style.position="",e.style.visibility="",i}
      ,i=function(e){
        t=1;
        var n=r(e),i=e.style;
        i.display="block",i.transition="max-height 0.25s ease-in-out",i.overflowY="hidden",""==i["max-height"]&&(i["max-height"]=0),0==parseInt(i["max-height"])?(i["max-height"]="0",setTimeout(function(){
          i["max-height"]=n+"px"}
,10)):i["max-height"]="0"}
      ,a=function(r){
        if(r.preventDefault(),!t){
          var a=this.closest("[data-gjs=navbar]"),o=a.querySelector("[data-gjs=navbar-items]");
          i(o),e||(o.addEventListener(n,function(){
            t=0;
            var e=o.style;
            0==parseInt(e["max-height"])&&(e.display="",e["max-height"]="")}
                                     ),e=1)}
      };
      "gjs-collapse"in this||this.addEventListener("click",a),this["gjs-collapse"]=1}
     .bind(items[i]))();
  }
  var items = document.querySelectorAll('#iriff');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var e=this,t="https://cdnjs.cloudflare.com/ajax/libs/lory.js/2.3.4/lory.min.js",l=["0","false"],s="";
      s="true"==s?1:parseInt(s,10);
      var a={
        slidesToScroll:parseInt("1",10),enableMouseEvents:l.indexOf("")>=0?0:1,infinite:!isNaN(s)&&s,rewind:!(l.indexOf("")>=0),slideSpeed:parseInt("300",10),rewindSpeed:parseInt("600",10),snapBackSpeed:parseInt("200",10),ease:"ease",classNameFrame:"gjs-lory-frame",classNameSlideContainer:"gjs-lory-slides",classNamePrevCtrl:"gjs-lory-prev",classNameNextCtrl:"gjs-lory-next"}
      ,r=function(){
        window.sliderLory=lory(e,a)};
      if("undefined"==typeof lory){
        var n=document.createElement("script");
        n.src=t,n.onload=r,document.head.appendChild(n)}
      else r()}
     .bind(items[i]))();
  }
  var items = document.querySelectorAll('#i9vuh');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var t,e=this,a="[data-tab]",n=document.body,r=n.matchesSelector||n.webkitMatchesSelector||n.mozMatchesSelector||n.msMatchesSelector,o=function(){
        var a=e.querySelectorAll("[data-tab-content]")||[];
        for(t=0;t<a.length;t++)a[t].style.display="none"}
      ,i=function(n){
        var r=e.querySelectorAll(a)||[];
        for(t=0;t<r.length;t++){
          var i=r[t],s=i.className.replace("tab-active","").trim();
          i.className=s}
        o(),n.className+=" tab-active";
        var l=n.getAttribute("href"),c=e.querySelector(l);
        c&&(c.style.display="")}
      ,s=e.querySelector(".tab-active"+a);
      s=s||e.querySelector(a),s&&i(s),e.addEventListener("click",function(t){
        var e=t.target;
        r.call(e,a)&&i(e)}
                                                        )}
     .bind(items[i]))();
  }
</script>
<style>* {
  box-sizing: border-box;
  }
  body {
    margin: 0;
  }
  .container-width{
    width:90%;
    max-width:1150px;
    margin:0 auto;
  }
  .flex-sect{
    background-color:#fafafa;
    padding:100px 0;
    font-family:Helvetica, serif;
  }
  .row{
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    flex-wrap:nowrap;
    padding:10px;
  }
  .cell{
    min-height:75px;
    flex-grow:1;
    flex-basis:100%;
  }
  #iriff{
    position:relative;
    width:980px;
    margin:0 auto;
  }
  #ic6el{
    position:absolute;
    display:block;
    cursor:pointer;
    top:50%;
    left:0;
    margin-top:-25px;
  }
  #i9enh{
    position:absolute;
    display:block;
    cursor:pointer;
    top:50%;
    right:0;
    margin-top:-25px;
  }
  #izof{
    flex-basis:95%;
  }
  #iv83{
    flex-basis:252.6%;
  }
  .navbar-items-c{
    display:inline-block;
    float:right;
  }
  .navbar{
    background-color:#222;
    color:#ddd;
    min-height:50px;
    width:100%;
  }
  .navbar-container{
    max-width:950px;
    margin:0 auto;
    width:95%;
  }
  .navbar-container::after{
    content:"";
    clear:both;
    display:block;
  }
  .navbar-brand{
    vertical-align:top;
    display:inline-block;
    padding:5px;
    min-height:50px;
    min-width:50px;
    color:inherit;
    text-decoration:none;
  }
  .navbar-menu{
    padding:10px 0;
    display:block;
    float:right;
    margin:0;
  }
  .navbar-menu-link{
    margin:0;
    color:inherit;
    text-decoration:none;
    display:inline-block;
    padding:10px 15px;
  }
  .navbar-burger{
    margin:10px 0;
    width:45px;
    padding:5px 10px;
    display:none;
    float:right;
    cursor:pointer;
  }
  .navbar-burger-line{
    padding:1px;
    background-color:white;
    margin:5px 0;
  }
  #igl4g{
    padding:10px;
    font-size:x-large;
  }
  #is0yh{
    padding:10px;
  }
  #iossq{
    font-family:"Open Sans", Arial, sans-serif;
    font-size:14px;
    text-align:justify;
    background-color:rgb(255, 255, 255);
  }
  #iiwgj{
    padding:10px;
  }
  #ieiqv{
    padding:10px;
  }
  .tab{
    text-decoration:none;
    color:inherit;
    padding:7px 14px;
    transition:opacity 0.3s;
    display:inline-block;
    border-radius:3px;
    margin-right:10px;
  }
  .tab.tab-active{
    background-color:#0d94e6;
    color:white;
  }
  .tab-content{
    padding:6px 12px;
    min-height:100px;
    animation:fadeEffect 1s;
  }
  @keyframes fadeEffect{
    from{
      opacity:0;
    }
    to{
      opacity:1;
    }
  }
  @media (max-width: 768px){
    .row{
      flex-wrap:wrap;
    }
    .navbar-burger{
      display:block;
    }
    .navbar-items-c{
      display:none;
      width:100%;
    }
    .navbar-menu{
      width:100%;
    }
    .navbar-menu-link{
      display:block;
    }
  }
</style>