Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 60cec63d authored by peter_rabbit's avatar peter_rabbit
Browse files

wip: design education page

parent 8cf59fb1
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1014 additions and 480 deletions
assets/images/glitch_meta_level3.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_level3.png

7.5 KiB

assets/images/glitch_meta_screen1.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen1.png

3.86 KiB

assets/images/glitch_meta_screen2.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen2.png

3.58 KiB

assets/images/glitch_meta_screen3.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen3.png

3.4 KiB

assets/images/glitch_meta_screen4.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen4.png

3.29 KiB

assets/images/glitch_meta_screen5.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen5.png

3.54 KiB

assets/images/glitch_meta_screen6.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/glitch_meta_screen6.png

3.13 KiB

assets/images/wallpaper_binary.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/wallpaper_binary.png

2.66 KiB

assets/images/wallpaper_binary_light.png 0 → 100644
+ 0
− 0
View file @ 60cec63d
assets/images/wallpaper_binary_light.png

9.9 KiB

config.js 0 → 100644
+ 13
− 0
View file @ 60cec63d
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 };
constants.js 0 → 100644
+ 5
− 0
View file @ 60cec63d
const { server_url } = require("./config");
module.exports = {
images_url: `${server_url}/assets/images`,
};
public/education/education.js
+ 268
− 145
View file @ 60cec63d
This diff is collapsed.
public/games/games.js
+ 15
− 38
View file @ 60cec63d
......@@ -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 }],
};
}),
},
],
},
......
public/main.js
+ 15
− 38
View file @ 60cec63d
......@@ -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 }],
};
}),
},
],
},
......
public/software-development/software-development.js
+ 15
− 38
View file @ 60cec63d
......@@ -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 }],
};
}),
},
],
},
......
src/pages/education/components/game-studio-club.js 0 → 100644
+ 290
− 0
View file @ 60cec63d
"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;
src/pages/education/education.js
+ 14
− 182
View file @ 60cec63d
"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" },
......
src/style.scss
+ 185
− 1
View file @ 60cec63d
......@@ -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%;
}
}
src/template/template.js
+ 15
− 38
View file @ 60cec63d
......@@ -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 }],
};
}),
},
],
},
......
style/style.css
+ 179
− 0
View file @ 60cec63d
......@@ -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 */
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service