@extends('layouts.splash')

@section('content')


<link href="{{ asset('css/main.css') }}" rel="stylesheet">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-xl-5 col-12 main_view">
            <img src="{{ asset('images/header.png') }}" class="images-fluid" alt="Responsive image">
        
            <div class="row justify-content-center">
                <div class="col-8 mg-top-40">
                     <img src="{{ asset('images/txt_form.png') }}" class="images-fluid" alt="Responsive image">
                </div>
            </div>

             <div class="row justify-content-center">
                <div class="col-10 mg-top-30">
                    <div class="card p-4" style="background: transparent; box-shadow: none;">

                        <div class="card-body">
                            <form method="POST" action="/inscription">
                            @csrf
                            <div style="margin-bottom:20px; text-align:left;">
                        <span style="display:inline-block; background:#d4661e; color:#fff; 
                                     font-weight:bold; padding:6px 14px; margin-bottom:8px; 
                                     transform:rotate(-3deg); box-shadow:2px 2px 4px rgba(0,0,0,0.25);">
                            NOM
                        </span>
                        <input type="text" name="lastname" required
                               style="width:100%; background:#fff; border:none; border-radius:3px; 
                                      height:44px; padding:8px 12px; color:#333;">
                    </div>

                    {{-- PRENOM --}}
                    <div style="margin-bottom:20px; text-align:left;">
                        <span style="display:inline-block; background:#d4661e; color:#fff; 
                                     font-weight:bold; padding:6px 14px; margin-bottom:8px; 
                                     transform:rotate(-3deg); box-shadow:2px 2px 4px rgba(0,0,0,0.25);">
                            PRÉNOM
                        </span>
                        <input type="text" name="firstname" required
                               style="width:100%; background:#fff; border:none; border-radius:3px; 
                                      height:44px; padding:8px 12px; color:#333;">
                    </div>

                       <div class="text-center">
                                <button type="submit" style="border:none; background:transparent; padding:0;">
                                    <img src="{{ asset('images/btn_start.png') }}" class="img-fluid" alt="Valider">
                                </button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>

@endsection