Add images, updated about, contact and gallery pages

Author: ColmN-Dev

project/public/css/styles.css

@@ -89,6 +89,15 @@ main{
     margin-right: auto;
 }
 
+.gallery-images{
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 5em;
+    width: 25%;
+
+
+}
+
 /* main heading */
 h1 {
     font-size: 3em;
@@ -128,6 +137,21 @@ h2 {
     line-height: 1.8;
 }
 
+/* table styling */
+.table {
+    width: 50%;
+    border-collapse: separate;
+    border-spacing: 10px 10px;
+    background-color: yellow;
+    color: black;
+    margin: auto;
+}
+
+.table th,
+.table td {
+    text-align: left;
+}
+
 /*form submission css*/
 form {
     background-color: yellow;
@@ -139,6 +163,20 @@ form {
     text-align: center;
 }
 
+.submit-button {
+    background-color: black;
+    color: yellow;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1em;
+    border-radius: 5px;
+}
+
+.submit-button:hover {
+    background-color: red;
+    color: black;
+}
+
 /* footer at bottom */
 footer{
     bottom: 0;

project/public/images/banner.png project/public/images/img1.pngproject/public/images/banner.png renamed to project/public/images/img1.png

@@ -12,4 +12,41 @@ import Layout from '../layouts/Layout.astro';
         Saykan Combat offers a supportive environment to help you achieve your goals.</p>
 
         <p><a href="https://fmacombat.wordpress.com/about/">Learn more about Saykan Combat</a></p>
+
+        <table class="table">
+            <h2>Pricing</h2>
+            <thead>
+                <tr>
+                    <th>Option</th>
+                    <th>Price</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="dot"><span>First class:</span></td>
+                    <td>Free</td>
+                </tr>
+                <tr>
+                    <td class="dot"><span>Afterwards:</span></td>
+                    <td>€10 per session</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <table class="table">
+            <h2>Equipment</h2>
+            <thead>
+                <tr>
+                    <th>Item</th>
+                    <th>Quantity</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="dot"><span>Kali sticks</span></td>
+                    <td>×2</td>
+                </tr>
+            </tbody>
+        </table>
+        
 </Layout>

project/public/images/img2.jpg

@@ -21,7 +21,7 @@ import Layout from '../layouts/Layout.astro';
 
     <label for ="phone">Phone Number:</label><br>
 
-    <input type="tel" id="phone" name="phone"><br><br>
+    <input type="tel" id="phone" name="phone" required><br><br>
 
     <label for="subject">Subject:</label><br>
 
@@ -31,7 +31,7 @@ import Layout from '../layouts/Layout.astro';
 
     <textarea id="message" name="message" rows="4" required></textarea><br><br>
 
-    <strong><a href="./contact2"><button type="button">Submit</button></a></strong>
+    <strong><a href="./contact2"><button type="button" class="submit-button">Submit</button></a></strong>
 
     </form>
 

project/public/images/img3.jpg

@@ -6,4 +6,21 @@ import Layout from '../layouts/Layout.astro';
 
 <Layout>
     <h1>Gallery</h1>
+
+    <br>
+    <picture class="gallery-images">
+        <source srcset="images/img1.png" media="(max-width: 400px)" />
+        <img src="images/img1.png" alt="Image 1" style="width: 50%; height: auto;" />
+
+        <source srcset="images/escrima.jpg" media="(max-width: 400px)" />
+        <img src="images/escrima.jpg" alt="Image 2" style="width: 50%; height: auto;" />
+
+        <source srcset="images/img2.jpg" media="(max-width: 400px)" />
+        <img src="images/img2.jpg" alt="Image 3" style="width: 50%; height: auto;" />
+
+        <source srcset="images/img3.jpg" media="(max-width: 400px)" />
+        <img src="images/img3.jpg" alt="Image 4" style="width: 50%; height: auto;" />
+
+    </picture>
+
 </Layout>