this could actually be launched; re-done the PHP part, contact is without contact form for the better, css cleaned up accordingly, added the images into the repo

page/about-us.html

@@ -16,10 +16,10 @@
 <section>
     <article>
         <h2>Our teachers and class leading instructors</h2>
-        <ul class="people">
+        <ul class="grid">
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_8451953798aa4e23a24ea12af7ee85a2~mv2.jpg" alt= "" />
+                    <img src="image/people-rodolfo_oliva.jpg" alt= "" />
                     <figcaption>
                         <strong>Rodolfo Oliva</strong>
                         <span class="rank">6th degree black belt Master</span>
@@ -30,7 +30,7 @@
 
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_7d20d44d39c0443d88e96a1c8a4cfa8d~mv2.jpg" alt= "" />
+                    <img src="image/people-simon_lamb.jpg" alt= "" />
                     <figcaption>
                         <strong>Simon Lamb</strong>
                         <span class="rank">1st degree black belt instructor</span>
@@ -41,7 +41,7 @@
 
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_7525fd96b1cb4c1bbdceee1128b5c923~mv2.jpg" alt= "" />
+                    <img src="image/people-john_waugh.jpg" alt= "" />
                     <figcaption>
                         <strong>John Waugh</strong>
                         <span class="rank">Red belt instructor</span>
@@ -52,7 +52,7 @@
 
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_73aac4b027fa4a298c6c495321cca0b9~mv2.jpg" alt= "" />
+                    <img src="image/people-tom_winch.jpg" alt= "" />
                     <figcaption>
                         <strong>Tom Winch</strong>
                         <span class="rank">Red belt instructor</span>
@@ -63,7 +63,7 @@
 
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_663b176ffece44f3b4ae3aff314959c2~mv2.jpg" alt= "" />
+                    <img src="image/people-kasia_bukowska.jpg" alt= "" />
                     <figcaption>
                         <strong>Kasia Bukowska</strong>
                         <span class="rank">Red belt instructor</span>
@@ -74,7 +74,7 @@
 
             <li>
                 <figure>
-                    <img src="https://static.wixstatic.com/media/1aea5d_81d5760d82704390b652d4f51240e503~mv2.jpg" alt= "" />
+                    <img src="image/people-alejandro_perez.jpg" alt= "" />
                     <figcaption>
                         <strong>Alejandro Perez</strong>
                         <span class="rank">Blue belt instructor</span>

page/contact.html

@@ -17,15 +17,28 @@
 
         </dl>
 
-        <h2>Do you have questions not listed?<br />Message us at any time:</h2>
+        <h2>Do you have questions not listed?<br />Message us at any time!</h2>
-        <iframe
+        <ul class="grid">
-            src="https://docs.google.com/forms/d/e/1FAIpQLSewDbNRZZJZoGFclMlNZv71miUG17ghTLYJRRLjq1g4VAppUg/viewform?embedded=true"
+            <li>
-            style="width: 100%"
+                <figure>
-            height="900"
+                    <a href="mailto:info@pakuauk.com"><svg width="64" height="64"><use xlink:href="#icon-email" /></svg></a>
-            frameborder="0"
+                    <figcaption>
-            marginheight="0"
+                        <strong>e-mail</strong>
-            marginwidth="0"
+                        <span><a href="mailto:info@pakuauk.com">info@pakuauk.com</a></span>
-        >
+                    </figcaption>
-        </iframe>
+                </figure>
+            </li>
+
+            <li>
+                <figure>
+                    <a href="https://chat.whatsapp.com/CmDShQzb0n021LpO0hqEQ6"><svg width="64" height="64"><use xlink:href="#icon-whatsapp" /></svg></a>
+                    <figcaption>
+                        <strong>WhatsApp</strong>
+                        <span><a href="https://chat.whatsapp.com/CmDShQzb0n021LpO0hqEQ6">Pa-Kua Open Chat</a></span>
+                    </figcaption>
+                </figure>
+            </li>
+
+        </ul>
     </article>
 </section>

