Last fully-working version without bugs

.gitignore

@@ -1 +1,2 @@
 templatemo_529_ramayana
+lessons.json

assets/css/templatemo-style.css

@@ -1166,13 +1166,19 @@ section.buttons .container-fluid {
 /* Header */
 
 #header {
+		--british-flag: url("https://ak2.picdn.net/shutterstock/videos/17568802/thumb/1.jpg");
+    --main-color: #1f185e;
     display: -moz-flex;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     position: relative;
-    background-color: #535ba0;
+    background-color: var(--main-color);
     margin: -100px -100px 100px -100px;
+    background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--main-color) 20%, var(--main-color) 100%), var(--british-flag);
+    background-repeat: no-repeat;
+    background-position: left;
+    background-size: auto, 20%;
 }
 
 #header .logo {

assets/images

@@ -0,0 +1 @@
+/home/yunohost.multimedia/bokrass/Share/Site_english/images/

assets/js/generator.js

@@ -1,9 +1,5 @@
 // Generator, by Geoff
 $(document).ready(function(){
-		$(".clickSay").click(function( event ){
-				var textToSay = $(this).text();
-				responsiveVoice.speak(textToSay);
-				});
 		$.getJSON("lessons.json", function(data) {
 				var wordsHtml = '';
 				var sidebarHtml = '';
@@ -14,15 +10,15 @@ $(document).ready(function(){
 								wordsHtml += '                  <div style="display: none;" class="col-md-4 lesson lesson-' + lessonIndex + '">';
 								wordsHtml += '                    <div class="service-item">';
 								if('img' in word){
-								wordsHtml += '                      <div class="icon" style="background-image:url(assets/images/'+ word.img +');"></div>';
+								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url(assets/images/'+ word.img +');"></div>';
 								} else if ('url' in word) {
-								wordsHtml += '                      <div class="icon" style="background-image:url('+ word.url +');"></div>';
+								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url('+ word.url +');"></div>';
 								} else {
-								wordsHtml += '                      <div class="icon" style="background-image:url(http://img.icons8.com/'+ word.name +'.png);"></div>';
+								wordsHtml += '                      <div class="icon" onclick="englishSay(\''+ word.name +'\')" style="background-image:url(http://img.icons8.com/'+ word.name +'.png);"></div>';
 								}
-								wordsHtml += '                      <h4 class="clickSay">'+ word.name +'</h4>';
+								wordsHtml += '                      <h4 class="clickSay" onclick="englishSay(\''+ word.name +'\')">'+ word.name +'</h4>';
 								if('example' in word){
-								wordsHtml += '                      <p class="clickSay">'+ word.example +'</p>';
+								wordsHtml += '                      <p class="clickSay" onclick="englishSay(\''+ word.name +'\')">'+ word.example +'</p>';
 								}
 								wordsHtml += '                    </div>';
 								wordsHtml += '                  </div>';
@@ -40,3 +36,8 @@ function swapView(newView){
  $(".lesson").hide(1000);
  $(".lesson-" + newView).show(1000);
 }
+
+function englishSay(textToSay) {
+				responsiveVoice.speak(textToSay);
+}
+

index.html

@@ -12,7 +12,7 @@
     <title>Cours anglais CE2-CM1 Médan</title>
 
     <!-- Bootstrap core CSS -->
-    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
 <!--
 Ramayana CSS Template

lessons.json

@@ -1,12 +0,0 @@
-{
-	"Feelings": [
-		{"name": "dog"},
-		{"name": "cat"},
-		{"name": "apple", "url": "http://www.zoommedia.com/uk-staging/wp-content/uploads/sites/18/2017/11/small-apple.png"}
-	],
-	"Days of week": [
-		{"name": "monday", "img": "happy.png"},
-		{"name": "Tuesday", "img": "happy.png"},
-		{"name": "extravasion day", "img": "extravasted.png"}
-	]
-}

lessons.json

@@ -0,0 +1 @@
+/home/yunohost.multimedia/bokrass/Share/Site_english/lessons.json

lessons.json.example

@@ -0,0 +1,13 @@
+{
+  "Feelings": [
+    {"name": "dog"},
+    {"name": "cat"},
+    {"name": "bird"},
+    {"name": "apple", "url": "http://www.zoommedia.com/uk-staging/wp-content/uploads/sites/18/2017/11/small-apple.png"}
+  ],
+  "Days of week": [
+    {"name": "monday", "img": "happy.png"},
+    {"name": "Tuesday", "img": "happy.png"},
+    {"name": "extravasion day", "img": "extravasted.png"}
+  ]
+}