241 lines
9.4 KiB
HTML
241 lines
9.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Home</title>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
|
||
|
|
<link rel="stylesheet" href="./assets/main.css" />
|
||
|
|
<link rel="stylesheet" href="./assets/home.css" />
|
||
|
|
<meta name="viewport" content="width=device-width">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="header">
|
||
|
|
<div class="container header-container">
|
||
|
|
<div class="header-image">
|
||
|
|
<img src="assets/img/espace_condorcet_logo.jpg" />
|
||
|
|
</div>
|
||
|
|
<div class="header-content">
|
||
|
|
<a
|
||
|
|
href="https://www.espacecondorcet.org/"
|
||
|
|
class="header-sub-title">
|
||
|
|
Espace Condorcet Centre Social
|
||
|
|
</a>
|
||
|
|
<h1 class="header-title">Forum des associations</h1>
|
||
|
|
<div class="header-description">
|
||
|
|
Cette année nous vous invitons à découvrir le forum virtuel des associations.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="content">
|
||
|
|
<div class="nav">
|
||
|
|
<div
|
||
|
|
id="nav-enabler"
|
||
|
|
class="nav-item nav-mobile-enabler">
|
||
|
|
<div class="nav-icon">
|
||
|
|
<i class="fas fa-ellipsis-h"></i>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item-content">
|
||
|
|
<div id="nav-enabler-text" class="nav-title">
|
||
|
|
Afficher le menu
|
||
|
|
</div>
|
||
|
|
<div class="nav-access">
|
||
|
|
<i
|
||
|
|
id="nav-enabler-icon"
|
||
|
|
class="fas fa-chevron-down">
|
||
|
|
</i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="nav-content">
|
||
|
|
<div class="nav-item" id="nav-all">
|
||
|
|
<div class="nav-icon">
|
||
|
|
</div>
|
||
|
|
<div class="nav-item-content">
|
||
|
|
<div class="nav-title">
|
||
|
|
Toutes
|
||
|
|
</div>
|
||
|
|
<div class="nav-access">
|
||
|
|
<i class="fas fa-chevron-right"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item" data-tag-id="culturel">
|
||
|
|
<div class="nav-icon">
|
||
|
|
<i class="fas fa-theater-masks"></i>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item-content">
|
||
|
|
<div class="nav-title">
|
||
|
|
Culturelles
|
||
|
|
</div>
|
||
|
|
<div class="nav-access">
|
||
|
|
<i class="fas fa-chevron-right"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item" data-tag-id="music">
|
||
|
|
<div class="nav-icon">
|
||
|
|
<i class="fas fa-music"></i>
|
||
|
|
</div>
|
||
|
|
<div class="nav-item-content">
|
||
|
|
<div class="nav-title">
|
||
|
|
Danse et musique
|
||
|
|
</div>
|
||
|
|
<div class="nav-access">
|
||
|
|
<i class="fas fa-chevron-right"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mosaic" id="mosaic">
|
||
|
|
<div class="mosaic-header" id="mosaic-header">
|
||
|
|
</div>
|
||
|
|
<div class="card-container">
|
||
|
|
<!--
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="./assets/img/cross.png" />
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<div>
|
||
|
|
<div class="card-title-container">
|
||
|
|
<h2 class="card-title">
|
||
|
|
Croix-rouge gaillonaise
|
||
|
|
</h2>
|
||
|
|
<div class="card-icon">
|
||
|
|
<i class="fas fa-hands-helping"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="card-description">
|
||
|
|
Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-link">
|
||
|
|
<a href="#link">En savoir plus</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="./assets/img/adam.png" />
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<div>
|
||
|
|
<div class="card-title-container">
|
||
|
|
<h2 class="card-title">
|
||
|
|
Association des amis de la musique
|
||
|
|
</h2>
|
||
|
|
<div class="card-icon">
|
||
|
|
<i class="fas fa-hands-helping"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="card-description">
|
||
|
|
Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-link">
|
||
|
|
<a href="#link">En savoir plus</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-image">
|
||
|
|
<img src="./assets/img/werobot.png" />
|
||
|
|
</div>
|
||
|
|
<div class="card-content">
|
||
|
|
<div>
|
||
|
|
<div class="card-title-container">
|
||
|
|
<h2 class="card-title">
|
||
|
|
We Robot
|
||
|
|
</h2>
|
||
|
|
<div class="card-icon">
|
||
|
|
<i class="fas fa-hands-helping"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="card-description">
|
||
|
|
Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-link">
|
||
|
|
<a href="#link">En savoir plus</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
let tags = [
|
||
|
|
{
|
||
|
|
"id": "culturel",
|
||
|
|
"icon": "fas fa-theater-masks",
|
||
|
|
"name": "Culturelles"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "music",
|
||
|
|
"icon": "fas fa-music",
|
||
|
|
"name": "Danse et musique"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"id": "maritime",
|
||
|
|
"icon": "fas fa-anchor",
|
||
|
|
"name": "Maritime"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
let organizations = [
|
||
|
|
{
|
||
|
|
"name": "Croix-rouge gaillonaise",
|
||
|
|
"slug": "croix-rouge",
|
||
|
|
"icon": "fas fa-hands-helping",
|
||
|
|
"thumbnail": "./assets/img/cross.png",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[0]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "Association des amis de la musique",
|
||
|
|
"slug": "adam",
|
||
|
|
"thumbnail": "./assets/img/adam.png",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[1]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "We Robot",
|
||
|
|
"slug": "werobot",
|
||
|
|
"thumbnail": "./assets/img/werobot.png",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[0]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "Jean michel",
|
||
|
|
"slug": "jean-michel",
|
||
|
|
"thumbnail": "https://randomuser.me/api/portraits/men/34.jpg",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[2]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "Jean paul lel",
|
||
|
|
"slug": "jean-paul-lel",
|
||
|
|
"thumbnail": "https://randomuser.me/api/portraits/men/93.jpg",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[2]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"name": "WOWO",
|
||
|
|
"slug": "wowo",
|
||
|
|
"thumbnail": "https://randomuser.me/api/portraits/men/84.jpg",
|
||
|
|
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
|
||
|
|
"tag": tags[0]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
<script src="assets/js/home.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|