AutoShell

jkghkghkghkghkghkghkghkkghghkkghkgh hgghkghkghghkghhgkhgkghghkkghkhghkgkghkghkgh hjlhlhjhjlhjlhjlhjlhjlhjlhjhjl AutoShell

?? Editing: portfolio1.php

<?php include("header.php"); ?>
 
        <div class="mil-transition-fade" id="swup"> 
            <div class="mil-transition-frame">

<div id="smooth-content" class="mil-content">

<div class="mil-hero-1 mil-sm-hero mil-up" id="top" style="margin-top:100px;">
                        <div class="container mil-hero-main mil-relative mil-aic">
                            <div class="mil-hero-text mil-scale-img" data-value-1="1.3" data-value-2="0.95">
                                <div class="mil-text-pad"></div>
                                <ul class="mil-breadcrumbs mil-mb60 mil-c-gone">
                                    <li>
                                        <a href="index.php">Home</a>
                                    </li>
                                    <li>
                                        <a href="Portfolio.php">Portfolio</a>
                                    </li>
                                </ul>
                                <div class="mil-word-frame">
                                    <h1 class="mil-display2 mil-rubber">Our best <span class="mil-a2">works</span></h1>
                                    <div class="mil-s-4"><img src="img/shapes/4.png" alt="shape"></div>
                                </div>
                            </div>
                            <div class="mil-shapes mil-scale-img" data-value-1=".7" data-value-2="1.11">
                                <div class="mil-s-2"><img src="img/shapes/2.png" alt="shape"></div>
                                <div class="mil-s-3"><img src="img/shapes/3.png" alt="shape"></div>
                            </div>
                        </div>
                    </div>

<div class="mil-p-0-130">
    <div class="container">
        <div class="row">

<?php
            include "config.php";

$leftServices  = $conn->query("SELECT * FROM services WHERE status=1 AND column_side='left' ORDER BY id DESC");
            $rightServices = $conn->query("SELECT * FROM services WHERE status=1 AND column_side='right' ORDER BY id DESC");
            ?>

<div class="col-md-6">
                <?php while($row = $leftServices->fetch_assoc()): ?>
                <div class="mil-work-card mil-mb30">

<?php if ($row['media_type'] === 'image'): ?>

<img
                                    src="img/works/uploads/<?php echo $row['media']; ?>"
                                    alt="<?php echo htmlspecialchars($row['title']); ?>"
                                    class="mil-scale-img"
                                    data-value-1="1.15"
                                    data-value-2="1">

<?php else: ?>

<video
                                    class="mil-video"
                                    autoplay
                                    muted
                                    loop
                                    playsinline
                                    preload="metadata">
                                    <source src="img/works/uploads/<?php echo $row['media']; ?>" type="video/mp4">
                                </video>

<?php endif; ?>

</div>
                    </div>

</div>
                <?php endwhile; ?>
            </div>

<div class="col-md-6">
                <?php while($row = $rightServices->fetch_assoc()): ?>
                <div class="mil-work-card mil-mb30">

<?php if ($row['media_type'] === 'image'): ?>

<?php else: ?>

<?php endif; ?>

</div>
                    </div>

</div>
                <?php endwhile; ?>
            </div>

</div>
    </div>
</div>
<style>
  
/* =========================================
   WORK / SERVICES CARD – FINAL STABLE CSS
   Portrait | Square | Landscape | Video
========================================= */

/* Card wrapper */
.mil-work-card{
    width:100%;
    position:relative;
    overflow:hidden;
}

/* Media cover */
.mil-cover{
    width:100%;
    position:relative;
    overflow:hidden;
    background:#000;
    border-radius:12px;
}

/* Frame */
.mil-hover-frame{
    width:100%;
    height:100%;
    position:relative;
}

/* IMAGE & VIDEO – NO CUT GUARANTEED */
.mil-cover img,
.mil-cover video{
    width:100%;
    height:100%;
    object-fit:contain;      /* 🔥 FULL IMAGE */
    object-position:center; /* 🔥 CENTER SAFE */
    display:block;
    background:#000;
}

/* Video interaction disable */
.mil-cover video{
    pointer-events:none;
}

/* Hover zoom (safe – no crop) */
.mil-work-card:hover img,
.mil-work-card:hover video{
    transform:scale(1.03);
    transition:transform .6s ease;
}

/* =========================================
   OVERLAY (TITLE)
========================================= */

.mil-hover-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    padding:14px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.6),
        rgba(0,0,0,0)
    );
    opacity:0;
    transition:.4s ease;
    pointer-events:none;
}

.mil-work-card:hover .mil-hover-overlay{
    opacity:1;
}

/* =========================================
   LAYOUT RATIOS (CONTROLLED BY DB)
========================================= */

/* Movie posters */
.mil-portrait{
    aspect-ratio:2 / 3;   /* 🎬 CORRECT POSTER RATIO */
}

/* Square images */
.mil-square{
    aspect-ratio:1 / 1;
}

/* Landscape banners */
.mil-landscape{
    aspect-ratio:16 / 9;
}

