diff --git a/assets/images/glitch_meta_level3.png b/assets/images/glitch_meta_level3.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfeba0486ec4b768b77f8643bf21d3ace77ece86
Binary files /dev/null and b/assets/images/glitch_meta_level3.png differ
diff --git a/assets/images/glitch_meta_screen1.png b/assets/images/glitch_meta_screen1.png
new file mode 100644
index 0000000000000000000000000000000000000000..380f1679d5d697f998e6ce27b19e1c39e653ab06
Binary files /dev/null and b/assets/images/glitch_meta_screen1.png differ
diff --git a/assets/images/glitch_meta_screen2.png b/assets/images/glitch_meta_screen2.png
new file mode 100644
index 0000000000000000000000000000000000000000..186a13eefdc9b7f6d2e535e1700d2123d1e9673e
Binary files /dev/null and b/assets/images/glitch_meta_screen2.png differ
diff --git a/assets/images/glitch_meta_screen3.png b/assets/images/glitch_meta_screen3.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6ebb4564e294a1209751c940e3935cfce039840
Binary files /dev/null and b/assets/images/glitch_meta_screen3.png differ
diff --git a/assets/images/glitch_meta_screen4.png b/assets/images/glitch_meta_screen4.png
new file mode 100644
index 0000000000000000000000000000000000000000..c261b72ca112c2611cd8725dd1b905f1d5c15b5b
Binary files /dev/null and b/assets/images/glitch_meta_screen4.png differ
diff --git a/assets/images/glitch_meta_screen5.png b/assets/images/glitch_meta_screen5.png
new file mode 100644
index 0000000000000000000000000000000000000000..97e637f196061940eb00002e988e576283aa2258
Binary files /dev/null and b/assets/images/glitch_meta_screen5.png differ
diff --git a/assets/images/glitch_meta_screen6.png b/assets/images/glitch_meta_screen6.png
new file mode 100644
index 0000000000000000000000000000000000000000..2004779a0e8deaf62f47bf1382dbca2860bdf713
Binary files /dev/null and b/assets/images/glitch_meta_screen6.png differ
diff --git a/assets/images/wallpaper_binary.png b/assets/images/wallpaper_binary.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac336b129d814776ba763b8cb6e2fd45f6ea101e
Binary files /dev/null and b/assets/images/wallpaper_binary.png differ
diff --git a/assets/images/wallpaper_binary_light.png b/assets/images/wallpaper_binary_light.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fe2305059398233e404ea9a0055de78fff4170b
Binary files /dev/null and b/assets/images/wallpaper_binary_light.png differ
diff --git a/config.js b/config.js
new file mode 100644
index 0000000000000000000000000000000000000000..34250bf526c49c084653c38200bc77286deb8a82
--- /dev/null
+++ b/config.js
@@ -0,0 +1,13 @@
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+ case "dev":
+ server_url = "http://localhost:9000";
+ break;
+ case "prod":
+ server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
diff --git a/constants.js b/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f6ff3014db76431f8bc0e960e300006c1471149
--- /dev/null
+++ b/constants.js
@@ -0,0 +1,5 @@
+const { server_url } = require("./config");
+
+module.exports = {
+ images_url: `${server_url}/assets/images`,
+};
diff --git a/public/education/education.js b/public/education/education.js
index fb6ec5eef2f163486f32e92cad85f1223723980e..bfbb7c52cce1bb526ac9f65b48f57ef80f4acf7f 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -1,4 +1,26 @@
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+ case "dev":
+ server_url = "http://localhost:9000";
+ break;
+ case "prod":
+ server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+ images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
"use strict";
module.exports = {
@@ -84,13 +106,15 @@ module.exports = {
},
};
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../../../constants");
+
const GAMEDEV_ASPECTS = [
{
title: "Dessin et création 2D",
- image: "...",
+ image: `${images_url}/glitch_meta_screen1.png`,
comment: "",
details: [
"Créer des décors et des personnages",
@@ -100,7 +124,7 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Musique et effets sonores",
- image: "...",
+ image: `${images_url}/glitch_meta_screen2.png`,
comment: "",
details: [
"Utiliser des logiciels de son et des synthétiseurs",
@@ -111,7 +135,7 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Développer un univers",
- image: "...",
+ image: `${images_url}/glitch_meta_screen3.png`,
comment: "",
details: [
"Écrire une histoire, construire une narration",
@@ -120,7 +144,7 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Concevoir le jeu",
- image: "...",
+ image: `${images_url}/glitch_meta_screen4.png`,
comment: "",
details: [
"Comprendres les différents éléments qui composent un jeu",
@@ -129,7 +153,7 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Programmation informatique",
- image: "...",
+ image: `${images_url}/glitch_meta_screen5.png`,
comment: "",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
@@ -138,7 +162,7 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Mathématiques et physique",
- image: "...",
+ image: `${images_url}/glitch_meta_screen6.png`,
comment:
"<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
details: [
@@ -147,135 +171,258 @@ const GAMEDEV_ASPECTS = [
},
{
title: "Travail en équipe",
- image: "...",
+ image: `${images_url}/glitch_meta_screen1.png`,
comment:
"<i>Faire son jeu tout seul c'est bien mais ça peut être long !<br>Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.</i>",
details: [],
},
{
title: "Logiciels libres, systèmes Linux",
- image: "...",
+ image: `${images_url}/glitch_meta_screen2.png`,
comment:
"<i>Nous utilisons essentiellement des logiciels libres sur Linux.<br>C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</i>",
details: [],
},
];
-class EducationPage {
- constructor(args) {
- Object.assign(this, args);
- }
-
+class GameStudioClub {
render() {
return {
- tag: "div",
+ tag: "section",
contents: [
- { tag: "h1", contents: "Pédagogie" },
- { tag: "h2", contents: "Game studio club" },
- { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
- {
- tag: "strong",
- contents: "Dans nos locaux, 32 rue Simon Vialet, 07240 Vernoux en Vivarais",
- },
{
- tag: "p",
- contents:
- "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
- },
- {
- tag: "ul",
- contents: GAMEDEV_ASPECTS.map(li => {
- return {
- tag: "li",
- contents: [
- { tag: "img", src: li.image },
- { tag: "strong", contents: li.title },
- { tag: "div", contents: li.comment },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- };
- }),
- },
- {
- tag: "p",
- contents:
- "Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ? <br>Pas de problème ! On peut se concentrer par exemple uniquement sur de la création 2D, ou de la création sonore, ou même uniquement des maths ! <br>L'orientation se fait en fonction des préférences de chacun.",
- },
- {
- tag: "h3",
- contents: "Groupes",
+ tag: "div",
+ class: "title-banner",
+ contents: [{ tag: "h2", contents: "Game Studio Club" }],
},
{
- tag: "table",
+ tag: "div",
+ class: "section-contents",
contents: [
{
- tag: "tr",
+ tag: "div",
+ class: "teaser",
contents: [
- { tag: "td", contents: "Mardi" },
- { tag: "td", contents: "16h - 19h" },
+ { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
+ {
+ tag: "strong",
+ contents:
+ "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
+ },
],
},
{
- tag: "tr",
+ tag: "div",
+ class: "practical-infos",
contents: [
- { tag: "td", contents: "Mercredi" },
- { tag: "td", contents: "14h - 17h" },
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ { tag: "strong", contents: "Ça se passe où ?" },
+ {
+ tag: "span",
+ contents:
+ "Dans nos locaux,<br/><i>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</i>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ { tag: "strong", contents: "Pour qui ?" },
+ {
+ tag: "span",
+ contents: " Tout le monde à partir de 12 ans.",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ {
+ tag: "strong",
+ contents: "Contact",
+ },
+ {
+ tag: "span",
+ contents: "04 75 78 08 72",
+ },
+ {
+ tag: "a",
+ href: "mailto:kuadrado-software@tutanota.com",
+ contents: "kuadrado-software@tutanota.com",
+ },
+ ],
+ },
],
},
{
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- { tag: "td", contents: "16h - 19h" },
- ],
+ tag: "ul",
+ class: "learning-themes",
+ contents: GAMEDEV_ASPECTS.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
+ contents: [
+ {
+ tag: "div",
+ class: "img-wrapper",
+ contents: [{ tag: "img", src: li.image }],
+ },
+ {
+ tag: "div",
+ class: "right",
+ contents: [
+ { tag: "strong", contents: li.title },
+ {
+ tag: "div",
+ class: "comment",
+ contents: li.comment,
+ },
+ {
+ tag: "ul",
+ contents: li.details.map(d => {
+ return {
+ tag: "li",
+ contents: d,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
},
- ],
- },
- {
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou plus.
- <br>Les groupes sont de 5 personnes maximum.
- <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "table",
- contents: [
{
- tag: "tr",
- contents: [
- { tag: "td", contents: "Abonnement 1 mois" },
- { tag: "td", contents: "(4 séances)" },
- { tag: "td", contents: "70€" },
- ],
+ tag: "p",
+ contents: `Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?
+ <br>Pas de problème ! On peut se concentrer par exemple uniquement sur de la création 2D, ou de la création sonore, ou même uniquement des maths !
+ <br>L'orientation se fait en fonction des préférences de chacun.`,
},
{
- tag: "tr",
+ tag: "div",
+ class: "infos-inscriptions",
contents: [
- { tag: "td", contents: "Abonnement 1 trimestre" },
- { tag: "td", contents: "(12 séances)" },
- { tag: "td", contents: "190€" },
+ {
+ tag: "div",
+ class: "groups",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Groupes",
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mardi" },
+ { tag: "td", contents: "16h - 19h" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mercredi" },
+ { tag: "td", contents: "14h - 17h" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Jeudi" },
+ { tag: "td", contents: "16h - 19h" },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "pricing",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Inscription, fonctionnement et tarifs",
+ },
+ {
+ tag: "p",
+ contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.
+ <br>Les groupes sont de 5 personnes maximum.
+ <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ `,
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 mois",
+ },
+ { tag: "td", contents: "(4 séances)" },
+ { tag: "td", contents: "70€" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 trimestre",
+ },
+ { tag: "td", contents: "(12 séances)" },
+ { tag: "td", contents: "190€" },
+ ],
+ },
+ ],
+ },
+ ],
+ },
],
},
],
},
+ ],
+ };
+ }
+}
+
+module.exports = GameStudioClub;
+
+},{"../../../../constants":2}],5:[function(require,module,exports){
+"use strict";
+
+const GameStudioClub = require("./components/game-studio-club");
+
+class EducationPage {
+ constructor(args) {
+ Object.assign(this, args);
+ }
+
+ render() {
+ return {
+ tag: "div",
+ id: "education-page",
+ contents: [
+ { tag: "h1", contents: "Pédagogie" },
+ {tag: "p", class: "edu-philo", contents: `
+ Nous pensons que la démystification de la technologie et son appropriation par les utilisateurs passent
+ avant tout par la pédagogie et le partage de connaissances. Nous proposons blablabla`,},
+ new GameStudioClub().render(),
{ tag: "h2", contents: "Ateliers de vulgarisation" },
{
tag: "div",
contents:
- "Nous pouvons animer ponctuellement des ateliers d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
+ "Nous proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
},
{
tag: "ul",
@@ -284,7 +431,7 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "Qu'est-ce qui se passe dans mon ordinateur ?",
},
{
@@ -315,7 +462,7 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "GNU/Linux, le monde du libre",
},
{
@@ -341,7 +488,7 @@ class EducationPage {
"Comment fonctionne le réseau internet et ses services (Sites, applications, boites mail, clouds...",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "Comment fonctionne le réseau internet ?",
},
{
@@ -368,16 +515,15 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
- contents: "Qu'est-ce qu'on fait quand on programme ?",
+ tag: "strong",
+ contents: "Le langages des machines",
},
{
tag: "ul",
contents: [
{
tag: "li",
- contents:
- "Démystifier l'idée de programmation informatique",
+ contents: "Démystifier la programmation informatique",
},
{
tag: "li",
@@ -400,7 +546,7 @@ class EducationPage {
{
tag: "div",
contents:
- "Si vous êtes intéressé par un atelier pour votre structure, contactez-nous pour un devis gratuit.",
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
},
{ tag: "h3", contents: "Contact" },
{ tag: "div", contents: "Pour toute question, n'hésitez pas à nous contacter" },
@@ -427,7 +573,7 @@ class EducationPage {
module.exports = EducationPage;
-},{}],3:[function(require,module,exports){
+},{"./components/game-studio-club":4}],6:[function(require,module,exports){
"use strict";
"use strict";
@@ -435,7 +581,7 @@ const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
-},{"../../run-page":4,"./education":2}],4:[function(require,module,exports){
+},{"../../run-page":7,"./education":5}],7:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -447,7 +593,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":8}],8:[function(require,module,exports){
"use strict";
class Template {
@@ -463,47 +609,24 @@ class Template {
tag: "header",
contents: [
{
- tag: "ul",
+ tag: "nav",
contents: [
{
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/",
- contents: "Home",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/games/",
- contents: "Jeux",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/software-development/",
- contents: "Software development",
- },
- ],
- },
- {
- tag: "li",
+ tag: "ul",
contents: [
- {
- tag: "a",
- href: "/public/education/",
- contents: "Pédagogie",
- },
- ],
+ ["/public/", "Accueil"],
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ ["/public/education/", "Pédagogie"],
+ ].map(link => {
+ const [href, text] = link;
+ return {
+ tag: "li",
+ class:
+ window.location.pathname === href ? "active" : "",
+ contents: [{ tag: "a", href, contents: text }],
+ };
+ }),
},
],
},
@@ -531,4 +654,4 @@ class Template {
module.exports = Template;
-},{}]},{},[3]);
+},{}]},{},[6]);
diff --git a/public/games/games.js b/public/games/games.js
index 7501c48b3f5fecf3dde05eb395d220f9300f0a60..f1761f0deeb465b4d091511f5ca9b4c19a059dd8 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -143,47 +143,24 @@ class Template {
tag: "header",
contents: [
{
- tag: "ul",
+ tag: "nav",
contents: [
{
- tag: "li",
+ tag: "ul",
contents: [
- {
- tag: "a",
- href: "/public/",
- contents: "Home",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/games/",
- contents: "Jeux",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/software-development/",
- contents: "Software development",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/education/",
- contents: "Pédagogie",
- },
- ],
+ ["/public/", "Accueil"],
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ ["/public/education/", "Pédagogie"],
+ ].map(link => {
+ const [href, text] = link;
+ return {
+ tag: "li",
+ class:
+ window.location.pathname === href ? "active" : "",
+ contents: [{ tag: "a", href, contents: text }],
+ };
+ }),
},
],
},
diff --git a/public/main.js b/public/main.js
index af03547a403c73c6fc634c90146e7fcec98ea32c..a9911c88e5aa01e447c910ec96560419c74670c2 100644
--- a/public/main.js
+++ b/public/main.js
@@ -143,47 +143,24 @@ class Template {
tag: "header",
contents: [
{
- tag: "ul",
+ tag: "nav",
contents: [
{
- tag: "li",
+ tag: "ul",
contents: [
- {
- tag: "a",
- href: "/public/",
- contents: "Home",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/games/",
- contents: "Jeux",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/software-development/",
- contents: "Software development",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/education/",
- contents: "Pédagogie",
- },
- ],
+ ["/public/", "Accueil"],
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ ["/public/education/", "Pédagogie"],
+ ].map(link => {
+ const [href, text] = link;
+ return {
+ tag: "li",
+ class:
+ window.location.pathname === href ? "active" : "",
+ contents: [{ tag: "a", href, contents: text }],
+ };
+ }),
},
],
},
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 0fb1acb6f9e66c499846cdc72dd49965af80b2dc..c5ed1f06a13cbd1347d548e6b799919db44c33f7 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -143,47 +143,24 @@ class Template {
tag: "header",
contents: [
{
- tag: "ul",
+ tag: "nav",
contents: [
{
- tag: "li",
+ tag: "ul",
contents: [
- {
- tag: "a",
- href: "/public/",
- contents: "Home",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/games/",
- contents: "Jeux",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/software-development/",
- contents: "Software development",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/education/",
- contents: "Pédagogie",
- },
- ],
+ ["/public/", "Accueil"],
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ ["/public/education/", "Pédagogie"],
+ ].map(link => {
+ const [href, text] = link;
+ return {
+ tag: "li",
+ class:
+ window.location.pathname === href ? "active" : "",
+ contents: [{ tag: "a", href, contents: text }],
+ };
+ }),
},
],
},
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
new file mode 100644
index 0000000000000000000000000000000000000000..14163899b229643e22ff7ccc4e6e5b6dade2adc9
--- /dev/null
+++ b/src/pages/education/components/game-studio-club.js
@@ -0,0 +1,290 @@
+"use strict";
+
+const { images_url } = require("../../../../constants");
+
+const GAMEDEV_ASPECTS = [
+ {
+ title: "Dessin et création 2D",
+ image: `${images_url}/glitch_meta_screen1.png`,
+ comment: "",
+ details: [
+ "Créer des décors et des personnages",
+ "Dessiner sur ordinateur, faire du pixel art",
+ "Créer des animations 2D",
+ ],
+ },
+ {
+ title: "Musique et effets sonores",
+ image: `${images_url}/glitch_meta_screen2.png`,
+ comment: "",
+ details: [
+ "Utiliser des logiciels de son et des synthétiseurs",
+ "Composer une musique",
+ "Faire une prise de son",
+ "Mixer un enregistrement",
+ ],
+ },
+ {
+ title: "Développer un univers",
+ image: `${images_url}/glitch_meta_screen3.png`,
+ comment: "",
+ details: [
+ "Écrire une histoire, construire une narration",
+ "Imaginer des mondes et des personnages",
+ ],
+ },
+ {
+ title: "Concevoir le jeu",
+ image: `${images_url}/glitch_meta_screen4.png`,
+ comment: "",
+ details: [
+ "Comprendres les différents éléments qui composent un jeu",
+ "Développer les mécanismes de gameplay",
+ ],
+ },
+ {
+ title: "Programmation informatique",
+ image: `${images_url}/glitch_meta_screen5.png`,
+ comment: "",
+ details: [
+ "Apprendre pas à pas à coder avec différents langages de programmation",
+ "Découvrir les bases du web en créant des mini-jeux en lignes",
+ ],
+ },
+ {
+ title: "Mathématiques et physique",
+ image: `${images_url}/glitch_meta_screen6.png`,
+ comment:
+ "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
+ details: [
+ "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
+ ],
+ },
+ {
+ title: "Travail en équipe",
+ image: `${images_url}/glitch_meta_screen1.png`,
+ comment:
+ "<i>Faire son jeu tout seul c'est bien mais ça peut être long !<br>Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.</i>",
+ details: [],
+ },
+ {
+ title: "Logiciels libres, systèmes Linux",
+ image: `${images_url}/glitch_meta_screen2.png`,
+ comment:
+ "<i>Nous utilisons essentiellement des logiciels libres sur Linux.<br>C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</i>",
+ details: [],
+ },
+];
+
+class GameStudioClub {
+ render() {
+ return {
+ tag: "section",
+ contents: [
+ {
+ tag: "div",
+ class: "title-banner",
+ contents: [{ tag: "h2", contents: "Game Studio Club" }],
+ },
+ {
+ tag: "div",
+ class: "section-contents",
+ contents: [
+ {
+ tag: "div",
+ class: "teaser",
+ contents: [
+ { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
+ {
+ tag: "strong",
+ contents:
+ "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "practical-infos",
+ contents: [
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ { tag: "strong", contents: "Ça se passe où ?" },
+ {
+ tag: "span",
+ contents:
+ "Dans nos locaux,<br/><i>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</i>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ { tag: "strong", contents: "Pour qui ?" },
+ {
+ tag: "span",
+ contents: " Tout le monde à partir de 12 ans.",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ {
+ tag: "strong",
+ contents: "Contact",
+ },
+ {
+ tag: "span",
+ contents: "04 75 78 08 72",
+ },
+ {
+ tag: "a",
+ href: "mailto:kuadrado-software@tutanota.com",
+ contents: "kuadrado-software@tutanota.com",
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "ul",
+ class: "learning-themes",
+ contents: GAMEDEV_ASPECTS.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
+ contents: [
+ {
+ tag: "div",
+ class: "img-wrapper",
+ contents: [{ tag: "img", src: li.image }],
+ },
+ {
+ tag: "div",
+ class: "right",
+ contents: [
+ { tag: "strong", contents: li.title },
+ {
+ tag: "div",
+ class: "comment",
+ contents: li.comment,
+ },
+ {
+ tag: "ul",
+ contents: li.details.map(d => {
+ return {
+ tag: "li",
+ contents: d,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
+ },
+ {
+ tag: "p",
+ contents: `Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?
+ <br>Pas de problème ! On peut se concentrer par exemple uniquement sur de la création 2D, ou de la création sonore, ou même uniquement des maths !
+ <br>L'orientation se fait en fonction des préférences de chacun.`,
+ },
+ {
+ tag: "div",
+ class: "infos-inscriptions",
+ contents: [
+ {
+ tag: "div",
+ class: "groups",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Groupes",
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mardi" },
+ { tag: "td", contents: "16h - 19h" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mercredi" },
+ { tag: "td", contents: "14h - 17h" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Jeudi" },
+ { tag: "td", contents: "16h - 19h" },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "pricing",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Inscription, fonctionnement et tarifs",
+ },
+ {
+ tag: "p",
+ contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.
+ <br>Les groupes sont de 5 personnes maximum.
+ <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ `,
+ },
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 mois",
+ },
+ { tag: "td", contents: "(4 séances)" },
+ { tag: "td", contents: "70€" },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 trimestre",
+ },
+ { tag: "td", contents: "(12 séances)" },
+ { tag: "td", contents: "190€" },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = GameStudioClub;
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index acfe6aec5841a9bcd74996db9f319b9ef66bc5aa..5665a700455e1ccdd9a0e55f8e4c7e09bbb61886 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -1,78 +1,6 @@
"use strict";
-const GAMEDEV_ASPECTS = [
- {
- title: "Dessin et création 2D",
- image: "...",
- comment: "",
- details: [
- "Créer des décors et des personnages",
- "Dessiner sur ordinateur, faire du pixel art",
- "Créer des animations 2D",
- ],
- },
- {
- title: "Musique et effets sonores",
- image: "...",
- comment: "",
- details: [
- "Utiliser des logiciels de son et des synthétiseurs",
- "Composer une musique",
- "Faire une prise de son",
- "Mixer un enregistrement",
- ],
- },
- {
- title: "Développer un univers",
- image: "...",
- comment: "",
- details: [
- "Écrire une histoire, construire une narration",
- "Imaginer des mondes et des personnages",
- ],
- },
- {
- title: "Concevoir le jeu",
- image: "...",
- comment: "",
- details: [
- "Comprendres les différents éléments qui composent un jeu",
- "Développer les mécanismes de gameplay",
- ],
- },
- {
- title: "Programmation informatique",
- image: "...",
- comment: "",
- details: [
- "Apprendre pas à pas à coder avec différents langages de programmation",
- "Découvrir les bases du web en créant des mini-jeux en lignes",
- ],
- },
- {
- title: "Mathématiques et physique",
- image: "...",
- comment:
- "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
- details: [
- "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
- ],
- },
- {
- title: "Travail en équipe",
- image: "...",
- comment:
- "<i>Faire son jeu tout seul c'est bien mais ça peut être long !<br>Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.</i>",
- details: [],
- },
- {
- title: "Logiciels libres, systèmes Linux",
- image: "...",
- comment:
- "<i>Nous utilisons essentiellement des logiciels libres sur Linux.<br>C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</i>",
- details: [],
- },
-];
+const GameStudioClub = require("./components/game-studio-club");
class EducationPage {
constructor(args) {
@@ -82,113 +10,18 @@ class EducationPage {
render() {
return {
tag: "div",
+ id: "education-page",
contents: [
{ tag: "h1", contents: "Pédagogie" },
- { tag: "h2", contents: "Game studio club" },
- { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
- {
- tag: "strong",
- contents: "Dans nos locaux, 32 rue Simon Vialet, 07240 Vernoux en Vivarais",
- },
- {
- tag: "p",
- contents:
- "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
- },
- {
- tag: "ul",
- contents: GAMEDEV_ASPECTS.map(li => {
- return {
- tag: "li",
- contents: [
- { tag: "img", src: li.image },
- { tag: "strong", contents: li.title },
- { tag: "div", contents: li.comment },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- };
- }),
- },
- {
- tag: "p",
- contents:
- "Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ? <br>Pas de problème ! On peut se concentrer par exemple uniquement sur de la création 2D, ou de la création sonore, ou même uniquement des maths ! <br>L'orientation se fait en fonction des préférences de chacun.",
- },
- {
- tag: "h3",
- contents: "Groupes",
- },
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mardi" },
- { tag: "td", contents: "16h - 19h" },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mercredi" },
- { tag: "td", contents: "14h - 17h" },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- { tag: "td", contents: "16h - 19h" },
- ],
- },
- ],
- },
- {
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou plus.
- <br>Les groupes sont de 5 personnes maximum.
- <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Abonnement 1 mois" },
- { tag: "td", contents: "(4 séances)" },
- { tag: "td", contents: "70€" },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Abonnement 1 trimestre" },
- { tag: "td", contents: "(12 séances)" },
- { tag: "td", contents: "190€" },
- ],
- },
- ],
- },
+ {tag: "p", class: "edu-philo", contents: `
+ Nous pensons que la démystification de la technologie et son appropriation par les utilisateurs passent
+ avant tout par la pédagogie et le partage de connaissances. Nous proposons blablabla`,},
+ new GameStudioClub().render(),
{ tag: "h2", contents: "Ateliers de vulgarisation" },
{
tag: "div",
contents:
- "Nous pouvons animer ponctuellement des ateliers d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
+ "Nous proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
},
{
tag: "ul",
@@ -197,7 +30,7 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "Qu'est-ce qui se passe dans mon ordinateur ?",
},
{
@@ -228,7 +61,7 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "GNU/Linux, le monde du libre",
},
{
@@ -254,7 +87,7 @@ class EducationPage {
"Comment fonctionne le réseau internet et ses services (Sites, applications, boites mail, clouds...",
contents: [
{
- tag: "span",
+ tag: "strong",
contents: "Comment fonctionne le réseau internet ?",
},
{
@@ -281,16 +114,15 @@ class EducationPage {
tag: "li",
contents: [
{
- tag: "span",
- contents: "Qu'est-ce qu'on fait quand on programme ?",
+ tag: "strong",
+ contents: "Le langages des machines",
},
{
tag: "ul",
contents: [
{
tag: "li",
- contents:
- "Démystifier l'idée de programmation informatique",
+ contents: "Démystifier la programmation informatique",
},
{
tag: "li",
@@ -313,7 +145,7 @@ class EducationPage {
{
tag: "div",
contents:
- "Si vous êtes intéressé par un atelier pour votre structure, contactez-nous pour un devis gratuit.",
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
},
{ tag: "h3", contents: "Contact" },
{ tag: "div", contents: "Pour toute question, n'hésitez pas à nous contacter" },
diff --git a/src/style.scss b/src/style.scss
index 5ac33dfbea9192f134fdd3f4c4c4ed9193331fdf..46e5799a3d0e7d92458f664d6fa8857775ad5089 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,8 +4,192 @@ body {
}
font-family: Arial, Helvetica, sans-serif;
margin: 0;
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ }
}
main {
- //
+ background: url("../assets/images/wallpaper_binary.png");
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ header {
+ width: 100%;
+ nav {
+ background-color: #fff1;
+ ul {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+ li {
+ a {
+ display: flex;
+ padding: 10px 20px;
+ color: #b8b9c5;
+ font-weight: 500;
+ text-decoration: none;
+ }
+ &:hover,
+ &.active {
+ background-color: #fff2;
+ a {
+ color: white;
+ }
+ }
+ }
+ }
+ }
+ }
+ #page-container {
+ background-color: white;
+ width: 1200px;
+ max-width: 100%;
+ flex: 1;
+ #education-page {
+ h1 {
+ margin: 15px 40px 0;
+ font-size: 25px;
+ }
+ .edu-philo {
+ margin: 15px 40px 15px 100px;
+ max-width: 800px;
+ font-style: italic;
+ }
+ .title-banner {
+ display: flex;
+ justify-content: flex-end;
+ flex-direction: column;
+ height: 300px;
+ background-image: url("../assets/images/glitch_meta_level3.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: 0% 90%;
+ h2 {
+ color: white;
+ font-size: 2.5em;
+ margin: 40px;
+ text-shadow: 0 0 8px #000;
+ }
+ }
+ .section-contents {
+ margin: 20px 40px 60px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ .teaser {
+ grid-column: 1 / span 2;
+ }
+ .practical-infos {
+ grid-column: 2;
+ grid-row: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.2),
+ rgba(255, 255, 255, 0.2)
+ ),
+ url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
+ .info-item {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ padding: 20px;
+ strong {
+ margin-bottom: 10px;
+ }
+ span,
+ a {
+ font-size: 14px;
+ text-decoration: none;
+ }
+ }
+ }
+ ul.learning-themes {
+ grid-column: 1;
+ grid-row: 2;
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+ li.learning-theme {
+ display: grid;
+ grid-template-columns: auto 280px;
+ border-bottom: 1px solid #dde;
+ border-right: 1px solid #dde;
+ .img-wrapper {
+ grid-column: 1;
+ width: 130px;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ img {
+ position: absolute;
+ height: 100%;
+ }
+ }
+ .right {
+ grid-column: 2;
+ padding: 10px;
+ strong {
+ display: block;
+ margin-bottom: 10px;
+ }
+ .comment {
+ font-size: 14px;
+ }
+ ul {
+ font-size: 12px;
+ list-style-type: disc;
+ margin: 10px 0 0 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+ }
+ }
+ }
+ .infos-inscriptions {
+ grid-column: 1 / span 2;
+ display: flex;
+ gap: 40px;
+ .groups,
+ .pricing {
+ background-image: linear-gradient(
+ rgba(255, 255, 255, 0.2),
+ rgba(255, 255, 255, 0.2)
+ ),
+ url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ & > * {
+ background-color: white;
+ margin: 0;
+ width: 100%;
+ }
+ h3, table {
+ padding: 20px;
+ }
+ p {
+ padding: 0 20px;
+ }
+ }
+ .pricing {
+ flex: 1;
+ }
+ }
+ }
+ }
+ }
+ footer {
+ width: 100%;
+ }
}
diff --git a/src/template/template.js b/src/template/template.js
index a637c043795f0fe09f05c5a5096466788d664fa8..dec780a7dd453ec7e6fac584e7ba1adb1407c157 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -13,47 +13,24 @@ class Template {
tag: "header",
contents: [
{
- tag: "ul",
+ tag: "nav",
contents: [
{
- tag: "li",
+ tag: "ul",
contents: [
- {
- tag: "a",
- href: "/public/",
- contents: "Home",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/games/",
- contents: "Jeux",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/software-development/",
- contents: "Software development",
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "/public/education/",
- contents: "Pédagogie",
- },
- ],
+ ["/public/", "Accueil"],
+ ["/public/games/", "Jeux"],
+ ["/public/software-development/", "Software"],
+ ["/public/education/", "Pédagogie"],
+ ].map(link => {
+ const [href, text] = link;
+ return {
+ tag: "li",
+ class:
+ window.location.pathname === href ? "active" : "",
+ contents: [{ tag: "a", href, contents: text }],
+ };
+ }),
},
],
},
diff --git a/style/style.css b/style/style.css
index 0a8822d78ca508f103cb52fffa2d5909b30e1b8a..f59446dd39436e61b464bc493eb15d92e87739dd 100644
--- a/style/style.css
+++ b/style/style.css
@@ -5,5 +5,184 @@ body {
body * {
box-sizing: border-box;
}
+body ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+main {
+ background: url("../assets/images/wallpaper_binary.png");
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+}
+main header {
+ width: 100%;
+}
+main header nav {
+ background-color: #fff1;
+}
+main header nav ul {
+ display: flex;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+main header nav ul li a {
+ display: flex;
+ padding: 10px 20px;
+ color: #b8b9c5;
+ font-weight: 500;
+ text-decoration: none;
+}
+main header nav ul li:hover, main header nav ul li.active {
+ background-color: #fff2;
+}
+main header nav ul li:hover a, main header nav ul li.active a {
+ color: white;
+}
+main #page-container {
+ background-color: white;
+ width: 1200px;
+ max-width: 100%;
+ flex: 1;
+}
+main #page-container #education-page h1 {
+ margin: 15px 40px 0;
+ font-size: 25px;
+}
+main #page-container #education-page .edu-philo {
+ margin: 15px 40px 15px 100px;
+ max-width: 800px;
+ font-style: italic;
+}
+main #page-container #education-page .title-banner {
+ display: flex;
+ justify-content: flex-end;
+ flex-direction: column;
+ height: 300px;
+ background-image: url("../assets/images/glitch_meta_level3.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: 0% 90%;
+}
+main #page-container #education-page .title-banner h2 {
+ color: white;
+ font-size: 2.5em;
+ margin: 40px;
+ text-shadow: 0 0 8px #000;
+}
+main #page-container #education-page .section-contents {
+ margin: 20px 40px 60px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+}
+main #page-container #education-page .section-contents .teaser {
+ grid-column: 1/span 2;
+}
+main #page-container #education-page .section-contents .practical-infos {
+ grid-column: 2;
+ grid-row: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
+}
+main #page-container #education-page .section-contents .practical-infos .info-item {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ padding: 20px;
+}
+main #page-container #education-page .section-contents .practical-infos .info-item strong {
+ margin-bottom: 10px;
+}
+main #page-container #education-page .section-contents .practical-infos .info-item span,
+main #page-container #education-page .section-contents .practical-infos .info-item a {
+ font-size: 14px;
+ text-decoration: none;
+}
+main #page-container #education-page .section-contents ul.learning-themes {
+ grid-column: 1;
+ grid-row: 2;
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme {
+ display: grid;
+ grid-template-columns: auto 280px;
+ border-bottom: 1px solid #dde;
+ border-right: 1px solid #dde;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper {
+ grid-column: 1;
+ width: 130px;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper img {
+ position: absolute;
+ height: 100%;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right {
+ grid-column: 2;
+ padding: 10px;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right strong {
+ display: block;
+ margin-bottom: 10px;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right .comment {
+ font-size: 14px;
+}
+main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right ul {
+ font-size: 12px;
+ list-style-type: disc;
+ margin: 10px 0 0 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions {
+ grid-column: 1/span 2;
+ display: flex;
+ gap: 40px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing {
+ background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../assets/images/wallpaper_binary_light.png");
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups > *,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing > * {
+ background-color: white;
+ margin: 0;
+ width: 100%;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups h3, main #page-container #education-page .section-contents .infos-inscriptions .groups table,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing h3,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing table {
+ padding: 20px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups p,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing p {
+ padding: 0 20px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .pricing {
+ flex: 1;
+}
+main footer {
+ width: 100%;
+}
/*# sourceMappingURL=style.css.map */
diff --git a/style/style.css.map b/style/style.css.map
index 6f0f49cd363a9adb70d6cff73ec270138c0bce45..615b10a93865ba8c892f0f00e31fd74c5c97b869 100644
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EAII;EACA;;AAJA;EACI;;AAIJ;EACI;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;EACA;EACA;EACA;;AAEJ;EAEI;;AACA;EACI;;AAOxB;EACI;EACA;EACA;EACA;;AAEI;EACI;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAKA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;AAAA;EAEI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAKhB;EACI;EACA;EACA;;AACA;AAAA;EAEI;EAKA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;AAAA;EACI;;AAEJ;AAAA;EACI;;AAGR;EACI;;AAMpB;EACI","file":"style.css"}
\ No newline at end of file