diff --git a/static/assets/js/organization.js b/static/assets/js/organization.js new file mode 100644 index 0000000..c93cadb --- /dev/null +++ b/static/assets/js/organization.js @@ -0,0 +1,19 @@ +document.querySelectorAll('.schedule-category').forEach(node => { + let opened = false + let icon = node.querySelector('.schedule-category-collapse-icon') + let content = node.querySelector('.schedule-category-table') + let header = node.querySelector('.schedule-category-header') + header.onclick = () => { + if (!opened) { + // open the table + icon.style.transform = "rotate(180deg)" + content.style.maxHeight = content.scrollHeight + "px" + } else { + // close the table + icon.style.transform = "rotate(0deg)" + content.style.maxHeight = null + } + opened = !opened + } +}) + diff --git a/static/assets/organization.css b/static/assets/organization.css index bdca3c9..92a89ab 100644 --- a/static/assets/organization.css +++ b/static/assets/organization.css @@ -1,3 +1,9 @@ +/* ***************************************************************************** + +* ORGANIZATION HEADER + +********************************************************************************/ + .header-container { display: flex; justify-content: space-between; @@ -25,6 +31,12 @@ text-decoration: underline; } +/* ***************************************************************************** + +* COVER + +********************************************************************************/ + .cover-background { background-position: center; background-size: cover; @@ -74,6 +86,12 @@ margin: 0; } +/* ***************************************************************************** + +* MOSAIC + +********************************************************************************/ + .media-mosaic { margin-top: .75em; width: 100%; @@ -85,6 +103,9 @@ grid-column-gap: .75em; grid-row-gap: .75em; + + /* Negative to cancel the grid gap */ + /* margin-bottom: -.75em; */ } .media-overlay { @@ -126,8 +147,14 @@ background-position: center; } +/* ***************************************************************************** + +* SECTION + +********************************************************************************/ + section { - margin-top: .5em; + margin-top: 1.2em; margin-bottom: 0; } @@ -150,6 +177,12 @@ section { border-radius: 1px; } +/* ***************************************************************************** + +* DESCRIPTION + +********************************************************************************/ + .description { line-height: 1.5em; text-align: justify; @@ -159,9 +192,76 @@ section { margin-bottom: .5em; } -/*********** - * PRICING * - ***********/ +.description p:last-child { + margin-bottom: 0; +} + +/* ***************************************************************************** + +* SCHEDULE + +********************************************************************************/ + +.schedule { + +} + +.schedule-category { + margin-bottom: 1em; +} + +.schedule-category-header { + background-color: rgba(189,195,199,.97); + border-radius: 4px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1em 2em 1em 2em; +} + +.schedule-category-collapse-icon { + color: #B12008; + font-size: 1.5em; + transition: all 0.1s ease-out; +} + +.schedule-category-table { + + max-height: 0; + overflow: hidden; + transition: max-height 0.1s ease-out; +} + +.schedule-category-days-container { + border-radius: 4px; + background-color: #ECF0F1; + width: 40; + margin-left: 2em; + margin-top: 1em; + margin-bottom: 1em; + margin-right: 40em; + padding: 1em 2em 1em 2em; +} + +.schedule-category-day-container { + display: flex; + justify-content: space-between; + margin-bottom: 1em; +} + +.schedule-category-day-container .separator { + opacity: 0.5; +} + +.schedule-category-table div:last-child { + margin-bottom: 0; +} + +/* ***************************************************************************** + +* PRICING + +********************************************************************************/ .pricing { display: flex; @@ -206,13 +306,11 @@ section { font-size: 1.8em; } -.princing-description { +/* ***************************************************************************** -} +* CONTACT -/*********** - * CONTACT * - ***********/ +********************************************************************************/ .contact { margin: 0 auto; @@ -268,9 +366,11 @@ section { color: white; } -/********** - * FOOTER * - **********/ +/* ***************************************************************************** + +* FOOTER + +********************************************************************************/ .footer { width: 100%; diff --git a/static/organization.html b/static/organization.html index 5e3de2a..a4ed462 100644 --- a/static/organization.html +++ b/static/organization.html @@ -73,19 +73,79 @@

Crénaux

-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia minima aliquam corporis fugit repellat obcaecati consequatur cumque, dolore omnis et porro, sit iusto similique blanditiis vel, alias quam ducimus voluptates. -

-

- Unde neque adipisci et. Consequatur labore similique quia. Rerum nihil eius assumenda quae. Non vel sapiente omnis. Eum explicabo neque maxime sapiente et perspiciatis et. -

-

- Delectus unde inventore similique ut quo. Consequatur assumenda quaerat aliquid velit et corrupti. Laboriosam qui magnam culpa est amet nobis tenetur. Ducimus a sint ea. Expedita omnis libero ipsum dolor ipsam dolor beatae. -

-

- Qui vel sit expedita eum recusandae nemo. Facere quas dolor eum ut. Aut omnis et qui repellat nihil accusantium. Et vitae beatae ratione. Tenetur sit omnis sa -

+
+
+
+
+ Création de robots super cool +
+ +
+
+
+
+
+ Lundi +
+
+ 17:00 - 18:00 +
+
+
+
+ Mardi +
+
+ 14:00 - 15:00 +
+
+
+
+ Samedi +
+
+ 16:00 - 17:00 +
+
+
+
+
+
+
+
+ Cours de programmation de gros expert +
+ +
+
+
+
+
+ Lundi +
+
+ 17:00 - 18:00 +
+
+
+
+ Mardi +
+
+ 14:00 - 15:00 +
+
+
+
+ Samedi +
+
+ 16:00 - 17:00 +
+
+
+
+