feat: home and organization page css integration

static/assets/home.css

@@ -0,0 +1,283 @@
+.header {
+  border-bottom: 2px solid #C28100;
+  padding-bottom: 1.5em;
+  padding-top: 1.5em;
+}
+
+.header-container {
+  display: flex;
+}
+
+.header-image {
+  margin-right: 3em;
+}
+
+.header-image img {
+  width: 7em;
+}
+
+.header-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.header-title {
+  font-family: 'Roboto Slab', serif;
+  margin: 0;
+  font-weight: 500;
+  font-size: 2.5em;
+}
+
+.header-sub-title {
+  margin: 0;
+  text-decoration: underline;
+  font-weight: 100;
+  color: #34495e;
+  transition: 0.2s;
+}
+
+.header-sub-title:hover {
+  color: #0029FF;
+}
+
+.header-description {
+  color: #34495e;
+}
+
+.content {
+  margin-top: 1.5em;
+  display: flex;
+}
+
+
+
+
+.nav {
+  margin-right: 2em;
+}
+
+.nav-item {
+  width: 15em;
+  padding: 1em;
+  border-radius: 4px;
+  margin-bottom: 0.7em;
+  border: 3px solid rgba(255, 111, 10, 0.7);
+  display: flex;
+  cursor: pointer;
+  transition: ease-in-out 0.1s;
+  height: 1.2em;
+}
+
+.nav-icon {
+  width: 3em;
+  padding-left: .5em;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  color: #C28200;
+  font-size: 1.5em;
+  opacity: 0.7;
+}
+
+.nav-item-content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  opacity: 0.85;
+}
+
+.nav-access {
+  display: flex;
+  align-items: center;
+  color: #FF6F0A;
+  opacity: 0.7;
+}
+
+.nav-item.enabled {
+  border-color: rgba(255, 111, 10, 1);
+}
+
+.nav-item.enabled .nav-access {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-icon {
+  opacity: 1;
+}
+
+.nav-item.enabled .nav-title {
+  opacity: 1;
+}
+
+.nav-item:hover {
+  transform: scale(1.05); 
+}
+
+#nav-enabler {
+  display: none;
+}
+
+.mosaic {
+  background: white;
+  width: 100%;
+}
+
+.mosaic-header {
+  width: 100%;
+  opacity: 0.8;
+  text-align: right;
+  margin-bottom: 1.5em;
+}
+
+.card-container {
+  margin: 0 auto;
+  width: 85%;
+}
+
+.card {
+  display: flex;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  margin-bottom: 1em;
+  box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
+}
+
+.card-image {
+  border-right: 1px solid #C4C4C4;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 1em;
+}
+
+.card-image img {
+  width: 12em;
+}
+
+.card-content {
+  padding: 1.5em;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-title-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-icon {
+  color: #C28200;
+  opacity: 0.85;
+  margin-top: -.5em;
+  margin-right: -.5em;
+  font-size: 1.4em;
+}
+
+.card-title {
+  font-size: 1.6em;
+  color: #B12008;
+  margin: 0;
+  margin-bottom: 0.5em;
+}
+
+.card-description {
+  color: #34495E;
+  margin: 0;
+  line-height: 1.6em;
+}
+
+.card-link {
+  color: #0029FF;
+  opacity: 0.75;
+  text-align: right;
+}
+
+@media (max-width: 1350px) {
+  .card-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 900px) {
+  .header {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
+  .header-container {
+    display: block;
+  }
+  .header-content {
+    padding: 0;
+  }
+  .header-image {
+    margin: 0;
+    text-align: center;
+  }
+  .header-image img {
+    width: 6em;
+  }
+  .header-sub-title {
+    margin-top: 1em;
+    text-align: center;
+  }
+  .header-title {
+    text-align: center;
+    margin-bottom: .25em;
+  }
+  .header-description {
+    text-align: center;
+  }
+
+  .content {
+    display: block;
+  }
+  .nav {
+    margin-right: 0;
+    user-select: none;
+  }
+  #nav-enabler {
+    display: flex;
+  }
+  #nav-enabler-icon {
+    transform: rotate(-90deg)
+  }
+  #nav-content {
+    max-height: 0;
+    transition: max-height 0.1s ease-out;
+  }
+  .nav-item {
+    width: auto;
+  }
+  .nav-mobile-enabler #nav-enabler-icon {
+    transition: all 0.1s ease;
+  }
+
+  .mosaic {
+    position: relative;
+    border-top: 1px solid #C4C4C4;
+    padding-top: 1em;
+  }
+  .mosaic-header {
+    text-align: center;
+  }
+  .card {
+    display: block;
+  }
+  .card-image {
+    border-right: 0;
+    border-bottom: 1px solid #C4C4C4;
+    margin: 0;
+  }
+}
+

