👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️
Tags: freecodez, react, html, blog
Published: 2023-10-25 01:14:41

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️**

![👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️](https://res.cloudinary.com/freecodez/image/upload/v1698196407/images/pnsdpal0ux5vqarj114f.webp)

For full source code visit : [https://freecodez.com/post/2r2x6jq](https://freecodez.com/post/2r2x6jq)


```
<!-- https://freecodez.com -->
<section class="parallax">
    <h2 id="title">Happy Halloween</h2>
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9648a7a2-03fe-4b48-b7ab-195ec34ac6a6" id="leftside" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5c125b01-3bda-46ed-87bf-f64a9cc39d9b" id="rightside" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/8102d1ed-0b60-40b6-a38a-75600c1c9c75" id="moon" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5c7a5d00-501e-4f2b-b31a-0d0e2dac47e5" id="bottom" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b8c09600-d3c2-4eab-a3e1-4f9a75d14331" id="leftpumpkin" alt="halloween" />
    <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/dc895daa-7d0c-4b65-946c-36faecc1d78e" id="rightpumpkin" alt="halloween" />
</section>

<section class="blog">
    <h3>Activities</h2>

        <!-- Swiper -->
        <div style="--swiper-pagination-color: #fff" class="swiper">
            <div class="parallax-bg" data-swiper-parallax="-23%"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Ghastly Ghost Tours" data-swiper-parallax="-500">
                            Ghastly Ghost Tours
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Explore the dark history of Ravenwood Manor with guided tours
                                through its haunted halls. Who knows what you might encounter
                                in the shadowy corners?
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/943f5f64-3718-4d72-b4d0-d9f5a2b8af8e" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Wicked Costume Contest" data-swiper-parallax="-500">
                            Wicked Costume Contest
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Dress to impress in your most scary, creative, or weird
                                Halloween costume. Prizes will be awarded to the best-dressed
                                attendees.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/78ccffdf-c873-486b-ada5-55e4cc0d4fb9" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Spooky Dance Floor" data-swiper-parallax="-500">
                            Spooky Dance Floor
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Dance the night away to hauntingly good tunes from our live
                                DJ, under the dim glow of scary candlelight.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3b936c77-625f-4587-bf1c-368a2074eb06" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Sinister Snacks" data-swiper-parallax="-500">
                            Sinister Snacks
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Satisfy your taste buds with a variety of spooky-themed snacks
                                and refreshments at our chillingly delightful food stalls.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e0adf8a6-c25e-4f15-bab9-5f4a41a5063f" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Scary Movie Screening" data-swiper-parallax="-500">
                            Scary Movie Screening
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Sit back and relax in our indoor cinema as we showcase classic
                                horror films for your enjoyment.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/158d56ce-8720-495f-9b44-68551e374eed" alt="" />
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="content">
                        <div class="title" data-content="Pumpkin Carving" data-swiper-parallax="-500">
                            Pumpkin Carving
                        </div>
                        <div class="text" data-swiper-parallax="-300" data-swiper-parallax-opacity="0">
                            <p>
                                Get your hands dirty and create your own Jack-O'-Lantern
                                masterpiece. We provide the pumpkins and carving tools.
                            </p>
                        </div>
                    </div>
                    <div class="image" data-swiper-parallax="-200">
                        <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/feea059e-0dca-45cc-9c5c-7c78fa4d8a29" alt="" />
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <p>
            Join us for a scary night of Halloween! Ravenwood Manor, a historic and scary mansion, will
            open its doors for an unforgettable night of thrills and chills.
        </p>
        <button class="btn">
        <span>buy ticket</span>
      </button>
</section>
```

Source Code : [https://freecodez.com/post/2r2x6jq](https://freecodez.com/post/2r2x6jq)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)