diff --git a/assets/html/footer.html b/assets/html/footer.html
index aa01547..fdda814 100644
--- a/assets/html/footer.html
+++ b/assets/html/footer.html
@@ -1,120 +1,3 @@
-<!DOCTYPE html>
-<!--#include file="includes/header.html" -->
-<html lang="fr">
-
-  <head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="Geoff, JServ">
-
-    <title>Ramayana - Free Bootstrap 4 CSS Template</title>
-
-<!--
-Ramayana CSS Template
-https://templatemo.com/tm-529-ramayana
--->
-
-
-    <!-- Additional CSS Files -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
-    <link rel="stylesheet" href="assets/css/fontawesome.css">
-    <link rel="stylesheet" href="assets/css/templatemo-style.css">
-    <link rel="stylesheet" href="assets/css/owl.css">
-
-  </head>
-
-<body class="is-preload">
-
-    <!-- Wrapper -->
-    <div id="wrapper">
-
-      <!-- Main -->
-        <div id="main">
-          <div class="inner">
-
-            <!-- Header -->
-            <header id="header">
-              <div class="logo">
-                <a href="index.html">Ramayana</a>
-              </div>
-            </header>
-
-            <!-- Banner -->
-            <section class="main-banner">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-12">
-                    <div class="banner-content">
-                      <div class="row">
-                        <div class="col-md-12">
-                          <div class="banner-caption">
-                            <h4>Hello, this is your <em>Ramayana</em> Theme.</h4>
-                            <span>AWESOME HTML5 &amp; CSS3 TEMPLATE</span>
-                            <p>Do you know that <strong>Ramayana</strong> is a free to use Bootstrap 4 CSS template by <strong>templatemo</strong>? You can edit and add more pages as you wanted for your personal or corporate websites.</p>
-                            <div class="primary-button">
-                              <a href="#">Read More</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <!-- Services -->
-            <section class="services">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-4">
-                    <div class="service-item first-item">
-                      <div class="icon"></div>
-                      <h4>Web Design</h4>
-                      <p>Credit goes to <a rel="nofollow" href="https://www.pexels.com">Pexels</a> and <a rel="nofollow" href="https://www.rawpixel.com">Raw Pixel</a> for images used in this template. Thank you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item second-item">
-                      <div class="icon"></div>
-                      <h4>Bootstrap 4</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item third-item">
-                      <div class="icon"></div>
-                      <h4>HTML CSS</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fourth-item">
-                      <div class="icon"></div>
-                      <h4>Download Free</h4>
-                      <p>We have many free to use CSS web templates on our site for you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fivth-item">
-                      <div class="icon"></div>
-                      <h4>Get in touch</h4>
-                      <p>You can get the fastest response from <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> facebook page.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item sixth-item">
-                      <div class="icon"></div>
-                      <h4>Spread a word</h4>
-                      <p>Please tell your friends about our website. This is very helpful.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
           </div>
         </div>
 
diff --git a/assets/html/header.html b/assets/html/header.html
index aa01547..b9e87e0 100644
--- a/assets/html/header.html
+++ b/assets/html/header.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!--#include file="includes/header.html" -->
 <html lang="fr">
 
   <head>
@@ -41,163 +40,3 @@ https://templatemo.com/tm-529-ramayana
                 <a href="index.html">Ramayana</a>
               </div>
             </header>
