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 8d6f5cf4 authored by Pierre Jarriges's avatar Pierre Jarriges
Browse files

feat: new education page

parent 7f6f054b
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 767 additions and 856 deletions
public/assets/images/learning_theme_2d.png
+ 0
− 0
View replaced file @ 7f6f054b View file @ 8d6f5cf4
public/assets/images/learning_theme_2d.png

5.09 KiB | W: | H:

public/assets/images/learning_theme_2d.png

5.34 KiB | W: | H:

public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_coding.png
+ 0
− 0
View replaced file @ 7f6f054b View file @ 8d6f5cf4
public/assets/images/learning_theme_coding.png

3.87 KiB | W: | H:

public/assets/images/learning_theme_coding.png

2.3 KiB | W: | H:

public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_math.png
+ 0
− 0
View replaced file @ 7f6f054b View file @ 8d6f5cf4
public/assets/images/learning_theme_math.png

6.3 KiB | W: | H:

public/assets/images/learning_theme_math.png

8.03 KiB | W: | H:

public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_pc.png
+ 0
− 0
View replaced file @ 7f6f054b View file @ 8d6f5cf4
public/assets/images/learning_theme_pc.png

3.89 KiB | W: | H:

public/assets/images/learning_theme_pc.png

4.03 KiB | W: | H:

public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
  • 2-up
  • Swipe
  • Onion skin
