{% extends "base.html" %}
{% block content %}
<!-- Option D: Floating Card -->
<div class="bg-light py-4">
    <div class="container" style="max-width: 1100px;">
        <div class="position-relative">
            <div class="card border-0 shadow-lg" style="border-radius: 20px; overflow: visible;">
                <div class="card-body p-5">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h1 class="display-3 fw-bold mb-3">Spicy Parmesan Chicken Pasta</h1>
                            <p class="lead text-muted mb-0">A delicious weeknight dinner ready in 45 minutes with bold flavors</p>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{ url_for('static', filename='uploads/ff_1_photo_20260215_224827.png') }}" 
                 class="shadow-lg rounded-4" 
                 style="position: absolute; top: 20px; right: 30px; width: 350px; height: 250px; object-fit: cover; border: 5px solid white;">
        </div>
    </div>
</div>
<p class="text-center mt-3"><strong>Option D: Floating Card</strong></p>
{% endblock %}