html – CSS, Bootstrap – Website is like 102% wide

I’m working on a school project in which i have to create a small Webpage introducing you to a topic of choice.

Unfortunately my website has a horizontal scrollbar and i don’t have a clue which element causes it. I tried disabling the elements one after another but haven’t found a solution

Thanks in advance for any tips! Please excuse my bad english, I’m trying to get better at english without using a translator like DeepL.

<!doctype html>
<html lang="de">
    <head>
        <title>VR</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <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">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav id="colorlib-main-nav" role="navigation">
            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
            <div class="js-fullheight colorlib-table">
                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
                <div class="colorlib-table-cell js-fullheight">
                <div class="row no-gutters">
                    <div class="col-md-12 text-center">
                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
                    <ul>
                        <li class="active"><a href="index.html"><span>Home</span></a></li>
                        <li><a href="about.html"><span>About</span></a></li>
                        <li><a href="blog.html"><span>Blog</span></a></li>
                        <li><a href="contact.html"><span>Contact</span></a></li>
                    </ul>
                    </div>
                </div>
                </div>
            </div>
        </nav>

        <div class="header h-100">
            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
            
        </div>

        <div class="h-100">
            <h2 class="center">Was ist Virtual Reality (VR)</h2>
            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
        </div>
        

        <div id="vr-headset-kategorien" class="">
            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
            <div id="standalone" class="row">
                <!---->
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>Standalone</h3>
                
                    <p>Standalone VR-Headsets ben&ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&uuml;r Anf&auml;nger geeignet</p>

                    <p>
                    Vorteile:<br />
                    Kein guter PC ben&ouml;tigt<br />
                    Niedriger Einstiegspreis trotz guter Hardware<br/>
                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
                    
                    <p>Nachteile:<br />
                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
                </div>
                
            </div>

            <div id="pc" class="row">
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>PC-VR</h3>
                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&uuml;r Enthusiasten geeignet</p>

                    <p>Vorteile:<br />
                    Hohe Aufl&ouml;sung<br />
                    Wenig Lags</p>

                    <p>Nachteile:<br />
                    Hoher Einstiegspreis</p>
                </div>
            </div>

            <div id="fulldive" class="row">
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>Full-Dive VR</h3>
                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>

                    <p>Vorteile:<br />
                    Unvergleichliche Immersion</p>

                    <p>Nachteile:<br />
                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&ouml;glich</p>
                </div>
            </div>

        </div>

        

      
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script>
            (function($) {

            "use strict";

            var fullHeight = function() {

                $('.js-fullheight').css('height', $(window).height());
                $(window).resize(function(){
                    $('.js-fullheight').css('height', $(window).height());
                });

            };
            fullHeight();

            var burgerMenu = function() {

                $('.js-colorlib-nav-toggle').on('click', function(event) {
                    event.preventDefault();
                    var $this = $(this);
                    if( $('body').hasClass('menu-show') ) {
                        $('body').removeClass('menu-show');
                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
                    } else {
                        $('body').addClass('menu-show');
                        setTimeout(function(){
                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
                        }, 900);
                    }
                })
            };
            burgerMenu();


            })(jQuery);
        </script>
    </body>
</html>
html, body {
    background-color: black;

    color: white;
    height: 100%;
    min-height: 100%;

}

#h-100{
    /*height: 100%;
    min-height: 100%;*/

    /*padding-top: 30%;
    padding-bottom: 30%;*/

    text-align: center;
}

