How to create Scrolling Card Using HTML CSS Only

How to create Scrolling Card Using HTML CSS Only | HTML CSS Tutorials

Hello guys in this post i share how to create scrolling card or horizontal scrolling card using html css.

i am used snap scroll property of css to create this horizontal scroll card.

you can use this concept to create horizontal websites, horizontal and vertical sliders by using html css only.

this complete video tutorial is on my YouTube Chennal.

please like share and subscribe my youtube channel.

here are the Source code for Scrolling Card.

HTML CODE HERE 👇

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Scrolling Card</title>
</head>
<body>
    <div class="container">
        <section class="scroll-card">
            <div class="card one">
                <h2>Learn HTML</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Asperiores vero sed magni assumenda quod ducimus.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card two">
                <h2>Learn HTML</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Asperiores vero sed magni assumenda quod ducimus.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card three">
                <h2>Learn HTML</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Asperiores vero sed magni assumenda quod ducimus.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card four">
                <h2>Learn HTML</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Asperiores vero sed magni assumenda quod ducimus.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="card five">
                <h2>Learn HTML</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Asperiores vero sed magni assumenda quod ducimus.</p>
                <a href="#">Learn More</a>
            </div>
        </section>
    </div>
    
</body>
</html>

CSS CODE HERE 👇

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #240046;
}

.scroll-card{
    background: linear-gradient(to bottom, #c4a287, #7a82ab);
    display: flex;
    gap: 20px;
    width: 400px;
    overflow-x: scroll;
    padding: 20px 30px 10px 30px;
    border-radius: 20px 20px 10px 10px;
    scroll-snap-type: x mandatory;
    scroll-padding: 30px;
}

.scroll-card .card{
    flex: 0 0 100%;
    color: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    scroll-snap-align: start;
}

.scroll-card .card.one{
    background: linear-gradient(#a4133c, #ff758f);
}

.scroll-card .card.two{
    background: linear-gradient(#3a5a40, #a3b18a);
}

.scroll-card .card.three{
    background: linear-gradient(#1b4332, #40916c);
}

.scroll-card .card.four{
    background: linear-gradient(#0b2545, #134074 );
}

.scroll-card .card.five{
    background: linear-gradient(#582f0e, #a68a64 );
}

.scroll-card .card h2{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 25px;
}
.scroll-card .card p{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 30px;
}

.scroll-card .card a{
    text-decoration: none;
    color: #121212;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.2s ease;
    cursor: pointer;
}

.scroll-card .card a:hover{
    letter-spacing: 1px;
}

.scroll-card::-webkit-scrollbar{
    height: 10px;
}
.scroll-card::-webkit-scrollbar-track{
    background-color: 0096c7;
    border-radius: 0 0 20px 20px;
}
.scroll-card::-webkit-scrollbar-thumb{
    background-color: rgb(235, 19, 91);
    border-radius: 10px;

}