page/index.html

@@ -1,5 +1,5 @@
 <h1>Home</h1>
-<div class="hero" style="background-image:url('https://static.wixstatic.com/media/80d0c2_cbba08e62bec4306976786196cd07724~mv2_d_4928_3264_s_4_2.jpg');">
+<div class="hero" style="background-image:url('image/background-join.jpg');">
     <p>
     Join our classes today!
     </p>
@@ -7,7 +7,7 @@
 
 <section class="disciplines">
     <div>
-        <img src="https://static.wixstatic.com/media/1aea5d_6cc8cfc9817d4338ab7f9237afcdde13~mv2.jpg">
+        <img src="image/background-martial-art.jpg">
         <div>
             <h3>Martial Art</h3>
             <p>Learn kicks, punches, and self defence in a non-competitive, inclusive environment</p>
@@ -27,7 +27,7 @@
             </details></div>
     </div>
     <div>
-        <img src="https://static.wixstatic.com/media/1aea5d_9e3f231a4f334bcbb55632db0f1ed8b1~mv2.jpg">
+        <img src="image/background-acrobatics.jpg">
         <div>
             <h3>Acrobatics</h3>
             <p>Overcome your fears while having fun and building core strength</p>
@@ -47,7 +47,7 @@
             </details></div>
     </div>
     <div>
-        <img src="https://static.wixstatic.com/media/1aea5d_fb45586de2c04c71a3604d3bebe886e5~mv2.jpg">
+        <img src="image/background-edged-weapons.jpg">
         <div>
             <h3>Edged Weapons</h3>
             <p>Learn to handle ancient Chinese weapons: swords, spears, daggers, knives</p>
@@ -64,7 +64,7 @@
             </details></div>
     </div>
     <div>
-        <img src="https://static.wixstatic.com/media/1aea5d_7aece67e56b641528ba25a3cb775eb1c~mv2.jpg">
+        <img src="image/background-martial-art-for-kids.jpg">
         <div>
             <h3>Martial Art for Kids</h3>
             <p>Gain self-confidence, social skills, focus, and control, from DBS certified instructors</p>
@@ -75,7 +75,7 @@
             </details></div>
     </div>
     <div>
-        <img src="https://static.wixstatic.com/media/1aea5d_4f5cbe148c484068ac2d7e0874339dda~mv2.jpg">
+        <img src="image/background-archery.jpg">
         <div>
             <h3>Oriental Archery</h3>
             <p>Learn to focus, relax, and find the perfect shot</p>

page/the-school.html

@@ -2,7 +2,7 @@
     Pa-Kua International League
 </h1>
 <section>
-    <div class="headline" style="background-image:url('https://static.wixstatic.com/media/1aea5d_306a19c547314b89be04a5c0b42e92e4~mv2.jpg');">
+    <div class="headline" style="background-image:url('image/background-pakua.jpg');">
         <div>
         <p>
             Pa-Kua is an ancient Chinese knowledge based on the study of changes in nature. It's study and practice feature a variety of ancient concepts such as Yin Yang, Sky Man and Earth, the Five Elements, and the Eight States of Change.

style.css

@@ -18,6 +18,17 @@ body {
   background-color: #fff;
 }
 
