{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}

{% block body %}

<link rel="shortcut icon" href="{{asset("themes/coworking/images/logo-black.png")}}" />
<link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<style>
    
    
    #hideHeaderInPageHome{
        display:none !important;
    }
    
    .title-article{
        color: #292825;
        font-size: 40px;
        line-height: 48px;
        font-weight: 800;
}
.lire-suite{
   
    padding: 10px;
    border-radius: 4px;
} 
.img-article{
    width:95%;
}

.shadow-custom:hover{
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

 

.shadow-custom{
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

  .custom-hr {
     width: 10%;
    border: 3px solid #555;
    margin: 4px;
}

.custom-hr-1{
     width: 3%;
    border: 3px solid #555;
    margin: 4px;
}
  }
</style>


                        
                        
                        
<div style=" box-shadow:0 0 12px 6px rgba(0, 0, 0, 0.06); height:fit-content;">
        <div class="wrapper">
                                <div class="head-wrapper">
                                    <ul class="my-auto info col-md-4 col-sm-4 list-unstyled align-items-center text-dark" style="font-size: 15px; font-weight:300; font-family:'Archivo', sans-serif;">
                                        <li style="display: inline-flex;">
                                            <a href="https://www.facebook.com/profile.php?id=61551253435716&mibextid=LQQJ4d" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-facebook"></i></a> 
                                            <a href="https://instagram.com/coworkandlive?igshid=MzRlODBiNWFlZA" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-instagram"></i></a>
                                            <a href="https://www.linkedin.com/company/cowork-live" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-linkedin"></i></a>
                                       <a href="{{ path('front_home')}}" title="Accueil" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-solid fa-house"></i></a>
                                      
                                        </li>
                                           
                                    </ul>
                                    <div class="col-sm-8 hidden-col">
                                    </div>
                                    <div class="logo col-sm-8 col-md-auto mb-2 justify-content-center mb-md-0" style="display: inline-flex;">
                                      
                                        <a href="{{path("front_home")}}">
                                               <img class="img-fluid w-100" src="{{asset("themes/coworking/front/images/logoCowork.png")}}" >
                                        </a>    
                                      
                                    </div>

                                    <div class="nav-link col-sm-4 align-self-start__ text-end">
                                        
                                               <!-- <a href="{{path("login_register")}}" class="text-dark my-auto" style="text-decoration:none; font-size: 13px; font-family:'Libre Franklin', sans-serif; letter-spacing:2px;"> 
                                                    Mon compte
                                                </a>-->
                                                
                                                {#<button type="button"   class="btn btn-outline-warning" style="border-radius: 28px;width=48%;"><i href="{{path("login_register")}}" class="text-mute" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></button>#}
                                                <button type="button" class="btn btn-outline-warning"id="btniconDisktop" style="border-radius: 28px;height: 42px;width: 51%;"><a href="#" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></a></button>
                                                <a id="btniconMobile" href="#"style="text-decoration: none;color:black;"><i class="fa-solid fa-user" style="margin-left: 5%;font-size:30px;;margin-top:25%;"></i></a>
                                            
                                            
                                            
                                    </div>
                                </div>
                            </div>
</div>
   
  


<main>
<div class="container" style="max-width: 1230px;">
    <div class="row">
        <div class="col-lg-12">
            
            <h1 style="font-size: 34px; color: black;" class="title-actualites mt-5 mb-2">Actualités</h1>
             <hr class="custom-hr-1">
            
            <div class="row">
                <!-- Articles -->
                <div class="col-lg-9">
                    {% for x in 1..5 %}
                    <article class="card shadow-custom mt-4">
                        <div class="row g-0">
                            <div class="col-lg-5">
                                <img class="img-article img-fluid" 
                                     src="https://images.unsplash.com/photo-1540317700647-ec69694d70d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" 
                                     alt="image">
                            </div>
                            <div class="col-lg-7 p-3">
                                <h3>Cowork&Live</h3>
                                <h2 class="title-article">Espace gaming</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                                <a href="#" class="lire-suite">Lire la suite</a>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                </div>
                <!-- Sidebar -->
                <div class="col-lg-3">
                    <!-- Remplacez 'ffff' par du contenu réel -->
                    <h4 class="">Actualités récentes</h4>
                    <hr class="custom-hr">
                    
                    {% for x in 1..5 %}
                     <p class="mt-3">Consectetur adipisicing elit</p>
                    
                     {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

 </main>
	
{% endblock %}

{% block javascripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>



<script>

  $(document).ready(function () {

 
  });

</script>
{% endblock %}