first commit

assets/css/base.css

@@ -0,0 +1,30 @@
+*{
+    margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+    scroll-behavior: smooth;
+}
+
+
+body {
+    font-family: var(--font);
+    font-size: var(--fs-normal);
+    line-height: 1.2;
+    color: var(--color-text);
+    /* -webkit-print-color-adjust:exact !important;
+    print-color-adjust:exact !important; */
+}
+
+main{
+    min-height: calc(100vh - var(--header-h));
+    margin-top: var(--header-h);
+    /* padding: var(--padding-body); */
+}
+
+button{
+    background: none;
+    border: none;
+}

assets/css/buttons.css

@@ -0,0 +1,27 @@
+
+.btn--solid{
+    font-weight: 600;
+    font-size: 1.2rem;
+
+    background-color: var(--color);
+    color: var(--white);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--unit)*1.5);
+
+    border-radius: var(--radius-btn);
+    cursor: pointer;
+
+    a{
+        color: white;
+        text-decoration: none;
+        padding: 0px 1ch;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+    }
+}

assets/css/home.css

@@ -0,0 +1,352 @@
+#home__hero{
+    --color: var(--color-green);
+    --color-medium: var(--color-green-medium);
+    --color-light: var(--color-green-light);
+}
+
+
+#home__livrets{
+    --color: var(--color-violet);
+    --color-medium: var(--color-violet-medium);
+    --color-light: var(--color-violet-light);
+    background-color: var(--color-medium);
+}
+
+
+#home__base-connaissance{
+    --color: var(--color-yellow);
+    --color-medium: var(--color-yellow-medium);
+    --color-light: var(--color-yellow-light);
+    background-color: var(--color-medium);
+}
+
+#home__ateliers{
+    --color: var(--color-orange);
+    --color-medium: var(--color-orange-medium);
+    --color-light: var(--color-orange-light);
+    background-color: var(--color);
+}
+
+
+
+#main_home{
+    section{
+        padding: calc(var(--unit)*3) var(--padding-body);
+        .section--inner{
+            max-width: 1100px;
+            margin: 0 auto;
+         }
+    }
+    
+   
+}
+
+
+
+
+
+.item-nav{
+    border: 1px solid var(--color-txt-light);
+    border-radius: var(--radius-small);
+    background-color: var(--white);
+
+    padding: var(--padding-inner);
+    padding-bottom: calc(var(--padding-inner)*0.5);
+
+    min-height: calc(var(--unit)*5);
+    max-width: 440px;
+
+    display: flex;
+    flex-direction: column;
+
+    .title{
+        font-family: var(--font-title);
+        font-size: 1.4rem;
+            line-height: 1.1;
+            padding-right: 1ch;
+
+        font-weight: normal;
+        
+    }
+
+    button{
+        width: var(--unit);
+        align-self: end;
+    }
+
+    .description{
+        margin-top: 0.5em;
+        flex-grow: 2;
+        padding-right: 2ch;
+    }
+
+    
+}
+
+.item-nav__group{
+    display: flex;
+    flex-direction: column;
+    gap: var(--unit);
+}
+
+.section--title{
+    font-size: 2.8rem;
+    font-family: var(--font-title);
+    margin-bottom: calc(var(--unit)*3);
+}
+
+
+.highlight-block{
+
+ 
+        background-color: var(--color);
+        border: 1px solid var(--color-txt-light);
+        border-radius: var(--radius-small);
+        padding: calc(var(--padding-inner)*1.5) var(--padding-inner); 
+        width: 100%;
+        height: 100%;
+         /* max-width: 440px; */
+        /* text-align: center; */
+        display: flex;
+        justify-content: space-between;
+        gap: var(--unit);
+        /* flex-direction: column; */
+        /* justify-content: center;
+        align-items: center; */
+
+    
+      
+
+
+        figure{
+            width: 100%;
+            max-width: 160px;
+            aspect-ratio: 4/5;
+            border: 1px solid var(--color-medium);
+            border-radius: var(--radius-small);
+            overflow: hidden;
+
+            img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+
+        .label{
+            font-weight: 600;
+            margin-bottom: calc(var(--unit)*0.5);
+            /* text-decoration: 1px underline;
+            text-underline-offset: 3px; */
+
+            display: inline-flex;
+            align-items: center;
+            background-color: var(--color-light);
+            height: var(--unit);
+            padding: 0px 1ch;
+            border-radius: var(--radius-btn);
+        }
+
+        .title{
+            font-family: var(--font-title);
+            font-size: 1.4rem;
+            font-weight: normal;
+            margin-top: 0.5em;
+             margin-bottom: 0.25em;
+        }
+        .details{
+              margin-bottom: calc(var(--unit)*0.75);
+              font-size: 0.8rem;
+        }
+
+}
+
+
+
+.home--section-tool .section--inner{
+
+
+     display: grid;
+     grid-template-columns: 4fr 5fr;
+     column-gap: calc(var(--unit)*3);
+
+    .section--title{
+        grid-column: 1/end;
+        width: 100%;
+    }
+
+    .item-nav{
+        grid-column: 1;
+    }
+
+    .highlight-block{
+        grid-column: 2;
+        grid-row: 2;
+    }
+}
+
+
+#home__hero{
+    margin-bottom: 0;
+    padding-bottom: calc(var(--unit)*1.5)!important; 
+    
+    .section--inner{ 
+        display: block;
+        text-align: center;
+        width: 100%;
+        max-width: 100%;
+
+    
+    }
+    .section--title{
+        font-size: 3.6em;
+
+        margin-bottom: calc(var(--unit)*1.5);
+        color: var(--color);
+
+
+    }
+
+    /* button{ display: none;} */
+    .description{
+        font-size: 1.6rem;
+        max-width: 48ch;
+        margin: 0 auto;
+        margin-bottom: calc(var(--unit)*1.5);
+    }
+
+    .search--container{ display: none;}
+
+    .nav-hero{
+        list-style: none;
+        display: flex;
+        justify-content: center;
+        gap: var(--unit);
+        margin-top: calc(var(--unit)*1);
+        margin-bottom: calc(var(--unit)*3);
+      
+
+        li{
+
+            font-weight: 500;
+            font-size: 1rem;
+            min-width: 12ch;
+            text-align: center;
+
+    
+            border: 1px solid var(--color);
+            color: var(--color);
+    
+             display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                height: calc(var(--unit)*1.5);
+                padding: 0px 1.5ch;
+                border-radius: var(--radius-btn);
+                cursor: pointer;
+    
+        }
+
+        a{
+            text-decoration: none;
+            color: var(--color);
+            font-weight: bold;
+            /* &::after{
+                content: " ↓"
+            } */
+        }
+    }
+
+    .see-more{
+        display: block;
+            color: var(--color-txt);
+            font-weight: bold;
+            padding-top: calc(var(--unit)*1.5);
+    }
+
+   
+}
+
+
+#home__a-propos{
+    p, li{
+        font-size: 1.6rem;
+        margin-bottom: 1em;
+        position: relative;
+
+        strong{
+            color: var(--color-green)
+        }
+    }
+
+    ol li::marker{
+        display: none;
+        content: "";
+    
+    }
+
+    ol{
+        padding-left: 5ch;
+        counter-reset: ol;
+        li{ 
+            counter-increment: ol 1;
+            position: relative;
+        }
+    }
+
+    ol li::before{
+        font-size: 1.2rem;
+        font-weight: bold;
+        content: counter(ol);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 2ch;
+        height: 2ch;
+        border-radius: 50%;
+        border: 2px solid var(--color-green);
+        color: var(--color-green);
+        background-color: var(--color-green-light);
+        position: absolute;
+        left: -4ch;
+        top: 4px;
+        
+    }
+
+    .btn--solid{
+        margin-top: calc(var(--unit)*2);
+    }
+
+}
+
+.container-logos{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+}
+.container-logos .logo{
+    width: 200px;
+    height: 60px;
+    background-color: #999;
+
+}
+
+
+
+
+
+     /* .btn--outline{
+                    font-weight: 500;
+                    font-size: 1.2rem;
+
+        border: 1px solid var(--color);
+        color: var(--color);
+
+         display: inline-flex;
+            align-items: center;
+            height: calc(var(--unit)*1.5);
+            padding: 0px 1ch;
+            border-radius: var(--radius-btn);
+            cursor: pointer;
+    } */