static/assets/js/home.js

@@ -0,0 +1,157 @@
+let navOpened = false
+let oldNavText = ""
+let oldNavIcon = ""
+
+let navEnabler = document.getElementById('nav-enabler')
+let navEnablerText = document.getElementById('nav-enabler-text')
+let navEnablerIcon = document.getElementById('nav-enabler-icon')
+let navContent = document.getElementById('nav-content')
+
+let mosaic = document.getElementById('mosaic')
+let mosaicHeader = document.getElementById('mosaic-header')
+
+navEnabler.onclick = async () => {
+  if (!navOpened) {
+    // open the menu
+    oldNavText = navEnablerText.textContent
+    navEnablerText.textContent = "Minimiser le menu"
+    navEnablerIcon.style.transform = "rotate(0deg)"
+    navContent.style.maxHeight = navContent.scrollHeight + "px"
+  } else {
+    // close the menu
+    navEnablerText.textContent = oldNavText
+    navEnablerIcon.style.transform = "rotate(-90deg)"
+    navContent.style.maxHeight = null
+  }
+  navOpened = !navOpened
+}
+
+function createEl(className = false, elName = "div") {
+  let el = document.createElement(elName)
+  if (className != false) {
+    el.className = className
+  }
+  return el
+}
+
+function renderNavItem(tag) {
+  /*
+  <div class="nav-item">
+    <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>
+  */
+
+  let navItem = createEl('nav-item')
+  let navIcon = createEl('nav-icon')
+  let icon = createEl(tag.icon, 'i')
+
+  navIcon.appendChild(icon)
+  navItem.appendChild(navIcon)
+
+  let navItemContent = createEl('nav-item-content')
+  let navTitle = createEl('nav-title')
+  navTitle.textContent = tag.name
+  navItemContent.appendChild(navTitle)
+  
+  let navAccess = createEl('nav-access')
+  let chevronIcon = createEl('fas fa-chevron-right', 'i')
+  navAccess.appendChild(chevronIcon)
+  navItemContent.appendChild(navTitle)
+  navItemContent.appendChild(navAccess)
+  navItem.appendChild(navItemContent)
+
+  return navItem
+}
+
+function renderCard(organization) {
+  let card = createEl('card')
+
+  // image
+  let image = createEl('card-image')
+  let imageTag = createEl(0, 'img')
+  imageTag.src = organization.thumbnail
+  image.appendChild(imageTag)
+  card.appendChild(image)
+  
+  let content = createEl('card-content')
+  let upperContent = createEl()
+  
+  let titleContainer = createEl('card-title-container')
+  let title = createEl('card-title', 'h2')
+  title.textContent = organization.name
+  titleContainer.appendChild(title)
+
+  let icon = createEl('card-icon')
+  let iconTag = createEl(organization.tag.icon, 'i')
+  icon.appendChild(iconTag)
+  titleContainer.appendChild(icon)
+  upperContent.appendChild(titleContainer)
+
+  let description = createEl('card-description')
+  description.textContent = organization.descriptionShort
+  upperContent.appendChild(description)
+
+  let link = createEl('card-link')
+  let aTag = createEl(0, 'a')
+  aTag.href = "/association/" + organization.slug
+  aTag.textContent = "En savoir plus"
+  link.appendChild(aTag)
+  content.appendChild(upperContent)
+  content.appendChild(link)
+  card.appendChild(content)
+  return card
+}
+
+function renderMosaic(data) {
+  let cardContainer = createEl('card-container')
+  data.forEach(orga => {
+    cardContainer.appendChild(renderCard(orga))
+  })
+  return cardContainer
+}
+
+let currentTag = null
+let currentCardContainer = null
+
+function enableTag(node) {
+  let all = node.id === 'nav-all'
+  let tagId = ""
+  if (!all) {
+    tagId = node.attributes['data-tag-id'].value
+  }
+  let data = organizations.filter(orga => orga.tag.id === tagId || all)
+  let cards = renderMosaic(data)
+  if (currentCardContainer !== null) {
+    mosaic.removeChild(currentCardContainer)
+  }
+  currentCardContainer = cards
+  mosaic.appendChild(cards)
+  node.className += ' enabled'
+  if (currentTag !== null) {
+    currentTag.className = currentTag.className.replace('enabled', '')
+  }
+  currentTag = node
+  if (data === undefined || data === null || data.length <= 0) {
+    mosaicHeader.textContent = "Aucune associations listées"
+  } else if (data.length === 1) {
+    mosaicHeader.textContent = "Une association listée"
+  } else {
+    mosaicHeader.textContent = data.length + " associations listées"
+  }
+} 
+
+navContent.childNodes.forEach(node => {
+  node.onclick = () => enableTag(node)
+})
+
+enableTag(document.getElementById('nav-all'))

