update
This commit is contained in:
root
parent
666943d4f1
commit
51208cad8d
27 changed files with 1003 additions and 678 deletions
|
|
@ -1,39 +0,0 @@
|
|||
<!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">
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem alias sapiente neque? Dignissimos harum blanditiis fugiat eius alias nam repudiandae, et explicabo nihil eos, quos reprehenderit nobis aperiam quibusdam ad?</p>
|
||||
</div>
|
||||
</div>
|
||||
<script></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
.header-menu {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.header-menu a {
|
||||
|
|
@ -94,6 +93,11 @@
|
|||
height: 1.2em;
|
||||
}
|
||||
|
||||
.nav-item svg {
|
||||
width: .75em;
|
||||
height: .75em;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 3em;
|
||||
padding-left: .5em;
|
||||
|
|
@ -114,7 +118,7 @@
|
|||
.nav-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.85;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-access {
|
||||
|
|
@ -194,6 +198,7 @@
|
|||
}
|
||||
|
||||
.card-content {
|
||||
/* width: 100%; */
|
||||
padding: 1.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -213,6 +218,11 @@
|
|||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.card-icon svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.6em;
|
||||
color: #B12008;
|
||||
|
|
@ -316,4 +326,3 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
static/assets/img/favicon.png
Normal file
BIN
static/assets/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -10,6 +10,11 @@ let navContent = document.getElementById('nav-content')
|
|||
let mosaic = document.getElementById('mosaic')
|
||||
let mosaicHeader = document.getElementById('mosaic-header')
|
||||
|
||||
organizations = organizations.map(org => {
|
||||
org.tag = tags.filter(t => t._id === org.tag)[0]
|
||||
return org
|
||||
})
|
||||
|
||||
navEnabler.onclick = async () => {
|
||||
if (!navOpened) {
|
||||
// open the menu
|
||||
|
|
@ -73,6 +78,14 @@ function renderNavItem(tag) {
|
|||
return navItem
|
||||
}
|
||||
|
||||
function setAttributes(node, attrs) {
|
||||
for (var key in attrs) {
|
||||
attr = document.createAttribute(key)
|
||||
attr.value = attrs[key]
|
||||
node.attributes.setNamedItem(attr)
|
||||
}
|
||||
}
|
||||
|
||||
function renderCard(organization) {
|
||||
let card = createEl('card')
|
||||
|
||||
|
|
@ -92,13 +105,19 @@ function renderCard(organization) {
|
|||
titleContainer.appendChild(title)
|
||||
|
||||
let icon = createEl('card-icon')
|
||||
let iconTag = createEl(organization.tag.icon, 'i')
|
||||
icon.appendChild(iconTag)
|
||||
icon.innerHTML = `<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 ${organization.tag.icon.width} ${organization.tag.icon.height}">
|
||||
<path fill="currentColor" d="${organization.tag.icon.path}"></path>
|
||||
</svg>`
|
||||
titleContainer.appendChild(icon)
|
||||
upperContent.appendChild(titleContainer)
|
||||
|
||||
let description = createEl('card-description')
|
||||
description.textContent = organization.descriptionShort
|
||||
description.textContent = organization.description
|
||||
upperContent.appendChild(description)
|
||||
|
||||
let link = createEl('card-link')
|
||||
|
|
@ -109,6 +128,10 @@ function renderCard(organization) {
|
|||
content.appendChild(upperContent)
|
||||
content.appendChild(link)
|
||||
card.appendChild(content)
|
||||
|
||||
card.onclick = () => {
|
||||
window.location = aTag.href
|
||||
}
|
||||
return card
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +152,7 @@ function enableTag(node) {
|
|||
if (!all) {
|
||||
tagId = node.attributes['data-tag-id'].value
|
||||
}
|
||||
let data = organizations.filter(orga => orga.tag.id === tagId || all)
|
||||
let data = organizations.filter(orga => orga.tag._id === tagId || all)
|
||||
let cards = renderMosaic(data)
|
||||
if (currentCardContainer !== null) {
|
||||
mosaic.removeChild(currentCardContainer)
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -23,8 +23,21 @@ a:hover {
|
|||
color: #2980b9;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.container {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
width: 92%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,19 @@
|
|||
color: #34495e;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.return-icon {
|
||||
font-size: 1.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.return-icon svg {
|
||||
width: 1.3em;
|
||||
}
|
||||
|
||||
.return:hover {
|
||||
opacity: 0.88;
|
||||
text-decoration: underline;
|
||||
|
|
@ -140,7 +146,7 @@
|
|||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.media-main {
|
||||
.media-container:first-of-type {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
|
|
@ -207,10 +213,29 @@ section {
|
|||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.description p {
|
||||
margin-top: .75em;
|
||||
}
|
||||
.description p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.description h3 {
|
||||
font-size: 1.4em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.description h4 {
|
||||
font-size: 1.2em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.description h3, .description h4 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* *****************************************************************************
|
||||
|
||||
* SCHEDULE
|
||||
|
|
@ -237,7 +262,7 @@ section {
|
|||
|
||||
.schedule-category-collapse-icon {
|
||||
color: #B12008;
|
||||
font-size: 1.5em;
|
||||
width: 1.5em;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
|
|
@ -251,7 +276,6 @@ section {
|
|||
.schedule-category-days-container {
|
||||
border-radius: 4px;
|
||||
background-color: #ECF0F1;
|
||||
width: 40;
|
||||
|
||||
margin-left: 2em;
|
||||
margin-top: 1em;
|
||||
|
|
@ -283,14 +307,14 @@ section {
|
|||
|
||||
.pricing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
max-width: 14em;
|
||||
height: 10em;
|
||||
width: 100%;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
padding: 1.5em 1em;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
|
|
@ -360,6 +384,10 @@ section {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.contact-icon svg {
|
||||
width: .7em;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -369,21 +397,45 @@ section {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.email .contact-icon svg {
|
||||
width: .9em;
|
||||
}
|
||||
|
||||
.website .contact-icon svg {
|
||||
width: .9em;
|
||||
}
|
||||
|
||||
.facebook .contact-icon {
|
||||
background-color: #3B5999;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.facebook .contact-icon svg {
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.instagram .contact-icon {
|
||||
background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.instagram .contact-icon svg {
|
||||
width: .75em;
|
||||
}
|
||||
|
||||
.twitter .contact-icon {
|
||||
background-color: #1DA1F2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.twitter .contact-icon svg {
|
||||
width: .75em;
|
||||
}
|
||||
|
||||
/* *****************************************************************************
|
||||
|
||||
* FOOTER
|
||||
|
|
@ -412,6 +464,13 @@ section {
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.schedule-category-days-container {
|
||||
margin-right: 25em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.cover-background {
|
||||
|
|
@ -446,23 +505,40 @@ section {
|
|||
grid-template-columns: .5fr .5fr;
|
||||
grid-template-rows: 1fr .5fr .5fr;
|
||||
}
|
||||
.media-main {
|
||||
|
||||
.media-container:first-of-type {
|
||||
grid-row: 1 / span 1;
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
.schedule-category-header {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.schedule-category-days-container {
|
||||
margin-right: 5em;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
margin-right: .5em;
|
||||
.pricing {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
|
|
@ -470,5 +546,21 @@ section {
|
|||
|
||||
.contact-content {
|
||||
word-break: break-all;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.facebook .contact-content, .twitter .contact-content, .website .contact-content, .instagram .contact-content {
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.schedule-category-days-container {
|
||||
margin-right: 1em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
.return-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/home/mbess/font_awesome_icons/
|
||||
248
static/home.html
248
static/home.html
|
|
@ -1,248 +0,0 @@
|
|||
<!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-left">
|
||||
<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 class="header-menu">
|
||||
<a href="#">Mentions Légales</a>
|
||||
<a href="#">A propos</a>
|
||||
</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">
|
||||
<i class="fas fa-ellipsis-h"></i>
|
||||
</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": "Hello world",
|
||||
"slug": "autre-assos",
|
||||
"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[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>
|
||||
|
|
@ -1,288 +0,0 @@
|
|||
<!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-container media-main">
|
||||
<div class="media" style="background-image: url('assets/img/dummy-1.jpg')"></div>
|
||||
</div>
|
||||
<div class="media-container media-1-1">
|
||||
<div class="media" style="background-image: url('assets/img/dummy-3.jpg')"></div>
|
||||
</div>
|
||||
<div class="media-container media-1-2">
|
||||
<div class="media" style="background-image: url('assets/img/dummy-2.jpg')"></div>
|
||||
<div class="media-overlay"><i class="fas fa-play-circle"></i></div>
|
||||
</div>
|
||||
<div class="media-container media-2-1">
|
||||
<div class="media" style="background-image: url('assets/img/dummy-4.jpg')"></div>
|
||||
</div>
|
||||
<div class="media-container media-2-2">
|
||||
<div class="media" style="background-image: url('assets/img/dummy-5.jpg')"></div>
|
||||
</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="schedule">
|
||||
<div class="schedule-category">
|
||||
<div class="schedule-category-header" title="Déroulez">
|
||||
<div class="schedule-category-name">
|
||||
Création de robots super cool
|
||||
</div>
|
||||
<i class="schedule-category-collapse-icon fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
<div class="schedule-category-table">
|
||||
<div class="schedule-category-days-container">
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Lundi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
17:00 <span class="separator">-</span> 18:00
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Mardi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
14:00 <span class="separator">-</span> 15:00
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Samedi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
16:00 <span class="separator">-</span> 17:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-category">
|
||||
<div class="schedule-category-header" title="Déroulez">
|
||||
<div class="schedule-category-name">
|
||||
Cours de programmation de gros expert
|
||||
</div>
|
||||
<i class="schedule-category-collapse-icon fas fa-chevron-circle-up"></i>
|
||||
</div>
|
||||
<div class="schedule-category-table">
|
||||
<div class="schedule-category-days-container">
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Lundi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
17:00 <span class="separator">-</span> 18:00
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Mardi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
14:00 <span class="separator">-</span> 15:00
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-category-day-container">
|
||||
<div class="schedule-category-day">
|
||||
Samedi
|
||||
</div>
|
||||
<div class="schedule-category-hours">
|
||||
16:00 <span class="separator">-</span> 17:00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue