관리-도구

편집 파일: projects.blade.php

@extends('layouts.apps')

@section('content')
<section>
    <div class="w-100 pb-80 position-relative">
        <div class="page-top-wrap position-relative w-100">
            <div class="container">
                <div class="page-top-inner d-flex flex-wrap align-items-center position-relative w-100">
                    <div class="page-title-info position-relative">
                        <i class="position-absolute"><svg viewBox="0 0 359 354" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M358.5 351H323V300.316L250.863 264.339V331.541H278.904V170.438L201.566 91.0182L200.661 327.921L223.727 351L224.179 71.1066L166.063 3V142.381L126.489 156.862L149.781 267.507L171.49 289.455V212.75H115.635L80.3576 331.541H171.49V306.651H34V351H0" stroke="#f1f1f1" stroke-width="2" />
                            </svg></i>
                        <h1 class="mb-0">Projects</h1>

</div>
                    <div class="page-title-img position-absolute">
                        <div class="page-title-img-inner d-block w-100" style="background-image: url(assets/images/im3.jpg);"></div><span class="position-absolute sec-watermark center-watermark overlap-btm-shap88 font-200">Projects</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="portfolio-section">
    <div class="w-100 pt-80 pb-130 position-relative">

<svg class="sec-tp-rgt-shp overlap-tpshap250 opc-6 stroke-clr position-absolute shape-float"
            width="444" height="721" viewBox="0 0 444 721" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <g>
                <path d="M0.769252 365.057L117.32 627.406H292.971L176.421 365.057H0.769252Z" stroke="#000000" />
                <path d="M605.475 68.2185L488.925 330.567L313.273 330.567L429.823 68.2185H605.475Z" stroke="#000000" />
                <path d="M157.597 458.151L274.147 720.5H449.799L333.249 458.151H157.597Z" stroke="#000000" />
                <path d="M449.8 161.312L333.249 423.661L157.598 423.661L274.148 161.312H449.8Z" stroke="#000000" />
                <path d="M233.605 297.339L350.155 559.688H525.807L409.256 297.339H233.605Z" stroke="#000000" />
                <path d="M372.64 0.499969L256.089 262.849L80.4375 262.849L196.988 0.499969H372.64Z" stroke="#000000" />
            </g>
        </svg>

<svg class="sec-btm-lft-shp overlap-btmshap130 opc-6 stroke-clr position-absolute shape-float-reverse"
            width="358" height="721" viewBox="0 0 358 721" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <g>
                <path d="M356.475 355.943L239.925 93.594L64.2729 93.594L180.823 355.943Z" stroke="#000000" />
                <path d="M-248.231 652.782L-131.68 390.433L43.9714 390.433L-72.579 652.782Z" stroke="#000000" />
                <path d="M199.647 262.849L83.0971 0.49999L-92.5547 0.499974L23.9957 262.849Z" stroke="#000000" />
                <path d="M-92.5555 559.688L23.9949 297.339L199.647 297.339L83.0963 559.688Z" stroke="#000000" />
                <path d="M123.64 423.661L7.08952 161.312L-168.562 161.312L-52.0119 423.661Z" stroke="#000000" />
                <path d="M-15.3953 720.5L101.155 458.151L276.807 458.151L160.256 720.5Z" stroke="#000000" />
            </g>
        </svg>

<div class="sec-title text-center w-100 section-title-anim">
                <div class="sec-title-inner d-inline-block">
                    <span class="d-block thm-clr">Projects</span>
                    <h2 class="mb-0">The Best Gallery<i></i></h2>
                </div>
            </div>

<div class="gallery-wrap2 w-100">
                <div class="row g-0">
                    @foreach ($projectcategory as $projectcat)
                    <div class="col-lg-4 col-md-6 col-sm-12 gallery-item">
                        <a href="{{ route('gallery', $projectcat->id) }}" class="gallery-link">
                            <div class="gallery-box2">
                                <img src="{{ asset('storage/' . $projectcat->image) }}" alt="">
                                <div class="gallery-overlay">
                                    <h4 class="gallery-title">{{$projectcat->projectcategory}}</h4>
                                    <span class="gallery-location">{{$projectcat->location}}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach

