1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / blackshutter /
Filename : index.php
back
<!DOCTYPE html>
<html lang="en">

<head>


    <!-- ** Basic Page Needs ** -->
    <meta charset="utf-8" />
    <title>Black_shutter</title>

    <!-- ** Mobile Specific Metas ** -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
    <meta name="author" content="" />
    <meta name="generator" content="" />

    <!-- theme meta -->
    <meta name="name" content="megakit" />

    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
    <!-- Icon Font Css -->
    <link rel="stylesheet" href="plugins/themify/css/themify-icons.css" />
    <link rel="stylesheet" href="plugins/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css" />
    <!-- Owl Carousel CSS -->
    <link rel="stylesheet" href="plugins/slick/slick.css" />
    <link rel="stylesheet" href="plugins/slick/slick-theme.css" />
    <!-- fontawsome_link-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <!--Favicon-->
    <link rel="icon" href="images/favicon.png" type="image/x-icon" />
    <link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap"
        rel="stylesheet">
    <style>
        body,
        html {
            font-family: "Yantramanav", sans-serif !important;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .sliders_sec {
            position: relative;
            width: 100%;
            max-height: 100vh;
            height: 100vh;
            overflow: hidden;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .sliders_sec img {
            width: 100%;
            height: 100vh;
            object-fit: cover;
            object-position: center;
            transition: transform 0.5s ease;
            /* Added transition for scaling effect */
            position: relative;
            /* Added for z-index to work */
        }

        /* Overlay effect */
        .sliders_sec img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            /* Adjust the opacity as needed */
            z-index: 1;
        }

        .slick-dots {
            position: absolute;
            left: 20px;
            width: min-content;
            /* Adjust as needed */
            bottom: 10%;
            /* Center vertically */
            transform: translateY(-50%);
            z-index: 9999;
        }

        .slick-dots li {
            margin-bottom: 10px;
            /* Adjust spacing between dots */
            display: block;
        }

        .slick-dots li button {
            font-size: 0;
            background: transparent;
            border: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            cursor: pointer;
            outline: none;
        }

        .slick-dots li button:before {
            content: "•";
            font-size: 14px;
            color: white;
        }

        .sliders_sec_div {
            position: relative;
        }

        .image__carousel--content {
            position: absolute;
            top: 50%;
            /* left: 30%; */
            width: 100%;
            height: 50vh;
            display: grid;
            justify-content: center;
            align-items: center;
            z-index: 2;
            background: linear-gradient(180deg, transparent, #00000085);
            color: white;
        }

        /* Scale animation on slide change */
        .slick-slide {
            transition: transform 0.5s ease;
        }

        .slick-active {
            transform: scale(1.05);
            /* Adjust scale factor as needed */
        }

        .image__carousel--content h1 {
            text-transform: uppercase;
            font-weight: 900;
            line-height: 1em;
            color: #fff;
            font-size: calc(70px + 1vw);
        }

        .nav_home {
            color: #ffff00;
            display: flex;
            align-items: center;
            position: relative;
            font-size: 22px;
            font-weight: 500;
            letter-spacing: 3.1px;
        }

        .nav_home:hover {
            color: #ffff00;
        }
        .nav_home:visited{
            color: #ffff00;
        }

        .nav_home::before {
            content: "";
            background-color: #ffff00;

            height: 3px;
            width: 3rem;
            margin-right: 10px;
        }

        @media (max-width:1024px) {
            .image__carousel--content h1 {
                font-size: calc(58px + 1vw);
            }
        }

        @media (max-width:768px) {
            .image__carousel--content h1 {
                font-size: calc(40px + 1vw);
            }
            .slick-dots{
                top: 50%;
            }
        }

        @media (max-width:425px) {
            .image__carousel--content h1 {
                font-size: calc(28px + 1vw);
                text-align: center;
            }
            .nav_home::before {
            display: block;
            }
            .nav_home {
            color: #ffff00;
            display: flex;
            align-items: center;
            position: relative;
            justify-content: center;
            font-size: 22px;
            font-weight: 500;
            letter-spacing: 1px;
        }

        }
        @media (max-width:375px) {
            .image__carousel--content h1 {
                font-size: calc(22px + 1vw);
                text-align: center;
            }

        }
        .c__img{
            width: 90%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="navbar" style="    background: linear-gradient(-180deg, #ededed, transparent); position: absolute;
    top: -1px;
    z-index: 111;
    width: 100%; box-shadow:none;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg px-0 py-4">
                        <div class="nav_logo">
                            <a href="index.php"><img src="images/logo.png" alt="logo" /></a>
                        </div>



                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="sliders_sec">
        <div class="sliders_sec_div">
            <img src="https://img.freepik.com/premium-photo/girl-traveller-standing-ferry-boat-with-coffee-cup-hand-gazing-out-water_28914-58805.jpg?w=1800"
                alt="Image 1">
            <div></div>
            <div class="image__carousel--content">
                <div class="c__img">
                    <h1>Lorem ipsum dolor sit.</h1>
                    <a class="nav_home" href="home.php">Take A Look</a>
                </div>
            </div>

        </div>
        <div class="sliders_sec_div">
            <img src="https://img.freepik.com/premium-photo/bearded-man-looks-out-river_1048944-1539367.jpg?w=1480" alt="Image 2">
            <div class="image__carousel--content">
                <div class="c__img">
                    <h1>Lorem ipsum dolor sit.</h1>
                    <a class="nav_home" href="home.php">Take A Look</a>
                </div>
            </div>

        </div>
        <div class="sliders_sec_div">
            <img src="https://img.freepik.com/premium-photo/view-old-pier-sea-banner-image-with-copy-space_466739-1499.jpg?w=1480" alt="Image 3">
            <div class="image__carousel--content">
                <div class="c__img">
                    <h1>Lorem ipsum dolor sit.</h1>
                    <a class="nav_home" href="home.php">Take A Look</a>
                </div>
            </div>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src="script.js"></script>
    <script>
    $(document).ready(function () {
        $('.sliders_sec').slick({
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            swipe: true, // Enable swipe navigation
            vertical: false, // Set to false for horizontal navigation
        });

        // Handle mouse wheel scrolling
        $('.sliders_sec').on('wheel', function (e) {
            e.preventDefault();
            if (e.originalEvent.deltaY > 0) {
                $(this).slick('slickNext');
            } else {
                $(this).slick('slickPrev');
            }
        });

        // Scale animation effect on slide change
        $('.sliders_sec').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            $('.sliders_sec').find('.slick-slide').css('transform', 'scale(1)'); // Reset scale for all slides
        });

        $('.sliders_sec').on('afterChange', function (event, slick, currentSlide) {
            $('.sliders_sec').find('.slick-active').css('transform', 'scale(1.05)'); // Apply scale to active slide
        });
    });
</script>

    <!-- Main jQuery -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4.3.1 -->
    <script src="plugins/bootstrap/bootstrap.min.js"></script>
    <!--  Magnific Popup-->
    <script src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
    <!-- Slick Slider -->
    <script src="plugins/slick/slick.min.js"></script>
    <!-- Counterup -->
    <script src="plugins/counterup/jquery.waypoints.min.js"></script>
    <script src="plugins/counterup/jquery.counterup.min.js"></script>

    <!-- Google Map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU" defer></script>
    <script src="plugins/google-map/map.js" defer></script>

    <script src="js/script.js"></script>
</body>

</html>