Custom Header | Vivek Singh

HTML

CSS

JAVA SCRIPT

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        <div class="body">
                            <div class="buttons-wrapper">
                                <button class="btn active" data-filter="all">All</button>
                                <button class="btn" data-filter="cars">Cars</button>
                                <button class="btn" data-filter="bikes">Bikes</button>
                                <button class="btn" data-filter="plain">Plan</button>
                                <button class="btn" data-filter="railway">Railway</button>
                            </div>
                            <div class="filter-cards-wrapper">
                                <div class="card" data-card="cars">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?car×tamp=1" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Cars</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="bikes cars">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?motorbike×tamp=2" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Bikes</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="plain">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?airplain×tamp=1" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Air Plane</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="railway">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?railway×tamp=1" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Railway</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="cars">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?car×tamp=2" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Cars</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="bikes">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?motorbike×tamp=1" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Bikes</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="plain">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?airplain×tamp=2" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Air Plane</h3>
                                    </div>
                                </div>
                                <div class="card" data-card="railway">
                                    <div class="image">
                                        <img src="https://source.unsplash.com/featured/?railway×tamp=2" alt="">
                                    </div>
                                    <div class="info">
                                        <h3>Railway</h3>
                                    </div>
                                </div>
                            </div>
                        </div>

                                        <img src="https://source.unsplash.com/featured/?motorbike×tamp=2" alt="">

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        .body{
                            padding:50px 50px;
                            max-width: 1300px;
                            margin: auto;
                        }

                        .btn {
                            position: relative;
                            background: linear-gradient(to right, #FF7E5F, #FF057C);
                            color: #fff;
                            border: none;
                            outline: none;
                            border-radius: 3em;
                            font-size: 16px;
                            font-weight: 500;
                            text-transform: uppercase;
                            padding: 10px 40px;
                            z-index: 1;
                            overflow: hidden;
                            cursor: pointer;
                            transition: 0.5s all linear;
                          }
                          
                          .btn::after {
                            position: absolute;
                            content: "";
                            width: 1px;
                            height: 1px;
                            background-color: #fff;
                            transform: translate(-50%, -50%);
                            top: 50%;
                            right: 50%;
                            z-index: -1;
                            transform: scale(-1);
                            border-radius: 50%;
                            transition: 0.5s all linear;
                            visibility: hidden;
                          }
                          
                          .btn:hover::after {
                            visibility: inherit;
                            transform: scale(300);
                          }
                          
                          .btn:hover {
                            color: #000;
                          }
                        
                          .btn.active{
                            color: #000;
                          }
                          .btn.active::after{
                            visibility: inherit;
                            transform: scale(300);
                          }
                          
                        .buttons-wrapper {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 20px;
                            width: 100%;
                            margin-bottom: 30px;
                        }
                    
                        .filter-cards-wrapper {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            gap: 30px;
                        }
                    
                        .card {
                            background-color: #fff;
                            padding: 10px;
                            padding-bottom: 0;
                            border-radius: 25px;
                            border: 1px solid #ddd;
                            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                            text-align: center;
                        }
                    
                        .card h3 {
                            font-size: 20px;
                            line-height: 2em;
                        }
                        .card .image{
                            aspect-ratio: 1/1;
                        }
                        .card .image img {
                            border-radius: 18px;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    
                        .card.blink {
                            animation: blink 0.5s alternate;
                        }
                    
                        @keyframes blink {
                            0% {
                                transform: scale(.5);
                            }
                    
                            100% {
                                transform: scale(1);
                            }
                        }

                        @media (max-width: 1024px){
                            .filter-cards-wrapper {
                                grid-template-columns: repeat(2, 1fr);
                            }
                            .buttons-wrapper{
                                flex-wrap: wrap;
                                gap: 10px;
                                justify-content: space-between;
                            }
                        }

                        @media (max-width: 480px){

                            .body{
                                padding: 25px;
                            }
                            
                            .filter-cards-wrapper {
                                grid-template-columns: 1fr;
                            }
                            .buttons-wrapper{
                                display: block;
                            }
                            .btn{
                                margin: 5px;
                                display: inline;
                            }
                        }

xxxxxxxxxx
 
​
                        .body{
                            padding:50px 50px;
                            max-width: 1300px;
                            margin: auto;
                        }
​
                        .btn {
                            position: relative;
                            background: linear-gradient(to right, #FF7E5F, #FF057C);
                            color: #fff;
                            border: none;
                            outline: none;
                            border-radius: 3em;
                            font-size: 16px;
                            font-weight: 500;
                            text-transform: uppercase;
                            padding: 10px 40px;
                            z-index: 1;
                            overflow: hidden;
                            cursor: pointer;
                            transition: 0.5s all linear;

Copy Code

If Code is not visible please click on HIGHLIGHT area

                        const filterButtons = document.querySelectorAll('.btn');
                        const productItems = document.querySelectorAll('.card');
                
                        const filterItems = filter => {
                            productItems.forEach(item => {
                                const itemCategories = item.getAttribute('data-card');
                                item.style.display = (filter === 'all' || itemCategories.includes(filter)) ? 'block' : 'none';
                                item.classList.add('blink');
                                setTimeout(() => item.classList.remove('blink'), 500);
                            });
                        };
                
                        filterButtons.forEach(button => {
                            button.addEventListener('click', function () {
                                filterButtons.forEach(btn => btn.classList.remove('active'));
                                this.classList.add('active');
                                filterItems(this.getAttribute('data-filter'));
                            });
                        });

                                item.style.display = (filter === 'all' || itemCategories.includes(filter)) ? 'block' : 'none';