Terms and Conditions

By signing up and using our platform, you agree to the collection, use, and protection of your personal information in accordance with our policies. This includes:

- Your name (first, middle, and last)

- Your email address

- Your organization details

- Your account type (student or educator)

- Any uploaded profile pictures

- Your interactions with tutorials, exercises, and classes

This data is collected to:

- Create and manage your account

- Facilitate participation in classes and exercises

We store this data securely and will not share it with third parties, except with your consent or when required by law. The data is retained for as long as you maintain an account on our platform.

Your Rights

In accordance with the Data Privacy Act of 2012, you have the right to:

- Be informed of how your data is collected and used

- Access and correct your data

- Request the deletion of your data

- Request portability of your data

To exercise any of these rights, please contact us at visualwebbits@gmail.com.

Data Security

We use encryption and security best practices to protect your data. However, no method of transmission over the internet is 100% secure.

By using our platform, you acknowledge that you have read and understood this Data Privacy Statement and agree to the collection and use of data as described.

Live Source Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Image Slider</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="slider">
        <div
          class="slides"
          style="--img: url('https://i.imgur.com/3OKR1PA.jpg')"
        >
          <div class="content">
            <h2>Favonius Cathedral</h2>
            <p>
              The spectacular statue of the Anemo Archon and the Favonius
              Cathedral are wonders to behold, but one is left to wonder whether
              it is necessary for the city, which has been taught the idea of
              freedom by the Anemo Archon himself, to exhaust its wealth on a
              cathedral so grandiose./p>
            </p>
          </div>
        </div>
        <div class="slides" style="--img: url('https://imgur.com/kM74epY.jpg')">
          <div class="content">
            <h2>Mt. Yougou</h2>
            <p>
              The largest shrine in Inazuma, located at the peak of Mt. Yougou.
              It is dedicated to Her Excellency, the Almighty Narukami Ogosho.
              For those who have wishes, they can climb to the top of the
              mountain one step at a time.
            </p>
          </div>
        </div>
        <div class="slides" style="--img: url('https://imgur.com/hY7apUx.jpg')">
          <div class="content">
            <h2>Liyue</h2>
            <p>
              A bountiful harbor that lies in the east of Teyvat. Mountains
              stand tall and proud alongside the stone forest, that, together
              with the open plains and lively rivers, make up Liyue's bountiful
              landscape, which shows its unique beauty through each of the four
              seasons.
            </p>
          </div>
        </div>
        <div class="slides" style="--img: url('https://imgur.com/P9ykivE.jpg')">
          <div class="content">
            <h2>Yilong Wharf</h2>
            <p>
              If one follows the Bishui River upstream, the prosperous merchant
              port built next to a vast waterfall will come into view. Here, the
              laughter of countless sailors and merchants and the calls of
              people buying and selling on every street form a unique scenic
              tapestry here at Liyue's northern edge.
            </p>
          </div>
        </div>
        <div class="slides" style="--img: url('https://imgur.com/m7cFFeN.jpg')">
          <div class="content">
            <h2>Qiaoying Village</h2>
            <p>
              When the gentle spring sun and winds caress the mountains of
              Chenyu, there will the rich fragrance of tea be accompanied by the
              dance of the Spiritscent Flower, drifting together through
              peaceful streets...
            </p>
          </div>
        </div>
        <div class="slides" style="--img: url('https://imgur.com/jwjO029.jpg')">
          <div class="content">
            <h2>Opera Epiclese</h2>
            <p>
              A large opera house situated in Erinnyes that also serves as the
              symbol of trials and judgment. The true and the fantastical, the
              comedic and tragic find a stage here equally. Perhaps it truly is
              as an ancient Fontainian playwright once said — "All the world's a
              stage, and all of us merely players."
            </p>
          </div>
        </div>
      </div>
      <div class="buttons">
        <span class="prev"></span>
        <span class="next"></span>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
}
.container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider {
  position: absolute;
  inset: 80px 200px 80px 80px;
}
.slider .slides {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 320px;
  transition: 0.5s;
  background: var(--img);
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  background-position: center;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.slider .slides:nth-child(1),
.slider .slides:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  width: 100%;
  height: 100%;
  margin: 0px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0);
  background-size: cover;
}
.slider .slides:nth-child(3) {
  left: calc(50% + 240px);
  background-size: cover;
}
.slider .slides:nth-child(4) {
  left: calc(50% + 500px);
  background-size: cover;
}
.slider .slides:nth-child(5) {
  left: calc(50% + 760px);
  background-size: cover;
}
.slider .slides:nth-child(6) {
  left: calc(50% + 1020px);
  background-size: cover;
  opacity: 0;
}
.slider .slides img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.buttons {
  position: absolute;
  bottom: 15px;
  display: flex;
  gap: 20px;
}
.buttons span {
  position: relative;
  width: 50px;
  height: 50px;
  background: #111;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.buttons span::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(315deg) translate(2px, 2px);
}
.buttons span:nth-child(2):before {
  transform: rotate(135deg) translate(2px, 2px);
}
.buttons span:active {
  opacity: 0.5;
}
.content {
  position: relative;
  padding: 40px;
  max-width: 600px;
  opacity: 0;
  transition: 0.25s;
  transition-delay: 0s;
  transform: translateY(40px);
  z-index: 1000;
}
.content h2 {
  font-size: 4em;
  color: #fff;
}
.content p {
  color: #fff;
}
.slider .slides:nth-child(1) .content,
.slider .slides:nth-child(2) .content {
  opacity: 1;
  transition-delay: 0.5s;
  transform: translateY(0px);
}
@media (max-width: 900px) {
  .slider {
    position: absolute;
    inset: 40px 40px 200px 40px;
  }

.slider .slides {
    width: 100px;
    height: 100px;
    bottom: -170px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  }
  .slider .slides:nth-child(1),
  .slider .slides:nth-child(2) {
    top: initial;
    bottom: 0px;
  }
  .slider .slides:nth-child(3) {
    left: 0;
    top: initial;
    background-size: cover;
  }
  .slider .slides:nth-child(4) {
    left: 120px;
    top: initial;
    background-size: cover;
  }
  .slider .slides:nth-child(5) {
    left: 240px;
    top: initial;
    background-size: cover;
  }
  .slider .slides:nth-child(6) {
    left: 360px;
    top: initial;
    background-size: cover;
  }
}

Live Source Code

HTML

CSS

JS

Poster Image slider

Live Preview

Sign Up

Login

Terms and Conditions

Your Rights

Data Security

Live Source Code

HTML

CSS

JS

Poster Image slider

Live Preview

Poster Image slider

HTML Explanation

CSS Explanation

Javascript Explanation

HTML

CSS

JavaScript

Combine Tutorial

Oh no!😱