Reiner horizontaler Slider mit verschiebbarem Menü

1102 Andev.web

Im Editor öffnen Veröffentlichen Sie Ihren Code Brauchen Sie eine Website?

Reiner horizontaler Slider mit verschiebbarem Menü

Empfohlen

16 January 2025

F1-Fahrer 2024 - kreisförmige Galerie mit Daumen

1 July 2025

Modernes Kontaktformular mit Farbverlauf

14 May 2025

Spendensystem mit mehreren Beträgen

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="profile-card">
  <h1>Castle</h1>
  <div class="wrapper">
    <div class="outer">
      <div class="card" style="--delay:-1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1652466102358-7fc44c47bb94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:0;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1556621595-6dd9502e265e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1580677616212-2fa929e9c2cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1605887123413-2275edbe6dfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>

</div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1599587997303-86d4294c5df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="menu-btn">
    <i class="fas fa-bars"></i>
  </button>
  <h2>Popular</h2>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Lakes">

<div class="content">
      <h3>Lakes</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Lakes are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountains">

<div class="content">
      <h3>Mountains</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Mountains are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="more">
    <h2>Neuschwanstein</h2>
    <div class="tags">
      <span class="tag">
        castle
      </span>
      <span class="tag">germany</span>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias velit a incidunt, placeat accusantium deleniti sapiente amet laborum sit nihil maiores, nisi quaerat sunt nulla harum! Laboriosam fuga, modi, nisi velit sint unde ducimus dolor sit totam praesentium libero. Sequi aperiam doloribus rem deserunt alias vel. Corrupti at excepturi inventore veniam ullam accusantium laborum est nulla voluptatibus voluptates similique voluptatem eaque autem hic aliquam.</p>
    <ul class="icons">
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
          </svg>
        </a></li>
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
          </svg>
        </a>
      </li>
      <li>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
          </svg>
        </a>
      </li>
    </ul>
  </div>
</div>

  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f0f0;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-card {
  position: relative;
  width: 18em;
  background: #fff;
  box-shadow: 0 0 5em rgba(0, 0, 0, 0.2);
  padding: 2em 1em;
  overflow: hidden;
  border-radius: 0.7em;
}
.profile-card .profile-img {
  position: absolute;
  top: 5em;
  left: 50%;
  transform: translatex(-50%);
  width: 11em;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 1rem;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.profile-card h1 {
  font-size: 1.5rem;
}
.profile-card p {
  margin: 0.2em 0;
  color: #b8b8b8;
}
.profile-card h2 {
  margin-top: 16em;
  margin-bottom: 0.8em;
  font-size: 1.2rem;
}
.profile-card .popular + .popular {
  margin-top: 1em;
}
.profile-card .popular {
  position: relative;
  cursor: pointer;
  z-index: 0;
}
.profile-card .popular:before {
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 0.6rem;
}
.profile-card .popular img {
  width: 100%;
  position: relative;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.6rem;
  display: block;
  top: 0;
  transition: 0.5s ease-in-out;
}
.profile-card .popular .content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-card .popular .content h3 {
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
}
.profile-card .popular .content p {
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.4;
  height: 0;
  overflow: hidden;
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
  margin-top: 0;
}
.profile-card .popular .content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.profile-card .popular .content ul li i {
  color: #d9d9d9;
  font-size: 0.565rem;
}
.profile-card .menu-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  position: absolute;
  top: 1.6em;
  right: 1em;
  z-index: 556;
}
.profile-card .more {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 0;
  z-index: 555;
  overflow: hidden;
  color: #fff;
  padding: 0 1.5em;
  transition: 0.5s ease-in;
  background: rgba(0, 0, 0, 0.8);
}
.profile-card .more .tags {
  display: flex;
  align-items: center;
  gap: 0.625em;
  flex-wrap: wrap;
}
.profile-card .more .tags .tag {
  background: #5e5e5e;
  padding: 0.3125em 0.625em;
  border-radius: 0.3125em;
  font-size: 0.8rem;
  text-transform: capitalize;
}
.profile-card .more h2 {
  margin: 1em 0 0.5em;
}
.profile-card .more p {
  margin: 1.5em 0;
  color: #d6d6d6;
  line-height: 1.4;
}
.profile-card .more .icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
}
.profile-card .more .icons svg {
  width: 1.125rem;
  color: #fff;
}

.profile-card ::-webkit-scrollbar {
  width: 8px;
}

.profile-card ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.profile-card ::-webkit-scrollbar-thumb {
  background: #fff;
}

.profile-card ::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}

.popular.opened img {
  height: 12rem;
}
.popular.opened .content p {
  height: auto;
  margin-top: 10px;
}

.menu-btn.opened {
  color: #fff;
  background: #111;
  padding: 0.2em 0.4em;
}

.overlay.opened {
  height: 100%;
}

.more.opened {
  padding: 4em 1.5em 1.5em 1.5em;
  height: 100%;
  overflow-y: scroll;
}

.wrapper .card.opened {
  animation-play-state: paused;
}

.wrapper .outer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card {
  background: #fff;
  width: 140px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.wrapper .card:last-child {
  animation-delay: calc(-3s * var(--delay));
}
.wrapper .card a {
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  transition: all 0.3s ease;
}
.wrapper .card a:hover {
  transform: scale(0.94);
}
.wrapper .card .img {
  height: 16em;
  width: 11em;
  position: absolute;
  top: 1.5em;
  right: 5em;
  border-radius: 1.2em;
  box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.wrapper .card .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.outer:hover .card {
  animation-play-state: paused;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.5);
  }
  5%, 20% {
    opacity: 0.4;
    transform: translateX(100%) scale(0.7);
    pointer-events: none;
  }
  25%, 40% {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0%) scale(1);
  }
  45%, 60% {
    opacity: 0.4;
    transform: translateX(-100%) scale(0.7);
    pointer-events: none;
  }
  65%, 100% {
    opacity: 0;
    transform: translateX(-100%) scale(0.5);
  }
}

Empfohlen

F1-Fahrer 2024 - kreisförmige Galerie mit Daumen

Modernes Kontaktformular mit Farbverlauf

Spendensystem mit mehreren Beträgen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS