관리-도구

편집 파일: about.blade.php

@extends('layouts.apps')
@section('content')

<section class="breadcrumb-area wa-p-relative">
    <div class="breadcrumb-bg-img wa-fix wa-img-cover">
        <img class="wa-parallax-img" src="assets/gallery/bannerfront.jpg" alt="">
    </div>

<div class="container bs-container-1">
        <div class="breadcrumb-wrap">
            <h1 class="breadcrumb-title wa-split-right wa-capitalize" data-split-delay="1.1s">About Us</h1>

<a href="/">Home</a>
                <span>About Us</span>
            </div>

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

<section class="bs-about-4-area pt-45 pb-125 wa-fix">
    <div class="container bs-container-2">
        <h4 class="bs-subtitle-4 ">
            <span class="text">about us</span>
            <span class="icon">
               <img src="assets/gallery/icon.jpg" alt="CCTV Icon" style="width: 38px; height: 38px;">
            </span>

</h4>

<div class="bs-about-4-content">
                <h2 class="bs-sec-title-4 title wa-split-right wa-capitalize" data-cursor="-opaque">{{$about->title}}</h2>

<div class="inner-div">
                    <p class="bs-p-4 disc wa-fadeInUp" style="text-align: justify;">{!! $about->description !!}
                    </p>

</div>

<div class="bs-about-4-feature">
                    
                    <div class="bs-about-4-feature-single wow fadeInRight">
                        <div class="item-icon">
                            <i class="flaticon-denver flaticon"></i>
                        </div>
                        <div class="text-content">
                            <h4 class="bs-h-4 item-title">
                                <a href="#" aria-label="name">modern technology</a>
                            </h4>
                            <p class="bs-p-4 item-disc">
                                Integrating modern innovation with proven reliability for smarter protection.
                            </p>
                        </div>
                    </div>

<div class="bs-about-4-feature-single wow fadeInRight" data-wow-delay=".2s">
                        <div class="item-icon">
                            <i class="flaticon-goodwill-1 flaticon"></i>
                        </div>
                        <div class="text-content">
                            <h4 class="bs-h-4 item-title">
                                <a href="#" aria-label="name">quality work</a>
                            </h4>
                            <p class="bs-p-4 item-disc">
                                Built on trust, driven by quality, and perfected through experience.
                            </p>
                        </div>
                    </div>
                </div>

.bs-about-4-feature-single .item-icon {
                            flex: 0 0 50px;
                            /* fix icon width */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

.bs-about-4-feature-single .item-icon i {
                            font-size: 35px;
                            /* adjust icon size */
                        }

.bs-about-4-feature-single .item-title {
                            margin-bottom: 5px;
                        }

.bs-about-4-feature-single .item-disc {
                            margin: 0;
                        }

.bs-about-4-feature-single .text-content {
                            flex: 1;
                        }
                    }
                </style>
            </div>

<div class="bs-about-4-right">

<div class="bs-about-4-img wa-fix wa-img-cover desktop-image">
                    <img class="wa-parallax-img" src="{{ asset('storage/' . $about->image3) }}" alt="About Us Image">
                </div>

<div class="bs-about-4-img wa-fix wa-img-cover image-rotate auto-rotate mobile-image">
                    <div class="image-inner">
                        <img src="{{ asset('storage/' . $about->image1) }}" alt="Front Image" class="front-image">
                        <img src="{{ asset('storage/' . $about->image2) }}" alt="Back Image" class="back-image">
                    </div>
                </div>

</div>

/* Desktop image default display */
                .desktop-image {
                    display: block;
                }

/* Mobile View Styles */
                @media (max-width: 768px) {

/* Hide desktop image */
                    .desktop-image {
                        display: none;
                    }

/* Show rotating image */
                    .mobile-image {
                        display: block;
                        margin-top: -40px;
                        min-height: 350px;
                        overflow: visible !important;
                    }

.image-rotate,
                    .image-inner {
                        height: auto !important;
                        min-height: 350px !important;
                        overflow: visible !important;
                    }

.front-image,
                    .back-image {
                        height: auto !important;
                    }
                }

/* Flip animation effect */
                .image-rotate {
                    perspective: 1000px;
                    width: 100%;
                    height: 90% !important;
                    position: relative;
                }