assets/css/site-footer.css

@@ -0,0 +1,5 @@
+#site-footer{
+    background-color: var(--color-x-light);
+    min-height: 200px;
+    padding: var(--padding-body);
+}

assets/css/site-header.css

@@ -0,0 +1,161 @@
+#site-header{
+    height: var(--header-h);
+    width: 100vw;
+    background-color: var(--white);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 var(--padding-body);
+    gap: calc(var(--unit)*2);
+
+    a{ text-decoration: none; }
+
+    h1{
+        font-family: var(--font-title);
+        color: var(--color-txt);
+        text-decoration: none;
+        font-size: 1.2rem;
+    }
+}
+#site-header ul{
+    list-style: none;
+}
+
+/*----------------*/
+/*   search bar   */
+/*----------------*/
+
+.search {
+    display: flex;
+    flex-direction: row-reverse;
+    height: calc(var(--unit)*1.5);
+    flex-grow: 2;
+}
+
+.search__toggle {
+    display: none;
+}
+.search__label {
+    cursor: pointer;
+    user-select: none;
+    width: calc(var(--unit)*1.5);
+    height: calc(var(--unit)*1.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.search__input {
+    display: none;
+}
+.search__icon{
+    width: var(--unit);
+}
+
+.search__icon--open {
+    display: block;
+}
+.search__icon--close {
+    display: none;
+}
+
+.search__toggle:checked ~ .search__input {
+    display: block;
+}
+.search__toggle:checked ~ .search__label .search__icon--open {
+    display: none;
+}
+.search__toggle:checked ~ .search__label .search__icon--close {
+    display: block;
+}
+
+#btn__connexion{
+    font-weight: 500;
+    font-size: 1rem;
+    background-color: var(--color-txt);
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    height: calc(var(--unit)*1.25);
+    padding: 0px 1ch;
+    border-radius: var(--radius-btn);
+    cursor: pointer;
+}
+
+
+
+/*----------------*/
+/*       nav      */
+/*----------------*/
+
+#site-nav a {
+    text-decoration: none;
+    color: var(--color-txt);
+}
+
+#site-nav .nav-level-1_li{
+    position: relative;
+    float: left;
+}
+
+#site-nav .nav-level-2_li {
+    display: block;
+
+    float: left;
+    padding: var(--padding-inner);
+    position: relative;
+    text-decoration: none;
+
+}
+
+#site-nav .nav-level-1_ul{
+    display: flex;
+    gap: 40px;
+}
+
+#site-nav .nav-level-1_li{
+    font-weight: 500;
+    /* padding-right: 30px; */
+}
+
+/* .nav-level-1_li.li-dropdown:hover{
+    border-bottom: solid 1px black;
+} */
+
+#site-nav li:hover {
+    cursor: pointer;
+}
+
+.nav-level-2_ul {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    display: none;
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    margin-top: var(--padding-inner); 
+    width: 200px;
+    border-top: solid 1px black;
+}
+
+ul li:hover > ul,
+.nav-level-2_ul:hover {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+}
+.nav-level-2_li{
+    width: 100%;
+}
+.nav-level-2_li:hover{
+    background-color: bisque;
+}
+
+
+.li-dropdown::after{
+    content: "›";
+    padding-left: 0.5ch;
+    font-size: 1.2em;
+    line-height: 0;
+
+}

