This commit is contained in:
Enkly
10
public/templates/agency/about.html
Normal file
10
public/templates/agency/about.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{{define "about"}}
|
||||
<div class="card">
|
||||
<h1>About Us</h1>
|
||||
<p>
|
||||
We believe in keeping things simple. No complex JavaScript frameworks, just
|
||||
pure HTML and hypermedia controls.
|
||||
</p>
|
||||
<p>This page was rendered at: <strong>{{.Time}}</strong></p>
|
||||
</div>
|
||||
{{end}}
|
||||
21
public/templates/agency/contact.html
Normal file
21
public/templates/agency/contact.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{{define "contact"}}
|
||||
<div class="card">
|
||||
<h1>Contact</h1>
|
||||
<form hx-post="/contact" hx-swap="outerHTML">
|
||||
<p>Send us a message (Mock form):</p>
|
||||
<div style="margin-bottom: 1rem">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
47
public/templates/agency/deposer-annonce.html
Normal file
47
public/templates/agency/deposer-annonce.html
Normal file
@@ -0,0 +1,47 @@
|
||||
{{define "deposer-annonce"}}
|
||||
<!--==================== DÉPOSER ANNONCE ====================-->
|
||||
<section class="depannonce section" id="depannonce">
|
||||
<form action="" class="depannonce__form grid">
|
||||
<h3 class="depannonce__title">Ensemble, déposons <br>votre première annonce.</h3>
|
||||
|
||||
<div class="depannonce__group grid">
|
||||
<div>
|
||||
<label for="depannonce-email" class="depannonce__label">Votre email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="nom@email.com"
|
||||
id="depannonce-email"
|
||||
class="depannonce__input"
|
||||
required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
hx-get="/inscription"
|
||||
hx-target="#view"
|
||||
hx-push-url="true"
|
||||
class="depannonce__button button"
|
||||
onclick="inscriptionAnnonce()">
|
||||
Valider
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="depannonce__member">
|
||||
<p>Rejoignez les membres de la communauté Toutaloué</p>
|
||||
</div>
|
||||
<div class="depannonce__bring">
|
||||
<p>Une annonce peut vous rapporter en moyenne</p>
|
||||
<p class="depannonce__amount">120€/mois</p>
|
||||
<p class="depannonce__rental">5 locations/mois</p>
|
||||
|
||||
<p>Vous avez déjà un compte ?</p>
|
||||
<a onclick="deposerAnnonceToLogin()" class="depannonce__login">
|
||||
Connectez-vous
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</section>
|
||||
{{ end }}
|
||||
262
public/templates/agency/explore.html
Normal file
262
public/templates/agency/explore.html
Normal file
@@ -0,0 +1,262 @@
|
||||
{{define "explore"}}
|
||||
<!--==================== EXPLORE ====================-->
|
||||
<section class="explore section">
|
||||
<div class="container explore-content">
|
||||
<h1>Location de matériel pour <br> <span class="highlight">Professionnels et Partculiers</span></h1>
|
||||
<p>Plus de 1000 références disponibles immédiatement.</p>
|
||||
<a href="#" class="btn-primary">Catalogue</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== CATEGORIES ====================-->
|
||||
<section class="explore-categories bg-light">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Les catégories populaires</h2>
|
||||
|
||||
<div class="category-grid">
|
||||
<!-- Cat 1 -->
|
||||
<div class="cat-card">
|
||||
<div class="cat-icon"><i class="ri-building-2-fill"></i></div>
|
||||
<h3>Matériels de construction</h3>
|
||||
</div>
|
||||
<!-- Cat 2 -->
|
||||
<div class="cat-card">
|
||||
<div class="cat-icon"><i class="ri-tv-fill"></i></div>
|
||||
<h3>Électroménagers</h3>
|
||||
</div>
|
||||
<!-- Cat 3 -->
|
||||
<div class="cat-card">
|
||||
<div class="cat-icon"><i class="ri-roadster-fill"></i></div>
|
||||
<h3>Véhicules</h3>
|
||||
</div>
|
||||
<!-- Cat 4 -->
|
||||
<div class="cat-card">
|
||||
<div class="cat-icon"><i class="ri-home-9-fill"></i></div>
|
||||
<h3>Salles événementielles</h3>
|
||||
</div>
|
||||
<!-- Cat 5 -->
|
||||
<div class="cat-card">
|
||||
<div class="cat-icon"><i class="ri-ship-2-fill"></i></div>
|
||||
<h3>Bateaux</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== PRODUCT SPOTLIGHT ====================-->
|
||||
<section class="product-spotlight">
|
||||
<div class="container">
|
||||
<div class="flex-row-between mb-2">
|
||||
<h2 class="section-title">Les locations de la semaine</h2>
|
||||
<a href="#" class="see-all">Tous les produits<i class="ri-arrow-right-line"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<!-- Product 1 -->
|
||||
<article class="product-card">
|
||||
<div class="tag">Top</div>
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/chaise.jpg" alt="chair">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Chaise</span>
|
||||
<h4>Chaise événementielle</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir de</span>
|
||||
<span class="price">20.00€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightChaisePhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 2 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/bateau.jpg" alt="boat">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Bateau</span>
|
||||
<h4>Bateau de plaisance</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir de</span>
|
||||
<span class="price">185.00€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightBateauPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 3 -->
|
||||
<article class="product-card">
|
||||
<div class="tag promo">-15%</div>
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/vaisselle.jpg" alt="dishes">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Vaisselle</span>
|
||||
<h4>Vaisselle haut de gamme</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir de</span>
|
||||
<span class="price">35.00€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightVaissellePhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Product 4 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/bache-structure-evenement-2.png" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Bâche</span>
|
||||
<h4>Bâche événementielle</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">70.00€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightBachePhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 5 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Terre agricole</span>
|
||||
<h4>Terrain Attecoubé</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">180.00€</span>
|
||||
<span class="per">/ hectare</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightTerrainAttecoubePhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 6 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Terre agricole</span>
|
||||
<h4>Terrain Treichville</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">180.00€</span>
|
||||
<span class="per">/ hectare</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightTerrainTreichvillePhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 7 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Terre agricole</span>
|
||||
<h4>Terrain Marcory</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">180.00€</span>
|
||||
<span class="per">/ hectare</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightTerrainMarcoryPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 8 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Terre agricole</span>
|
||||
<h4>Terrain Bracodi</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">180.00€</span>
|
||||
<span class="per">/ hectare</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightTerrainBracodiPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 9 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Véhicule</span>
|
||||
<h4>Renault megane</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">78.43€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 10 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Véhicule</span>
|
||||
<h4>Mazda</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">78.43€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightMazdaPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 11 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Véhicule</span>
|
||||
<h4>Audi</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">78.43€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightAudiPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product 12 -->
|
||||
<article class="product-card">
|
||||
<div class="prod-image">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="tarp">
|
||||
</div>
|
||||
<div class="prod-details">
|
||||
<span class="category">Véhicule</span>
|
||||
<h4>Renault megane</h4>
|
||||
<div class="price-block">
|
||||
<span class="label">À partir</span>
|
||||
<span class="price">78.43€</span>
|
||||
<span class="per">/ jour</span>
|
||||
</div>
|
||||
<button class="btn-add" onclick="spotlightRenaultPhone()">Contacter l'agence</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
760
public/templates/agency/home.html
Normal file
760
public/templates/agency/home.html
Normal file
@@ -0,0 +1,760 @@
|
||||
{{define "home"}}
|
||||
<!--==================== BOOKING ====================-->
|
||||
<section class="booking">
|
||||
<div class="booking-content container">
|
||||
<h1>Location des produits et services</h1>
|
||||
<p>Des prix imbattables, des réservations flexibles.</p>
|
||||
<form class="booking-form" id="booking-form">
|
||||
<div class="form-group">
|
||||
<i class="ri-map-pin-fill"></i>
|
||||
<input type="text" placeholder="Localisation" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<i class="ri-calendar-fill"></i>
|
||||
<input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de départ" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<i class="ri-calendar-fill"></i>
|
||||
<input type="text" onfocus="(this.type='date')" onblur="(this.type='text')" placeholder="Date de retour" required />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Recherche</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== SERVICES ====================-->
|
||||
<section class="services section">
|
||||
<div class="services__container container grid">
|
||||
<article class="services__card">
|
||||
<i class="ri-truck-line"></i>
|
||||
<h3 class="services__title">Livraison gratuite</h3>
|
||||
<p class="services__description">Pour plus de 1000€ de locations</p>
|
||||
</article>
|
||||
<article class="services__card">
|
||||
<i class="ri-truck-line"></i>
|
||||
<h3 class="services__title">Paiements sécurisés</h3>
|
||||
<p class="services__description">100% de paiements sécurisés</p>
|
||||
</article>
|
||||
<article class="services__card">
|
||||
<i class="ri-truck-line"></i>
|
||||
<h3 class="services__title">Support 24/7</h3>
|
||||
<p class="services__description">Nous contacter au 01 84 21 13 96</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== HOME ====================-->
|
||||
<section class="home" id="home">
|
||||
<div class="home__container container" id="grid">
|
||||
<div class="home__data">
|
||||
<h1 class="home__title">
|
||||
Nos catégories <br>
|
||||
de produits
|
||||
</h1>
|
||||
<p class="home__description">
|
||||
Trouve les meilleurs produits de tes catégories préférées,
|
||||
explore des centaines de produits avec toutes les catégories
|
||||
possibles, profite d’une réduction de 15% et bien plus encore.
|
||||
</p>
|
||||
<a hx-get="/explore" hx-target="#view" hx-push-url="true" class="button" onclick="explore()">Découvrir maintenant</a>
|
||||
</div>
|
||||
<div class="home__images">
|
||||
<div class="home__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/terres-agricoles.jpg" alt="image" class="home__img">
|
||||
</article>
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/mat-construction.jpg" alt="image" class="home__img">
|
||||
</article>
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/electromenagers.avif" alt="image" class="home__img">
|
||||
</article>
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/vehicules.jpg" alt="image" class="home__img">
|
||||
</article>
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/salles-evenementielles.jpg" alt="image" class="home__img">
|
||||
</article>
|
||||
<article class="home__article swiper-slide">
|
||||
<img src="/public/assets/img/tools/logements-meubles.jpg" alt="image" class="home__img">
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== FARMLANDS ====================-->
|
||||
<section class="farmland section" id="farmland">
|
||||
<h2 class="section__title">Nos terres agricoles</h2>
|
||||
<div class="farmland__container container">
|
||||
<div class="farmland__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<article class="farmland__card swiper-slide">
|
||||
<img src="/public/assets/img/farmlands/terrain-attecoube.jpg" alt="image" class="farmland__img">
|
||||
<h2 class="farmland__title">Terrain Nord</h2>
|
||||
<div class="farmland__prices">
|
||||
<span class="farmland__discount">180€/hectare</span>
|
||||
<span class="farmland__price">250€/hectare</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="farmlandAttecoubeByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="farmlandAttecoube()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="farmland__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="farmland__card swiper-slide">
|
||||
<img src="/public/assets/img/farmlands/terrain-treichville.jpeg" alt="image" class="farmland__img">
|
||||
<h2 class="farmland__title">Terrain Sud</h2>
|
||||
<div class="farmland__prices">
|
||||
<span class="farmland__discount">180€/hectare</span>
|
||||
<span class="farmland__price">250€/hectare</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="farmlandTreichvilleByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="farmlandTreichville()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="farmland__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="farmland__card swiper-slide">
|
||||
<img src="/public/assets/img/farmlands/terrain-marcory.jpg" alt="image" class="farmland__img">
|
||||
<h2 class="farmland__title">Terrain Ouest</h2>
|
||||
<div class="farmland__prices">
|
||||
<span class="farmland__discount">180€/hectare</span>
|
||||
<span class="farmland__price">250€/hectare</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="farmlandMarcoryByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="farmlandMarcory()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="farmland__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="farmland__card swiper-slide">
|
||||
<img src="/public/assets/img/farmlands/terrain-bracodi.avif" alt="image" class="farmland__img">
|
||||
<h2 class="farmland__title">Terrain Est</h2>
|
||||
<div class="farmland__prices">
|
||||
<span class="farmland__discount">180€/hectare</span>
|
||||
<span class="farmland__price">250€/hectare</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="farmlandBracodiByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="farmlandBracodi()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="farmland__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="farmland__card swiper-slide">
|
||||
<img src="/public/assets/img/farmlands/terrain-sikasso.jpeg" alt="image" class="farmland__img">
|
||||
<h2 class="farmland__title">Terrain Sud</h2>
|
||||
<div class="farmland__prices">
|
||||
<span class="farmland__discount">180€/hectare</span>
|
||||
<span class="farmland__price">250€/hectare</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="farmlandSikassoByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="farmlandSikasso()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="farmland__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<div class="swiper-button-prev">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i class="ri-arrow-right-s-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== BUILDING ====================-->
|
||||
<section class="building section" id="building">
|
||||
<h2 class="section__title">Matériels de construction</h2>
|
||||
<div class="building__container container">
|
||||
<div class="building__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<article class="building__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/pelleteuse.avif" alt="image" class="building__img">
|
||||
<h2 class="building__title">Pelleteuse</h2>
|
||||
<div class="building__prices">
|
||||
<span class="building__discount">12.50€/jour</span>
|
||||
<span class="building__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="buildingPelleteuseByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="buildingPelleteuse()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="building__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="building__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/marteau_piqueur.avif" alt="image" class="building__img">
|
||||
<h2 class="building__title">Marteau piqueur</h2>
|
||||
<div class="building__prices">
|
||||
<span class="building__discount">12.50€/jour</span>
|
||||
<span class="building__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="buildingMarteauByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="buildingMarteau()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="building__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="building__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="building__img">
|
||||
<h2 class="building__title">Benne à béton</h2>
|
||||
<div class="building__prices">
|
||||
<span class="building__discount">12.50€/jour</span>
|
||||
<span class="building__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="buildingBenneByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="buildingBenne()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="building__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="building__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/goulotte_materiaux.avif" alt="image" class="building__img">
|
||||
<h2 class="building__title">Goulotte à matériaux</h2>
|
||||
<div class="building__prices">
|
||||
<span class="building__discount">12.50€/jour</span>
|
||||
<span class="building__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="buildingGoulotteByPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="buildingGoulotte()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="building__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="swiper-button-prev">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i class="ri-arrow-right-s-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== DISCOUNT ====================-->
|
||||
<section class="discount section" id="discount">
|
||||
<div class="discount__container container grid">
|
||||
<div class="discount__data">
|
||||
<h2 class="discount__title section__title">Jusqu'à 50% de réduction</h2>
|
||||
<p class="discount__description">
|
||||
Profitez des jours de réduction que nous avons pour vous,
|
||||
louez vos produits préférés, plus vous louez, plus nous avons
|
||||
de réductions pour vous.
|
||||
</p>
|
||||
<a href="#" class="button" id="discount-login">Louez maintenant</a>
|
||||
</div>
|
||||
<div class="discount__images">
|
||||
<img src="/public/assets/img/tools/benne_beton.avif" alt="image" class="discount__img-1">
|
||||
<img src="/public/assets/img/tools/boulonneuse.avif" alt="image" class="discount__img-2">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== VEHICLE ====================-->
|
||||
<section class="vehicle section" id="vehicle">
|
||||
<h2 class="section__title">Véhicules</h2>
|
||||
<div class="vehicle__container container">
|
||||
<div class="vehicle__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vehicle__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-3.avif" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Audi</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-1.jpg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Renault megane</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="vehicle__card swiper-slide">
|
||||
<img src="/public/assets/img/tools/car-product-2.jpeg" alt="image" class="vehicle__img">
|
||||
<div>
|
||||
<h2 class="vehicle__title">Mazda</h2>
|
||||
<div class="vehicle__prices">
|
||||
<span class="vehicle__discount">78.43€</span>
|
||||
<span class="vehicle__price">56.67€</span>
|
||||
</div>
|
||||
<div class="vehicle__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== JOIN ====================-->
|
||||
<section class="join section">
|
||||
<div class="join__container">
|
||||
<img src="/public/assets/img/tools/join-bg.avif" alt="image" class="join__bg">
|
||||
<div class="join__data container grid">
|
||||
<h2 class="join__title section__title">
|
||||
Abonnez-vous pour recevoir <br>
|
||||
les dernières mises à jour
|
||||
</h2>
|
||||
<form action="" class="join__form">
|
||||
<input type="email" placeholder="Entrez votre email" class="join__input">
|
||||
<button type="submit" class="join__button button">Abonnez-vous</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== TESTIMONIAL ====================-->
|
||||
<section class="testimonial section" id="testimonial">
|
||||
<h2 class="section__title">Opinions des clients</h2>
|
||||
<div class="testimonial__container container">
|
||||
<div class="testimonial__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<article class="testimonial__card swiper-slide">
|
||||
<i class="ri-user-fill"></i>
|
||||
<h2 class="testimonial__title">Alain Doumbia</h2>
|
||||
<p class="testimonial__description">
|
||||
La meilleure plateforme pour louer des produits,
|
||||
la location est très facile à faire et offre de grandes réductions.
|
||||
</p>
|
||||
<div class="testimonial__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</article>
|
||||
<article class="testimonial__card swiper-slide">
|
||||
<i class="ri-user-fill"></i>
|
||||
<h2 class="testimonial__title">Quentin Loz</h2>
|
||||
<p class="testimonial__description">
|
||||
La meilleure plateforme pour louer des produits,
|
||||
la location est très facile à faire et offre de grandes réductions.
|
||||
</p>
|
||||
<div class="testimonial__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</article>
|
||||
<article class="testimonial__card swiper-slide">
|
||||
<i class="ri-user-fill"></i>
|
||||
<h2 class="testimonial__title">Karim Sissoko</h2>
|
||||
<p class="testimonial__description">
|
||||
La meilleure plateforme pour louer des produits,
|
||||
la location est très facile à faire et offre de grandes réductions.
|
||||
</p>
|
||||
<div class="testimonial__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</article>
|
||||
<article class="testimonial__card swiper-slide">
|
||||
<i class="ri-user-fill"></i>
|
||||
<h2 class="testimonial__title">Abou Traoré</h2>
|
||||
<p class="testimonial__description">
|
||||
La meilleure plateforme pour louer des produits,
|
||||
la location est très facile à faire et offre de grandes réductions.
|
||||
</p>
|
||||
<div class="testimonial__stars">
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-fill"></i>
|
||||
<i class="ri-star-half-fill"></i>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{end}}
|
||||
29
public/templates/agency/inscription.html
Normal file
29
public/templates/agency/inscription.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{{define "inscription"}}
|
||||
<!--==================== INSCRIPTION ANNONCE ====================-->
|
||||
<section class="inscription section" id="inscription">
|
||||
<h2 class="section__title">Quel compte souhaitez-vous créer ?</h2>
|
||||
<div class="inscription__container container">
|
||||
<div class="inscription__swiper">
|
||||
<div class="inscription__wrapper">
|
||||
<article class="inscription__card">
|
||||
<i class="ri-user-2-fill"></i>
|
||||
<h2 class="inscription__title">
|
||||
PROFESSIONNEL<i class="ri-arrow-right-line"></i>
|
||||
</h2>
|
||||
<p>Idéal pour les sociétés, associations</p>
|
||||
<p>Ou auto-entreprenneurs</p>
|
||||
</article>
|
||||
|
||||
<article class="inscription__card">
|
||||
<i class="ri-user-fill"></i>
|
||||
<h2 class="inscription__title">
|
||||
PARTICULIER<i class="ri-arrow-right-line"></i>
|
||||
</h2>
|
||||
<p>Inscription simplifiée</p>
|
||||
<p>Louez vos outils sans forme juridique</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
210
public/templates/agency/songon.html
Normal file
210
public/templates/agency/songon.html
Normal file
@@ -0,0 +1,210 @@
|
||||
{{define "songon"}}
|
||||
<!--==================== SONGON ====================-->
|
||||
<section class="songon section" id="songon">
|
||||
<div class="songon__container container grid">
|
||||
<div class="songon__data">
|
||||
<h2 class="songon__title section__title">Songon</h2>
|
||||
<p class="songon__description">
|
||||
Une commune et une sous-préfecture située dans le district
|
||||
autonome d'Abidjan. Elle fait partie des communes de la région côtière
|
||||
et longe la lagune Ebrié à l'ouest.
|
||||
</p>
|
||||
<a href="#" class="button" onclick="songonPhone()">Contactez-nous</a>
|
||||
</div>
|
||||
<div class="songon__images">
|
||||
<img src="/public/assets/img/worldmap.png" alt="image" class="songon__img-1">
|
||||
<div class="pin sp">
|
||||
<span>Songon</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!--==================== EVENT ROOMS ====================-->
|
||||
<section class="eventrooms section" id="eventrooms">
|
||||
<h2 class="section__title">Salles évenementielles</h2>
|
||||
<div class="eventrooms__container container">
|
||||
<div class="eventrooms__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<article class="eventrooms__card swiper-slide">
|
||||
<img src="/public/assets/img/salle-evenementielle-1.jpg" alt="image" class="eventrooms__img">
|
||||
<h2 class="eventrooms__title">Salle A</h2>
|
||||
<div class="eventrooms__prices">
|
||||
<span class="eventrooms__discount">12.50€/jour</span>
|
||||
<span class="eventrooms__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="eventroomSalleAPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="eventroomSalleA()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="eventrooms__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="eventrooms__card swiper-slide">
|
||||
<img src="/public/assets/img/salle-evenementielle-2.jpg" alt="image" class="eventrooms__img">
|
||||
<h2 class="eventrooms__title">Salle B</h2>
|
||||
<div class="eventrooms__prices">
|
||||
<span class="eventrooms__discount">12.50€/jour</span>
|
||||
<span class="eventrooms__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="eventroomSalleBPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="eventroomSalleB()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="eventrooms__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="eventrooms__card swiper-slide">
|
||||
<img src="/public/assets/img/salle-evenementielle-3.jpg" alt="image" class="eventrooms__img">
|
||||
<h2 class="eventrooms__title">Salle C</h2>
|
||||
<div class="eventrooms__prices">
|
||||
<span class="eventrooms__discount">12.50€/jour</span>
|
||||
<span class="eventrooms__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="eventroomSalleCPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="eventroomSalleC()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="eventrooms__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="eventrooms__card swiper-slide">
|
||||
<img src="/public/assets/img/salle-evenementielle-4.jpg" alt="image" class="eventrooms__img">
|
||||
<h2 class="eventrooms__title">Salle D</h2>
|
||||
<div class="eventrooms__prices">
|
||||
<span class="eventrooms__discount">12.50€/jour</span>
|
||||
<span class="eventrooms__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="eventroomSalleDPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="eventroomSalleD()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="eventrooms__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="swiper-button-prev">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i class="ri-arrow-right-s-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==================== TARPAULIN ====================-->
|
||||
<section class="tarpaulin section" id="tarpaulin">
|
||||
<h2 class="section__title">Bâches structure événement</h2>
|
||||
<div class="tarpaulin__container container">
|
||||
<div class="tarpaulin__swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<article class="tarpaulin__card swiper-slide">
|
||||
<img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
|
||||
<h2 class="tarpaulin__title">Bâche structure A</h2>
|
||||
<div class="tarpaulin__prices">
|
||||
<span class="tarpaulin__discount">11.50€/jour</span>
|
||||
<span class="tarpaulin__price">19.30€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="tarpaulinBacheAPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="tarpaulinBacheA()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="tarpaulin__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="tarpaulin__card swiper-slide">
|
||||
<img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
|
||||
<h2 class="tarpaulin__title">Bâche structure B</h2>
|
||||
<div class="tarpaulin__prices">
|
||||
<span class="tarpaulin__discount">12.10€/jour</span>
|
||||
<span class="tarpaulin__price">19.20€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="tarpaulinBacheBPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="tarpaulinBacheB()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="tarpaulin__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="tarpaulin__card swiper-slide">
|
||||
<img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
|
||||
<h2 class="tarpaulin__title">Bâche structure C</h2>
|
||||
<div class="tarpaulin__prices">
|
||||
<span class="tarpaulin__discount">12.50€/jour</span>
|
||||
<span class="tarpaulin__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="tarpaulinBacheCPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="tarpaulinBacheC()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="tarpaulin__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="tarpaulin__card swiper-slide">
|
||||
<img src="/public/assets/img/bache-structure-evenement-1.png" alt="image" class="tarpaulin__img">
|
||||
<h2 class="tarpaulin__title">Bâche structure D</h2>
|
||||
<div class="tarpaulin__prices">
|
||||
<span class="tarpaulin__discount">12.50€/jour</span>
|
||||
<span class="tarpaulin__price">19.50€/jour</span>
|
||||
</div>
|
||||
<button class="skinny__border__button" onclick="tarpaulinBacheDPhone()">
|
||||
<i class="ri-phone-fill"></i>Réserver par téléphone
|
||||
</button>
|
||||
<button class="skinny__button" onclick="tarpaulinBacheD()">
|
||||
<i class="ri-shopping-cart-fill"></i>Réserver en ligne
|
||||
</button>
|
||||
<div class="tarpaulin__actions">
|
||||
<button><i class="ri-search-line"></i></button>
|
||||
<button><i class="ri-heart-3-line"></i></button>
|
||||
<button><i class="ri-eye-line"></i></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<div class="swiper-button-prev">
|
||||
<i class="ri-arrow-left-s-line"></i>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<i class="ri-arrow-right-s-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{end}}
|
||||
538
public/templates/index.html
Normal file
538
public/templates/index.html
Normal file
@@ -0,0 +1,538 @@
|
||||
{{define "index"}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!--=============== FAVICON ===============-->
|
||||
<link rel="shortcut icon" href="/public/assets/img/toutaloue-logo.jpg" type="image/x-icon" />
|
||||
|
||||
<!--=============== REMIXICONS ===============-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css"
|
||||
/>
|
||||
|
||||
<title>{{.Title}} - Toutaloue</title>
|
||||
|
||||
<!--=============== SWIPER CSS ===============-->
|
||||
<link rel="stylesheet" href="/public/assets/css/swiper-bundle.min.css" />
|
||||
|
||||
<!--=============== CSS ===============-->
|
||||
<link rel="stylesheet" href="/public/assets/css/style.css" />
|
||||
|
||||
<!--=============== HTMX ===============-->
|
||||
<script src="https://unpkg.com/htmx.org@2.0.8"></script>
|
||||
|
||||
<title>Toutaloue | {{.Title}}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--==================== HEADER ====================-->
|
||||
<header class="header">
|
||||
<nav class="nav container">
|
||||
<!--<a href="/" class="nav__logo">Toutaloué</a>-->
|
||||
<a href="/" class="nav__logo"><img src="/public/assets/img/toutaloue-logo.jpg" alt="logo"></a>
|
||||
|
||||
<div class="nav__menu" id="nav-menu">
|
||||
<ul class="nav__list">
|
||||
<li class="dropdownagency__item">
|
||||
<div class="dropdown__button">
|
||||
Nos agences
|
||||
<img
|
||||
src="/public/assets/img/arrow-dropdown.png"
|
||||
alt="image"
|
||||
class="dropdown__arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdownagency__container">
|
||||
<div class="dropdownagency__content">
|
||||
<div class="dropdown__group">
|
||||
<span class="dropdown__title">Zones géographiques</span>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a
|
||||
hx-get="/songon"
|
||||
hx-target="#view"
|
||||
hx-push-url="true"
|
||||
class="dropdown__link"
|
||||
onclick="zoneSongon()"
|
||||
>Songon</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Yopougon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Dabou</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dropdown__item">
|
||||
<div class="dropdown__button">
|
||||
Nos produits
|
||||
<img
|
||||
src="/public/assets/img/arrow-dropdown.png"
|
||||
alt="image"
|
||||
class="dropdown__arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="dropdown__container">
|
||||
<div class="dropdown__content">
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/terres-agricoles.jpg"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title"
|
||||
>Terres agricoles</span
|
||||
>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Terrain Nord</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Terrain Sud</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Terrain Ouest</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Terrain Est</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/mat-construction.jpg"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title"
|
||||
>Matériels de construction</span
|
||||
>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Pelleteuses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Marteaux-piqueurs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Bennes à béton</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Goulottes à matériaux</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Bétonnières</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Burineurs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Débroussailleuses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Échafaudage</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Échelle</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/electromenagers.avif"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title">Électroménagers</span>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Robots aspirateurs laveur</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Télévisions 4K UHD</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Réfrigérateurs multi portes</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Laves linges séchant</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Sèches linges</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Fours encastrables</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Expressos Broyeurs</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Robots pâtissiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Cuisinières à cuisson</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/vehicules.jpg"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title">Véhicules</span>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Voitures électriques</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Utilitaires</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Camions bennes</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Motos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Chariots élévateurs</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Camions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Bateaux moteurs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/salles-evenementielles.jpg"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title">Salles événementielles</span>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Vêtements d'événementiel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Barres son</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Chaises</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Vaisselles</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Lots de lumières</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Tables personnalisées</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Bâches sur mesure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Groupes électrogènes</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Lieux privatisés</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown__group">
|
||||
<div class="dropdown__icon">
|
||||
<img
|
||||
src="/public/assets/img/tools/logements-meubles.jpg"
|
||||
alt="image"
|
||||
/>
|
||||
</div>
|
||||
<span class="dropdown__title"
|
||||
>Logements meublés</span
|
||||
>
|
||||
<ul class="dropdown__list">
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Appartement 3 pièces</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Appartement 2 pièces</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Studio</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link"
|
||||
>Appartement 4 pièces</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Appartement 5 pièces</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Appartement duplex 3 pièces</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="dropdown__link">Appartement duplex 4 pièces</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
hx-get="/deposer-annonce"
|
||||
hx-target="#view"
|
||||
hx-push-url="true"
|
||||
class="nav__link slim-button"
|
||||
onclick="deposerAnnonce()">
|
||||
Déposer une annonce
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Close button -->
|
||||
<div class="nav__close" id="nav-close">
|
||||
<i class="ri-close-large-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav__actions">
|
||||
<!-- Login button -->
|
||||
<i class="ri-user-line login-button" id="login-button"></i>
|
||||
</div>
|
||||
|
||||
<!-- Toggle button -->
|
||||
<div class="nav__toggle" id="nav-toggle">
|
||||
<i class="ri-menu-5-line"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!--==================== LOGIN ====================-->
|
||||
<div class="login grid" id="login-content">
|
||||
<form action="" class="login__form grid">
|
||||
<h3 class="login__title">Me connecter</h3>
|
||||
<div class="login__group grid">
|
||||
<div>
|
||||
<label for="login-email" class="login__label">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Entrez votre email"
|
||||
id="login-email"
|
||||
class="login__input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="login-pass" class="login__label">Mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Entrez votre mot de passe"
|
||||
id="login-pass"
|
||||
class="login__input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="login__signup">
|
||||
Vous n'avez pas de mot de passe ? <a href="#">S'enregistrer</a>
|
||||
</span>
|
||||
<a href="#" class="login__forgot"> Mot de passe oublié </a>
|
||||
<button type="submit" class="login__button button">
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<i class="ri-close-line login__close" id="login-close"></i>
|
||||
</div>
|
||||
|
||||
<!--==================== BOOKING BY PHONE MODAL ====================-->
|
||||
<div class="modal grid" id="modal-content">
|
||||
<form action="" class="modal__form grid">
|
||||
<h3 class="modal__title">Bienvenue chez Toutaloué</h3>
|
||||
<p>Nous contacter au 01 84 21 13 96</p>
|
||||
</form>
|
||||
<i class="ri-close-line modal__close" id="modal-close"></i>
|
||||
</div>
|
||||
|
||||
<!-- The container where HTMX will swap content -->
|
||||
<!--==================== MAIN ====================-->
|
||||
<main class="main" id="view">
|
||||
<!-- Server-side conditional for Full Page Load -->
|
||||
{{if eq .Page "home"}} {{template "home" .}} {{end}} {{if eq .Page
|
||||
"explore"}} {{template "explore" .}} {{end}} {{if eq .Page "songon"}}
|
||||
{{template "songon" .}} {{end}} {{if eq .Page "contact"}} {{template
|
||||
"contact" .}} {{end}}
|
||||
{{if eq .Page "deposer-annonce"}}
|
||||
{{template "deposer-annonce" .}} {{end}}
|
||||
{{if eq .Page "inscription"}}
|
||||
{{template "inscription" .}} {{end}}
|
||||
</main>
|
||||
|
||||
<!--=============== FOOTER ===============-->
|
||||
<footer class="footer">
|
||||
<div class="footer__container container grid">
|
||||
<div>
|
||||
<a href="#" class="footer__logo">Toutaloué</a>
|
||||
<p class="footer__description">
|
||||
Trouve et explore les <br />
|
||||
meilleurs produits
|
||||
</p>
|
||||
</div>
|
||||
<div class="footer__data grid">
|
||||
<div>
|
||||
<h3 class="footer__title">À propos</h3>
|
||||
<ul class="footer__links">
|
||||
<li>
|
||||
<a href="#" class="footer__link">Récompenses</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link">FAQs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link"
|
||||
>Politique de confidentialité</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link">Conditions d'utilisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="footer__title">Entreprise</h3>
|
||||
<ul class="footer__links">
|
||||
<li>
|
||||
<a href="#" class="footer__link">Blogs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link">Communauté</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link">Notre équipe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="footer__link">Aide</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="footer__title">Contact</h3>
|
||||
<ul class="footer__links">
|
||||
<li>
|
||||
<address class="footer__info">
|
||||
BASSAM MOOSSOU <br />
|
||||
RÉSIDENTIEL LOT 393
|
||||
</address>
|
||||
</li>
|
||||
<li>
|
||||
<address class="footer__info">
|
||||
contact@toutaloue.com <br />
|
||||
0987-654-321
|
||||
</address>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="footer__title">Social</h3>
|
||||
<div class="footer__social">
|
||||
<a
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
class="footer__social-link"
|
||||
>
|
||||
<i class="ri-facebook-circle-line"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
class="footer__social-link"
|
||||
>
|
||||
<i class="ri-instagram-line"></i>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/"
|
||||
target="_blank"
|
||||
class="footer__social-link"
|
||||
>
|
||||
<i class="ri-twitter-x-line"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="footer__copy"> © Tous Droits Réservés par JKI </span>
|
||||
</footer>
|
||||
|
||||
<!--=============== SCROLLUP ===============-->
|
||||
<a href="#" class="scrollup" id="scroll-up">
|
||||
<i class="ri-arrow-up-line"></i>
|
||||
</a>
|
||||
|
||||
<!--=============== SCROLLREVEAL JS ===============-->
|
||||
<script src="/public/assets/js/scrollreveal.min.js"></script>
|
||||
|
||||
<!--=============== SWIPER JS ===============-->
|
||||
<script src="/public/assets/js/swiper-bundle.min.js"></script>
|
||||
|
||||
<!--=============== MAIN JS ===============-->
|
||||
<script src="/public/assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user