.introduction {
    background-image: url("beat-saber-intro.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.row{
    padding-bottom: 10%;
}

.sketchfab-embed-wrapper{
    height: 100%;
    margin-bottom: 200px;
}

iframe{
    height: 100%;
    width: 100%;
}

header {
    height: 100%;
    min-height: 100%;
}

.center{
    text-align: center;
}

/* Menu*/
.img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  
  #colorlib-main-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.99);
    z-index: 1002;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    overflow-y: scroll; }
    #colorlib-main-nav .colorlib-table {
      display: table;
      width: 100%;
      height: 100%; }
      #colorlib-main-nav .colorlib-table .img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        opacity: 1; }
        #colorlib-main-nav .colorlib-table .img:after {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          content: '';
          background: rgba(0, 0, 0, 0.3); }
      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
        display: table-cell;
        vertical-align: middle; }
    #colorlib-main-nav .colorlib-nav-toggle {
      position: absolute;
      top: 40px;
      right: 40px;
      padding: 20px;
      height: 44px;
      width: 44px;
      line-height: 0;
      padding: 0 !important;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
      @media (prefers-reduced-motion: reduce) {
        #colorlib-main-nav .colorlib-nav-toggle {
          -webkit-transition: none;
          -o-transition: none;
          transition: none; } }
      #colorlib-main-nav .colorlib-nav-toggle i {
        top: 18px !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0;
        text-indent: 0; }
      #colorlib-main-nav .colorlib-nav-toggle.show {
        visibility: visible;
        opacity: 1; }
      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
        content: '';
        width: 40px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 0; }
    .menu-show #colorlib-main-nav {
      visibility: visible;
      opacity: 1;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    #colorlib-main-nav .logo {
      font-size: 40px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      position: relative;
      display: inline-block;
      margin-bottom: 0;
      line-height: 1.5;
      font-family: "Poppins", Arial, sans-serif; }
      #colorlib-main-nav .logo span {
        font-size: 14px;
        display: block;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 8px; }
    #colorlib-main-nav ul {
      padding: 0;
      margin: 0;
      display: block; }
      @media (max-width: 767.98px) {
        #colorlib-main-nav ul {
          padding: 20px 0 0 0; } }
      #colorlib-main-nav ul li {
        padding: 0;
        margin: 0;
        list-style: none;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 5px;
        text-transform: uppercase; }
        #colorlib-main-nav ul li a {
          display: block;
          color: white;
          padding: 5px 0; }
          #colorlib-main-nav ul li a span {
            color: white;
            position: relative;
            padding: 0 10px; }
            #colorlib-main-nav ul li a span small {
              position: absolute;
              bottom: 7px;
              left: -30px;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.3);
              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
            outline: none;
            text-decoration: none; }
            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
              visibility: visible;
              -webkit-transform: scaleX(1);
              -moz-transform: scaleX(1);
              -ms-transform: scaleX(1);
              -o-transform: scaleX(1);
              transform: scaleX(1); }
        #colorlib-main-nav ul li.active a span {
          color: #f8b500; }
          #colorlib-main-nav ul li.active a span:before {
            background: #fec771;
            visibility: visible;
            -webkit-transform: scaleX(1);
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            transform: scaleX(1); }
  
  header {
    padding: 2em 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    margin: 0 auto; }
    @media (max-width: 767.98px) {
      header {
        padding: 1em 0;
        position: absolute; } }
    header .colorlib-navbar-brand {
      float: left; }
      header .colorlib-navbar-brand .colorlib-logo {
        font-size: 12px;
        color: #fff;
        letter-spacing: 5px;
        font-weight: 600;
        position: relative;
        display: inline-block;
        margin-bottom: 0;
        line-height: 1.5;
        font-family: "Poppins", Arial, sans-serif;
        text-transform: uppercase; }
        header .colorlib-navbar-brand .colorlib-logo span {
          font-size: 11px;
          display: block;
          font-weight: 300;
          color: rgba(255, 255, 255, 0.8);
          letter-spacing: 7px; }
        header .colorlib-navbar-brand .colorlib-logo i {
          color: #fec771;
          position: absolute;
          top: -18px;
          bottom: 0;
          left: 7px;
          font-size: 48px; }
        header .colorlib-navbar-brand .colorlib-logo:hover {
          text-decoration: none !important; }
        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
          outline: none;
          text-decoration: none; }
  
  .colorlib-nav-toggle {
    cursor: pointer;
    text-decoration: none; }
    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
      background: #000; }
    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
      background: #000; }
    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
      outline: none;
      border-bottom: none !important; }
    .colorlib-nav-toggle i {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 2px;
      color: #000;
      font: bold 14px/.4 Helvetica;
      text-transform: uppercase;
      text-indent: -55px;
      background: #fff;
      -webkit-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out; }
      .menu-show .colorlib-nav-toggle i {
        background: #fff;
        color: #fff; }
      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
        content: '';
        width: 30px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 0;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }
        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
          background: #fff; }
        @media (prefers-reduced-motion: reduce) {
          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
            -webkit-transition: none;
            -o-transition: none;
            transition: none; } }
    .colorlib-nav-toggle.dark i {
      position: relative;
      color: #fff;
      background: #fff;
      -webkit-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out; }
      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
        background: #fff;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }
        @media (prefers-reduced-motion: reduce) {
          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
            -webkit-transition: none;
            -o-transition: none;
            transition: none; } }
  
  .colorlib-nav-toggle i::before {
    top: -7px; }
  
  .colorlib-nav-toggle i::after {
    bottom: -7px; }
  
  .colorlib-nav-toggle:hover i::before {
    top: -10px; }
  
  .colorlib-nav-toggle:hover i::after {
    bottom: -10px; }
  
  .colorlib-nav-toggle.active i {
    background: transparent; }
  
  .colorlib-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg); }
  
  .colorlib-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg); }
  
  .colorlib-nav-toggle {
    float: right;
    z-index: 1003;
    position: relative;
    top: 0;
    right: 0;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 0; }
    @media (max-width: 767.98px) {
      .colorlib-nav-toggle {
        right: 10px; } }
  
  .hero-wrap {
    background: #202020; }
    .hero-wrap .slider-text .desc h1 {
      font-size: 6vw;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase; }
    .hero-wrap .slider-text .desc h3 {
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px; }

¿crear teclado virtual dinámico con JQuery bootstrap?

Hola comunidad necesito crear un teclado virtual(solo numérico) usando JQuery con las siguientes características que se muestran en la imagen:
1 debe tener un mensaje que se muestre al enviar el código al email
debe tener un input para ingresar la contraseña
3 el teclado numérico solo debe reconocer el evento del mouse para ingresar los numeros del teclado virtual
4 el teclado numérico debe ser random, es decir los numeros deben ser diferente cada ves que se llame al componente

la verdad es un gran reto en hacer este componente sugerencia y ayuda sera muy útil gracias

javascript – Bootstrap override accordian scroll with scroll to anchor

I have the following script to scroll to the top of a section when an accordion button is clicked

        $(document).on('shown.bs.collapse', '.collapse', function () {
            var open_accordion = $(this).prev('(data-toggle="collapse")').attr('id');
            $('#edit-form input(name="accordion_hash")').val(open_accordion);
            var target = 'Tab Open - ' + open_accordion;
            // Make sure the clicked accordion is scrolled into view
            $('html, body').animate({
                scrollTop: $('#' + open_accordion).offset().top - 100
            }, 300);
        }).on('hidden.bs.collapse', '.collapse', function () {
            $('#edit-form input(name="accordion_hash")').val('');
        });

There is a special case when a button/href is clicked that I want to scroll to a specific anchor within the a tab. So in the code below normally when a <div class="card-header collapsed" is clicked I want it to open to the top of the tab (as the code above does). But when the Special Care link is clicked, I want it to scroll to scroll there instead.

<a href='#link-here'>Special Case</a>
<div class="accordion mb-3" id="provider-accordion">
    <div class="card">
        <div class="card-header collapsed" id="section1" data-toggle="collapse" data-target="#section1-content" aria-expanded="false" aria-controls="section1-content">
            <h2 class="mb-0 text-primary">
                Section 1
            </h2>
        </div>
        <div id="section1-content" class="collapse" aria-labelledby="section1" data-parent="#provider-accordion">
            <div class="card-body">
                 <p>Some content</p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header collapsed" id="section2" data-toggle="collapse" data-target="#section2-content" aria-expanded="false" aria-controls="section2-content">
            <h2 class="mb-0 text-primary">
                Section 2
            </h2>
        </div>
        <div id="section2-content" class="collapse" aria-labelledby="section2" data-parent="#provider-accordion">
            <div class="card-body">
                 <p>Some content</p>
                 <p id="link-here">Scroll here instead</p>
            </div>
        </div>
    </div>
</div>

For the special case I am currently using the following, but this just scrolls to top of section. I cannot work out how to get inside because I have to wait for the accordion to open and then override the previous code

<a data-toggle="collapse" href="#section2-content" aria-expanded="false" aria-controls="section2">Special Case</a>

I hope that makes sense

html – Why are there gaps between Bootstrap divs on Mobile but not on Desktop?

I’m using bootstrap to try and mimic a website I found, and it’s mostly working, except for this strange issue that I can’t seem to solve. On Desktop, there are no gaps between the containers and everything works fine. However, on mobile, there is a gap between my two containers. I’m attatching an image to show this – the one on the left is on the mobile, and the one on the right is on the desktop, when I’ve shrunk the browser window.

View post on imgur.com

Currently, the only way I’ve managed to get rid of it is by shrinking the size of the first div to 90vh, but I would like it to be 100vh, so it fills the whole screen initially. I’m attatching my HTML and CSS below – thanks in advance for any help.

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title>Rêver</title>

    

    <!-- Bootstrap core CSS -->
<link href="./bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body class="body">
<div class="container" style="height: 100vh">
  <div class="navbar navbarSmall" style="width: 100vw; max-width: 100%; z-index: 50;">
    <div class="container menu">
      <h1 class="text-white logo" style="font-size:5vh">Rêver</h1>
      <div class="hamburger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
      </div>
    </div>
  </div>
  <div class="container bg-house-main">
    <img src="https://stackoverflow.com/./hero1.jpg" alt="" style="z-index: -50">
    <h1 class="slogan">Dare to Dream</h1>
  </div>
</div>
<div class="container navMenu hidden" style="height: 100vh; position: absolute; bottom: 100vh;">
  <div class="navbar text-center">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</div>

<div class="container content-section-1 text-light">
  <div class="content1 mt-5 mb-5">
    <div class="imgText mb-3">
      <h1 style="font-family: 'Montserrat';" class="text-center mt-5 mb-5">The Height Of Luxury</h1>
      <p>Rêver is a magnificent project of 2 luxury villas located in the popular district of Chêne-Bougeries. This promotion offers a unique living environment in the countryside while being very close to downtown Geneva and diverse amenities.</p>
    </div>
    <div id="carouselExampleControls" class="carousel slide imageSlider" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436744.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436746.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="./pexels-max-vakhtbovych-6436752.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div>
  </div>
</div>
<div class="container content-section-2 text-light">
  <table class="table tableInformation mb-5">
    <tbody>
      <tr>
        <td class="cellText" valign="bottom">
          <div class="text">
            <small>/ district</small>
            <h4>Chêne-Bougeries</h4>
          </div>
        </td>
        <td class="cellText">
          <div class="text" >
            <small>/ instagram</small>
            <a href="https://www.instagram.com/rousseau5_realestate/"><h4>@rousseau5_realestate</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ gallery</small>
            <a href="#"><h4>Gallery</h4></a>
          </div>
        </td>
      </tr>
      <tr>
        <td class="cellText">
          <div class="text">
            <small>/ surface plan</small>
            <a href="#"><h4>Download PDF</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ sales brochure</small>
            <a href="#"><h4>Download PDF</h4></a>
          </div>
        </td>
        <td class="cellText">
          <div class="text">
            <small>/ contact</small>
            <a href="#"><h4>Contact us</h4></a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="container content-section-3">
  <img src="./Buclines Animation--JGw5BkP9dQ.gif" alt="" class="tourGIF mb-5">
</div>
<div class="container content-section-4">
  <div class="content4">
    <h1 class="headingSection4">
THE
SPACE
DESIGNED
<span style="color: #B7A187;">WITH
PASSION
      </span>
        </h1>
        <p class="descriptionSection4">
The architect must interpret and transcribe the strong interaction that exists between a project and the natural harmony of a place.
    
This is how Neal Ymar and his architects conceive it;
"We seek to create a feeling of well-being, in each space, by seeking a symbiosis between the individual, his place of life and his natural environment. This coexistence is the keystone of an architectural project ”.
  
Each of the details as well as the finishes have been thought out with particular care. The contemporary architecture combines quality finishes and materials.
        </p>
  </div>
</div>
<script src="./jquery.js"></script>
<script src="./popper.js"></script>
<script src="./bootstrap.js"></script>
<script src="./app.js"></script>

    
  </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

@font-face {
    font-family: 'DreamFont';
    src: url('./Aguila-Thin.ttf')
}
@font-face {
    font-family: 'LogoFont';
    src: url('./Locomotype GigaSansBold.ttf');
}

@font-face{
    font-family: 'AppleFont';
    src: url('./FontsFree-Net-SFProDisplay-Regular.ttf')
}

.slogan {
    font-family: 'DreamFont';
    font-size: 8vh; 
    max-width: 100vw;
    color: white;
    line-height: 100vh;
    text-align: center;
    white-space: none;
}

@media screen and (max-width: 1573px){
    .slogan {
        font-size: 10vw;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'AppleFont';
}

.bg-house-main {
    width: 100vw;
    height: 100vh;
}

body.x {
    overflow: hidden;
}

.bg-house-main img{
    filter: brightness(0.85);
    bottom: 0;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    max-width: 100%;
}

.container {
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.navMenu {
    background-color: black;
    height: 100vh;
    display: flex;
    align-items: center;
    color: white;
    justify-content: center;
}

.navMenu a {
    font-family: 'LogoFont';
    color: white;
    margin-top: 5vh;
    font-size: 3vh;
    transition: transform 0.3s ease;
}

.navMenu a:hover {
    transform: scale(1.2);
    text-decoration: underline;
}

.navMenu.moving {
    transition: all 1s ease-in-out;
};

.line {
    transition: all 1s ease-in-out;
}

.line1.x {
    transform: translateY(2.5vh) rotate(135deg);
}

.line2.x {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.line3.x {
    transform: translateX(0.11vw) translateY(-0.5vh) rotate(-135deg);
}

.line2 {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.imgText {
    font-size: 1.5vw;
    max-width: 35vw;
    margin-right: 5vw;
}

.imgText h1 {
    font-size: 2vw;
}

.line1.moving, .line3.moving {
    transition: transform 1s ease;
}

.logo {
    font-family: 'LogoFont';
    cursor: pointer;
}

.hamburger {
    cursor: pointer;
}

.imageSlider {
    max-width: 40vw;
}

.menu {
    margin-top: 3vh;
    width: 100vw;
    max-width: 100%;
}

.line {
    height: calc(1.5vh/3);
    width: calc((2vh/3)*6);
    border-radius: 10px;
    background-color: white;
    margin-top: 1vh;
}

.content-section-1 {
    align-items: center;
    width: 100vw;
    z-index: 10;
    position: relative;
    background: #070707;
}

.content-section-4 {
    align-items: center;
    width: 100vw;
    min-height: 50vh;
    position: relative;
    background: #070707;
}

.content4 {
    display: flex;
    white-space: pre-wrap;
    font-family: 'DreamFont';
    color: white;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: flex-start;
}

.content4 span {
    font-family: 'DreamFont';
}

.headingSection4 {
    font-size: 5vw;
    margin-right: 5vw;
}

.descriptionSection4 {
    max-width: 40vw;
    font-size: 1vw;
}

@media screen and (max-width:1742px) {
    .descriptionSection4 {
        font-size: 1.5vw;
    }
}

.content1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: space-evenly;
}
.content1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 80vw;
    justify-content: space-evenly;
}

.content-section-1 h1 {
    display: flex;
    width: 80vw;
    align-self: center;
}

.content-section-2 {
    position: relative;
    display: flex;
    align-items: center;
    background: #070707;
}

.content-section-3 {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: #070707;
}

.tableInformation {
    width: 81vw;
}


@media screen and (max-width: 881px) {
    table,
    tr,
    td {
      display: block;
    }
    body .tableInformation td {
        width: 80vw;
        display:flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
    .content-section-4 {
        align-items: center;
    }
    .descriptionSection4 {
        max-width: 90vw;
        white-space: pre-wrap;
        font-size: 2.5vw;
    }
    .headingSection4 { 
        max-width: 90vw;
        font-size: 7vw;
        text-align: center;
    }
    .content1 {
        flex-direction: column;
    }
    .imgText {
        max-width: 80vw;
        font-size: 3vw;
        margin-right: 0;
    }
    .imgText h1 {
        font-size: 3.5vw;
    }
    .imageSlider {
        max-width: 80vw;
    }
    .content4 {
        flex-direction: column;
        white-space: normal;
    }
}

body, html {
    max-width: 100vw;
}

.tableInformation td {
    color: white;
    min-height: 30vw;
    width: calc(100% / 3);
    border: 1px solid #222222;
} 

.text {
    margin-left: 5%;
    line-height: 5vh;
}

.text a {
    text-decoration:none;
}

.tourGIF {
    width: 89vw;
}

Any help would be greatly appreciated.

kubernetes – kubadm join stuck at “Waiting for the kubelet to perform the TLS Bootstrap”

I have a k8s cluster in version 1.19.4 with 3 masters and 3 nodes.

I tried to add a 4th node using kubeadm join command, but the process is stucked at the step (kubelet-start) Waiting for the kubelet to perform the TLS Bootstrap....

To perform join, I created a token on a master:

master# kubeadm token create
W0414 20:36:35.121024  969706 configset.go:348) WARNING: kubeadm cannot validate component configs for API groups (kubelet.config.k8s.io kubeproxy.config.k8s.io)
z8****.d6aye9s7zdv6****

master# # kubeadm token list
TOKEN                     TTL         EXPIRES                USAGES                   DESCRIPTION                                                EXTRA GROUPS
z8****.d6aye9s7zdv6****   23h         2021-04-15T20:36:35Z   authentication,signing   <none>                                                     system:bootstrappers:kubeadm:default-node-token

On my freshly installed node, I run kubeadm join command:

node# kubeadm join 10.x.x.x:16443 --token z8****.d6aye9s7zdv6**** --discovery-token-unsafe-skip-ca-verification
(preflight) Running pre-flight checks
(preflight) Reading configuration from the cluster...
(preflight) FYI: You can look at this config file with 'kubectl -n kube-system get cm kubeadm-config -oyaml'
W0414 21:23:36.259795 1049142 kubelet.go:205) detected "systemd" as the Docker cgroup driver, the provided value "cgroupfs" in "KubeletConfiguration" will be overrided
(kubelet-start) Writing kubelet configuration to file "/var/lib/kubelet/config.yaml"
(kubelet-start) Writing kubelet environment file with flags to file "/var/lib/kubelet/kubeadm-flags.env"
(kubelet-start) Starting the kubelet
(kubelet-start) Waiting for the kubelet to perform the TLS Bootstrap...
(kubelet-check) Initial timeout of 40s passed.

Unfortunately, an error has occurred:
        timed out waiting for the condition

This error is likely caused by:
        - The kubelet is not running
        - The kubelet is unhealthy due to a misconfiguration of the node in some way (required cgroups disabled)

If you are on a systemd-powered system, you can try to troubleshoot the error with the following commands:
        - 'systemctl status kubelet'
        - 'journalctl -xeu kubelet'
timed out waiting for the condition

In kubelet logs, I see a lot of errors:

(...)

E0414 21:23:36.801301 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/kubelet.go:438: Failed to
adesecure.com" is forbidden: User "system:anonymous" cannot list resource "nodes" in API group "" at the cluster scope
E0414 21:23:36.801302 1049381 reflector.go:127) k8s.io/client-go/informers/factory.go:134: Failed to watch *v1.Service: failed to list *v1.Service: services is forbidden: User "system:anonymous" cannot list resource "services" in API group "" at the cluster scope
E0414 21:23:36.801420 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/config/apiserver.go:46: Failed to watch *v1.Pod: failed to list *v1.Pod: pods is forbidden: User "system:anonymous" cannot list resource "pods" in API group "" at the cluster scope
E0414 21:23:37.868232 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/config/apiserver.go:46: Failed to watch *v1.Pod: failed to list *v1.Pod: pods is forbidden: User "system:anonymous" cannot list resource "pods" in API group "" at the cluster scope
E0414 21:23:37.997967 1049381 reflector.go:127) k8s.io/client-go/informers/factory.go:134: Failed to watch *v1.Service: failed to list *v1.Service: services is forbidden: User "system:anonymous" cannot list resource "services" in API group "" at the cluster scope
E0414 21:23:38.133308 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/kubelet.go:438: Failed to watch *v1.Node: failed to list *v1.Node: nodes "vskub1node101p.internal.vadesecure.com" is forbidden: User "system:anonymous" cannot list resource "nodes" in API group "" at the cluster scope
E0414 21:23:39.830821 1049381 reflector.go:127) k8s.io/client-go/informers/factory.go:134: Failed to watch *v1.Service: failed to list *v1.Service: services is forbidden: User "system:anonymous" cannot list resource "services" in API group "" at the cluster scope
E0414 21:23:40.182853 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/kubelet.go:438: Failed to
adesecure.com" is forbidden: User "system:anonymous" cannot list resource "nodes" in API group "" at the cluster scope
E0414 21:23:40.701801 1049381 reflector.go:127) k8s.io/kubernetes/pkg/kubelet/config/apiserver.go:46: Failed to watch *v1.Pod: failed to list *v1.Pod: pods is forbidden: User "system:anonymous" cannot list resource "pods" in API group "" at the cluster scope

