<!--
https://www.sitepoint.com/community/t/reduce-the-size-of-the-cards/453390/7
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="favicon.png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="La tokenisation immobilière, la propriété réinventée" />
<meta name="keywords" content="immobilier,tokenisation,propriete,location,vente,smartimmo">
<title>SmartImmo</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/a980e88be8.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="page-wrap">
<section class="header-home">
<!-- menu -->
<header>
<div class="logo_link">
<a href="#home" class="logo"><img width=" 25 " height=" 25 " src=" https://img.icons8.com/water-color/50/home.png " alt=" accueil " />SmartImmo</a>
<div class="menu_link">
<a href="#home">Home</a>
<a href="#market">Marketplace</a>
<a href="#services">Tokenisation ?</a>
<a href="#about">About</a>
<a href="#section-wrapper">Contact</a>
<a href="#section_faq">Faq</a>
</div>
</div>
<!-- responsive menu -->
<div class="sidebar" id="mySidebar">
<div class="closebtn" onclick="closeNav()">
<img src="images/close.png">
</div>
<a href="#home">Home</a>
<a href="#market">Marketplace</a>
<a href="#services">Tokenisation ?</a>
<a href="#about">About</a>
<a href="#section-wrapper">Contact</a>
<a href="#section_faq">Faq</a>
<a href="#">Login</a>
<a href="#">Sign up</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
<img src="images/menu.png">
Menu
</button>
</div>
<!-- responsive menu -->
<div class="link_buttons">
<a href="#">Login</a>
<a href="#" class="orange_link"><span>S'inscrire </span></a>
</div>
</header>
<!-- menu -->
<!-- home -->
<section id="#home" class="home">
<div class="left">
<h1>La propriété réinventée.</h1>
<p>SmartImmo utilise la blockchain Ethereum pour permettre aux investisseurs du monde entier d’acheter
des tokens
immobiliers fractionnés, qui représentent une participation dans des propriétés immobilières.</p>
<a href="#" class="orange_link">Commencer</a>
</div>
<div class="right">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
</div>
<div class="statistiques">
<span>
<h2>450+</h2>
<p>Biens en Vente</p>
</span>
<span>
<h2>120+</h2>
<p>Biens a Louer</p>
</span>
<span>
<h2>160+</h2>
<p>Biens Vendus</p>
</span>
</div>
</section>
<!-- home -->
</section>
<!-- about -->
<section id="about" class="about">
<div class="image">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
</div>
<div class="content">
<h1>À propos de la société</h1>
<h2>La tokenisation de l'immobilier <br> est devenue notre objectif.</h2>
<p>Nous sommes spécialisés et toujours engagés à fournir des services de développement de blockchain qui
visent à résoudre
les défis du monde réel auxquels sont confrontés les grandes entreprises et les startups dans le monde
entier.</p>
</div>
</section>
<!-- about -->
<!-- services -->
<section id="services" class="why_us">
<h1>tokenisation immobilière</h1>
<div class="list_box">
<div class="box">
<img src="images/blockchaine.png">
<h2>la blockchain</h2>
<p>La blockchain est un registre distribué qui permet d’enregistrer des transactions. La
caractéristique principale de la blockchain est sa décentralisation. Contrairement aux bases de
données traditionnelles
qui sont souvent stockées sur des serveurs, la blockchain est répartie sur l'ensemble des nœuds du
réseau.</p>
</div>
<div class="box">
<img src="images/exemple1.png">
<h2>Exemple A :</h2>
<p>Monsieur A est propriétaire d’un appartement à Paris. Il souhaite diviser ce bien en 10 jetons qui
vont représenter
chacun 10% des droits économiques attachés à ce bien. Il décide de vendre 2 de ces jetons à Monsieur
B. Monsieur A est
donc propriétaire de 80% des droits économiques attachés à l’appartement et Monsieur B est
propriétaire de 20% de ces
droits.</p>
</div>
<div class="box">
<img src="images/exemple2.png">
<h2>Exemple B :</h2>
<p>
le locataire d’un bien immobilier qui a fait l’objet d’une tokenisation paye son loyer via un smart
contract sur la
blockchain. Le smart contract va automatiquement verser le montant du loyer aux propriétaires des
tokens. Si les jetons
font l’objet d’une transaction, le propriétaire du nouveau token recevra une part du loyer sans
avoir besoin de
contacter le locataire du bien.
</p>
</div>
<div class="box">
<img src="images/exemple3.png">
<h2>les avantages</h2>
<p>Réduction des coûts : la tokenisation permet de réduire les coûts, car les jetons peuvent être
échangés.</p><br>
<p>Sécurité : la blockchain est une technologie sécurisée : il est très difficile de la pirater.</p><br>
<p>Fluidité des échanges : le propriétaire d’un token peut très facilement revendre cet actif.</p>
</div>
</div>
</section>
<!-- services -->
<!-- choice -->
<section class="why_us">
<h1>Pourquoi Nous Choisir</h1>
<div class="list_box">
<div class="box">
<img src="images/customer-service.png">
<h2>support</h2>
<p>Discutez directement avec les représentants des entreprises sur notre plateforme pour recueillir
facilement les
informations clés dont vous avez besoin.</p>
</div>
<div class="box">
<img src="images/experience.png">
<h2>experience</h2>
<p>De plus, l'équipe SmartImmo assure la plus grande sécurité et fiabilité de vos contrats intelligents
grâce à un audit
méticuleux et à une maintenance continue.</p>
</div>
<div class="box">
<img src="images/creative-brain.png">
<h2>L’avenir</h2>
<p>La propriété fractionnée démocratise l'accès à l'investissement immobilier et répartit et minimise
ainsi les risques et
le travail liés à la possession d'un bien immobilier. Et SmartImmo rend cela encore plus simple !
</p>
</div>
<div class="box">
<img src="images/puzzle.png">
<h2>solution</h2>
<p>Découvrez la puissance de la plateforme SmartImmo et tirez parti de vos actifs comme jamais
auparavant grâce à la puissance de la finance décentralisée sur la blockchain. </p>
</div>
</div>
</section>
<!-- choice -->
<!-- decoration -->
<section id="market" class="decoration">
<h1>Marketplace</h1>
<div class="filter-container container flex">
<h3>Filtres</h3>
<button class="filterBtn flex icons active" data-filter="all">
<i class="fa-solid fa-globe fa-lg"></i>
<span>Voir tout</span>
</button>
<button class="filterBtn flex icons" data-filter="maison">
<i class="fa-solid fa-house fa-lg"></i>
<span>Maison</span>
</button>
<button class="filterBtn flex icons" data-filter="appartement">
<i class="fa-solid fa-building fa-lg"></i>
<span>Appartement</span>
</button>
</div>
<div id="card-container" class="card-container deco-list">
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Tenerife Costa Adeje</p>
<span>Bel Appartement Avec Vue Sur La Mer</span>
<button class="orange_link">Prix 197 265€ | Jeton 80,50€ </button>
</div>
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Liege</p>
<span>Appartement de la Résidence 3 CH, parking, cave.</span>
<button class="orange_link">Prix 357 965€ | Jeton 260,30€</button>
</div>
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Liege</p>
<span>App lumineux, 5 CH, balcons, empl. parking, cave, PEB : C.</span>
<button class="orange_link">Prix 337 765€ | Jeton 230,50€</button>
</div>
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Liege</p>
<span>Appartement de la Résidence 5 CH, parking, cave.</span>
<button class="orange_link">Prix 401 655€ | Jeton 315,30€</button>
</div>
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>France Paris</p>
<span>Neuf - Appartement 3CH avec Grande Terrasse.</span>
<button class="orange_link">Prix 554 565€ | Jeton 395,30€</button>
</div>
<div class="card deco appartement">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Liège</p>
<span>Lofts quartier entièrement piétonnier au cœur de Liège 1 CH.</span>
<button class="orange_link">Prix 194 000€ | Jeton 110,00€</button>
</div>
<div class="card deco maison">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Espagne Benidorm</p>
<span>Belle villa située à Sierra Cortina, Benidorm avec piscine, 3 chambres.
bains.</span>
<button class="orange_link">Prix 294 000€ | Jeton 290,00€</button>
</div>
<div class="card deco maison">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Spa</p>
<span>Villa 5 Ch, 2 salle de bain, grand jardin.</span>
<button class="orange_link">Prix 594 000€ | Jeton 410,00€</button>
</div>
<div class="card deco maison">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Belgique Namur</p>
<span>Maison 3 Ch, 1 salle de bain, grand jardin.</span>
<button class="orange_link">Prix 194 000€ | Jeton 190,00€</button>
</div>
<div class="card deco maison">
<img src="https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19630">
<p>Espagne Majorque</p>
<span>Splendide Villa 3 Ch, 1 salle de bain, garage, piscine.</span>
<button class="orange_link">Prix 444 000€ | Jeton 330,00€</button>
</div>
<div class="card deco maison">
<img src="images/malmedy2.jpg">
<p>Belgique Malmedy</p>
<span>Neuf - Maison 3 Ch, 2 salle de bain, garage, très grand jardin.</span>
<button class="orange_link">Prix 314 000€ | Jeton 230,00€</button>
</div>
<div class="card deco maison">
<img src="images/Bruge1.jpg">
<p>Belgique Bruge</p>
<span>Une perle rare! - Maison 3 ch, 1 salle de bain, 2 garage.</span>
<button class="orange_link">Prix 714 000€ | Jeton 590,00€</button>
</div>
<div class="card deco maison">
<img src="images/alicante1.jpg">
<p>Espagne Alicante</p>
<span>Maison 3 Ch, 1 salle de bain, à flanc de coline.</span>
<button class="orange_link">Prix 307 000€ | Jeton 285,00€</button>
</div>
<div class="card deco maison">
<img src="images/alicante2.jpg">
<p>Espagne Majorque</p>
<span>Maison 3 Ch, 2 salle de bain, garage.</span>
<button class="orange_link">Prix 657 000€ | Jeton 495,00€</button>
</div>
<div class="card deco maison">
<img src="images/Italie2.jpg">
<p>Italie Sicille</p>
<span>Maison 2 Ch, piscine, garage.</span>
<button class="orange_link">Prix 397 000€ | Jeton 355,00€</button>
</div>
<div class="card deco maison">
<img src="images/majorque3.jpg">
<p>Espagne Minorque</p>
<span>Maison 2 Ch, piscine, garage, grand jardin.</span>
<button class="orange_link">Prix 297 000€ | Jeton 225,00€</button>
</div>
</div>
<div class="pagination">
<button id="prevBtn">Previous</button>
<span id="pageLinks"></span>
<button id="nextBtn">Next</button>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="deco.js"></script>
<!-- decoration -->
<!-- Faq -->
<section id="section_faq" class="section_faq">
<h1>Questions Fréquemment Posées</h1>
<ul>
<li>
<div class="question">
<span>Qu'est-ce qu'un contrat intelligent ?</span>
<span class="icon">
<ion-icon name="add"></ion-icon>
</span>
</div>
<div class="answer">
<span>Un contrat intelligent est un contrat numérique automatisé et auto-exécutable dont les termes
d'un
accord sont
directement écrits dans le code. Dans le contexte des actifs tokenisés, les contrats
intelligents
jouent un
rôle
essentiel en automatisant divers aspects des transactions. Ils permettent le transfert sécurisé
et
transparent des
actifs numériques, garantissant que la propriété et les conditions sont exécutées
automatiquement
lorsque
des conditions
prédéfinies sont remplies.</span>
</div>
</li>
<li>
<div class="question">
<span>Qu’est-ce que la tokenisation immobilière ?</span>
<span class="icon">
<ion-icon name="add"></ion-icon>
</span>
</div>
<div class="answer">
<span>La tokenisation est une opération consistant à fragmenter la propriété d’un bien en plusieurs
jetons
numériques. Ces
jetons peuvent être échangés grâce à la blockchain qui permet d’enregistrer les transactions et
de
savoir à
tout moment
quelle personne est propriétaire d’un ou plusieurs jetons.</span>
</div>
</li>
<li>
<div class="question">
<span>Pourquoi avoir recours à la tokenisation de l’immobilier ?</span>
<span class="icon">
<ion-icon name="add"></ion-icon>
</span>
</div>
<div class="answer">
<span>La tokenisation d’un bien immobilier permet d’échanger rapidement et facilement les droits
attachés à un
bien
immobilier. Par ailleurs, le recours à la blockchain permet de mettre en place des “smart
contracts”
pour
louer ou
vendre le bien immobilier.</span>
</div>
</li>
<li>
<div class="question">
<span>Quels sont les avantages de la tokenisation immobilière ?</span>
<span class="icon">
<ion-icon name="add"></ion-icon>
</span>
</div>
<div class="answer">
<span>Réduction des coûts : la tokenisation permet de réduire les coûts, car les jetons peuvent être
échangés
librement sans
l’intervention d’un tiers de confiance. Par ailleurs, l’échange d’un token n’est pas assimilable
à
la vente
du bien
immobilier, il n’y a donc pas de frais d’enregistrement à payer.</span>
</div>
</li>
<li>
<div class="question">
<span>Comment définir la valeur d’un token immobilier ?</span>
<span class="icon">
<ion-icon name="add"></ion-icon>
</span>
</div>
<div class="answer">
<span>Il existe deux façons de définir la valeur d’un token immobilier : en fonction de la valeur du
bien ou
en fonction de
l’offre et la demande (c'est-à-dire de la valeur à laquelle le token est échangé sur le
marché).</span>
</div>
</li>
</ul>
</section>
<section id="section-wrapper">
<div class="box-wrapper">
<div class="info-wrap">
<h2 class="info-title">Coordonnées</h2>
<h3 class="info-sub-title">Remplissez le formulaire et notre équipe vous répondra dans les 24 heures
</h3>
<ul class="info-details">
<li>
<i class="fas fa-phone-alt"></i>
<span>Téléphone:</span> <a href="tel:+ 1235 2355 98">+ 32 470 85 85</a>
</li>
<li>
<i class="fas fa-paper-plane"></i>
<span>Email:</span> <a href="mailto:info@yoursite.com">info@smartimmo.com</a>
</li>
<li>
<i class="fas fa-globe"></i>
<span>Website:</span> <a href="#">smartimmo.com</a>
</li>
</ul>
<ul class="social-icons">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
<div class="form-wrap">
<form action="#" method="POST">
<h2 class="form-title">Envoyez nous votre message</h2>
<div class="form-fields">
<div class="form-group">
<input type="text" class="fname" placeholder="Votre Nom">
</div>
<div class="form-group">
<input type="text" class="lname" placeholder="Votre Prénom">
</div>
<div class="form-group">
<input type="email" class="email" placeholder="Mail">
</div>
<div class="form-group">
<input type="number" class="phone" placeholder="Téléphone">
</div>
<div class="form-group">
<textarea name="message" id="" placeholder="Écrivez votre message"></textarea>
</div>
</div>
<input type="submit" value="Send Message" class="submit-button">
</form>
</div>
</div>
</section>
</div><!-- end page-wrap -->
<script>
const questions = document.querySelectorAll('.question')
questions.forEach(function(question) {
question.addEventListener('click', function() {
question.classList.toggle('open')
})
})
</script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- Fin Faq -->
<!-- footer -->
<footer>
<div class="footer-content">
<h1>SmartImmo</h1>
<p>Pour la première fois, les investisseurs du monde entier peuvent investir sur le marché immobilier grâce
à une
propriété fractionnée, tokenisée et entièrement conforme.
</p>
<h4><a href="#section-wrapper">Contactez-nous</a></h4>
<ul class="socials">
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p>Copyright ©2024 SmartImmo. Desighed by <span>SmartImmo</span></p>
</div>
</footer>
<script src="script.js"></script>
<!-- BACK TO TOP BUTTON -->
<a href="#" class="back-to-top">
<span class="material-icons">arrow_upward</span>
</a>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto Condensed", sans-serif;
}
body {
/*transition: 0.5s; not a good idea*/
}
a {
text-decoration: none;
}
.page-wrap {
max-width: 1280px;
margin: auto;
padding: 0 1rem;
}
.header-home {
background-color: #faf8f4;
position: relative;
}
h1 {
font-size: 60px;
font-weight: bold;
letter-spacing: 1px;
margin: 35px 0;
text-transform: capitalize;
}
/* menu */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
text-transform: capitalize;
color: #000;
font-size: 30px;
font-weight: bold;
font-style: italic;
}
header .logo_link {
display: flex;
align-items: center;
}
.menu_link {
margin-left: 60px;
}
.menu_link a {
margin: 0 10px;
font-size: 15px;
color: #999;
}
.menu_link a:hover {
color: #f26440;
height: 5px;
border: 0;
}
.menu_link a:first-child {
color: #f26440;
}
.link_buttons a {
margin-left: 15px;
}
.link_buttons a:first-child {
color: #f26440;
}
.orange_link {
color: #fff;
padding: 8px 30px;
background-color: #f26440;
border-radius: 4px;
text-transform: capitalize;
cursor: pointer;
}
.orange_link span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.orange_link span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.orange_link:hover span {
padding-right: 25px;
}
.orange_link:hover span:after {
opacity: 1;
right: 0;
}
/*home*/
.home,
.about {
margin: 50px 0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
flex-wrap: wrap;
}
.home .left {
display: flex;
flex-direction: column;
padding: 0 5rem 0 0;
width: 65%;
}
.home .left p {
margin: 25px 0;
color: #999;
letter-spacing: 0.5px;
line-height: 25px;
}
.home .left .orange_link {
width: fit-content;
padding: 12px 50px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.home .right {
width: 35%;
}
.home .right img {
width: 100%;
height: auto;
display: block;
}
.statistiques {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 100%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
padding: 20px 10%;
margin: 50px 0;
}
.statistiques span {
text-align: center;
}
.statistiques span h2 {
color: #f26440;
font-size: 25px;
margin-bottom: 10px;
}
.statistiques span p {
color: #999;
text-transform: capitalize;
}
/*about*/
.content {
display: flex;
flex-direction: column;
padding: 0 0 0 5rem;
width: 65%;
}
.image {
width: 35%;
}
.image img {
width: 100%;
height: auto;
display: block;
}
.about .content h1 {
margin: 16px 0;
}
.about .content h2 {
margin: 15px 0;
color: #333;
}
.about .content p {
color: #999;
text-align: justify;
letter-spacing: 0.5px;
line-height: 25px;
}
/*choice*/
.why_us {
padding: 20px 0;
display: flex;
flex-direction: column;
}
.why_us img {
width: 60px;
}
.list_box {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fill, 265px);
grid-gap: 10px;
}
.list_box .box {
text-align: center;
background-color: #faf8f4;
border-radius: 4px;
padding: 50px 25px;
margin: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.list_box .box h2 {
margin: 10px 0;
color: #f26440;
letter-spacing: 1px;
text-transform: capitalize;
}
.list_box .box p {
color: #999;
}
/*decoration*/
.decoration {
padding: 20px 0;
}
.deco-list .deco img {
width: 100%;
height: auto;
object-fit: cover;
}
.deco-list .deco {
text-align: center;
cursor: pointer;
padding: 10px;
transition: 0.5s;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin: 0 0 1rem;
}
.deco-list .deco:hover {
transform: scale(1.1);
}
.deco-list .deco p {
margin: 5px 0;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.deco-list .deco span {
font-size: 15px;
color: #333;
display: block;
}
.deco-list .deco .orange_link {
margin-top: 5px;
border: 1px solid #f26440;
letter-spacing: 1px;
width: 100%;
transition: 0.5s;
cursor: pointer;
}
.deco-list .deco .orange_link:hover {
background-color: transparent;
color: #f26440;
}
/* pagination changes */
.pagination {
text-align: center;
margin-top: 2rem;
}
.pagination a,
.pagination button {
-webkit-appearance:none;
appearance:none;
background:transparent;
color: #f26440;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #f26440;
margin: 0 5px;
border-radius: 4px;
}
.pagination a:hover,
.pagination button:hover {
background-color: #f26440;
color: white;
}
.pagination .active {
background-color: #f26440;
color: white;
}
.pagination button[disabled]{
opacity:0.5;
pointer-events:none;
}
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 10px;
}
#page-numbers {
margin-top: 20px;
font-size: 16px;
}
.card{
opacity:1;
transition-property: display, opacity;
transition-duration: 3s;
transition-behavior: allow-discrete;
opacity: 1;
@starting-style {
opacity: 0;
}
}
.card[style="display: none;"] {
opacity: 0;
}
/*filtres*/
:root {
--white: #fff;
--orange: #f26440;
--grey: #eee;
--black: #000;
}
.container {
margin: 2rem auto;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
}
#market .container.flex {
flex-wrap: wrap;
}
.icons {
padding: 1rem;
height: 50px;
border: 2px solid var(--grey) ;
background-color:var(--grey);
border-radius: 100px;
}
.icons i {
display: inline-block;
height: 45px;
aspect-ratio: 1/1;
color: var(--white);
line-height: 45px;
text-align: center;
border: 1px solid var(--orange);
background-color: var(--orange);
border-radius: 50%;
cursor: pointer;
}
.icons:hover {
background-color: #31279d;
color: var(--white);
}
.icons:hover i {
background-color: var(--white);
color: var(--orange);
}
section .icons.active {
background: #31279d;
color: #fff;
}
/*fin filtre*/
/*faq*/
.section_faq {
margin-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.section_faq h1 {
font-size: 3rem;
}
.section_faq ul {
margin: 3rem auto;
width: 75%;
max-width: 900px;
}
.section_faq ul li {
list-style: none;
margin-bottom: 8px;
}
.section_faq .question {
margin-bottom: 1px;
padding: 20px;
background-color: #f2f2f2;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24px;
font-weight: 400;
cursor: pointer;
}
.section_faq .icon {
margin-left: 1rem;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease-in-out;
color: #f26440;
}
.section_faq .answer {
max-height: 0;
background-color: #f2f2f2;
overflow: hidden;
font-size: 20px;
transition: max-height 0.25s cubic-bezier(0.5, 0, 0.1, 1);
}
.section_faq .answer span {
display: inline-block;
padding: 1.2rem;
}
.section_faq .question.open + .answer {
max-height: 1200px;
}
.section_faq .question.open > .icon {
transform: rotate(45deg);
}
/*footer*/
footer {
margin-top: 60px;
background-color: #faf8f4;
height: auto;
padding-top: 40px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h1 {
font-size: 50px;
margin: 10px 0;
}
.footer-content h4 a {
color: #000;
}
.footer-content p {
max-width: 500px;
margin: 20px 0;
letter-spacing: 1px;
font-size: 15px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
}
.socials li {
margin: 0 20px;
}
.socials a {
text-decoration: 0;
color: #333;
font-size: 20px;
transition: 0.5s;
}
.socials a:hover {
color: #000;
}
.footer-bottom {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
letter-spacing: 1px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: 0.6;
font-weight: 200;
}
.sidebar,
#main {
display: none;
}
/*responsive*/
@media (max-width: 935px) {
header {
padding: 20px;
margin: 0;
height: auto;
}
.link_buttons {
display: none;
}
.menu_link {
display: none;
}
/*responsive menu*/
.sidebar,
#main {
display: block;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
display: flex;
flex-direction: column;
}
.sidebar img,
#main img {
width: 20px;
}
.sidebar a {
padding: 15px;
font-size: 15px;
color: #fff;
transform: 0.3s;
}
.sidebar a:hover {
background-color: #f26440;
}
.sidebar .closebtn {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.openbtn img {
width: 20px;
margin-right: 10px;
}
.openbtn {
background-color: #f26440;
border: 0;
display: flex;
align-items: center;
color: #fff;
font-size: 15px;
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.5s;
}
.openbtn:hover {
background-color: #111;
}
}
@media (max-width: 588px) {
h1 {
font-size: 30px;
}
.home {
margin: 25px;
flex-direction: column-reverse;
height: auto;
padding-bottom: 25px;
}
.home p,
.home h1 {
margin: 0;
}
.home .left,
.home .right {
width: 100%;
height: fit-content;
}
.home .right {
height: auto;
}
.statistiques {
bottom: -100px;
}
.statistiques h2 {
font-size: 15px;
}
.statistiques p {
font-size: 12px;
}
.about {
flex-direction: column;
}
.about .image,
.about .content {
width: 100%;
}
/*Why us*/
.list_box,
.deco-list {
display: flex;
flex-direction: column;
align-items: center;
}
.box,
.deco {
width: 100%;
}
}
/*contact*/
#section-wrapper {
width: 100%;
padding: 10px;
}
.box-wrapper {
position: relative;
display: table;
width: 100%;
margin: auto;
margin-top: 35px;
border-radius: 30px;
}
.info-wrap {
width: 35%;
padding: 40px;
display: table-cell;
border-radius: 30px 0px 0px 30px;
background: linear-gradient(
144deg,
rgba(126, 39, 156, 1) 0%,
rgba(49, 39, 157, 1) 49%
);
color: #fff;
}
.info-title {
text-align: left;
font-size: 28px;
letter-spacing: 0.5px;
}
.info-sub-title {
font-size: 18px;
font-weight: 300;
margin-top: 17px;
letter-spacing: 0.5px;
line-height: 26px;
}
.info-details {
list-style: none;
margin: 60px 0px;
}
.info-details li {
margin-top: 25px;
font-size: 18px;
color: #fff;
}
.info-details li i {
background: #f26440;
padding: 12px;
border-radius: 50%;
margin-right: 5px;
}
.info-details li a {
color: #fff;
text-decoration: none;
}
.info-details li a:hover {
color: #f26440;
}
.social-icons {
list-style: none;
text-align: center;
margin: 20px 0px;
}
.social-icons li {
display: inline-block;
}
.social-icons li i {
background: #f26440;
color: #fff;
padding: 15px;
font-size: 20px;
border-radius: 22%;
margin: 0px 5px;
cursor: pointer;
transition: all 0.5s;
}
.social-icons li i:hover {
background: #fff;
color: #000000;
}
.form-wrap {
width: 65%;
display: table-cell;
padding: 40px 25px 35px 25px;
border-radius: 0px 30px 30px 0px;
background: #ecf0f3;
}
.form-title {
text-align: left;
margin-left: 23px;
font-size: 28px;
letter-spacing: 0.5px;
}
.form-fields {
display: table;
width: 100%;
padding: 15px 5px 5px 5px;
}
.form-fields input,
.form-fields textarea {
border: none;
outline: none;
background: none;
font-size: 18px;
color: #555;
padding: 20px 10px 20px 5px;
width: 100%;
}
.form-fields textarea {
height: 150px;
resize: none;
}
.form-group {
width: 46%;
float: left;
padding: 0px 30px;
margin: 14px 12px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff;
}
.form-fields .form-group:last-child {
width: 96%;
}
.submit-button {
width: 96%;
height: 60px;
margin: 0px 12px;
border-radius: 30px;
font-size: 20px;
font-weight: 700;
outline: none;
border: none;
cursor: pointer;
color: #fff;
text-align: center;
background: #f26440;
box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #ffffff;
transition: 0.5s;
}
.submit-button:hover {
background: #31279d;
}
/* Responsive css */
@media only screen and (max-width: 767px) {
.box-wrapper {
width: 100%;
}
.info-wrap,
.form-wrap {
width: 100%;
height: inherit;
display: block;
}
.info-wrap {
border-radius: 30px 30px 0px 0px;
}
.form-wrap {
border-radius: 0px 0px 30px 30px;
}
.form-group {
width: 100%;
float: none;
margin: 25px 0px;
}
.form-fields .form-group:last-child,
.submit-button {
width: 100%;
}
.submit-button {
margin: 10px 0px;
}
}
// script.js
document.addEventListener("DOMContentLoaded", () => {
const gallery = document.getElementById("card-container");
const items = gallery.querySelectorAll(".card");
const itemsPerPage = 6;
let currentPage = 1;
let filteredItems = Array.from(items); // Initially show all items
const totalPages = () => Math.ceil(filteredItems.length / itemsPerPage);
function showPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
// Hide all items
Array.from(items).forEach(item => item.style.display = 'none');
// Show filtered items
filteredItems.slice(start, end).forEach(item => item.style.display = 'block');
// Update pagination links and buttons
updatePageLinks(page);
updateButtons();
}
function createPageLinks() {
const pageLinksContainer = document.getElementById('pageLinks');
pageLinksContainer.innerHTML = ''; // Clear existing links
for (let i = 1; i <= totalPages(); i++) {
const pageLink = document.createElement('a');
pageLink.textContent = i;
pageLink.href = "#nogo";
pageLink.setAttribute('data-page', i);
pageLink.addEventListener('click', (e) => {
e.preventDefault();
const page = parseInt(e.target.getAttribute('data-page'));
currentPage = page;
showPage(currentPage);
});
pageLinksContainer.appendChild(pageLink);
}
}
function updatePageLinks(activePage) {
const pageLinks = document.querySelectorAll('#pageLinks a');
pageLinks.forEach(link => {
const page = parseInt(link.getAttribute('data-page'));
link.classList.toggle('active', page === activePage);
});
}
function updateButtons() {
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages();
}
function filterItems(filter) {
if (filter === 'all') {
filteredItems = Array.from(items);
} else {
filteredItems = Array.from(items).filter(item => item.classList.contains(filter));
}
currentPage = 1; // Reset to first page after filtering
createPageLinks();
showPage(currentPage);
}
function setActiveFilterButton(activeButton) {
document.querySelectorAll('.filterBtn').forEach(button => {
button.classList.remove('active');
});
activeButton.classList.add('active');
}
document.querySelectorAll('.filterBtn').forEach(button => {
button.addEventListener('click', () => {
const filter = button.getAttribute('data-filter');
filterItems(filter);
setActiveFilterButton(button);
});
});
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
});
document.getElementById('nextBtn').addEventListener('click', () => {
if (currentPage < totalPages()) {
currentPage++;
showPage(currentPage);
}
});
// Initialize with all items
createPageLinks();
showPage(currentPage);
// Set the default active filter button
document.querySelector('.filterBtn[data-filter="all"]').classList.add('active');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.