party1.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- Masonry -->
    <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/index.css">

    <link rel="shortcut icon" type="image/jpg" href="images/event_planner.png"/>

    <style>

        .card {
            border-radius: 0;
            border: none!important;
        }

        .intro-post, .our-services-header {
            background-color: #ff69b4;
            background-position: 50% 50%;
        }

        nav {
            /*background-color: #ff69b9!important;*/
        }        

        .intro-post-body {
            color: #fff;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .about-me-inner-body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .intro-post-body .card-title {
            font-size: 70px;
            margin-bottom: 24px;
        }

        .intro-post-body .card-text {
            font-size: 38px;
        }

        .about-me-img {
            border-radius: 50%;
            height: 420px;
            width: 420px;
            object-fit: cover;
            object-position: top;
        }

        @media (max-width: 600px) {
            .intro-post-body .card-title {
                font-size: 40px;
                margin-bottom: 24px;
            }

            .intro-post-body .card-text {
                font-size: 38px;
            }

            .about-me-img {
                border-radius: 50%;
                height: 300px;
                width: 300px;
                top: 0px!important;
                right: 0px!important;
                object-fit: cover;
                object-position: top;
            }
        }

        @media (max-width: 1000px) {
            .intro-post-body .card-title {
                font-size: 40px;
                margin-bottom: 24px;
            }

            .intro-post-body .card-text {
                font-size: 38px;
            }

            .about-me-img {
                border-radius: 50%;
                height: 320px;
                width: 320px;
                top: 0px!important;
                right: 0px!important;
                object-fit: cover;
                object-position: top;
            }

            .profile-img {
                height: 100%;
                object-fit: contain;
            }
        }

        .nav-item a, .navbar-brand {
            font-size: 18px;
            font-weight: 600;
            /*color: #fff!important;*/
        }

        .our-services-inner img {
            width: 100%;
            height: 340px;
            object-fit: cover;
        }

        .our-services-inner .card {
            transition: transform .2s ease, box-shadow .2s ease, -webkit-transform .2s ease;
        }

        .our-services-inner .card:hover {
            transform: translateY(-5px);
            /*box-shadow: 0px 10px 20px rgb(0 0 0 / 8%);*/
            box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
        }

        .row-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
            grid-column-gap: 10px;
            grid-row-gap: 50px;
        }


        .card-img-overlay-bottom {
            position: absolute;
            /* top: 0; */
            right: 0;
            bottom: -1px;
            left: 0;
            padding: 1rem;
        }


        .btn-pink {
            background-color: #ff69b4!important; 
            border-color: #ff69b4!important;
        }

        .btn-outline-pink {
            color: #ff69b4; 
            border-color: #ff69b4!important;
        }

        .btn-outline-pink:hover {
            color: #fff;
            background-color: #ff69b4!important; 
            border-color: #ff69b4!important;
        }

        .modal-content {
            border: none;
            border-radius: unset;
        }

        .modal-header, .modal-body {
            padding: 0.8rem;
        }

        /*** Whats App ***/


        .whatsapp-float-btn {
            position: fixed; /* Very Crucial */
            width: 320px;
            height: 60px;
            left: 18px; 
            bottom: 40px;
            z-index: 3;
            display: flex; /* Make It FlexBox */
        }

        .whatsapp-float-btn-icon {
            height: 64px;
            width: 64px;
            bottom: 36px;
            border-radius: 50%;
        }

        .whatsapp-float-btn-text {
            padding-left: 6px;
            font-size: 16px;
            color: #000000;
        }

        .whatsapp-float-btn-text:hover {
            background-color: #fff!important;
            color: #000!important;
        }


        .whatsapp-float-btn, .whatsapp-float-btn * {
            transition: all 0.4s ease;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-30px);}
            60% {transform: translateY(-15px);}
        }

        .whatsapp-float-btn {
            animation: bounce 1.6s infinite;
        }


        /********* ******/

    </style>

    <title>ThePlannerNextDoor</title>
  </head>
  <body>

    <header>

        <nav class="navbar navbar-expand-lg navbar-light shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="./index.html">
                    <b>The</b>
                    <img src="images/event_planner.png" style="width: 64px; height: 64px;" alt="">
                    <b>Planner</b>
                    <img src="images/nextdoor.png" style="width: 64px; height: 64px;" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent" style="flex-grow: 0;">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="./index.html">
                                Home
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#our-services">Our Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/about-me.html">About Me</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Know About Us
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="./party1.html">La Casa De Papel</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="whatsapp-float-btn">
            <a class="whatsapp-float-btn-icon text-white bg-dark shadow" style="display: flex; justify-content: center; align-items: center;" href="https://wa.me/send?phone=919833708425&amp;text=Hello" target="_blank">
                <img src="images/whatsapp_pink.svg" width="70px" height="70px" alt="">
            </a>
            <a href="https://wa.me/send?phone=919833708425&amp;text=Hello" target="_blank" class="whatsapp-float-btn-text align-self-center p-2 shadow" style="background-color: azure; border-radius: 8px;margin-left: 4px; text-decoration: none;">
                Contact Me? <strong>Chat directly..</strong>
            </a>
        </div>

    </header>

    <main>

        <div class="about-me" style="margin: 20px 0px;">
            <div class="container">
                <div class="about-me-inner">

                    <div class="row-grid-nope row" data-masonry='{"percentPosition": true }'>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/1.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Birthday</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/2.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Baby Shower</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/3.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Anniversaries</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/4.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Proposals</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/5.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Personal Events</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/6.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Weddings</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/7.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Weddings</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4 mb-4">
                            <div class="card bg-dark text-white">
                                <img src="images/events/parties/party1-la_casa_de_papel/8.jpg" class="card-img-top" alt="...">
                                <div class="card-img-overlay-bottom">
                                    <!-- <h2 class="card-title"> <span class="badge bg-light" style="color: #000;">Weddings</span> </h2>
                                    <button class="btn btn-dark" style="background-color: #ff69b4; border-color: #ff69b4;">Read More</button> -->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </main>

    <footer>
        <div class="footer">
            <div class="container">
                <div class="row align-items-center g-0 border-top py-2">
                    <!-- Desc -->
                    <div class="col-md-4 col-12 text-center text-md-start">
                        <span>© 2021 ThePlannerNextDoor. All Rights Reserved.</span>
                    </div>
                    <!-- Links -->
                    <div class="col-12 col-md-8">
                        <nav class="nav nav-footer justify-content-left justify-content-md-end">
                            <a class="nav-link active ps-0" href="#">Privacy</a>
                            <a class="nav-link" href="#">Terms </a>
                            <a class="nav-link" href="#">Feedback</a>
                            <a class="nav-link" href="#">Support</a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        <modal-setup>

            <div class="modal fade" id="show-left-todo" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalPopoversLabel">🔥</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="border-radius: 50%; background-color: #f1f1f1; border: 1px solid #6e6868;" ></button>
                        </div>
                        <div class="modal-body">
                            <p>
                                Connect with Me Directly
                            </p>
                            <h5>Stay Tuned We will be updating alot of things here.</h5>
                            <a href="https://wa.me/send?phone=000000000000&amp;text=Hello" class="btn btn-pink text-white" target="_blank">@WhatsApp</a> 
                        </div>
                    </div>
                </div>
            </div>

            <!--
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalPopovers">
                Test Modal Working
            </button>
            -->

        </modal-setup>

    </footer>
    

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>