(...)

E0414 21:23:43.048320 1049381 event.go:264) Server rejected event '&v1.Event{TypeMeta:v1.TypeMeta{Kind:"", APIVersion:""}, ObjectMeta:v1.ObjectMeta{Name:"**************.1675d6714283a560", GenerateName:"", Namespace:"default", SelfLink:"", UID:"", ResourceVersion:"", Generation:0, CreationTimestamp:v1.Time{Time:time.Time{wall:0x0, ext:0, loc:(*time.Location)(nil)}}, DeletionTimestamp:(*v1.Time)(nil), DeletionGracePeriodSeconds:(*int64)(nil), Labels:map(string)string(nil), Annotations:map(string)string(nil), OwnerReferences:()v1.OwnerReference(nil), Finalizers:()string(nil), ClusterName:"", ManagedFields:()v1.ManagedFieldsEntry(nil)}, InvolvedObject:v1.ObjectReference{Kind:"Node", Namespace:"", Name:"******************", UID:"******************", APIVersion:"", ResourceVersion:"", FieldPath:""}, Reason:"Starting", Message:"Starting kubelet.", Source:v1.EventSource{Component:"kubelet", Host:"******************"}, FirstTimestamp:v1.Time{Time:time.Time{wall:0xc015f537c2b0af60, ext:6495211464, loc:(*time.Location)(0x6cffca0)}}, LastTimestamp:v1.Time{Time:time.Time{wall:0xc015f537c2b0af60, ext:6495211464, loc:(*time.Location)(0x6cffca0)}}, Count:1, Type:"Normal", EventTime:v1.MicroTime{Time:time.Time{wall:0x0, ext:0, loc:(*time.Location)(nil)}},Series:(*v1.EventSeries)(nil), Action:"", Related:(*v1.ObjectReference)(nil), ReportingController:"", ReportingInstance:""}': 'events is forbidden: User "system:anonymous" cannot create resource "events" in API group "" in the namespace "default"' (will not retry!)
E0414 21:23:43.049501 1049381 controller.go:136) failed to ensure node lease exists, will retry in 200ms, error: leases.coordination.k8s.io "******************" is forbidden: User "system:anonymous" cannot get resource "leases" in API group "coordination.k8s.io" in the namespace "kube-node-lease"
E0414 21:23:43.050332 1049381 reflector.go:127) k8s.io/client-go/informers/factory.go:134: Failed to watch *v1.CSIDriver: failed to list *v1.CSIDriver: csidrivers.storage.k8s.io is forbidden: User "system:anonymous" cannot list resource "csidrivers" in API group "storage.k8s.io" at the cluster scope

