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


{% block stylesheets %}
{{ parent() }}
 <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" integrity="sha512-rd0qOHVMOcez6pLWPVFIv7EfSdGKLt+eafXh4RO/12Fgr41hDQxfGvoi1Vy55QIVcQEujUE1LQrATCLl2Fs+ag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

     <!-- Bootstrap -->
   
   <style>

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  margin-top:10px;
  margin-bottom:10px;
  background-color:#FFF;
}

.card:hover {
  box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card > .card-inner {
  padding:10px;
}
.card .header h2, h3 {
  margin-bottom: 0px;
  margin-top:0px;
}
.card .header {
  margin-bottom:5px;
}
.card img{
  width:100%;
}
.titleQuiSommeNous:after {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background: #c6c9ce;
    margin: 0;
    margin-top: 15px;
    border-radius: 3px;
    
}
    .container.mobile-version{
        display: none;
    }
    
    
    




    @media (max-width:767px) {

        .container.laptop-version {
            display: none;
        }
        .container.mobile-version{
            display: block !important;
        }
        .titleQuiSommeNous {
        font-size: 28px!important;
        }
    }
    
    
    /**/
    

.evenementsAvenir:after {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background: #c6c9ce;
    margin: 0;
    margin-top: 15px;
    border-radius: 3px;
    
    
}
   
   
   
 /* section Insta*/  
    .fas.fa-circle {
    position: absolute;
    right: 10px;
    color: #7CD75C;
    font-size: 12px;
    width: 10%;
}
.rounded-circle {
    border-radius: 50%!important;
}
.card-client {
    margin-right: 5px;
    margin-left: 5px;
    padding: 0px;
    margin-bottom: 10px;
}
.img-thumbnail {
        border: none;
}
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  {#<img src="{{asset('uploads/front-images/bannier-apropos.png')}}" style="width: 100%;" class="img-efluid imageForDesktop" />#}


<div class="imageForDesktop text-center" style="
        background-image: url(/uploads/front-images/bannierEvenement.png);
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        height: 350px;"
    >
			<h1 class="" style="color:white;padding-top:10%;text-transform: initial;font-size: 45px;font-weight: 700;">Évènements</h1>
			<small style="color:white;">
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    			sed dLorem ipsum dolor sit amet,<br> consectetur adipiscing elit,
    			sed dooLorem ipsum dolor sit amet
			</small>
</div>
<article  style="background-image: url(/uploads/front-images/bgEvenement5.png);height: 500px;">
    

<div class="container mt-5" style="padding-top: 5%;">
    <div class="row">
            <div class="col-sm-12"> 
            <h1 style="font-size: 34px;color: black;margin-bottom:22px;text-align: inherit;" class="evenementsAvenir"> Événements à venir </h1>
        </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#EBBF5B;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5bb5;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5b78;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5b3d;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
        </div>
 </div>

</article>

<article  style="background-image: url(/uploads/front-images/bgEvenement5.png);height: 500px;">
    

<div class="container mt-5" style="padding-top: 5%;">
    <div class="row">
            <div class="col-sm-12"> 
            <h1 style="font-size: 34px;color: black;margin-bottom:22px;text-align: inherit;" class="evenementsAvenir"> Historique des événements</h1>
        </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#EBBF5B;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5bb5;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5b78;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card p-3" style="background-color:#ebbf5b3d;color: white;">
        
                    <div class="card-body">
                      <small class="card-tagline" style="font-size: 35px;">24</small>
                      <h5 class="card-title">Janvier</h5>
                      <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit ametlorem ipsum dolo</p>
                       <small class="card-tagline">7:30AM - 10:00AM</small><br>
                       <small class="card-tagline">@Loremispum - dolor ipslorem</small>
                    </div>
        
                </div>
            </div>
        </div>
 </div>

</article>


<div class="container mt-5" style="padding-top: 5%;">
    <div class="row">
        
                     <select id="combo"  onchange="redirectToSelectedURL()" style="background-color: #2C5A40;border: 1px solid rgb(197, 197, 197);border-radius: 5px;box-sizing: border-box;color:white;display: block;font-family: SourceSansPro, Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 600;height: 26px;  min-width: 80px;padding: 0 20px 0 16px;outline: none;">
                            <option {% if '/fr' in app.request.uri %} selected {% endif %}  value="{{ path(app.request.get('_route'), {'_locale': 'fr'}) }}">FR</option>
                            <option {% if '/en' in app.request.uri %} selected {% endif %}  value="{{ path(app.request.get('_route'), {'_locale': 'en'}) }}">EN</option>
                        </select>
        
        <div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>
<div class="col-lg-3 col-sm-6 cardClients">
					<div class="card card-client" style="border-raduis:12px;">
						<ul class="list-group list-group-flush">
							<li class="list-group-item" style="display: flex;">
							
								
                            <img src="/uploads/front-images/skill-icons_instagram.png" alt="" style="" class="fas fa-circle">
                            {#<small>Lorem ipsum dolor sit amet</small>#}
								<div class=" col-sm-4">
								    <img src="/uploads/front-images/iconCowork.png" alt="" style="" class="img-fluid rounded-circle mb-3 img-thumbnail ">
								</div>
								<div class="col-sm-6 infoClient" style="margin-top: 5px;">

									<span style="font-weight:bold;text-decoration: underline;font-size: 10px;">Cowork&Live  </span>
									<span class="text-muted badge badge-info" style="font-size: 9px;">20/01/2024</span>
								</div>
							</li>
							<li class="list-group-item">
								<div class="row">
									<div class="col-sm-12 card-mobile">
									
									<img src="/uploads/front-images/photoCardInstagram.png" alt="" style="" >
									</div>
									
								</div>
							</li>
						</ul>
					</div>
</div>


      
    </div>
</div>
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



{% endblock %}