javascript - Bootstrap 4着陆页添加到右侧图像不能正确放置

Question

我试图将bootstrap 4我的示例项目添加到右侧背景，对此我有一些冲突，我试图将其右侧，它不起作用，任何人都知道如何正确地做到这一点

谢谢

// Navbar scroll js //

jQuery(function($) {
    "use strict";

        // get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
        var mainbottom = $('#main').offset().top;

        // on scroll,
        $(window).on('scroll',function(){

        // we round here to reduce a little workload
        stop = Math.round($(window).scrollTop());
        if (stop > mainbottom) {
            $('.navbar').addClass('past-main');
            $('.navbar').addClass('effect-main')
        } else {
            $('.navbar').removeClass('past-main');
       }

      });


  // Collapse navbar on click

   $(document).on('click.nav','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
    $(this).removeClass('in').addClass('collapse');
   }
  });


    /*-----------------------------------
    ----------- Scroll To Top -----------
    ------------------------------------*/

    $(window).on('scroll', function () {
      if ($(this).scrollTop() > 1000) {
          $('#back-top').fadeIn();
      } else {
          $('#back-top').fadeOut();
      }
    });
    // scroll body to 0px on click
    $('#back-top').on('click', function () {
      $('#back-top').tooltip('hide');
      $('body,html').animate({
          scrollTop: 0
      }, 1500);
      return false;
    });




  /* ------ jQuery for Easing min -- */

    // Smooth scrolling using jQuery easing
    $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: (target.offset().top - 54)
          }, 1000, "easeInOutExpo");
          return false;
        }
      }
    });

    // Closes responsive menu when a scroll trigger link is clicked
    $('.js-scroll-trigger').on('click', function () {
      $('.navbar-collapse').collapse('hide');
    });

    // Activate scrollspy to add active class to navbar items on scroll
    $('body').scrollspy({
      target: '#mainNav',
      offset: 54
    });










});

/*----- Main Classes -----*/

html * {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}





/* --- Font Styles ---*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat';
    font-size: 16px;
}

p {
    font-family: 'Montserrat';
    font-size: 14px;
}






/*------  Navbar Styling ------*/

