'How to change html, body in CSS to class?

I made a swiper vertical where in CSS there is html, body how do I change html, body to class? I've tried changing the html,body to class but when it is run on the screen nothing appears but only white color, how do I fix it? With html,body With html,body With class With class In the previous .feature class the class was body, I managed to change it, but I couldn't change it in html,body

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  pagination: {
    el: ".swiper-pagination",
  },
});
html,
body {
  position: relative;
  height: 100%;
}

.feature {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  position: relative;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text-feature {
  text-align: center;
  position: relative;
  top: 40%;
  left: 30%;
  -ms-transform: translate(-40%, -30%);
  transform: translate(-40%, -30%);
}

.title-icon {
  text-align: left;
  font-weight: bold;
  font-size: 50px;
  line-height: 5vw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  ;
}

.desc-icon {
  text-align: right;
  color: #707070;
  font-family: Poppins;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Swiper -->

<div class="feature swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="row ">
        <div class="col">
          <img class="img-logo" src="image/eat.png">
        </div>
        <div class="col">
          <div class="text-feature">
            <h3 class="title-icon">Eat & Come</h3>
            <p class="desc-icon">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions