Custom Module JA builder doesn't work and messing up whole page.

ajain

Hi, I am trying to insert Custom module into my page( since there no needed me option in templates). Once i put the code, save it and apply on the page, module doesn't look as supposed to and all page including the menu and footer just becomes a mess.
Please advise how to solve this issue.
Thanks.
Adding here link to the page, code and screen shot how it is supposed to look(if open just html in browser).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Tabs</title>
  <style>
    #tabs {
      /* background-color: #d0d0d0; */
    }

    #tabs .tabs-imgs .laptop .laptop-img {
      position: relative;
      z-index: 10;
    }

    #tabs .tabs-imgs .laptop .page-img {
      position: absolute;
      height: 572px;
      width: 916px;
      left: 145px;
      top: 43px;
      z-index: 1;
      transition: 0.25s;
      opacity: 0;
    }

    #tabs .tabs-imgs .laptop .page-img.active {
      opacity: 1;
    }

    #tabs .tabs-buttons .button.active .icon svg path {
      fill: #2b9af3 !important;
    }

    #tabs .tabs-buttons .button .name {
      color: #212121;
    }

    #tabs .tabs-buttons .button.active .name {
      color: #2b9af3;
    }

    #tabs .tabs-buttons .button svg {
      width: 30px;
      height: 30px;
    }

    #tabs .tabs-buttons .button {
      width: 14.2857142857%;
    }

    #tabs .tabs-descriptions {
      color: #212121;
    }

    #tabs .tabs-descriptions .description {
      display: none;
      width: 100%;
    }

    #tabs .tabs-descriptions .description.active {
      display: block;
    }

    .cursor-pointer {
      cursor: pointer;
    }

    @media (min-width: 1440px) {
      .container {
        max-width: 1360px;
      }
    }

    @media (min-width: 1200px) and (max-width: 1439px) {
      #tabs .tabs-imgs .laptop .laptop-img {
        width: 1000px;
      }

      #tabs .tabs-imgs .laptop .page-img {
        height: 474px;
        width: 759px;
        left: 121px;
        top: 36px;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      #tabs .tabs-imgs .laptop .laptop-img {
        width: 800px;
      }

      #tabs .tabs-imgs .laptop .page-img {
        height: 380px;
        width: 608px;
        left: 97px;
        top: 29px;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      #tabs .tabs-imgs .laptop .laptop-img {
        width: 600px;
      }

      #tabs .tabs-imgs .laptop .page-img {
        height: 285px;
        width: 455px;
        left: 73px;
        top: 22px;
      }
    }

    @media (max-width: 767px) {
      #tabs .tabs-imgs {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div id="tabs" class="py-5">
    <div class="container">
      <div class="tabs-imgs text-center">
        <div class="laptop d-inline-block position-relative">
          <img class="laptop-img" src="https://quicklert.com/images/Qbox_page/Quicklert_Qbox__cms_mac-laptop.png" alt="">
          <script type="text/javascript">
            let pages = [
              {id: 'devices', name: 'Devices', description: 'Devices Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_devises.png', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14.546" viewBox="0 0 20 14.546"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M429.091,142.545H413.636a.909.909,0,0,1-.909-.909v-10a.909.909,0,0,1,.909-.909h15.455a.909.909,0,0,1,.909.909v10A.909.909,0,0,1,429.091,142.545Zm0-10.909H413.636v10h15.455Zm-2.273-1.818a.454.454,0,0,1-.455-.455h0v-.455H410.909v10h.455a.455.455,0,0,1,0,.909h-.455a.909.909,0,0,1-.909-.909v-10a.909.909,0,0,1,.909-.909h15.455a.909.909,0,0,1,.909.909v.455h0A.454.454,0,0,1,426.818,129.818Z" transform="translate(-410 -128)"/></svg>'},
              {id: 'groups', name: 'Groups', description: 'Groups Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_groups.png', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14.546" viewBox="0 0 20 14.546"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M141.777,1383.664l-.046.022-.015.007-9.485,4.516,0-.006a.406.406,0,0,1-.455,0l0,.006-9.485-4.516-.015-.007-.046-.022,0-.006a.447.447,0,0,1-.227-.385.454.454,0,0,1,.455-.454.44.44,0,0,1,.228.07l0-.006,9.314,4.435,9.314-4.435,0,.006a.44.44,0,0,1,.228-.07.454.454,0,0,1,.455.454.447.447,0,0,1-.227.385Zm0-2.279,0,.006-.046.022-.015.008-9.484,4.516,0-.006a.405.405,0,0,1-.455,0l0,.006-9.484-4.516-.015-.008-.046-.022,0-.006a.439.439,0,0,1,0-.769l0-.006.046-.022.015-.007,9.485-4.516,0,.006a.405.405,0,0,1,.455,0l0-.006,9.485,4.516.015.007.046.022,0,.006a.439.439,0,0,1,0,.769ZM132,1376.956,123.507,1381l8.493,4.044,8.493-4.044Zm-9.545,8.135a.44.44,0,0,1,.228.07l0-.006,9.314,4.435,9.314-4.435,0,.006a.44.44,0,0,1,.228-.07.454.454,0,0,1,.455.455.448.448,0,0,1-.227.384l0,.006-.046.022-.015.008-9.484,4.516,0-.006a.405.405,0,0,1-.455,0l0,.006-9.484-4.516-.015-.008-.046-.022,0-.006a.448.448,0,0,1-.227-.384A.454.454,0,0,1,122.455,1385.091Z" transform="translate(-122 -1376)"/></svg>'},
              {id: 'appstore', name: 'App Store ', description: 'App Store Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_appstore.png', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18.653" height="20" viewBox="0 0 18.653 20"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M48.356,1195.765l0,0-8.808,5.181,0,0a.482.482,0,0,1-.442,0l0,0-8.808-5.181,0,0a.514.514,0,0,1-.3-.464v-6.218a.516.516,0,0,1,.3-.464l0,0,3.245-1.916a.506.506,0,0,1,.281-.094.514.514,0,0,1,.233.974l.006.012-2.525,1.491,7.792,4.583,7.79-4.583-2.508-1.475,0-.007a.518.518,0,0,1,.2-.995.5.5,0,0,1,.246.07l3.3,1.939,0,0a.516.516,0,0,1,.3.464v6.218A.514.514,0,0,1,48.356,1195.765Zm-9.548-1.207-7.772-4.572v5.02l7.772,4.572Zm8.808-4.572-7.772,4.572v5.02l7.772-4.572Zm-3.779-4.682-4.145,4.145h0a.518.518,0,0,1-.733,0h0l-4.145-4.145h0a.518.518,0,1,1,.733-.733h0l3.261,3.261v-6.314a.518.518,0,1,1,1.036,0v6.314l3.261-3.261h0a.518.518,0,1,1,.733.733Z" transform="translate(-30 -1181)"/></svg>'},
              {id: 'content', name: 'Content', description: 'Content Description', img: ' https://quicklert.com/images/Qbox_page/Quicklert_Qbox_content-copy.jpg', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14.546" viewBox="0 0 20 14.546"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M814,519.273h0v6.364a.909.909,0,0,1-.909.909H794.909a.909.909,0,0,1-.909-.909v-7.727a.442.442,0,0,1,.084-.248l-.007,0,3.636-5.455.007.005a.445.445,0,0,1,.371-.207h11.818a.445.445,0,0,1,.371.207l.007-.005,3.636,5.455-.007,0a.442.442,0,0,1,.084.248Zm-19.091-.909v7.273h18.182v-7.273h-5.486a3.633,3.633,0,0,1-7.21,0Zm.395-.909h5.515a.454.454,0,0,1,.454.455h0a2.727,2.727,0,0,0,5.455,0h0a.454.454,0,0,1,.455-.455H812.7l-3.031-4.545H798.334Z" transform="translate(-794 -512)"/></svg>'},
              {id: 'layouts', name: 'Layouts', description: 'Layouts Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_layouts.png', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18.182" viewBox="0 0 20 18.182"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M-315.818,772.182h-11.818a1.818,1.818,0,0,1-1.818-1.818V769a.454.454,0,0,1,.455-.455.454.454,0,0,1,.455.455v1.364a.909.909,0,0,0,.909.909h11.818a.909.909,0,0,0,.909-.909v-5h-2.273a.454.454,0,0,1-.455-.455.455.455,0,0,1,.455-.455h2.273v-4.091a.909.909,0,0,0-.909-.909h-1.364a.454.454,0,0,1-.455-.455.454.454,0,0,1,.455-.455h1.364A1.818,1.818,0,0,1-314,760.364v10A1.818,1.818,0,0,1-315.818,772.182Zm-4.545-4.545h-11.818A1.818,1.818,0,0,1-334,765.818v-10A1.818,1.818,0,0,1-332.182,754h11.818a1.818,1.818,0,0,1,1.818,1.818v10A1.818,1.818,0,0,1-320.364,767.636Zm.909-11.818a.909.909,0,0,0-.909-.909h-11.818a.909.909,0,0,0-.909.909v2.727h13.636Zm0,3.636h-13.636v6.364a.909.909,0,0,0,.909.909h11.818a.909.909,0,0,0,.909-.909Z" transform="translate(334 -754)"/></svg>'},
              {id: 'playlists', name: 'Playlists', description: 'Playlists Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_playlist_1-copy.jpg', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16.363" viewBox="0 0 20 16.363"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M621.091,142.364H602.909a.909.909,0,0,1-.909-.909V130.545a.909.909,0,0,1,.909-.909h18.182a.909.909,0,0,1,.909.909v10.909A.909.909,0,0,1,621.091,142.364Zm0-11.818H602.909v10.909h18.182Zm-1.818-1.818H604.727a.455.455,0,1,1,0-.909h14.545a.455.455,0,1,1,0,.909Zm-1.818-1.818H606.545a.455.455,0,0,1,0-.909h10.909a.455.455,0,0,1,0,.909Z" transform="translate(-602 -126)"/></svg>'},
              {id: 'schedule', name: 'Schedule', description: 'Schedule Description', img: 'https://quicklert.com/images/Qbox_page/Quicklert_Qbox_schedule.png', icon: '<svg xmlns="http://www.w3.org/2000/svg" width="19.909" height="20" viewBox="0 0 19.909 20"><defs><style>.a{fill:#212121;}</style></defs><path class="a" d="M-248.934,752.278h-1.409V750.43a.585.585,0,0,0-.586-.586.585.585,0,0,0-.586.586v1.848h-10.118V750.43a.585.585,0,0,0-.586-.586.585.585,0,0,0-.586.586v1.848h-1.354a2.342,2.342,0,0,0-2.342,2.342V767.5a2.342,2.342,0,0,0,2.342,2.342h15.224a2.342,2.342,0,0,0,2.342-2.342V754.62A2.342,2.342,0,0,0-248.934,752.278Zm1.171,15.224a1.171,1.171,0,0,1-1.171,1.171h-15.224a1.171,1.171,0,0,1-1.171-1.171v-8.2h17.566Zm0-9.369h-17.566V754.62a1.172,1.172,0,0,1,1.171-1.171h15.224a1.172,1.172,0,0,1,1.171,1.171Z" transform="translate(266.5 -749.844)"/></svg>'}
            ];

            for (i=0; i<pages.length; i++) {
              if (i === 0) {
                document.writeln('<img class="page-img ' + pages[i].id + '-img' + ' active" src="' + pages[i].img + '" alt="">');
                continue;
              }
              document.writeln('<img class="page-img ' + pages[i].id + '-img' + '" src="' + pages[i].img + '" alt="">');
            }
          </script>
        </div>
      </div>
      <div class="tabs-buttons mt-5 d-flex justify-content-between">
        <script type="text/javascript">
          function openTab(id) {
            activeTab(id, 'tabs-buttons', 'button');
            activeTab(id, 'tabs-imgs', 'img');
            activeTab(id, 'tabs-descriptions', 'description');
          }

          function activeTab(id, container, block) {
            let active = document.getElementsByClassName(container)[0].getElementsByClassName('active')[0];
            let nextActive = document.getElementsByClassName(id + '-' + block)[0];
            
            active.className = active.className.replace(' active', '');
            nextActive.className = nextActive.className + ' active';
          }

          for (i=0; i<pages.length; i++) {
            if (i === 0) {
              document.writeln('<a class="cursor-pointer text-center button ' + pages[i].id + '-button' + ' active" onclick="openTab(`' + pages[i].id + '`)">');
                document.writeln('<div class="d-inline-block icon">' + pages[i].icon + '</div>');
                document.writeln('<div class="name mt-3">' + pages[i].name + '</div>');
              document.writeln('</a>');
              continue;
            }
            document.writeln('<a class="cursor-pointer text-center button ' + pages[i].id + '-button' + '" onclick="openTab(`' + pages[i].id + '`)">');
              document.writeln('<div class="d-inline-block icon">' + pages[i].icon + '</div>');
              document.writeln('<div class="name mt-3">' + pages[i].name + '</div>');
            document.writeln('</a>');
          }
        </script>
      </div>
      <div class="tabs-descriptions mt-5">
        <script type="text/javascript">
          for (i=0; i<pages.length; i++) {
            if (i === 0) {
              document.writeln('<div class="description text-center ' + pages[i].id + '-description' + ' active">' + pages[i].description + '</div>');
              continue;
            }
            document.writeln('<div class="description text-center ' + pages[i].id + '-description' + '">' + pages[i].description + '</div>');
          }
        </script>
      </div>
    </div>
  </div>
</body>
</html>

teitbite

ajain Hi. Are You sure it's all the style You should use? For example to make <a> elements align You need to use a style similar to:

#tabs .tabs-buttons .button {
    display: inline-block;
}

and I simply cannot see it there.