static/assets/main.css

@@ -0,0 +1,30 @@
+html {
+  overflow-y: scroll;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+}
+
+a {
+  color: #3498db;
+}
+
+a:hover {
+  text-decoration: underline;
+  /*opacity: 0.8;*/
+  transition: color 0.2s;
+  color: #2980b9;
+}
+
+@media (max-width: 900px) {
+  .container {
+    width: 92%; 
+  }
+}

static/assets/organization.css

@@ -0,0 +1,294 @@
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  font-size: 1.2em;
+}
+
+.return {
+  display: flex;
+  align-items: center;
+  color: #34495e;
+  cursor: pointer;
+  transition: all .2s;
+}
+
+.return-icon {
+  font-size: 1.5em;
+  margin-right: .5em;
+}
+
+.return:hover {
+  opacity: 0.88;
+  text-decoration: underline;
+}
+
+.cover-background {
+  background-position: center;
+  background-size: cover;
+  height: 13em;
+  width: 100%;
+}
+
+.cover {
+  height: 13em;
+  margin-top: -13em;
+  background-color: rgba(230, 126, 34, 0.78);
+  background-size: cover;
+}
+
+.cover-content {
+  color: white;
+  display: flex;
+  align-items: center;
+  height: 13em;
+}
+
+.cover-image {
+  background: white;
+  border-radius: 50%;
+  border: 3px solid #FD6E0B;
+  background-size: cover;
+  background-position: center;
+  width: 10em;
+  height: 10em;
+  margin-right: 3em;
+}
+
+.cover-title-container {
+
+}
+
+.cover-title {
+  font-family: 'Roboto Slab', serif;
+  font-size: 3.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.cover-sub-title {
+  font-size: 1.5em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.media-mosaic {
+  margin-top: .75em;
+  width: 100%;
+  height: 25em;
+
+  display: grid;
+  grid-template-columns: 1fr .5fr .5fr;
+  grid-template-rows: 1fr 1fr;
+
+  grid-column-gap: .75em;
+  grid-row-gap: .75em;
+}
+
+.media-overlay {
+  background-color: rgba(196, 196, 196, 0.7);
+  color: #B12008;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 3.5em;
+}
+
+.media-overlay i {
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.media-overlay i:hover {
+  transform: scale(1.2);
+}
+
+.media-main {
+  grid-row: 1 / span 2;
+}
+
+/* .media-sec {
+  display: grid;
+  grid-template-rows: 50% 50%;
+}
+
+.media-sec-row {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 100%;
+} */
+
+.media {
+  border-radius: 4px;
+  background-size: cover;
+  background-position: center;
+}
+
+section {
+  margin-top: .5em;
+  margin-bottom: 0;
+}
+
+.section-title {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.section-title h1, .section-title h2, .section-title h3 {
+  margin: 0;
+  font-weight: normal;
+  font-family: 'Roboto Slab', serif; 
+  font-size: 1.8em;
+}
+
+.section-divider {
+  background-color: rgba(194, 129, 0, 0.5);
+  width: 100%;
+  height: 3px;
+  border-radius: 1px;
+}
+
+.description {
+  line-height: 1.5em;
+  text-align: justify;
+  margin: 0 auto;
+  width: 80%;
+  margin-top: 1.5em;
+  margin-bottom: .5em;
+}
+
+/***********
+ * PRICING *
+ ***********/
+
+.pricing {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pricing-card {
+  height: 10em;
+  width: 100%;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+  text-align: center;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 1.5em;
+  color: white;
+}
+
+.pricing .pricing-card:nth-child(1) {
+  background-color: rgba(177, 88, 8, .80);
+}
+
+.pricing .pricing-card:nth-child(2) {
+  background-color: rgba(253, 110, 11, .780);
+}
+
+.pricing .pricing-card:nth-child(3) {
+  background-color: rgba(177, 32, 8, .80);
+}
+
+.pricing .pricing-card:last-child {
+  margin-right: 0;
+}
+
+.pricing-label {
+  font-size: 1.5em;
+}
+
+.pricing-name {
+  font-size: 1.8em;
+}
+
+.princing-description {
+
+}
+
+/***********
+ * CONTACT *
+ ***********/
+
+.contact {
+  margin: 0 auto;
+  width: 70%;
+}
+
+.contact-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: .75em;
+  padding-bottom: .75em;
+  padding-left: 2em;
+  padding-right: 2em;
+  background-color: #ECF0F1;
+  border-radius: 4px;
+  margin-bottom: 1em;
+}
+
+.contact-icon {
+  color: #B15808;
+  background-color: #C4C4C4;
+  border-radius: 50%;
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.5em;
+}
+
+.contact-content {
+  text-align: right;
+}
+
+.external-link {
+  margin-left: .25em;
+  font-weight: bold;
+}
+
+.facebook .contact-icon {
+  background-color: #3B5999;
+  color: white;
+}
+
+.instagram .contact-icon {
+  background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+  color: white;
+}
+
+.twitter .contact-icon {
+  background-color: #1DA1F2;
+  color: white;
+}
+
+/**********
+ * FOOTER *
+ **********/
+
+.footer {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 50% 25% 25%;
+  grid-template-rows: 1fr;
+  height: 1em;
+  margin-top: 2em;
+}
+
+.footer div:nth-child(1) {
+  background-color: rgb(177, 32, 8, .83);
+}
+
+.footer div:nth-child(2) {
+  background-color: rgb(177, 88, 8, .83);
+}
+
+.footer div:nth-child(3) {
+  background-color: rgb(253, 110, 11, .83);
+}

static/home.html

@@ -0,0 +1,241 @@
+<!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>

static/organization.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Association</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/organization.css" />
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body>
+    <div class="header">
+      <div class="container header-container">
+        <div class="return">
+          <div class="return-icon"><i class="fas fa-chevron-circle-left"></i></div>
+          <div class="return-title">Revenir à la liste</div>
+        </div>
+        <div class="header-title">
+          Forum des associations
+        </div>
+      </div>
+    </div>
+    <div class="cover-background" style="background-image: url('https://s.werobot.fr/headerCover.jpeg')"></div>
+    <div class="cover">
+      <div class="cover-content container">
+        <div class="cover-image" style="background-image: url('./assets/img/werobot.png');">
+        </div>
+        <div class="cover-title-container">
+          <h1 class="cover-title">
+            We Robot
+          </h1>
+          <h4 class="cover-sub-title">
+            Association de robotique
+          </h4>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="media-mosaic">
+        <div class="media media-main" style="background-image: url('assets/img/dummy-1.jpg')">
+        </div>
+        <div class="media media-1-1" style="background-image: url('assets/img/dummy-3.jpg')"></div>
+        <div class="media media-1-2" style="background-image: url('assets/img/dummy-2.jpg'); grid-column: 3/ span 1; grid-row: 1/ span 1;"></div>
+        <div class="media-1-2 media-overlay" style="grid-column: 3/ span 1; grid-row: 1/ span 1;">
+          <i class="fas fa-play-circle"></i>
+        </div>
+        <div class="media media-2-1" style="background-image: url('assets/img/dummy-4.jpg')"></div>
+        <div class="media media-2-2" style="background-image: url('assets/img/dummy-5.jpg')"></div>
+      </div>
+      <section>
+        <div class="section-title">
+          <h2>Présentation</h2>
+          <div class="section-divider"></div>
+        </div>
+        <div class="description">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates.
+          </p>
+          <p>
+            Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et.
+          </p>
+          <p>
+            Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae.
+          </p>
+          <p>
+            Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa
+          </p>
+        </div>
+      </section>
+      <section>
+        <div class="section-title">
+          <h2>Crénaux</h2>
+          <div class="section-divider"></div>
+        </div>
+        <div class="description">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates.
+          </p>
+          <p>
+            Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et.
+          </p>
+          <p>
+            Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae.
+          </p>
+          <p>
+            Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa
+          </p>
+        </div>
+      </section>
+      <section>
+        <div class="section-title">
+          <h2>Tarifs</h2>
+          <div class="section-divider"></div>
+        </div>
+        <div class="pricing">
+          <div class="pricing-card">
+            <div class="pricing-label">
+              12 €
+            </div>
+            <div class="pricing-name">
+              Enfants
+            </div>
+            <div class="pricing-description">
+              Facere quas dolor eum ut.
+            </div>
+          </div>
+          <div class="pricing-card">
+            <div class="pricing-label">
+              12 €
+            </div>
+            <div class="pricing-name">
+              Enfants
+            </div>
+            <div class="pricing-description">
+              Facere quas dolor eum ut.
+            </div>
+          </div>
+          <div class="pricing-card">
+            <div class="pricing-label">
+              12 €
+            </div>
+            <div class="pricing-name">
+              Enfants
+            </div>
+            <div class="pricing-description">
+              Facere quas dolor eum ut.
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+      <section>
+        <div class="section-title">
+          <h2>Contact</h2>
+          <div class="section-divider"></div>
+        </div>
+        <div class="contact">
+          <div class="contact-item">
+            <div class="contact-icon">
+              <i class="fas fa-user"></i>
+            </div>
+            <div class="contact-content">
+              Frank GITON
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">
+              <i class="fas fa-at"></i>
+            </div>
+            <div class="contact-content">
+              <a href="mailto:contact@werobot.fr">contact@werobot.fr</a>
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">
+              <i class="fas fa-map-marker-alt"></i>
+            </div>
+            <div class="contact-content">
+              <p>
+                6, Rue qui fait des efforts
+              </p>
+              <p>
+                27940 Gaillon
+              </p>
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">
+              <i class="fas fa-globe"></i>
+            </div>
+            <div class="contact-content">
+              <a href="https://werobot.fr">https://werobot.fr <i class="external-link fa fa-external-link-alt"></i></a>
+            </div>
+          </div>
+          <div class="contact-item">
+            <div class="contact-icon">
+              <i class="fas fa-phone"></i>
+            </div>
+            <div class="contact-content">
+              <a href="telto:+33783424852">07 81 42 88 42</a>
+            </div>
+          </div>
+          <div class="contact-item facebook">
+            <div class="contact-icon">
+              <i class="fab fa-facebook-square"></i>
+            </div>
+            <div class="contact-content">
+              <a href="https://www.facebook.com/WeRobot/">https://www.facebook.com/WeRobot/ <i class="external-link fa fa-external-link-alt"></i></a>
+            </div>
+          </div>
+          <div class="contact-item instagram">
+            <div class="contact-icon">
+              <i class="fab fa-instagram"></i>
+            </div>
+            <div class="contact-content">
+              <a href="https://www.instagram.com/werobot/">https://www.instagram.com/werobot/ <i class="external-link fa fa-external-link-alt"></i></a>
+            </div>
+          </div>
+          <div class="contact-item twitter">
+            <div class="contact-icon">
+              <i class="fab fa-twitter"></i>
+            </div>
+            <div class="contact-content">
+              <a href="https://www.twitter.com/werobot_FR/">https://www.twitter.com/werobot_FR/ <i class="external-link fa fa-external-link-alt"></i></a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+
+    <div class="footer">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <script src="assets/js/organization.js"></script>
+  </body>
+</html>