public/education/education.js
+ 220
− 88
View file @ 8d6f5cf4
This diff is collapsed.
public/education/game-studio-club/index.html → public/education/gamedev/index.html
+ 2
− 2
View file @ 8d6f5cf4
......@@ -11,7 +11,7 @@
<meta property="og:title" content="Kuadrado Software | Game Studio Club"/>
<meta property="og:description" content="Apprendre à créer un jeu vidéo de A à Z"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kuadrado-software.fr/game-studio-club"/>
<meta property="og:url" content="https://kuadrado-software.fr/gamedev"/>
<meta property="og:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
<meta property="twitter:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
<meta property="og:locale" content="fr_FR"/>
......@@ -31,5 +31,5 @@
<!-- The H1 tag will be never seen but it's necessary for SEO -->
<main><h1 style="visibility: hidden">Kuadrado Software | Game Studio Club</h1></main>
</body>
<script type="text/javascript" src="./game-studio-club.js"></script>
<script type="text/javascript" src="./gamedev.js"></script>
</html>
public/games/games.js
+ 16
− 18
View file @ 8d6f5cf4
......@@ -554,17 +554,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -614,13 +612,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -630,7 +629,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -716,13 +715,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/main.js
+ 16
− 18
View file @ 8d6f5cf4
......@@ -766,17 +766,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -826,13 +824,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -842,7 +841,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -928,13 +927,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/software-development/software-development.js
+ 16
− 18
View file @ 8d6f5cf4
......@@ -595,17 +595,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -655,13 +653,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -671,7 +670,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -757,13 +756,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/style/pages/education/subpages/gamedev/gamedev-page.css 0 → 100644
+ 3
− 0
View file @ 8d6f5cf4
/*# sourceMappingURL=gamedev-page.css.map */
public/style/pages/games/games.css
+ 3
− 3
View file @ 8d6f5cf4
/* Error: Undefined variable.
* ,
* 14 | color: $light_2;
* 15 | color: $light_2;
* | ^^^^^^^^
* '
* src/pages/games/games.scss 14:28 root stylesheet */
* src/pages/games/games.scss 15:28 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
......@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined variable.\a \2577 \a 14 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 14:28 root stylesheet";
content: "Error: Undefined variable.\a \2577 \a 15 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 15:28 root stylesheet";
}
public/style/style.css
+ 122
− 9
View file @ 8d6f5cf4
......@@ -30,6 +30,10 @@ body .bg-blue {
background-color: #4baabb;
color: white;
}
body .bg-dark {
background-color: #3c4144;
color: #aabbc8;
}
body #seo-title {
visibility: hidden;
}
......@@ -824,22 +828,127 @@ main #page-container #education-page .special-announcement .page-contents-center
font-weight: 600;
margin: 0;
}
main #page-container #education-page .edu-pitch {
font-size: 18px;
}
main #page-container #education-page .edu-themes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
grid-template-columns: 1fr 1fr;
gap: 50px;
font-family: monospace;
padding: 70px 0;
}
main #page-container #education-page .edu-themes .edu-theme {
transition: transform 0.3s;
display: grid;
grid-template-columns: auto 1fr;
}
main #page-container #education-page .edu-themes .edu-theme:hover {
transform: scale(1.03);
main #page-container #education-page .edu-themes .edu-theme * {
border-style: dashed;
border-color: #00ff00;
border-width: 0 0 0 0;
}
main #page-container #education-page .edu-themes .edu-theme h3 {
color: #00ff00;
grid-row: 1;
margin: 0;
padding: 0 10px;
display: flex;
align-items: center;
border-width: 0 0 0 1px;
}
main #page-container #education-page .edu-themes .edu-theme img {
width: 100%;
grid-row: 1/span 2;
border-width: 1px 0 1px 1px;
}
main #page-container #education-page .edu-themes .edu-theme p {
text-align: justify;
color: #72e3f0;
grid-row: 2;
margin: 0;
padding: 10px 30px 0 10px;
border-width: 1px 1px 1px 0;
}
main #page-container #education-page .edu-themes .edu-theme p * {
color: #72e3f0;
}
main #page-container #education-page .practical-info {
padding: 50px 0;
}
main #page-container #education-page .practical-info .page-contents-center {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
main #page-container #education-page .practical-info .page-contents-center .info-block {
display: grid;
grid-template-rows: auto 1fr;
}
main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
color: #4baabb;
margin: 0;
border-bottom: 1px dashed #aabbc8;
border-left: 1px dashed #aabbc8;
padding: 10px;
}
main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
margin: 0;
padding: 20px 10px;
border-right: 1px dashed #aabbc8;
border-bottom: 1px dashed #aabbc8;
}
main #page-container #education-page .practical-info .page-contents-center .info-block ul {
display: flex;
flex-direction: column;
gap: 5px;
}
main #page-container #education-page .practical-info .page-contents-center .info-block ul li:not(.fullwidth) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span {
padding: 3px 0;
}
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:first-child {
font-weight: bold;
color: #6b7880;
}
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:last-child {
color: #4baabb;
}
@media screen and (max-width: 1200px) {
main #page-container #education-page .edu-themes {
grid-template-columns: 1fr;
gap: 30px;
padding: 70px 0;
}
}
@media screen and (max-width: 780px) {
main #page-container #education-page .practical-info .page-contents-center {
grid-template-columns: 1fr;
gap: 30px;
}
main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
border-top: 1px dashed #aabbc8;
}
main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
border-bottom: none;
}
}
@media screen and (max-width: 560px) {
main #page-container #education-page .edu-themes .edu-theme h3 {
border-width: 0 0 1px 1px;
}
main #page-container #education-page .edu-themes .edu-theme img {
max-width: 150px;
height: auto;
grid-row: 1;
border-width: 1px 0 0 1px;
}
main #page-container #education-page .edu-themes .edu-theme p {
grid-row: 2;
grid-column: 1/span 2;
padding: 20px 10px 30px 10px;
border-width: 0 1px 1px 1px;
}
}
main #page-container #games-page .game-articles article {
display: grid;
......@@ -849,6 +958,7 @@ main #page-container #games-page .game-articles article {
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(7, auto);
width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1/span 2;
......@@ -866,6 +976,7 @@ main #page-container #games-page .game-articles article.game-article .game-banne
flex-direction: row;
flex-direction: column;
background-color: black;
overflow: hidden;
}
main #page-container #games-page .game-articles article.game-article .game-banner img {
height: 500px;
......@@ -956,16 +1067,18 @@ main #page-container #games-page .game-articles article.placeholder * {
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
padding: 20px;
padding: 0;
font-size: 25px;
}
main #page-container #games-page .game-articles article.game-article .game-banner {
grid-column: 1;
margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1;
......
src/pages/education/education.js
+ 204
− 70
View file @ 8d6f5cf4
......@@ -2,50 +2,49 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
// const GameStudioClub = require("./components/game-studio-club");
// const Popularization = require("./components/popularization");
const EDU_THEMES = [
{
title: "Game Studio Club",
description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
image: "learning_theme_conception.png",
pageUrl: "game-studio-club",
},
// {
// title: "Création de jeux vidéo",
// description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
// image: "learning_theme_conception.png",
// pageUrl: "gamedev",
// },
{
title: "Programmation",
description: "Vous avez une idée de projet à réaliser en programmation ou vous êtes simplement curieux ? Apprenez à programmer avec différent langages, pour du web du logiciel ou du jeu vidéo.",
description: `<b>Franchissez le mur du code !</b><br />
Apprenez à programmer avec différents langages (Python, Javascript, C ...), pour du web, du logiciel, du jeu vidéo ou autre.`,
image: "learning_theme_coding.png",
pageUrl: "coding",
// pageUrl: "coding",
},
{
title: "Dessin numérique et animation 2D",
description: "Maîtriser des logiciels libres de création graphique 2D et d'animation.",
description: `Apprenez à utiliser des logiciels libres de création graphique 2D et d'animation.<br />
Créez des personnages et des décors, menez votre projet de dessin animé, d'illustration ou de jeu vidéo.`,
image: "learning_theme_2d.png",
pageUrl: "2d",
// pageUrl: "2d",
},
{
title: "Maths et physiques",
description: "Fâché avec les maths ? Aborder les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
description: "Abordez les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
image: "learning_theme_math.png",
pageUrl: "math",
},
{
title: "Musique et sons électroniques",
description: "Maîtriser des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
image: "learning_theme_sound.png",
pageUrl: "sound",
// pageUrl: "math",
},
// {
// title: "Musique et sons électroniques",
// description: "Découvrez des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
// image: "learning_theme_sound.png",
// pageUrl: "sound",
// },
{
title: "Aide informatique générale",
description: "Perdu avec votre ordinateur ou votre smartphone, les logicels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
description: "Perdu avec votre ordinateur ou votre smartphone, les logiciels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
image: "learning_theme_pc.png",
pageUrl: "popularization"
// pageUrl: "popularization"
}
];
class EducationPage extends WebPage {
render() {
return {
tag: "div",
......@@ -74,7 +73,8 @@ class EducationPage extends WebPage {
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
contents: `Animation d'ateliers informatiques accessibles à tous.
Programmation, graphisme 2D, jeux vidéo, vulgarisation, accompagnement de projet, etc.`,
},
],
},
......@@ -85,66 +85,200 @@ class EducationPage extends WebPage {
class: "title-banner",
},
{
tag: "div",
class: "page-contents-center",
tag: "section",
class: "bg-dark",
contents: [
{
tag: "p",
class: "edu-pitch",
contents: `La pédagogie est un des objectifs majeurs de Kuadrado Software. <br />
L'informatique est aujourd'hui un élément incontournable de notre société et j'ai la conviction
qu'il est fondamental de pouvoir accéder de façon simple à une forme d'apprentissage et de partage de connaissances.<br />
Je propose donc des séances d'enseignement autour des sujets que je suis en position de transmettre en tant que développeur et artiste.`
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "ul",
class: "edu-themes",
contents: EDU_THEMES.map(theme => {
return {
tag: "li",
class: "edu-theme",
contents: [
{ tag: "img", width: 250, height: 140, class: "pixelated", src: `${images_url}${theme.image}` },
{ tag: "h3", contents: theme.title },
{ tag: "p", contents: theme.description },
]
}
})
},
]
},
]
},
{
tag: "section",
class: "practical-info",
contents: [
{
tag: "ul",
class: "edu-themes",
contents: EDU_THEMES.map(theme => {
return {
tag: "li",
class: "edu-theme",
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Pour qui ?" },
{
tag: "a",
href: theme.pageUrl,
tag: "p",
class: "info-body",
contents: `Les ateliers sont accessibles aux adultes comme aux enfants, plutôt à partir de 12 ans.<br/>
Les séances ont lieu en groupes mixtes.
`
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Où ça ?" },
{
tag: "p",
class: "info-body",
contents: "Dans mon local professionnel : <br /><blue>32 rue Simon Vialet, passage du Cheminou, 07240 Vernoux en Vivarais.</blue>"
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Quel matériel ?" },
{
tag: "p",
class: "info-body",
contents: `Le matériel informatique est fourni sur place (ordinateurs et tablettes graphique)
mais il est possible d'amener le sien.
<br />Il est recommandé d'apporter au moins une clé USB pour faire ses sauvegardes.`
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Quand ?" },
{
tag: "ul",
class: "info-body tabled",
contents: [
{ tag: "h3", contents: theme.title },
{ tag: "img", class: "pixelated", src: `${images_url}/${theme.image}` },
{ tag: "p", contents: theme.description },
{
tag: "li",
contents: [
{ tag: "span", contents: "Mardi" },
{ tag: "span", contents: "16h - 18h" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Mercredi" },
{ tag: "span", contents: "14h - 16h" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Jeudi" },
{ tag: "span", contents: "16h - 18h" },
]
},
{
tag: "li",
class: "fullwidth",
contents: "<em><blue>Ouvert de Septembre à Juin, sauf vacances scolaires ou fermetures exceptionnelles</blue></em>"
}
]
},
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Combien ça coûte ?" },
{
tag: "ul",
class: "info-body tabled",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: "Inscription au mois" },
{ tag: "span", contents: "50€" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Inscription à la séance" },
{ tag: "span", contents: "15€" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Cours particuliers" },
{ tag: "span", contents: "30€/h, sur place ou en visio. Horaires à définir." },
]
}
]
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Pour s'inscrire ou en savoir plus" },
{
tag: "ul",
class: "info-body",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: "Me contacter" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
}
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "" },
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "ou passer directement me voir au local !" }
]
}
]
}
]
}
})
},
{
tag: "div",
contents: "Pour qui ? Tout le monde à partir de 12 ans, ados ou adultes."
},
{
tag: "div",
contents: "Ou ça ? Dans mon local professionel 32 rue Simon Vialet Vernoux"
},
{
tag: "div",
contents: "Tarfs: 60 bal par mois. Ou 30€/h pour des cours particuliers, visio possible."
},
{
tag: "div",
contents: "Horaires: mardi 17h 18h30, mercredi 15h 16h30, jeudi 17h 18h30"
},
{
tag: "div",
contents: "Matos informatique fournis sur place, on peut amener le sien si on veut."
},
{
tag: "div",
contents: "Pour s'inscrire: Me contacter ou passer me voir. Télécharger le ficher d'inscription -> ici"
]
}
]
},
},
],
};
}
......
src/pages/education/education.scss
+ 125
− 300
View file @ 8d6f5cf4
......@@ -36,317 +36,142 @@
}
}
.edu-pitch {
font-size: 18px;
}
.edu-themes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
grid-template-columns: 1fr 1fr;
gap: 50px;
font-family: monospace;
padding: 70px 0;
.edu-theme {
transition: transform 0.3s;
&:hover {
transform: scale(1.03);
display: grid;
grid-template-columns: auto 1fr;
* {
border-style: dashed;
border-color: $green;
border-width: 0 0 0 0;
}
h3 {
color: $green;
grid-row: 1;
margin: 0;
padding: 0 10px;
display: flex;
align-items: center;
border-width: 0 0 0 1px;
}
img {
width: 100%;
grid-row: 1 / span 2;
border-width: 1px 0 1px 1px;
}
p {
text-align: justify;
color: $blue_3;
* {
color: $blue_3;
}
grid-row: 2;
margin: 0;
padding: 10px 30px 0 10px;
border-width: 1px 1px 1px 0;
}
}
}
// .section-contents {
// padding: 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: url("/assets/images/wallpaper_binary_light.png");
// padding: 30px;
// .info-item {
// display: flex;
// flex-direction: column;
// background-color: white;
// padding: 20px;
// strong {
// margin-bottom: 10px;
// white-space: nowrap;
// color: $medium_grey;
// }
// span,
// a {
// font-size: 14px;
// }
// }
// }
// .list-wrapper {
// grid-column: 1;
// grid-row: 2;
// ul.learning-themes {
// display: flex;
// gap: 20px 30px;
// flex-wrap: wrap;
// li.learning-theme {
// position: relative;
// border: solid $light_0;
// border-width: 0 2px 2px 0;
// display: flex;
// flex-direction: column;
// .title {
// color: $medium_grey;
// display: block;
// position: absolute;
// background-color: #fffa;
// padding: 3px 10px;
// width: 100%;
// }
// img {
// width: 100%;
// height: auto;
// image-rendering: pixelated;
// image-rendering: -moz-crisp-edges;
// image-rendering: crisp-edges;
// }
// .details {
// background-color: #fffe;
// position: absolute;
// top: 25px;
// left: 25px;
// width: 300px;
// height: auto;
// max-height: 0;
// visibility: hidden;
// z-index: 1;
// transition: max-height 0.6s;
// padding: 20px;
// border: solid $light_0;
// border-width: 0 1px 1px 0;
// overflow: hidden;
// display: flex;
// flex-direction: column;
// gap: 10px;
// .comment {
// font-style: italic;
// * {
// color: $medium_grey;
// }
// }
// ul {
// list-style-type: disc;
// font-size: 14px;
// margin-left: 10px;
// li {
// color: $medium_grey;
// }
// }
// }
// &:hover {
// .details {
// max-height: 1000px;
// visibility: visible;
// }
// }
// }
// }
// }
// .infos-inscriptions {
// display: flex;
// gap: 40px;
// background-image: url("/assets/images/wallpaper_binary_light.png");
// padding: 30px;
// .groups,
// .pricing {
// background-color: white;
// padding: 20px;
// display: flex;
// flex-direction: column;
// h3 {
// margin: 0;
// color: $light_1;
// }
// .table-wrapper {
// table {
// border: 1px solid #dde;
// border-collapse: collapse;
// td {
// border: 1px solid #dde;
// padding: 10px 20px;
// }
// }
// }
// .documents {
// margin-top: 20px;
// .links {
// display: flex;
// gap: 20px;
// .download-link {
// border: 1px solid;
// padding: 8px;
// display: flex;
// margin: 10px 0 0;
// border-radius: 4px;
// }
// }
// }
// }
// }
// .teacher {
// grid-column: 1 / span 2;
// background: url("/assets/images/wallpaper_binary_light.png");
// padding: 30px;
// @include flex-center-col;
// .teacher-card {
// background-color: white;
// display: grid;
// grid-template-columns: auto 1fr;
// width: 100%;
// gap: 20px;
// padding: 20px;
// h3 {
// margin: 0;
// width: 100%;
// color: $light_1;
// grid-column: 1 / span 2;
// }
// .pic {
// img {
// width: 100px;
// }
// }
// .infos-text {
// padding: 0 20px;
// h4 {
// color: $blue_2;
// margin: 0;
// font-size: 18px;
// }
// p {
// color: $light_1;
// display: block;
// }
// }
// }
// }
// }
// @media screen and (max-width: $screen_l) {
// .section-contents {
// .list-wrapper {
// ul.learning-themes {
// display: block;
// li.learning-theme {
// width: 100%;
// margin-bottom: 20px;
// .details {
// background-color: #fff9;
// position: relative;
// top: unset;
// width: 100%;
// left: unset;
// max-height: unset;
// visibility: visible;
// padding: 10px;
// box-shadow: none;
// ul {
// list-style-type: disc;
// font-size: 14px;
// margin-left: 10px;
// }
// }
// }
// }
// }
.practical-info {
padding: 50px 0;
.page-contents-center {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
.info-block {
display: grid;
grid-template-rows: auto 1fr;
.info-title {
color: $blue_2;
margin: 0;
border-bottom: 1px dashed $light_2;
border-left: 1px dashed $light_2;
padding: 10px;
}
.info-body {
margin: 0;
padding: 20px 10px;
border-right: 1px dashed $light_2;
border-bottom: 1px dashed $light_2;
}
ul {
display: flex;
flex-direction: column;
gap: 5px;
li:not(.fullwidth) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
&.tabled {
li {
span {
padding: 3px 0;
&:first-child {
font-weight: bold;
color: $medium_grey;
}
&:last-child {
color: $blue_2;
}
}
}
}
}
}
}
}
// .infos-inscriptions {
// flex-direction: column;
// }
// }
// }
@media screen and (max-width: 1200px) {
.edu-themes {
grid-template-columns: 1fr;
gap: 30px;
padding: 70px 0;
}
}
// @media screen and (max-width: $screen_m) {
// h3 {
// &.big {
// font-size: 22px;
// }
// }
// .title-banner {
// height: 170px;
// min-height: unset;
// h2 {
// font-size: 2em;
// margin: 20px;
// text-shadow: 0 0 4px #000b;
// }
// }
// .section-contents {
// padding: 20px 20px 40px;
// grid-template-columns: 100%;
// .full-row {
// grid-column: 1;
// }
// .practical-infos {
// grid-column: 1;
// grid-row: 3;
// gap: 10px;
// padding: 10px;
// }
// .list-wrapper {
// ul.learning-themes {
// grid-column: 1;
// grid-row: 2;
// display: block;
// li.learning-theme {
// margin-bottom: 20px;
// .details {
// background-color: #fff9;
// position: relative;
// top: unset;
// width: 100%;
// left: unset;
// max-height: unset;
// visibility: visible;
// padding: 10px;
// box-shadow: none;
// }
// }
// }
// }
@media screen and (max-width: $screen_m) {
.practical-info {
.page-contents-center {
grid-template-columns: 1fr;
gap: 30px;
.info-block {
.info-title {
border-top: 1px dashed $light_2;
}
.info-body {
border-bottom: none;
}
}
}
}
}
// .infos-inscriptions {
// gap: 10px;
// padding: 10px;
// .groups,
// .pricing {
// background-color: white;
// padding: 20px;
// display: flex;
// flex-direction: column;
// .table-wrapper {
// table {
// width: 100%;
// td {
// border: 1px solid #dde;
// padding: 10px;
// }
// }
// }
// }
// }
// .teacher {
// grid-column: 1;
// padding: 20px;
// }
// }
// }
@media screen and (max-width: $screen_s) {
.edu-themes {
.edu-theme {
h3 {
border-width: 0 0 1px 1px;
}
img {
max-width: 150px;
height: auto;
grid-row: 1;
border-width: 1px 0 0 1px;
}
p {
grid-row: 2;
grid-column: 1 / span 2;
padding: 20px 10px 30px 10px;
border-width: 0 1px 1px 1px;
}
}
}
}
}
src/pages/education/subpages/game-studio-club/game-studio-club.js → src/pages/education/subpages/gamedev/gamedev-page.js
+ 3
− 7
View file @ 8d6f5cf4
"use strict";
const { images_url } = require("../../../../../constants");
const WebPage = require("../../../../lib/web-page");
const GameStudioClub = require("../../components/game-studio-club");
"use strict";
const { images_url } = require("../../../../constants");
const GAMEDEV_THEMES = [
{
......@@ -181,7 +177,7 @@ class GameStudioClub {
}
class GameStudioClubPage extends WebPage {
class GamedevPage extends WebPage {
render() {
return {
......@@ -194,4 +190,4 @@ class GameStudioClubPage extends WebPage {
}
}
module.exports = GameStudioClubPage;
module.exports = GamedevPage;
src/pages/education/subpages/game-studio-club/index.js → src/pages/education/subpages/gamedev/index.js
+ 5
− 0
View file @ 8d6f5cf4
"use strict";
const runPage = require("../../../../run-page");
const GameStudioClubPage = require("./game-studio-club");
runPage(GameStudioClubPage);
const GamedevPage = require("./gamedev-page");
runPage(GamedevPage);
src/pages/games/games.scss
+ 5
− 1
View file @ 8d6f5cf4
......@@ -7,6 +7,7 @@
margin: 20px 0;
&.game-article {
grid-template-rows: repeat(7, auto);
width: 100%;
.game-title {
grid-column: 1 / span 2;
margin: 0;
......@@ -20,6 +21,7 @@
grid-column: 1 / span 2;
@include flex-center-col;
background-color: black;
overflow: hidden;
img {
height: 500px;
}
......@@ -111,18 +113,20 @@
grid-template-rows: repeat(6, auto);
.game-title {
grid-column: 1;
padding: 20px;
padding: 0;
font-size: 25px;
}
.game-banner {
grid-column: 1;
margin: 0 -20px;
}
.image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
margin: 0 -20px;
}
.game-team {
grid-column: 1;
......
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