<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cute Sliding Cards</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background"></div>
    <div class="heading">A Special Message Just For You!</div>
    <div class="slider">
        <div class="slides">
            <div class="slide">
                <h2>Slide Me</h2>
            </div>
            <div class="slide">
                <h2>You're Awesome!</h2>
                <p>Your smile brightens up my day!</p>
            </div>
            <div class="slide">
                <h2>Stay Amazing!</h2>
                <p>Every moment with you is precious.</p>
            </div>
            <div class="slide">
                <h2>How Can Anyone Be This Cute?</h2>
                <p>Seriously, you're adorable!</p>
            </div>
            <div class="slide">
                <h2>You're Special!</h2>
                <p>Thank you for being in my life.</p>
            </div>
            <div class="slide">
                <h2>You're Loved!</h2>
                <p>Never forget how much you mean to me.</p>
            </div>
            <div class="slide">
                <h2>Text Me ;)</h2>
                <p>I'd love to hear from you!</p>
            </div>
        </div>
        <div class="navigation">
            <button onclick="prevSlide()">&#10094;</button>
            <button onclick="nextSlide()">&#10095;</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    background: linear-gradient(to right, #ffecd2, #fcb69f);
    font-family: 'Comic Sans MS', cursive, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/heart-pattern.png');
    opacity: 0.2;
}
.heading {
    font-size: 32px;
    color: #ff6f61;
    margin-bottom: 20px;
    text-align: center;
}
.slider {
    position: relative;
    width: 80%;
    max-width: 600px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.slides {
    display: flex;
    width: 700%; /* Adjusted width to accommodate 7 slides */
    transition: margin-left 0.5s;
}
.slide {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    box-sizing: border-box;
}
.slide h2 {
    font-size: 24px;
    color: #ff6f61;
}
.slide p {
    font-size: 18px;
    color: #ff6f61;
    text-align: center;
}
.navigation {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.navigation button {
    background: #ff6f61;
    border: none;
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.navigation button::after {
    content: "♥";
    position: absolute;
    bottom: -20px; /* Positioning the heart at the bottom, half on and half off */
    left: 50%;
    transform: translateX(-50%);
    font-size: 48px; /* Larger, anime-style heart */
    color: #ff6f61;
}

let currentIndex = 0;
function showSlide(index) {
    const slides = document.querySelector('.slides');
    const totalSlides = document.querySelectorAll('.slide').length;
    if (index >= totalSlides) {
        currentIndex = 0;
    } else if (index < 0) {
        currentIndex = totalSlides - 1;
    } else {
        currentIndex = index;
    }
    slides.style.marginLeft = `-${currentIndex * 100}%`;
}

function nextSlide() {
    showSlide(currentIndex + 1);
}

function prevSlide() {
    showSlide(currentIndex - 1);
}

showSlide(currentIndex);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.