/* =========================================
   MOBILE FIX
========================================= */
@media(max-width:768px){
    .mil-cover{
        border-radius:8px;
    }
}

</style>

<div class="mil-p-0-160">
                        <div class="container mil-relative">
                            <div class="mil-objects">
                                <div class="mil-obj-1"></div>
                                <div class="mil-obj-2"></div>
                            </div>
                            <p class="mil-stylized mil-m2 mil-mb60 mil-tac mil-up">Explore our agency</p>
                            <h2 class="mil-head1 mil-rubber mil-tac mil-mb60 mil-up">Pixy is a <span class="mil-a1">creative</span> agency that transforms <span class="mil-a1">ideas</span> into masterpieces. We craft <span class="mil-a1">design</span> magic, breathe new life into brands, and make the impossible <span class="mil-a1">possible</span>. Choose <span class="mil-a1">Pixy</span> because we are worth it!</h2>
                            <div class="mil-text-with-button mil-mb60">
                                <p class="mil-text-sm mil-tar mil-768-tac mil-up">We can talk about ourselves endlessly. <br>You'd better write to us and come visit us. We are always glad to see you!</p>
                                <span class="mil-up"><a href="contact-frl.html" class="mil-btn mil-a2 mil-c-gone">Write message</a></span>
                            </div>
                        </div>
                        <div class="mil-tapes-frame">
                            <div class="mil-tape-1 mil-parallax-x-img" data-value-1="0" data-value-2="20%">
                                <div class="mil-btn mil-btn-border">Reliable Service</div>
                                <div class="mil-btn mil-btn-border">Custom Solutions</div>
                                <div class="mil-btn mil-btn-border">24/7 Availability</div>
                                <div class="mil-btn mil-btn-border">Expert Guidance</div>
                                <div class="mil-btn mil-btn-border">Innovative Approach</div>
                                <div class="mil-btn mil-btn-border">Satisfaction Guaranteed</div>
                                <div class="mil-btn mil-btn-border">Industry Experience</div>
                                <div class="mil-btn mil-btn-border">Expert Guidance</div>
                            </div>
                            <div class="mil-tape-2 mil-parallax-x-img" data-value-1="0" data-value-2="-20%">
                                <h4 class="mil-head4">Comprehensive Support</h4>
                                <h4 class="mil-head4">Cutting-Edge Technology</h4>
                                <h4 class="mil-head4">Tailored Strategies</h4>
                                <h4 class="mil-head4">Proven Track Record</h4>
                                <h4 class="mil-head4">Sustainable Practices</h4>
                                <h4 class="mil-head4">Global Reach</h4>
                                <h4 class="mil-head4">Cost Efficiency</h4>
                                <h4 class="mil-head4">Proven Track Record</h4>
                            </div>
                            <div class="mil-deco mil-up"><img src="img/shapes/4.png" alt="shape" class="mil-parallax-img" data-value-1="20%" data-value-2="50%"></div>
                        </div>
                    </div>

<div class="mil-p-160-130 mil-m3-bg">
                        <div class="container">
                            <div class="row mil-jcb mil-aic">
                                <div class="col-6 col-md-2 mil-up">
                                    <a href="#." class="mil-partner mil-type-2 mil-mb30" target="_blank" data-no-swup>
                                        <img src="img/brands/1.png" alt="partner logo">
                                    </a>
                                </div>
                                <div class="col-6 col-md-2 mil-up">
                                    <a href="#." class="mil-partner mil-type-2 mil-mb30" target="_blank" data-no-swup>
                                        <img src="img/brands/2.png" alt="partner logo">
                                    </a>
                                </div>
                                <div class="col-6 col-md-2 mil-up">
                                    <a href="#." class="mil-partner mil-type-2 mil-mb30" target="_blank" data-no-swup>
                                        <img src="img/brands/3.png" alt="partner logo">
                                    </a>
                                </div>
                                <div class="col-6 col-md-2 mil-up">
                                    <a href="#." class="mil-partner mil-type-2 mil-mb30" target="_blank" data-no-swup>
                                        <img src="img/brands/4.png" alt="partner logo">
                                    </a>
                                </div>
                                <div class="col-6 col-md-2 mil-up">
                                    <a href="#." class="mil-partner mil-type-2 mil-mb30" target="_blank" data-no-swup>
                                        <img src="img/brands/5.png" alt="partner logo">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

<div>
                        <div class="container">
                            <div class="row mil-aic mil-jcb mil-no-g">
                                <div class="col-lg-6">
                                    <div class="mil-button-pad mil-a1 mil-jst mil-up" style="display: block"></div>
                                </div>
                                <div class="col-lg-6 mil-992-gone">
                                    <div class="mil-text-pad">
                                        <p class="mil-text-sm mil-up">We accept your requests 24/7. Feel free to <a href="contact.html" class="mil-text-link mil-a2 mil-c-gone">write to us</a> whenever it is convenient for you</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <style>
                        .mil-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

</style>
    <?php include("footer.php"); ?>

Path:

home / dhw4kgxay284 / public_html / sangeethmediafactory.com /

?? Editing: portfolio1.php

Path:

?? Upload