I have absolutly no logs in kube-apiserver instances.

I already added nodes on other Kubernetes clusters and had no issue.

My guess is that I have something not configured correctly on my cluster, but I don’t know where to look at.

I will be your web developer in php, sql html, Css, jquery, bootstrap or javascript for $50

I will be your web developer in php, sql html, Css, jquery, bootstrap or javascript

I am a well-experienced Web designer and Web developer having 3 years of experience in front-end and back-end development.

Premium & Professional Developer for your Web or App Projects with :

  • HTML / CSS
  • Javascript / jQuery
  • Responsive Design
  • PHP / MySQL
  • bootstrap
  • clean code

I am highly experienced in developing websites

-responsive layout

-SEO friendly

-website security

-great design and graphic (clean, modern, easy to use)-loading time optimization

-code error fixing

please contact me for placing order

I am a well-experienced Web designer and Web developer having 3 years of experience in front-end and back-end development.
Premium & Professional Developer for your Web or App Projects with :

  • HTML / CSS
  • Javascript / jQuery
  • Responsive Design
  • PHP / MySQL
  • WordPress
  • Laravel

I am highly experienced in developing WordPress Websites and my skills include:- WordPress setup and theme installation- Theme development and customization- PSD, Html, Joomla to WordPress conversion- Widgets customization- Plugin installation and customization- Great design and Graphics (Clean, Modern, Easy to use)- SEO tools and integration- Responsive layout- Loading time optimization- All modern browsers compatible- WordPress website security