.navbar {
    font-family: sans-serif;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: transparent !important;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

.navbar .navbar-brand {
    font-size: 1.1rem;
    font-weight: 600;
    color: #563D7C;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar span.navbar-toggler-icon::before {
    outline: none;
}

.navbar .navbar-toggler:focus {
    outline: none;
}

.navbar-nav {
    text-align: center;
    margin-top: 15px;
    -webkit-transition: 0.5s all ease; /* For Safari 3.1 to 6.0 */
    transition: 0.5s all ease;
}

.navbar-nav .nav-item {
    margin-right: 0;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: capitalize;
    color: #563D7C;
}

.navbar-nav .nav-item .nav-link {
    color: #563D7C;
    font-weight: 500;
}

.nav-white .nav-item .nav-link {
    font-size: 0.9rem;
    text-transform: capitalize;
    color: #FFFFFF;
}

.nav-white .nav-item .nav-link:hover {
    color: #F1F1F1;
}

.nav-white .navbar-brand {
    color: #FFFFFF;
}

@media only screen and (max-width: 768px) {

    .navbar {
        background: rgba(255, 255, 255, 0.99) !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .nav-white .navbar-brand {
        color: #4957B8;
    }
    .nav-white .nav-item .nav-link {
        color: #4957B8;
    }
}

@media only screen and (min-width: 240px) {

    .navbar.past-main {
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: rgba(255, 255, 255, 0.99) !important;
        -webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
        -moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
        box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
    }

    .navbar.effect-main {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }


    .nav-white.past-main .nav-item .nav-link {
        color: #4957B8;
        font-weight: 500;
    }

    .navbar.past-main .nav-item .nav-link {
        font-weight: 500;
    }

    .nav-white.past-main .navbar-brand {
        color: #4957B8;
    }

    .nav-white.effect-main {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    /*----------------------------------------------------------
    --------------- 3. Hero Home Styling Starts -------------------
    ----------------------------------------------------------*/

    .home-section h4 {
        font-family: 'Open Sans';
        font-size: 12px;
        font-weight: 500;
        color: #b2bcc1;
        text-transform: uppercase;
        line-height: 1.2;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .home-section img {
        margin-top: 50px;
    }


    .hero-home h1 {
        font-size: 32px;
        font-weight: 700;
        color: #FFFFFF;
        color: #FFF;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .home-section h1 {
        font-size: 28px;
        font-weight: 700;
        color: #364655;
        color: #FFF;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .hero-home p {
        font-size: 14px;
        font-weight: 300;
        color: #EFEFEF;
        color: #FFF;
        line-height: 1.6;
        letter-spacing: 1px;
        margin-top: 20px;
    }

    .home-section p {
        font-size: 14px;
        font-weight: 300;
        color: #627382;
        color: #FFF;
        line-height: 1.6;
        letter-spacing: 1px;
        margin-top: 20px;
    }

    /*---------- home-section Styling --------------- */
    .home-section {
        padding: 100px 0 50px 0 !important;
        background:#4529f9 ;height: 100vh;
        min-height: 40rem;
        padding-top: 72px;
        padding-bottom: 0;
    }

    .home-section .home-content {
        text-align: center;
    }











    /*-----------------------------------------------------------------
    ------------------  Media Queries  -------------------
    -----------------------------------------------------------------*/
    @media only screen and (min-width: 767px) {

        .navbar-nav {
            margin-top: 0;
        }

        .navbar-nav .nav-item {
            margin-top: 0;
            margin-right: 15px;
            font-size: 0.85rem;
            font-weight: 400;
        }


        .home-split .home-left {
            padding: 200px 20px 150px 20px;
        }

        .home-section {
            padding: 150px 0 150px 0 !important;
        }

        .home-section.col-sm-5 {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 50%;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
}


.banner-one {



    width: 100%;

    background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
    background-repeat: no-repeat;
    height: 880px;
    position: relative;
    overflow: hidden;


    background-size: 68%;
    background-position: top right;



}

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Landing Page</title>
    <!-- Bootstrap , Main CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   

    <!-- fontawesome kit -->
    <script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>

</head>
<body>
<!---Nav bar section--->

<div class="wrapper">
    <div class="container">
        <nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">Label</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto navbar-right">
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

</div>

<!---End of Nav bar section--->


<!---Home section--->
<div id="main" class="main">
    <div class="home-land home-section">
        <div class="container">
            <div class="row align-center">
                <div class="col-md-6 col-lg-6">
                    <div class="home-content">
                        <h4>Label for your big data needs</h4>
                        <h1>Manage all your data at just one place</h1>
                        <p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
                        <div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
                            <form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
                                <input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
                            </form>
                            <div id="response"></div>
                        </div>
                        <div class="form-note">
                            <p>14-day free trial and no credit card required.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 offset-lg-1">
                    <img src="http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png" class="banner-one">
                </div>


                <div class=""></div>
            </div>
        </div>
    </div>



    <!---End of Home section--->







</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



</body>
</html>

Answer 1

我删除了图像并将横幅类添加到根div。
还将横幅类更改为：

.banner-one {
background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

// Navbar scroll js //

jQuery(function($) {
  "use strict";

  // get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
  var mainbottom = $('#main').offset().top;

  // on scroll,
  $(window).on('scroll', function() {

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
      $('.navbar').addClass('past-main');
      $('.navbar').addClass('effect-main')
    } else {
      $('.navbar').removeClass('past-main');
    }

  });


  // Collapse navbar on click

  $(document).on('click.nav', '.navbar-collapse.in', function(e) {
    if ($(e.target).is('a')) {
      $(this).removeClass('in').addClass('collapse');
    }
  });


  /*-----------------------------------
  ----------- Scroll To Top -----------
  ------------------------------------*/

  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 1000) {
      $('#back-top').fadeIn();
    } else {
      $('#back-top').fadeOut();
    }
  });
  // scroll body to 0px on click
  $('#back-top').on('click', function() {
    $('#back-top').tooltip('hide');
    $('body,html').animate({
      scrollTop: 0
    }, 1500);
    return false;
  });




  /* ------ jQuery for Easing min -- */

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 54)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

  // Closes responsive menu when a scroll trigger link is clicked
  $('.js-scroll-trigger').on('click', function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Activate scrollspy to add active class to navbar items on scroll
  $('body').scrollspy({
    target: '#mainNav',
    offset: 54
  });










});

/*----- Main Classes -----*/

html * {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* --- Font Styles ---*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat';
  font-size: 16px;
}

p {
  font-family: 'Montserrat';
  font-size: 14px;
}


/*------  Navbar Styling ------*/

.navbar {
  font-family: sans-serif;
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: transparent !important;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
}

.navbar .navbar-brand {
  font-size: 1.1rem;
  font-weight: 600;
  color: #563D7C;
}

.navbar .navbar-toggler {
  border: none;
}

.navbar span.navbar-toggler-icon::before {
  outline: none;
}

.navbar .navbar-toggler:focus {
  outline: none;
}

.navbar-nav {
  text-align: center;
  margin-top: 15px;
  -webkit-transition: 0.5s all ease;
  /* For Safari 3.1 to 6.0 */
  transition: 0.5s all ease;
}

.navbar-nav .nav-item {
  margin-right: 0;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: capitalize;
  color: #563D7C;
}

.navbar-nav .nav-item .nav-link {
  color: #563D7C;
  font-weight: 500;
}

.nav-white .nav-item .nav-link {
  font-size: 0.9rem;
  text-transform: capitalize;
  color: #FFFFFF;
}

.nav-white .nav-item .nav-link:hover {
  color: #F1F1F1;
}

.nav-white .navbar-brand {
  color: #FFFFFF;
}

@media only screen and (max-width: 768px) {
  .navbar {
    background: rgba(255, 255, 255, 0.99) !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav-white .navbar-brand {
    color: #4957B8;
  }
  .nav-white .nav-item .nav-link {
    color: #4957B8;
  }
}

@media only screen and (min-width: 240px) {
  .navbar.past-main {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.99) !important;
    -webkit-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
    -moz-box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
    box-shadow: 0 1px 5px 0 rgba(96, 96, 96, 0.3);
  }
  .navbar.effect-main {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .nav-white.past-main .nav-item .nav-link {
    color: #4957B8;
    font-weight: 500;
  }
  .navbar.past-main .nav-item .nav-link {
    font-weight: 500;
  }
  .nav-white.past-main .navbar-brand {
    color: #4957B8;
  }
  .nav-white.effect-main {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  /*----------------------------------------------------------
    --------------- 3. Hero Home Styling Starts -------------------
    ----------------------------------------------------------*/
  .home-section h4 {
    font-family: 'Open Sans';
    font-size: 12px;
    font-weight: 500;
    color: #b2bcc1;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  .home-section img {
    margin-top: 50px;
  }
  .hero-home h1 {
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    color: #FFF;
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .home-section h1 {
    font-size: 28px;
    font-weight: 700;
    color: #364655;
    color: #FFF;
    line-height: 1.2;
    letter-spacing: -1px;
  }
  .hero-home p {
    font-size: 14px;
    font-weight: 300;
    color: #EFEFEF;
    color: #FFF;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-top: 20px;
  }
  .home-section p {
    font-size: 14px;
    font-weight: 300;
    color: #627382;
    color: #FFF;
    line-height: 1.6;
    letter-spacing: 1px;
    margin-top: 20px;
  }
  /*---------- home-section Styling --------------- */
  .home-section {
    padding: 100px 0 50px 0 !important;
    background: #4529f9;
    height: 100vh;
    min-height: 40rem;
    padding-top: 72px;
    padding-bottom: 0;
  }
  .home-section .home-content {
    text-align: center;
  }
  /*-----------------------------------------------------------------
    ------------------  Media Queries  -------------------
    -----------------------------------------------------------------*/
  @media only screen and (min-width: 767px) {
    .navbar-nav {
      margin-top: 0;
    }
    .navbar-nav .nav-item {
      margin-top: 0;
      margin-right: 15px;
      font-size: 0.85rem;
      font-weight: 400;
    }
    .home-split .home-left {
      padding: 200px 20px 150px 20px;
    }
    .home-section {
      padding: 150px 0 150px 0 !important;
    }
    .home-section.col-sm-5 {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
}

.banner-one {
  background-image: url(http://brotherslab.thesoftking.com/html/lotten/demo/assets/images/shape/banner-one.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Landing Page</title>
  <!-- Bootstrap , Main CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


  <!-- fontawesome kit -->
  <script src="https://kit.fontawesome.com/04ca3524f6.js" crossorigin="anonymous"></script>

</head>

<body>
  <!---Nav bar section--->

  <div class="wrapper">
    <div class="container">
      <nav class="navbar navbar-expand-md nav-white navbar-light bg-light fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#">Label</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto navbar-right">
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#main">Home</a></li>
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Features</a></li>
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#pricing">Pricing</a></li>
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
              <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Buy Now</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

  </div>

  <!---End of Nav bar section--->


  <!---Home section--->
  <div id="main" class="main">
    <div class="home-land home-section banner-one">
      <div class="container">
        <div class="row align-center">
          <div class="col-md-6 col-lg-6">
            <div class="home-content">
              <h4>Label for your big data needs</h4>
              <h1>Manage all your data at just one place</h1>
              <p>Best in class big data software and analytics services will render your chunks into meaningful data.</p>
              <div class="subform subform-alt wow fadeInDown" data-wow-delay="0.3s">
                <form id="signup" class="formee formee-alt" action="assets/php/subscribe.php" method="post">
                  <input name="email" id="email" type="text" /><input class="right inputnew" type="submit" title="Send" value="Get Access" />
                </form>
                <div id="response"></div>
              </div>
              <div class="form-note">
                <p>14-day free trial and no credit card required.</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-6 offset-lg-1">
          </div>


          <div class=""></div>
        </div>
      </div>
    </div>



    <!---End of Home section--->







  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



</body>

</html>