+svg {
+  transform: rotate(0deg);
+  fill: currentColor;
+  vertical-align:middle;
+}
+
+body > svg {
+  display: none;
+  visibility: hidden;
+}
+
 a {
   color: #ba0000;
   text-decoration: none;
@@ -280,7 +291,7 @@ main ul li {
   left: 0; top: 0;
 }
 
-.people {
+.grid {
   list-style-type: none;
   margin: 0;
   padding:0;
@@ -289,26 +300,27 @@ main ul li {
   justify-content:center;
 }
 
-.people img {
+.grid img,
-  width: 8em;
+.grid svg {
+  height: 7em;
+  width: auto;
   margin-bottom: 1em;
 }
 
-.people li {
+.grid li {
   text-align: center;
   min-width: 12em;
   padding: 1em 0;
   margin: 1em;
 }
 
-.people strong,
+.grid strong,
-.people .rank,
+.grid span {
-.people .classes {
   display: block;
 }
 
-.people .rank,
+.grid .rank,
-.people .classes {
+.grid .classes {
   font-size: 0.9em;
 }
 
@@ -347,6 +359,39 @@ body > header > section > label {
   display: none;
 }
 
+/*
+.contact {
+  padding:3em 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items:baseline;
+}
+
+.contact label {
+  margin-bottom: 2em;
+  padding: 0.3em 0;
+  display: inline-block;
+  width: 20%;
+  font-weight: bold;
+}
+
+.contact textarea,
+.contact input {
+  width: 75%;
+  display: inline-block;
+  padding: 0.3em;
+  color: #000;
+  background-color: #fff;
+  border:none;
+  border-bottom: 2px dashed #222;
+}
+
+.contact input[type=url] {
+  display: none;
+  visibility: hidden;
+}
+*/
+
 .signup {
   background-color: #111;
   padding: 2em 0;
@@ -355,21 +400,21 @@ body > header > section > label {
 
 .signup h2 {
   text-align: center;
-  color: rgba(255, 126, 45, 1);
 }
 
-#mc-embedded-subscribe-form label {
+.signup label {
   font-weight: bold;
+  display: unset;
 }
 
-#mc-embedded-subscribe-form > p label {
+.signup p label {
   display: none;
 }
 
-#mc-embedded-subscribe-form input[type=text],
+.signup input[type=text],
-#mc-embedded-subscribe-form input[type=email] {
+.signup input[type=email] {
   display: inline-block;
-  min-width: 20em;
+  width: 20em;
   background-color: #111;
   border: none;
   border-bottom: 2px solid rgba(255, 126, 45, 1);;
@@ -377,22 +422,22 @@ body > header > section > label {
   color: #ccc;
 }
 
-#mc-embedded-subscribe-form input[type=email] {
+.signup input[type=email] {
   color: rgba(255, 126, 45, 1);
 }
 
-#mc-embedded-subscribe-form input[type=checkbox]{
+.signup input[type=checkbox]{
   display: inline;
   width: auto;
   margin: 0 0.3em 0 1em;
 }
 
-#mc-embedded-subscribe-form fieldset {
+.signup fieldset {
   display: inline;
   border: none;
 }
 
-#mc-embedded-subscribe-form input[type=submit] {
+.signup input[type=submit] {
   background-color: #000;
   border: 2px solid rgba(255, 126, 45, 1);
   color: rgba(255, 126, 45, 1);
@@ -400,9 +445,10 @@ body > header > section > label {
   margin: 1em 0;
   cursor: pointer;
   transition: 0.5s;
+  width: auto;
 }
 
-#mc-embedded-subscribe-form input[type=submit]:hover {
+.signup input[type=submit]:hover {
   border-color: #fff;
   color: #fff;
 }
@@ -509,7 +555,6 @@ body > header > section > label {
   }
 
   .headline div {
-    /*! margin: 0.6em; */
     padding: 0.6em;
     text-align: center;
   }
@@ -524,14 +569,21 @@ body > header > section > label {
 
   #mc-embedded-subscribe-form {
     padding: 1em;
+    display: block;
   }
 
   #mc-embedded-subscribe-form input[type=text],
   #mc-embedded-subscribe-form input[type=email],
   #mc-embedded-subscribe-form input[type=submit] {
     display: block;
+    width: 80%;
     margin: 1em auto;
   }
+
+  #mc-embedded-subscribe-form input[type=submit] {
+    width: auto;
+    padding: 1em;
+  }
 }
 
 details[open] summary {