.image-inner {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    transform-style: preserve-3d;
                    animation: flipAnimation 6s infinite linear;
                }

.front-image,
                .back-image {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    backface-visibility: hidden;
                    border-radius: 10px;
                }

.back-image {
                    transform: rotateY(180deg);
                }

/* Animation keyframes */
                @keyframes flipAnimation {

0%,
                    25% {
                        transform: rotateY(0deg);
                    }

50%,
                    75% {
                        transform: rotateY(180deg);
                    }

100% {
                        transform: rotateY(360deg);
                    }
                }
            </style>

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

<!-- <section class="bs-video-4-area">
                <div class="bs-video-4-content wa-p-relative wa-fix wa-img-cover">
                    <img class="wa-parallax-img" src="assets/img/video/v4-img-1.png" alt="">

<div class="bs-video-4-text">
                        <div class="bs-video-4-marquee-active">
                            <h4 class="bs-h-1 bs-video-4-text-item wa-split-text">luxury Architecture </h4>
                        </div>
                    </div>
                </div>
            </section> -->

/* Mobile View (width ≤ 768px) */
    @media (max-width: 768px) {
        .bs-services-4-area {
            margin-top: -90px;
            /* adjust for mobile */

}
    }
</style>

<div class="container bs-container-2">
        <style>
            @media (max-width: 768px) {
                .custom-mobile-margin {
                    margin-top: -60px !important;
                    /* adjust the value as you need */
                }
            }
        </style>
        <h4 class="bs-subtitle-4 custom-mobile-margin">
            <span class="text" style="color: white;">Services</span>
            <span class="icon">
                <img src="assets/gallery/blackicon.png" alt="CCTV Icon" style="width: 38px; height: 38px;">
            </span>

</h4>

<div class="bs-services-4-content">

<h2 class="bs-sec-title-4 title wa-split-right wa-capitalize" data-cursor="-opaque">Securing
                    What Matters Most</h2>

<p class="bs-p-4 disc wa-fadeInUp">At Flying Eye Security, we specialize in providing reliable
                    security solutions that safeguard your property and peace of mind. With years of experience
                    in this industry, our expert team deliver systems that are both effective and easy to use.
                </p>

<div class="btn-wrap wa-fadeInUp">
                    <a href="/services" aria-label="name" class="bs-pr-btn-2">
                        <span class="text" data-back="view all services" data-front="view More"></span>
                        <span class="line-1"></span>
                        <span class="line-2"></span>
                        <span class="box box-1"></span>
                        <span class="box box-2"></span>
                        <span class="box box-3"></span>
                        <span class="box box-4"></span>
                    </a>
                </div>
            </div>
            <style>
                @media (max-width: 768px) {
                    .bs-services-4-item {
                        margin-top: -40px !important;
                        /* adjust the value as you like */
                    }
                }
            </style>

<div class="bs-services-4-item">

@foreach($service as $item)
                <div class="bs-services-4-item-single wa-bg-default {{ $loop->first ? 'active' : '' }}"
                    data-background="assets/img/services/s4-card-bg.png">

<div class="active-content">
                        <h4 class="bs-h-1 title">
                            <a href="{{ route('servicedetails', $item->id) }}"
                                aria-label="name"
                                class="wa-line-limit has-line-2">
                                {{ $item->service_title }}
                            </a>
                        </h4>

<div class="main-img wa-fix wa-img-cover">
                            <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}">
                        </div>

<p class="bs-p-4 disc wa-line-limit has-line-3">
                           {{ Str::limit(strip_tags($item->description), 150) }}
                        </p>
                    </div>

<div class="default-content">
                        <div class="img-2 wa-fix wa-img-cover">
                            <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}">
                        </div>

<h4 class="bs-h-1 title-2 wa-line-limit has-line-1">
                            {{ $item->service_title  }}
                        </h4>
                    </div>
                </div>
                @endforeach

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

@endsection

Name	Size	Permissions	Action
📄 .htaccess	218 bytes
📁 755944	-
📄 index.php	33,708 bytes

관리-도구

편집 파일: about.blade.php

Sid Gifari File Manager