</div>
            </div>

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

/* GALLERY WRAPPER */
    .gallery-wrap2 {
        width: 100%;
    }

/* IMAGE BOX */
    .gallery-box2 {
        position: relative;
        overflow: hidden;
    }

/* IMAGE */
    .gallery-box2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

/* OPTIONAL IMAGE HOVER ZOOM */
    .gallery-box2:hover img {
        transform: scale(1.05);
    }

/* OVERLAY - ALWAYS VISIBLE */
    .gallery-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.65),
                rgba(0, 0, 0, 0.15));
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 22px;
        opacity: 1;
    }

/* TEXT */
    .gallery-title {
        color: #ffffff;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 6px;
    }

.gallery-location {
        color: #e5e5e5;
        font-size: 14px;
        letter-spacing: 0.4px;
    }

/* RESPONSIVE */
    @media (max-width: 991px) {
        .gallery-title {
            font-size: 18px;
        }
    }

@media (max-width: 767px) {
        .gallery-overlay {
            padding: 18px;
        }

.gallery-title {
            font-size: 17px;
        }

.gallery-location {
            font-size: 13px;
        }
    }

/* ===============================
                SECTION LOAD
                ================================ */
    .portfolio-section {
        animation: sectionFade 1s ease forwards;
        opacity: 0;
    }

@keyframes sectionFade {
        from {
            opacity: 0;
            transform: translateY(50px);
        }

to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* ===============================
                TITLE ANIMATION
                ================================ */
    .section-title-anim {
        animation: titleFade 1.2s ease forwards;
        opacity: 0;
    }

@keyframes titleFade {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* ===============================
                GALLERY STAGGER
                ================================ */
    .gallery-item {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        animation: galleryReveal 0.8s ease forwards;
    }

.gallery-item:nth-child(1) {
        animation-delay: 0.15s;
    }

.gallery-item:nth-child(2) {
        animation-delay: 0.15s;
    }

.gallery-item:nth-child(3) {
        animation-delay: 0.15s;
    }

.gallery-item:nth-child(4) {
        animation-delay: 0.25s;
    }

.gallery-item:nth-child(5) {
        animation-delay: 0.25s;
    }

.gallery-item:nth-child(6) {
        animation-delay: 0.25s;
    }

.gallery-item:nth-child(7) {
        animation-delay: 0.35s;
    }

.gallery-item:nth-child(8) {
        animation-delay: 0.35s;
    }

.gallery-item:nth-child(9) {
        animation-delay: 0.35s;
    }

@keyframes galleryReveal {
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

/* ===============================
                GALLERY BOX
                ================================ */
    .gallery-link {
        display: block;
    }

.gallery-box2 {
        height: 260px;
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        transition: transform .4s ease, box-shadow .4s ease;
    }

.gallery-box2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

.gallery-box2:hover img {
        transform: scale(1.1);
    }

.gallery-box2:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 70px rgba(0, 0, 0, 0.18);
    }

.gallery-box2::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top right, rgba(0, 0, 0, .25), transparent);
        opacity: 0;
        transition: opacity .4s ease;
    }

.gallery-box2:hover::after {
        opacity: 1;
    }

/* ===============================
                FLOATING SHAPES
                ================================ */
    .shape-float {
        animation: floatShape 12s ease-in-out infinite;
    }

.shape-float-reverse {
        animation: floatShapeReverse 14s ease-in-out infinite;
    }

@keyframes floatShape {

0%,
        100% {
            transform: translateY(0);
        }

50% {
            transform: translateY(-40px);
        }
    }

@keyframes floatShapeReverse {

0%,
        100% {
            transform: translateY(0);
        }

50% {
            transform: translateY(40px);
        }
    }

/* ===============================
                RESPONSIVE
                ================================ */
    @media (max-width: 991px) {
        .gallery-box2 {
            height: 220px;
        }
    }

@media (max-width: 575px) {
        .gallery-box2 {
            height: 200px;
        }
    }
</style>

@endsection

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

관리-도구

편집 파일: projects.blade.php

Sid Gifari File Manager