I am highly experienced in developing WordPress Websites and my skills include:- WordPress setup and theme installation- Theme development and customization- PSD, Html, Joomla to WordPress conversion- Widgets customization- Plugin installation and customization- Great design and Graphics (Clean, Modern, Easy to use)- SEO tools and integration- Responsive layout- Loading time optimization- All modern browsers compatible- WordPress website security

.(tagsToTranslate)php(t)web(t)developer(t)html(t)css(t)javascript(t)bootstrap

reactjs – React Bootstrap component (Form.Control) OnChange event listener doesn’t fire when select all text and delete

I am using Form.Control in form , and when changing the input , I use onChange event listener, to handle the change
as in this snapshot :

<Form.Control
      className="form-control"
      type="text"
      id={props.id}
      defaultValue={props.placeholder}
      onChange={(e) => {
        updateInput(e);
      }}
></Form.Control>

all changes work fine , adding chars , deleting ,,etc ,
But when => Select ALL text and hit backspace , onChange event Listener , isn’t fired !
ps : selecting part of the text and deleting it , fires the onChange .

theming – Is there a simple way to change colors of a site with bootstrap theme?

I’m migrating from drupal 7 to drupal 8.
I’m visually empaired, so, a friend helped me to set colors on drupal 7 with bartic theme and color module.
For my new drupal 8 web site, I want to use bootstrap theme, ’cause is more accessible.
I saved colors code in a .txt file and want to set for my bootstrap theme.
I know I have to use sass for colors, but my firend can’t preview the result.
I’m wondering if there is a way to preview color before inserting them in bootstrap theme: a module, for example, similar to color module.
Can someone help me?

