From d947e68a74b7447e63575cdd4008ff4f4f914ff1 Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Fri, 8 Jan 2021 09:11:27 +0100
Subject: [PATCH] education page tmp design
---
public/education/education.js | 368 ++++++++++--------
.../education/components/game-studio-club.js | 110 ++++--
.../education/components/vugarisation.js | 150 +++++++
src/pages/education/education.js | 158 +-------
src/pages/education/education.scss | 151 +++++++
src/style.scss | 139 +------
style/pages/education/education.css | 148 +++++++
style/style.css | 34 +-
style/style.css.map | 2 +-
9 files changed, 759 insertions(+), 501 deletions(-)
create mode 100644 src/pages/education/components/vugarisation.js
create mode 100644 src/pages/education/education.scss
create mode 100644 style/pages/education/education.css
diff --git a/public/education/education.js b/public/education/education.js
index bfbb7c5..498e5d2 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -111,7 +111,7 @@ module.exports = {
const { images_url } = require("../../../../constants");
-const GAMEDEV_ASPECTS = [
+const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
image: `${images_url}/glitch_meta_screen1.png`,
@@ -201,7 +201,7 @@ class GameStudioClub {
contents: [
{
tag: "div",
- class: "teaser",
+ class: "full-row",
contents: [
{ tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
{
@@ -262,7 +262,7 @@ class GameStudioClub {
{
tag: "ul",
class: "learning-themes",
- contents: GAMEDEV_ASPECTS.map(li => {
+ contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
class: "learning-theme",
@@ -299,13 +299,14 @@ class GameStudioClub {
},
{
tag: "p",
- contents: `Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?
+ class: "full-row",
+ contents: `<b>Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?</b>
<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",
+ class: "infos-inscriptions full-row",
contents: [
{
tag: "div",
@@ -316,27 +317,46 @@ class GameStudioClub {
contents: "Groupes",
},
{
- tag: "table",
+ tag: "p",
+ contents: "Les groupes sont de 5 personnes maximum.",
+ },
+ {
+ tag: "div",
+ class: "table-wrapper",
contents: [
{
- tag: "tr",
+ tag: "table",
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: "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",
+ },
+ ],
+ },
],
},
],
@@ -354,33 +374,45 @@ class GameStudioClub {
{
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",
+ tag: "div",
+ class: "table-wrapper",
contents: [
{
- tag: "tr",
+ tag: "table",
contents: [
{
- tag: "td",
- contents: "Abonnement 1 mois",
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 mois",
+ },
+ {
+ tag: "td",
+ contents: "(4 séances)",
+ },
+ { tag: "td", contents: "70€" },
+ ],
},
- { tag: "td", contents: "(4 séances)" },
- { tag: "td", contents: "70€" },
- ],
- },
- {
- tag: "tr",
- contents: [
{
- tag: "td",
- contents: "Abonnement 1 trimestre",
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents:
+ "Abonnement 1 trimestre",
+ },
+ {
+ tag: "td",
+ contents: "(12 séances)",
+ },
+ { tag: "td", contents: "190€" },
+ ],
},
- { tag: "td", contents: "(12 séances)" },
- { tag: "td", contents: "190€" },
],
},
],
@@ -401,171 +433,181 @@ module.exports = GameStudioClub;
},{"../../../../constants":2}],5:[function(require,module,exports){
"use strict";
-const GameStudioClub = require("./components/game-studio-club");
+const { images_url } = require("../../../../constants");
-class EducationPage {
- constructor(args) {
- Object.assign(this, args);
- }
+const VULGARISATION_THEMES = [
+ {
+ title: "Qu'est-ce qui se passe dans mon ordinateur ?",
+ image: `${images_url}/glitch_meta_screen1.png`,
+ comment: "",
+ details: [
+ "Répondre à des questions simples sur l'informatique de tous les jours",
+ "L'organisation des fichiers",
+ "Le navigateur web",
+ "Les logiciels usuels",
+ ],
+ },
+ {
+ title: "GNU/Linux, le monde du libre",
+ image: `${images_url}/glitch_meta_screen2.png`,
+ comment: "",
+ details: [
+ "Installer Linux, démystifier et faire tomber les barrières.",
+ "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
+ ],
+ },
+ {
+ title: "Comment fonctionne le réseau internet ?",
+ image: `${images_url}/glitch_meta_screen3.png`,
+ comment: "",
+ details: [
+ "De quoi est fait le réseau internet ?",
+ "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
+ "Qu'est-ce qu'un cloud ?",
+ ],
+ },
+ {
+ title: "Le langages des machines",
+ image: `${images_url}/glitch_meta_screen4.png`,
+ comment: "",
+ details: [
+ "Démystifier la programmation informatique",
+ "Qu'est-ce qu'un langage de programmation",
+ "À quoi ça sert ?",
+ "Les métiers du développement informatique",
+ ],
+ },
+];
+class Vulgarisation {
render() {
return {
- tag: "div",
- id: "education-page",
+ tag: "section",
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 proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
+ class: "title-banner",
+ contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
},
{
- tag: "ul",
+ tag: "div",
+ class: "section-contents",
contents: [
{
- tag: "li",
- contents: [
- {
- tag: "strong",
- contents: "Qu'est-ce qui se passe dans mon ordinateur ?",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents:
- "Répondre à des questions simples sur l'informatique de tous les jours",
- },
- {
- tag: "li",
- contents: "L'organisation des fichiers",
- },
- {
- tag: "li",
- contents: "Le navigateur web",
- },
- {
- tag: "li",
- contents: "Les logiciels usuels",
- },
- ],
- },
- ],
+ tag: "div",
+ class: "full-row",
+ contents:
+ "<b>Nous proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants</b>",
},
{
- tag: "li",
+ tag: "div",
+ class: "practical-infos",
contents: [
{
- tag: "strong",
- contents: "GNU/Linux, le monde du libre",
- },
- {
- tag: "ul",
+ tag: "div",
+ class: "info-item",
contents: [
{
- tag: "li",
- contents:
- "Installer Linux, démystifier et faire tomber les barrières.",
- },
- {
- tag: "li",
+ tag: "span",
contents:
- "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
},
],
},
- ],
- },
- {
- tag: "li",
- contents:
- "Comment fonctionne le réseau internet et ses services (Sites, applications, boites mail, clouds...",
- contents: [
{
- tag: "strong",
- contents: "Comment fonctionne le réseau internet ?",
- },
- {
- tag: "ul",
+ tag: "div",
+ class: "info-item",
contents: [
{
- tag: "li",
- contents: "De quoi est fait le réseau internet ?",
+ tag: "strong",
+ contents: "Contact",
},
{
- tag: "li",
- contents:
- "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
+ tag: "span",
+ contents: "04 75 78 08 72",
},
{
- tag: "li",
- contents: "Qu'est-ce qu'un cloud ?",
+ tag: "a",
+ href: "mailto:kuadrado-software@tutanota.com",
+ contents: "kuadrado-software@tutanota.com",
},
],
},
],
},
{
- tag: "li",
- contents: [
- {
- tag: "strong",
- contents: "Le langages des machines",
- },
- {
- tag: "ul",
+ tag: "ul",
+ class: "learning-themes",
+ contents: VULGARISATION_THEMES.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
contents: [
{
- tag: "li",
- contents: "Démystifier la programmation informatique",
- },
- {
- tag: "li",
- contents: "Qu'est-ce qu'un langage de programmation",
- },
- {
- tag: "li",
- contents: "À quoi ça sert ?",
+ tag: "div",
+ class: "img-wrapper",
+ contents: [{ tag: "img", src: li.image }],
},
{
- tag: "li",
- contents: "Les métiers du développement informatique",
+ 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,
+ };
+ }),
+ },
+ ],
},
],
- },
- ],
+ };
+ }),
},
],
},
+ ],
+ };
+ }
+}
+
+module.exports = Vulgarisation;
+
+},{"../../../../constants":2}],6:[function(require,module,exports){
+"use strict";
+
+const GameStudioClub = require("./components/game-studio-club");
+const Vulgarisation = require("./components/vugarisation");
+
+class EducationPage {
+ constructor(args) {
+ Object.assign(this, args);
+ }
+
+ render() {
+ return {
+ tag: "div",
+ id: "education-page",
+ contents: [
+ { tag: "h1", contents: "Pédagogie" },
{
- tag: "div",
- contents:
- "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" },
- {
- tag: "ul",
- contents: [
- { tag: "li", contents: "04 75 78 08 72" },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "mailto:kuadrado-software@tutanota.com",
- contents: "kuadrado-software@tutanota.com",
- },
- ],
- },
- ],
+ 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(),
+ new Vulgarisation().render(),
],
};
}
@@ -573,7 +615,7 @@ class EducationPage {
module.exports = EducationPage;
-},{"./components/game-studio-club":4}],6:[function(require,module,exports){
+},{"./components/game-studio-club":4,"./components/vugarisation":5}],7:[function(require,module,exports){
"use strict";
"use strict";
@@ -581,7 +623,7 @@ const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
-},{"../../run-page":7,"./education":5}],7:[function(require,module,exports){
+},{"../../run-page":8,"./education":6}],8:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -593,7 +635,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":8}],8:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":9}],9:[function(require,module,exports){
"use strict";
class Template {
@@ -654,4 +696,4 @@ class Template {
module.exports = Template;
-},{}]},{},[6]);
+},{}]},{},[7]);
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 1416389..2749a4c 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -2,7 +2,7 @@
const { images_url } = require("../../../../constants");
-const GAMEDEV_ASPECTS = [
+const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
image: `${images_url}/glitch_meta_screen1.png`,
@@ -92,7 +92,7 @@ class GameStudioClub {
contents: [
{
tag: "div",
- class: "teaser",
+ class: "full-row",
contents: [
{ tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
{
@@ -153,7 +153,7 @@ class GameStudioClub {
{
tag: "ul",
class: "learning-themes",
- contents: GAMEDEV_ASPECTS.map(li => {
+ contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
class: "learning-theme",
@@ -190,13 +190,14 @@ class GameStudioClub {
},
{
tag: "p",
- contents: `Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?
+ class: "full-row",
+ contents: `<b>Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ?</b>
<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",
+ class: "infos-inscriptions full-row",
contents: [
{
tag: "div",
@@ -207,27 +208,46 @@ class GameStudioClub {
contents: "Groupes",
},
{
- tag: "table",
+ tag: "p",
+ contents: "Les groupes sont de 5 personnes maximum.",
+ },
+ {
+ tag: "div",
+ class: "table-wrapper",
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",
+ tag: "table",
contents: [
- { tag: "td", contents: "Jeudi" },
- { tag: "td", contents: "16h - 19h" },
+ {
+ 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",
+ },
+ ],
+ },
],
},
],
@@ -245,33 +265,45 @@ class GameStudioClub {
{
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",
+ tag: "div",
+ class: "table-wrapper",
contents: [
{
- tag: "tr",
+ tag: "table",
contents: [
{
- tag: "td",
- contents: "Abonnement 1 mois",
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 mois",
+ },
+ {
+ tag: "td",
+ contents: "(4 séances)",
+ },
+ { tag: "td", contents: "70€" },
+ ],
},
- { tag: "td", contents: "(4 séances)" },
- { tag: "td", contents: "70€" },
- ],
- },
- {
- tag: "tr",
- contents: [
{
- tag: "td",
- contents: "Abonnement 1 trimestre",
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents:
+ "Abonnement 1 trimestre",
+ },
+ {
+ tag: "td",
+ contents: "(12 séances)",
+ },
+ { tag: "td", contents: "190€" },
+ ],
},
- { tag: "td", contents: "(12 séances)" },
- { tag: "td", contents: "190€" },
],
},
],
diff --git a/src/pages/education/components/vugarisation.js b/src/pages/education/components/vugarisation.js
new file mode 100644
index 0000000..9a65271
--- /dev/null
+++ b/src/pages/education/components/vugarisation.js
@@ -0,0 +1,150 @@
+"use strict";
+
+const { images_url } = require("../../../../constants");
+
+const VULGARISATION_THEMES = [
+ {
+ title: "Qu'est-ce qui se passe dans mon ordinateur ?",
+ image: `${images_url}/glitch_meta_screen1.png`,
+ comment: "",
+ details: [
+ "Répondre à des questions simples sur l'informatique de tous les jours",
+ "L'organisation des fichiers",
+ "Le navigateur web",
+ "Les logiciels usuels",
+ ],
+ },
+ {
+ title: "GNU/Linux, le monde du libre",
+ image: `${images_url}/glitch_meta_screen2.png`,
+ comment: "",
+ details: [
+ "Installer Linux, démystifier et faire tomber les barrières.",
+ "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
+ ],
+ },
+ {
+ title: "Comment fonctionne le réseau internet ?",
+ image: `${images_url}/glitch_meta_screen3.png`,
+ comment: "",
+ details: [
+ "De quoi est fait le réseau internet ?",
+ "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
+ "Qu'est-ce qu'un cloud ?",
+ ],
+ },
+ {
+ title: "Le langages des machines",
+ image: `${images_url}/glitch_meta_screen4.png`,
+ comment: "",
+ details: [
+ "Démystifier la programmation informatique",
+ "Qu'est-ce qu'un langage de programmation",
+ "À quoi ça sert ?",
+ "Les métiers du développement informatique",
+ ],
+ },
+];
+
+class Vulgarisation {
+ render() {
+ return {
+ tag: "section",
+ contents: [
+ {
+ tag: "div",
+ class: "title-banner",
+ contents: [{ tag: "h2", contents: "Ateliers de vulgarisation" }],
+ },
+ {
+ tag: "div",
+ class: "section-contents",
+ contents: [
+ {
+ tag: "div",
+ class: "full-row",
+ contents:
+ "<b>Nous proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants</b>",
+ },
+ {
+ tag: "div",
+ class: "practical-infos",
+ contents: [
+ {
+ tag: "div",
+ class: "info-item",
+ contents: [
+ {
+ tag: "span",
+ contents:
+ "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un devis gratuit.",
+ },
+ ],
+ },
+ {
+ 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: VULGARISATION_THEMES.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,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = Vulgarisation;
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index 5665a70..a1bb552 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -1,6 +1,7 @@
"use strict";
const GameStudioClub = require("./components/game-studio-club");
+const Vulgarisation = require("./components/vugarisation");
class EducationPage {
constructor(args) {
@@ -13,158 +14,15 @@ class EducationPage {
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 proposons des animations d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents: [
- {
- tag: "strong",
- contents: "Qu'est-ce qui se passe dans mon ordinateur ?",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents:
- "Répondre à des questions simples sur l'informatique de tous les jours",
- },
- {
- tag: "li",
- contents: "L'organisation des fichiers",
- },
- {
- tag: "li",
- contents: "Le navigateur web",
- },
- {
- tag: "li",
- contents: "Les logiciels usuels",
- },
- ],
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "strong",
- contents: "GNU/Linux, le monde du libre",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents:
- "Installer Linux, démystifier et faire tomber les barrières.",
- },
- {
- tag: "li",
- contents:
- "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
- },
- ],
- },
- ],
- },
- {
- tag: "li",
- contents:
- "Comment fonctionne le réseau internet et ses services (Sites, applications, boites mail, clouds...",
- contents: [
- {
- tag: "strong",
- contents: "Comment fonctionne le réseau internet ?",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents: "De quoi est fait le réseau internet ?",
- },
- {
- tag: "li",
- contents:
- "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
- },
- {
- tag: "li",
- contents: "Qu'est-ce qu'un cloud ?",
- },
- ],
- },
- ],
- },
- {
- tag: "li",
- contents: [
- {
- tag: "strong",
- contents: "Le langages des machines",
- },
- {
- tag: "ul",
- contents: [
- {
- tag: "li",
- contents: "Démystifier la programmation informatique",
- },
- {
- tag: "li",
- contents: "Qu'est-ce qu'un langage de programmation",
- },
- {
- tag: "li",
- contents: "À quoi ça sert ?",
- },
- {
- tag: "li",
- contents: "Les métiers du développement informatique",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- contents:
- "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" },
{
- tag: "ul",
- contents: [
- { tag: "li", contents: "04 75 78 08 72" },
- {
- tag: "li",
- contents: [
- {
- tag: "a",
- href: "mailto:kuadrado-software@tutanota.com",
- contents: "kuadrado-software@tutanota.com",
- },
- ],
- },
- ],
+ 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(),
+ new Vulgarisation().render(),
],
};
}
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
new file mode 100644
index 0000000..4fdba54
--- /dev/null
+++ b/src/pages/education/education.scss
@@ -0,0 +1,151 @@
+#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;
+ height: auto;
+ .full-row {
+ 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;
+ max-height: 100%;
+ min-width: 100%;
+ }
+ }
+ .right {
+ grid-column: 2;
+ padding: 0 10px 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 {
+ 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 {
+ flex: 1;
+ padding: 20px 20px 10px;
+ }
+ p {
+ padding: 10px 20px;
+ flex: 1;
+ }
+ .table-wrapper {
+ flex: 1;
+ padding: 20px;
+ table {
+ border: 1px solid #dde;
+ border-collapse: collapse;
+ td {
+ border: 1px solid #dde;
+ padding: 10px 20px;
+ }
+ }
+ }
+ }
+ .pricing {
+ // flex: 1;
+ }
+ }
+ }
+}
diff --git a/src/style.scss b/src/style.scss
index 46e5799..d1bf204 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -50,144 +50,7 @@ main {
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;
- }
- }
- }
- }
+ @import "./pages/education/education.scss";
}
footer {
width: 100%;
diff --git a/style/pages/education/education.css b/style/pages/education/education.css
new file mode 100644
index 0000000..a704330
--- /dev/null
+++ b/style/pages/education/education.css
@@ -0,0 +1,148 @@
+#education-page h1 {
+ margin: 15px 40px 0;
+ font-size: 25px;
+}
+#education-page .edu-philo {
+ margin: 15px 40px 15px 100px;
+ max-width: 800px;
+ font-style: italic;
+}
+#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%;
+}
+#education-page .title-banner h2 {
+ color: white;
+ font-size: 2.5em;
+ margin: 40px;
+ text-shadow: 0 0 8px #000;
+}
+#education-page .section-contents {
+ margin: 20px 40px 60px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 20px;
+ height: auto;
+}
+#education-page .section-contents .full-row {
+ grid-column: 1/span 2;
+}
+#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;
+}
+#education-page .section-contents .practical-infos .info-item {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ padding: 20px;
+}
+#education-page .section-contents .practical-infos .info-item strong {
+ margin-bottom: 10px;
+}
+#education-page .section-contents .practical-infos .info-item span,
+#education-page .section-contents .practical-infos .info-item a {
+ font-size: 14px;
+ text-decoration: none;
+}
+#education-page .section-contents ul.learning-themes {
+ grid-column: 1;
+ grid-row: 2;
+ display: flex;
+ gap: 20px;
+ flex-wrap: wrap;
+}
+#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;
+}
+#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;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper img {
+ position: absolute;
+ max-height: 100%;
+ min-width: 100%;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .right {
+ grid-column: 2;
+ padding: 0 10px 10px;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .right strong {
+ display: block;
+ margin-bottom: 10px;
+}
+#education-page .section-contents ul.learning-themes li.learning-theme .right .comment {
+ font-size: 14px;
+}
+#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;
+}
+#education-page .section-contents .infos-inscriptions {
+ display: flex;
+ gap: 40px;
+}
+#education-page .section-contents .infos-inscriptions .groups,
+#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;
+}
+#education-page .section-contents .infos-inscriptions .groups > *,
+#education-page .section-contents .infos-inscriptions .pricing > * {
+ background-color: white;
+ margin: 0;
+ width: 100%;
+}
+#education-page .section-contents .infos-inscriptions .groups h3,
+#education-page .section-contents .infos-inscriptions .pricing h3 {
+ flex: 1;
+ padding: 20px 20px 10px;
+}
+#education-page .section-contents .infos-inscriptions .groups p,
+#education-page .section-contents .infos-inscriptions .pricing p {
+ padding: 10px 20px;
+ flex: 1;
+}
+#education-page .section-contents .infos-inscriptions .groups .table-wrapper,
+#education-page .section-contents .infos-inscriptions .pricing .table-wrapper {
+ flex: 1;
+ padding: 20px;
+}
+#education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
+#education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
+ border: 1px solid #dde;
+ border-collapse: collapse;
+}
+#education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
+#education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
+ border: 1px solid #dde;
+ padding: 10px 20px;
+}
+
+/*# sourceMappingURL=education.css.map */
diff --git a/style/style.css b/style/style.css
index f59446d..8049f61 100644
--- a/style/style.css
+++ b/style/style.css
@@ -79,8 +79,9 @@ main #page-container #education-page .section-contents {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
+ height: auto;
}
-main #page-container #education-page .section-contents .teaser {
+main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .practical-infos {
@@ -130,11 +131,12 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .img-wrapper img {
position: absolute;
- height: 100%;
+ max-height: 100%;
+ min-width: 100%;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right {
grid-column: 2;
- padding: 10px;
+ padding: 0 10px 10px;
}
main #page-container #education-page .section-contents ul.learning-themes li.learning-theme .right strong {
display: block;
@@ -152,7 +154,6 @@ main #page-container #education-page .section-contents ul.learning-themes li.lea
gap: 8px;
}
main #page-container #education-page .section-contents .infos-inscriptions {
- grid-column: 1/span 2;
display: flex;
gap: 40px;
}
@@ -169,17 +170,30 @@ main #page-container #education-page .section-contents .infos-inscriptions .pric
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 h3,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
+ flex: 1;
+ padding: 20px 20px 10px;
}
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;
+ padding: 10px 20px;
+ flex: 1;
}
-main #page-container #education-page .section-contents .infos-inscriptions .pricing {
+main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper {
flex: 1;
+ padding: 20px;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
+ border: 1px solid #dde;
+ border-collapse: collapse;
+}
+main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
+main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
+ border: 1px solid #dde;
+ padding: 10px 20px;
}
main footer {
width: 100%;
diff --git a/style/style.css.map b/style/style.css.map
index 615b10a..d723e10 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;;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
+{"version":3,"sourceRoot":"","sources":["../src/style.scss","../src/pages/education/education.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;;AClDJ;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;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;;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;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;AAAA;EAEI;EAKA;EACA;EACA;;AACA;AAAA;EACI;EACA;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AAEJ;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;AACA;AAAA;EACI;EACA;;ADtFxB;EACI","file":"style.css"}
\ No newline at end of file
--
GitLab