assets/css/var.css

@@ -0,0 +1,81 @@
+:root {
+
+   
+    --font-title: 'Borna', Arial, sans-serif;
+    --font: 'Nunito', Arial, sans-serif;
+
+    --fs-normal: 14px;
+
+    font-size: 14px;
+    --unit: 24px;
+
+    --padding-body: 32px;
+    --padding-inner: 16px;
+
+    --radius-small: 3px;
+    --radius-btn: 6px;
+
+
+
+
+    --header-h: 60px;
+
+    --white: white;
+
+
+    --color-violet:          #6e62a4;
+    --color-violet-medium:   #9b92c4;
+    --color-violet-light:    #e1dfec;
+
+    --color-yellow:          #cdaa38;
+    --color-yellow-medium:   #e0c46a;
+    --color-yellow-light:    #f5f0d5;
+    --color-map:        #ad8422;
+
+    --color-blue:          #0f70c0;
+    --color-blue-medium:   #5aa0da;
+    --color-blue-light:    #d1e5f7;
+
+    --color-orange:          #f17f2d;
+    --color-orange-medium:   #f3a066;
+    --color-orange-light:    #f3e7e0;
+
+    --color-green:          #007953;
+    --color-green-medium:   #a1ccbe;;
+    --color-green-light:    #d5ebe4;
+    --color-green-black:    #016042;
+
+    --color-txt:       rgb(41, 41, 41);
+    --color-txt-light: #a5a9a9;
+    --color-light:      #DCDDDD;
+    --color-x-light:    #eaebeb;
+
+
+    --color: var(--color-green);
+    --color-medium: var(--color-green-medium);
+    --color-light: var(--color-green-light);
+
+ 
+
+    
+}
+
+
+[data-type="livret"]{
+    --color: var(--color-violet);
+    --color-medium: var(--color-violet-medium);
+    --color-light: var(--color-violet-light);
+}
+
+
+[data-type="base-connaissance"]{
+    --color: var(--color-yellow);
+    --color-medium: var(--color-yellow-medium);
+    --color-light: var(--color-yellow-light);
+}
+
+[data-type="atelier"]{
+    --color: var(--color-orange);
+    --color-medium: var(--color-orange-medium);
+    --color-light: var(--color-orange-light);
+}