theme development – Use PurgeCSS with WordPress Gulp Dev and Bootstrap

please i need your help to use PurgeCSS with gulp in WordPress theme dev to remove unused styles from Bootstarp.

here my gulpfile.babel.js code

thank you in advance 🙂

import { src, dest, watch, series, parallel } from 'gulp';
import yargs from 'yargs';
import sass from 'gulp-sass';
import Purgecss from 'purgecss';
import purgecssWordpress from 'purgecss-with-wordpress';
import cleanCss from 'gulp-clean-css';
import gulpif from 'gulp-if';
import postcss from 'gulp-postcss';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import del from 'del';
import webpack from 'webpack-stream';
import named from 'vinyl-named';
import browserSync from "browser-sync";
import zip from "gulp-zip";
import info from "./package.json";
import replace from "gulp-replace";
import wpPot from "gulp-wp-pot";
const PRODUCTION = yargs.argv.prod;
const server = browserSync.create();
export const serve = done => {server.init({
  proxy: "https://marulab.local"
});
done();
};
export const reload = done => {
server.reload();
done();
};
export const clean = () => del(('assets'));
export const styles = () => {
return src(('src/scss/style.scss', 'src/scss/admin.scss'))
.pipe(gulpif(!PRODUCTION, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(gulpif(PRODUCTION, postcss(( autoprefixer ))))
.pipe(gulpif(PRODUCTION, cleanCss({compatibility:'ie8'})))
.pipe(gulpif(!PRODUCTION, sourcemaps.write()))
.pipe(dest('assets/css'))
.pipe(server.stream());
}
export const purgeCss = () => {
return src(('assets/css/*.css'))
  .pipe(Purgecss({
    content: ('**/*.php'),
    css: ('assets/css/*.css'),
    safelist: purgecssWordpress.safelist
  }))
  .pipe(dest('assets/css'))
}
export const images = () => {
return src('src/images/**/*.{jpg,jpeg,png,svg,gif}')
.pipe(gulpif(PRODUCTION, imagemin()))
.pipe(dest('assets/images'));
}
export const copy = () => {
return src(('src/**/*','!src/{images,js,scss}','!src/{images,js,scss}/**/*'))
.pipe(dest('assets'));
}
export const scripts = () => {
  return src(('src/js/script.js','src/js/admin.js'))
  .pipe(named())
  .pipe(webpack({
    module: {
    rules: (
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ()
            }
          }
        }
      )
    },
    mode: PRODUCTION ? 'production' : 'development',
    devtool: !PRODUCTION ? 'inline-source-map' : false,
    output: {
      filename: '(name).js'
    },
    externals: {
      jquery: 'jQuery'
    },
  }))
  .pipe(dest('assets/js'));
}
export const compress = () => {
  return src((
    "**/*",
    "!node_modules{,/**}",
    "!bundled{,/**}",
    "!src{,/**}",
    "!.babelrc",
    "!.gitignore",
    "!gulpfile.babel.js",
    "!package.json",
    "!package-lock.json",
  ))
  .pipe(
    gulpif(
      file => file.relative.split(".").pop() !== "zip",
      replace("_themename", info.name)
    )
  )
  .pipe(zip(`${info.name}.zip`))
  .pipe(dest('bundled'));
};
export const pot = () => {
  return src("**/*.php")
    .pipe(
      wpPot({
        domain: "_themename",
        package: info.name
      })
    )
  .pipe(dest(`languages/${info.name}.pot`));
};
export const watchForChanges = () => {
  watch('src/scss/**/*.scss', styles);
  watch('src/images/**/*.{jpg,jpeg,png,svg,gif}', series(images, reload));
  watch(('src/**/*','!src/{images,js,scss}','!src/{images,js,scss}/**/*'), series(copy, reload));
  watch('src/js/**/*.js', series(scripts, reload));
  watch("**/*.php", reload);
} 
export const dev = series(clean, parallel(styles, purgeCss, images, copy, scripts), serve, watchForChanges);
export const build = series(clean, parallel(styles, purgeCss, images, copy, scripts), pot, compress);
export default dev;