-
-            <!-- Banner -->
-            <section class="main-banner">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-12">
-                    <div class="banner-content">
-                      <div class="row">
-                        <div class="col-md-12">
-                          <div class="banner-caption">
-                            <h4>Hello, this is your <em>Ramayana</em> Theme.</h4>
-                            <span>AWESOME HTML5 &amp; CSS3 TEMPLATE</span>
-                            <p>Do you know that <strong>Ramayana</strong> is a free to use Bootstrap 4 CSS template by <strong>templatemo</strong>? You can edit and add more pages as you wanted for your personal or corporate websites.</p>
-                            <div class="primary-button">
-                              <a href="#">Read More</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <!-- Services -->
-            <section class="services">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-4">
-                    <div class="service-item first-item">
-                      <div class="icon"></div>
-                      <h4>Web Design</h4>
-                      <p>Credit goes to <a rel="nofollow" href="https://www.pexels.com">Pexels</a> and <a rel="nofollow" href="https://www.rawpixel.com">Raw Pixel</a> for images used in this template. Thank you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item second-item">
-                      <div class="icon"></div>
-                      <h4>Bootstrap 4</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item third-item">
-                      <div class="icon"></div>
-                      <h4>HTML CSS</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fourth-item">
-                      <div class="icon"></div>
-                      <h4>Download Free</h4>
-                      <p>We have many free to use CSS web templates on our site for you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fivth-item">
-                      <div class="icon"></div>
-                      <h4>Get in touch</h4>
-                      <p>You can get the fastest response from <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> facebook page.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item sixth-item">
-                      <div class="icon"></div>
-                      <h4>Spread a word</h4>
-                      <p>Please tell your friends about our website. This is very helpful.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-
-      <!-- Sidebar -->
-        <div id="sidebar">
-
-          <div class="inner">
-
-            <!-- Search Box
-            <section id="search" class="alt">
-              <form method="get" action="#">
-                <input type="text" name="search" id="search" placeholder="Search..." />
-              </form>
-	    </section> -->
-              
-            <!-- Menu -->
-            <nav id="menu">
-              <ul>
-                <li><a href="index.html">Derière leçon</a></li>
-                <li>
-                  <span class="opener">Leçons</span>
-                  <ul>
-                    <li><a href="#">Leçon 1</a></li>
-                    <li><a href="#">Leçon 2</a></li>
-                    <li><a href="#">Leçon 3</a></li>
-                  </ul>
-                </li>
-                <li><a href="maitresse.html">Maitresse</a></li>
-              </ul>
-            </nav>
-
-            <!-- Featured Posts -->
-            <div class="featured-posts">
-              <div class="heading">
-                <h2>Featured Posts</h2>
-              </div>
-              <div class="owl-carousel owl-theme">
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured one">
-                    <p>Aliquam egestas convallis eros sed gravida. Curabitur consequat sit.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured two">
-                    <p>Donec a scelerisque massa. Aliquam non iaculis quam. Duis arcu turpis.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured three">
-                    <p>Suspendisse ac convallis urna, vitae luctus ante. Donec sit amet.</p>
-                  </div>
-                </a>
-              </div>
-            </div>
-
-            <!-- Footer -->
-            <footer id="footer">
-              <p class="copyright">Copyright &copy; CC BY NC ND
-              <br>Designed by Geoff at JServ with template Ramayana by <a rel="nofollow" href="https://www.facebook.com/templatemo">Template Mo</a>.</p>
-            </footer>
-
-          </div>
-        </div>
-
-    </div>
-
-</body>
-
-  <!-- Scripts -->
-  <!-- Bootstrap core JavaScript -->
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
-
-    <script src="assets/js/browser.min.js"></script>
-    <script src="assets/js/breakpoints.min.js"></script>
-    <script src="assets/js/transition.js"></script>
-    <script src="assets/js/owl-carousel.js"></script>
-    <script src="assets/js/custom.js"></script>
-
-
-  </body>
-
-</html>
diff --git a/assets/html/sidebar.html b/assets/html/sidebar.html
deleted file mode 100644
index aa01547..0000000
--- a/assets/html/sidebar.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<!--#include file="includes/header.html" -->
-<html lang="fr">
-
-  <head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="Geoff, JServ">
-
-    <title>Ramayana - Free Bootstrap 4 CSS Template</title>
-
-<!--
-Ramayana CSS Template
-https://templatemo.com/tm-529-ramayana
--->
-
-
-    <!-- Additional CSS Files -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
-    <link rel="stylesheet" href="assets/css/fontawesome.css">
-    <link rel="stylesheet" href="assets/css/templatemo-style.css">
-    <link rel="stylesheet" href="assets/css/owl.css">
-
-  </head>
-
-<body class="is-preload">
-
-    <!-- Wrapper -->
-    <div id="wrapper">
-
-      <!-- Main -->
-        <div id="main">
-          <div class="inner">
-
-            <!-- Header -->
-            <header id="header">
-              <div class="logo">
-                <a href="index.html">Ramayana</a>
-              </div>
-            </header>
-
-            <!-- Banner -->
-            <section class="main-banner">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-12">
-                    <div class="banner-content">
-                      <div class="row">
-                        <div class="col-md-12">
-                          <div class="banner-caption">
-                            <h4>Hello, this is your <em>Ramayana</em> Theme.</h4>
-                            <span>AWESOME HTML5 &amp; CSS3 TEMPLATE</span>
-                            <p>Do you know that <strong>Ramayana</strong> is a free to use Bootstrap 4 CSS template by <strong>templatemo</strong>? You can edit and add more pages as you wanted for your personal or corporate websites.</p>
-                            <div class="primary-button">
-                              <a href="#">Read More</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <!-- Services -->
-            <section class="services">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-4">
-                    <div class="service-item first-item">
-                      <div class="icon"></div>
-                      <h4>Web Design</h4>
-                      <p>Credit goes to <a rel="nofollow" href="https://www.pexels.com">Pexels</a> and <a rel="nofollow" href="https://www.rawpixel.com">Raw Pixel</a> for images used in this template. Thank you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item second-item">
-                      <div class="icon"></div>
-                      <h4>Bootstrap 4</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item third-item">
-                      <div class="icon"></div>
-                      <h4>HTML CSS</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fourth-item">
-                      <div class="icon"></div>
-                      <h4>Download Free</h4>
-                      <p>We have many free to use CSS web templates on our site for you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fivth-item">
-                      <div class="icon"></div>
-                      <h4>Get in touch</h4>
-                      <p>You can get the fastest response from <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> facebook page.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item sixth-item">
-                      <div class="icon"></div>
-                      <h4>Spread a word</h4>
-                      <p>Please tell your friends about our website. This is very helpful.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-
-      <!-- Sidebar -->
-        <div id="sidebar">
-
-          <div class="inner">
-
-            <!-- Search Box
-            <section id="search" class="alt">
-              <form method="get" action="#">
-                <input type="text" name="search" id="search" placeholder="Search..." />
-              </form>
-	    </section> -->
-              
-            <!-- Menu -->
-            <nav id="menu">
-              <ul>
-                <li><a href="index.html">Derière leçon</a></li>
-                <li>
-                  <span class="opener">Leçons</span>
-                  <ul>
-                    <li><a href="#">Leçon 1</a></li>
-                    <li><a href="#">Leçon 2</a></li>
-                    <li><a href="#">Leçon 3</a></li>
-                  </ul>
-                </li>
-                <li><a href="maitresse.html">Maitresse</a></li>
-              </ul>
-            </nav>
-
-            <!-- Featured Posts -->
-            <div class="featured-posts">
-              <div class="heading">
-                <h2>Featured Posts</h2>
-              </div>
-              <div class="owl-carousel owl-theme">
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured one">
-                    <p>Aliquam egestas convallis eros sed gravida. Curabitur consequat sit.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured two">
-                    <p>Donec a scelerisque massa. Aliquam non iaculis quam. Duis arcu turpis.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured three">
-                    <p>Suspendisse ac convallis urna, vitae luctus ante. Donec sit amet.</p>
-                  </div>
-                </a>
-              </div>
-            </div>
-
-            <!-- Footer -->
-            <footer id="footer">
-              <p class="copyright">Copyright &copy; CC BY NC ND
-              <br>Designed by Geoff at JServ with template Ramayana by <a rel="nofollow" href="https://www.facebook.com/templatemo">Template Mo</a>.</p>
-            </footer>
-
-          </div>
-        </div>
-
-    </div>
-
-</body>
-
-  <!-- Scripts -->
-  <!-- Bootstrap core JavaScript -->
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
-
-    <script src="assets/js/browser.min.js"></script>
-    <script src="assets/js/breakpoints.min.js"></script>
-    <script src="assets/js/transition.js"></script>
-    <script src="assets/js/owl-carousel.js"></script>
-    <script src="assets/js/custom.js"></script>
-
-
-  </body>
-
-</html>
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..32e1178
--- /dev/null
+++ b/config.json
@@ -0,0 +1,7 @@
+{
+	"lecon1": [
+		{"name": "cat"},
+		{"name": "dog"},
+		{"name": "extravasation"}
+	]
+}
diff --git a/config.php b/config.php
new file mode 100644
index 0000000..57ef65b
--- /dev/null
+++ b/config.php
@@ -0,0 +1,12 @@
+<?php
+const ORDINAL_ENGLISH = array('first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth');
+$string = file_get_contents("./config.json");
+if ($string === false) {
+    die("Can't read config file!");
+}
+$config = json_decode($string,true);
+if ($config === null) {
+    die("Config file is not JSON...");
+}
+
+?>
diff --git a/index.html b/index.html
deleted file mode 100644
index aa01547..0000000
--- a/index.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<!--#include file="includes/header.html" -->
-<html lang="fr">
-
-  <head>
-
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="Geoff, JServ">
-
-    <title>Ramayana - Free Bootstrap 4 CSS Template</title>
-
-<!--
-Ramayana CSS Template
-https://templatemo.com/tm-529-ramayana
--->
-
-
-    <!-- Additional CSS Files -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
-    <link rel="stylesheet" href="assets/css/fontawesome.css">
-    <link rel="stylesheet" href="assets/css/templatemo-style.css">
-    <link rel="stylesheet" href="assets/css/owl.css">
-
-  </head>
-
-<body class="is-preload">
-
-    <!-- Wrapper -->
-    <div id="wrapper">
-
-      <!-- Main -->
-        <div id="main">
-          <div class="inner">
-
-            <!-- Header -->
-            <header id="header">
-              <div class="logo">
-                <a href="index.html">Ramayana</a>
-              </div>
-            </header>
-
-            <!-- Banner -->
-            <section class="main-banner">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-12">
-                    <div class="banner-content">
-                      <div class="row">
-                        <div class="col-md-12">
-                          <div class="banner-caption">
-                            <h4>Hello, this is your <em>Ramayana</em> Theme.</h4>
-                            <span>AWESOME HTML5 &amp; CSS3 TEMPLATE</span>
-                            <p>Do you know that <strong>Ramayana</strong> is a free to use Bootstrap 4 CSS template by <strong>templatemo</strong>? You can edit and add more pages as you wanted for your personal or corporate websites.</p>
-                            <div class="primary-button">
-                              <a href="#">Read More</a>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-
-            <!-- Services -->
-            <section class="services">
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-4">
-                    <div class="service-item first-item">
-                      <div class="icon"></div>
-                      <h4>Web Design</h4>
-                      <p>Credit goes to <a rel="nofollow" href="https://www.pexels.com">Pexels</a> and <a rel="nofollow" href="https://www.rawpixel.com">Raw Pixel</a> for images used in this template. Thank you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item second-item">
-                      <div class="icon"></div>
-                      <h4>Bootstrap 4</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item third-item">
-                      <div class="icon"></div>
-                      <h4>HTML CSS</h4>
-                      <p>Proin aliquam facilisis ante interdum. Sed nulla feugiat tempus aliquam.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fourth-item">
-                      <div class="icon"></div>
-                      <h4>Download Free</h4>
-                      <p>We have many free to use CSS web templates on our site for you.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item fivth-item">
-                      <div class="icon"></div>
-                      <h4>Get in touch</h4>
-                      <p>You can get the fastest response from <a rel="nofollow" href="https://www.facebook.com/templatemo">templatemo</a> facebook page.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item sixth-item">
-                      <div class="icon"></div>
-                      <h4>Spread a word</h4>
-                      <p>Please tell your friends about our website. This is very helpful.</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-
-      <!-- Sidebar -->
-        <div id="sidebar">
-
-          <div class="inner">
-
-            <!-- Search Box
-            <section id="search" class="alt">
-              <form method="get" action="#">
-                <input type="text" name="search" id="search" placeholder="Search..." />
-              </form>
-	    </section> -->
-              
-            <!-- Menu -->
-            <nav id="menu">
-              <ul>
-                <li><a href="index.html">Derière leçon</a></li>
-                <li>
-                  <span class="opener">Leçons</span>
-                  <ul>
-                    <li><a href="#">Leçon 1</a></li>
-                    <li><a href="#">Leçon 2</a></li>
-                    <li><a href="#">Leçon 3</a></li>
-                  </ul>
-                </li>
-                <li><a href="maitresse.html">Maitresse</a></li>
-              </ul>
-            </nav>
-
-            <!-- Featured Posts -->
-            <div class="featured-posts">
-              <div class="heading">
-                <h2>Featured Posts</h2>
-              </div>
-              <div class="owl-carousel owl-theme">
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured one">
-                    <p>Aliquam egestas convallis eros sed gravida. Curabitur consequat sit.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured two">
-                    <p>Donec a scelerisque massa. Aliquam non iaculis quam. Duis arcu turpis.</p>
-                  </div>
-                </a>
-                <a href="#">
-                  <div class="featured-item">
-                    <img src="assets/images/featured_post_01.jpg" alt="featured three">
-                    <p>Suspendisse ac convallis urna, vitae luctus ante. Donec sit amet.</p>
-                  </div>
-                </a>
-              </div>
-            </div>
-
-            <!-- Footer -->
-            <footer id="footer">
-              <p class="copyright">Copyright &copy; CC BY NC ND
-              <br>Designed by Geoff at JServ with template Ramayana by <a rel="nofollow" href="https://www.facebook.com/templatemo">Template Mo</a>.</p>
-            </footer>
-
-          </div>
-        </div>
-
-    </div>
-
-</body>
-
-  <!-- Scripts -->
-  <!-- Bootstrap core JavaScript -->
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
-
-    <script src="assets/js/browser.min.js"></script>
-    <script src="assets/js/breakpoints.min.js"></script>
-    <script src="assets/js/transition.js"></script>
-    <script src="assets/js/owl-carousel.js"></script>
-    <script src="assets/js/custom.js"></script>
-
-
-  </body>
-
-</html>
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..b1a56d9
--- /dev/null
+++ b/index.php
@@ -0,0 +1,5 @@
+<?php
+  require_once("assets/html/header.html");
+  include_once("./lecon.php");
+  require_once("assets/html/footer.html");
+?>
diff --git a/lecon.php b/lecon.php
new file mode 100644
index 0000000..056ca09
--- /dev/null
+++ b/lecon.php
@@ -0,0 +1,4 @@
+<!-- Services -->
+<section class="services">
+	<div class="container-fluid">
+		<div class="row">