assets/fonts/borna/stylesheet.css

@@ -0,0 +1,20 @@
+
+@font-face {
+    font-family: 'Borna';
+    src: url('Borna-SemiBold.woff2') format('woff2'),
+        url('Borna-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+@font-face {
+    font-family: 'Borna';
+    src: url('Borna-SemiBoldItalic.woff2') format('woff2'),
+        url('Borna-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+

assets/fonts/nunita/stylesheet.css

@@ -0,0 +1,208 @@
+/**
+* @license
+*
+* Font Family: Nunito
+* Designed by: Vernon Adams, Cyreal, Jacques Le Bailly
+* URL: https://www.fontshare.com/fonts/nunito
+* © 2026 Indian Type Foundry
+*
+* Nunito ExtraLight 
+* Nunito ExtraLightItalic 
+* Nunito Light 
+* Nunito LightItalic 
+* Nunito Regular 
+* Nunito Italic 
+* Nunito Medium 
+* Nunito MediumItalic 
+* Nunito SemiBold 
+* Nunito SemiBoldItalic 
+* Nunito Bold 
+* Nunito BoldItalic 
+* Nunito ExtraBold 
+* Nunito ExtraBoldItalic 
+* Nunito Black 
+* Nunito BlackItalic 
+* Nunito Variable (Variable font)
+* Nunito VariableItalic (Variable font)
+
+*
+*/
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-ExtraLight.woff2') format('woff2'),
+       url('Nunito-ExtraLight.woff') format('woff'),
+       url('Nunito-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-ExtraLightItalic.woff2') format('woff2'),
+       url('Nunito-ExtraLightItalic.woff') format('woff'),
+       url('Nunito-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Light.woff2') format('woff2'),
+       url('Nunito-Light.woff') format('woff'),
+       url('Nunito-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-LightItalic.woff2') format('woff2'),
+       url('Nunito-LightItalic.woff') format('woff'),
+       url('Nunito-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Regular.woff2') format('woff2'),
+       url('Nunito-Regular.woff') format('woff'),
+       url('Nunito-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Italic.woff2') format('woff2'),
+       url('Nunito-Italic.woff') format('woff'),
+       url('Nunito-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Medium.woff2') format('woff2'),
+       url('Nunito-Medium.woff') format('woff'),
+       url('Nunito-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-MediumItalic.woff2') format('woff2'),
+       url('Nunito-MediumItalic.woff') format('woff'),
+       url('Nunito-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-SemiBold.woff2') format('woff2'),
+       url('Nunito-SemiBold.woff') format('woff'),
+       url('Nunito-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-SemiBoldItalic.woff2') format('woff2'),
+       url('Nunito-SemiBoldItalic.woff') format('woff'),
+       url('Nunito-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Bold.woff2') format('woff2'),
+       url('Nunito-Bold.woff') format('woff'),
+       url('Nunito-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-BoldItalic.woff2') format('woff2'),
+       url('Nunito-BoldItalic.woff') format('woff'),
+       url('Nunito-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-ExtraBold.woff2') format('woff2'),
+       url('Nunito-ExtraBold.woff') format('woff'),
+       url('Nunito-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-ExtraBoldItalic.woff2') format('woff2'),
+       url('Nunito-ExtraBoldItalic.woff') format('woff'),
+       url('Nunito-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-Black.woff2') format('woff2'),
+       url('Nunito-Black.woff') format('woff'),
+       url('Nunito-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Nunito';
+  src: url('Nunito-BlackItalic.woff2') format('woff2'),
+       url('Nunito-BlackItalic.woff') format('woff'),
+       url('Nunito-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-display: swap;
+  font-style: italic;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: ital 0.0wght 200.0;
+*
+* available axes:
+'ital' (range from 0.0 to 1.0'wght' (range from 200.0 to 1.0e3
+*/
+@font-face {
+  font-family: 'Nunito-Variable';
+  src: url('Nunito-Variable.woff2') format('woff2'),
+       url('Nunito-Variable.woff') format('woff'),
+       url('Nunito-Variable.ttf') format('truetype');
+  font-weight: 200 1000;
+  font-display: swap;
+  font-style: normal;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: ital 0.0wght 200.0;
+*
+* available axes:
+'ital' (range from 0.0 to 1.0'wght' (range from 200.0 to 1.0e3
+*/
+@font-face {
+  font-family: 'Nunito-VariableItalic';
+  src: url('Nunito-VariableItalic.woff2') format('woff2'),
+       url('Nunito-VariableItalic.woff') format('woff'),
+       url('Nunito-VariableItalic.ttf') format('truetype');
+  font-weight: 200 1000;
+  font-display: swap;
+  font-style: italic;
+}
+

assets/icons/arrow-right.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"/></svg>

assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>

assets/js/includeHtml.js

@@ -0,0 +1,27 @@
+function includeHTML() {
+  var z, i, elmnt, file, xhttp;
+  /* Loop through a collection of all HTML elements: */
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+    elmnt = z[i];
+    /*search for elements with a certain atrribute:*/
+    file = elmnt.getAttribute("w3-include-html");
+    if (file) {
+      /* Make an HTTP request using the attribute value as the file name: */
+      xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+          /* Remove the attribute, and call this function once more: */
+          elmnt.removeAttribute("w3-include-html");
+          includeHTML();
+        }
+      }
+      xhttp.open("GET", file, true);
+      xhttp.send();
+      /* Exit the function: */
+      return;
+    }
+  }
+}

assets/style.css

@@ -0,0 +1,8 @@
+@import "css/var.css"; 
+@import "css/base.css";
+@import "css/site-header.css";
+@import "css/site-footer.css";
+
+@import "css/buttons.css";
+
+@import "css/home.css";