Final Major Commit

assets/css/feature.css

@@ -1,27 +1,32 @@
 .feature-icon {
-    width: 4rem;
+  width: 4rem;
-    height: 4rem;
+  height: 4rem;
-    border-radius: .75rem;
+  border-radius: 0.75rem;
-  }
+}
 
-  .icon-square {
+.icon-square {
-    width: 3rem;
+  width: 3rem;
-    height: 3rem;
+  height: 3rem;
-    border-radius: .75rem;
+  border-radius: 0.75rem;
-  }
+}
 
-  .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+.text-shadow-1 {
-  .text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
-  .text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+}
+.text-shadow-2 {
+  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
+}
+.text-shadow-3 {
+  text-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
+}
 
-  .card-cover {
+.card-cover {
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-position: center center;
+  background-position: center center;
-    background-size: cover;
+  background-size: cover;
-  }
+}
-  
-  .feature-icon-small {
-    width: 3rem;
-    height: 3rem;
-  }
 
+.feature-icon-small {
+  width: 3rem;
+  height: 3rem;
+}

assets/css/style.css

@@ -17,6 +17,16 @@ body {
   }
 }
 
+.bi {
+  margin-left: 10px; 
+  margin-right: 10px;
+  text-decoration: none;
+}
+
+#socialMediaSection a {
+  text-decoration: none;
+}
+
 #banner-1 {
   background: rgba(0, 0, 0, 0.6) url("../images/banners/1.jpg");
   background-blend-mode: darken;

contact.php

@@ -1,17 +0,0 @@
-<?php 
-    include_once("includes/header.php");
-?>
-
-<main>
-    <section class="py-5 mb-4 text-center" id="contactBanner">
-        <div class="py-lg-5">
-            <div class="col-lg-6 col-md-8 mx-auto banner-caption">
-                <h1 class="display-1 fw-bold text-white">Contact</h1>
-            </div>
-        </div>
-    </section>
-</main>
-
-<?php
-    include_once("includes/footer.php");
-?>

gallery.php

@@ -1,117 +0,0 @@
-<?php 
-    include_once("includes/header.php");
-?>
-
-<main>
-    <section class="py-5 mb-4 text-center" id="galleryBanner">
-        <div class="py-lg-5">
-            <div class="col-lg-6 col-md-8 mx-auto banner-caption">
-                <h1 class="display-1 fw-bold text-white">Gallery</h1>
-            </div>
-        </div>
-    </section>
-
-    <div class="container mb-4">
-        <div class="my-4">
-            <div class="mb-2 border-bottom">
-                <h2 class="fw-bold">Joint Monorail Installation</h2>
-            </div>
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                <?php
-                    $photoSet1 = array(
-                        "assets/images/services/monorail/1.jpg",
-                        "assets/images/services/monorail/2.jpg",
-                        "assets/images/services/monorail/3.jpg",
-                    );
-                    
-                    foreach ($photoSet1 as $file) {
-                        echo "<div class='col'>
-                                <div class='card shadow-sm'>
-                                    <img src='$file' class='bd-placeholder-img card-img-top' width='100%' height='270' />
-                                </div>
-                            </div>";
-                    }
-                ?>
-            </div>
-        </div>
-
-        <div class="my-4">
-            <div class="mb-2 border-bottom">
-                <h2 class="fw-bold">Noise Barrier System</h2>
-            </div>
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-            <?php
-                $photoSet1 = array(
-                    array("assets/images/services/noise-barrier/1.jpg", "Expressway"),
-                    array("assets/images/services/noise-barrier/2.jpg", "Expressway No. 7"),
-                    array("assets/images/services/noise-barrier/3.jpg", "Bang Chak Area"),
-                );
-
-                foreach ($photoSet1 as $fileInfo) {
-                    $imageSrc = $fileInfo[0];
-                    $text = $fileInfo[1];
-                    echo "<div class='col'>
-                            <div class='card shadow-sm'>
-                                <img src='$imageSrc' class='bd-placeholder-img card-img-top' width='100%' height='270' />
-
-                                <div class='card-body'>
-                                    <p class='card-text'>$text</p>
-                                </div>
-                            </div>
-                        </div>";
-                }
-                ?>
-            </div>
-        </div>
-
-        <div class="my-4">
-            <div class="mb-2 border-bottom">
-                <h2 class="fw-bold">Joint Monorail Installation</h2>
-            </div>
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                <?php
-                    $photoSet1 = array(
-                        "assets/images/services/monorail/1.jpg",
-                        "assets/images/services/monorail/2.jpg",
-                        "assets/images/services/monorail/3.jpg",
-                    );
-                    
-                    foreach ($photoSet1 as $file) {
-                        echo "<div class='col'>
-                                <div class='card shadow-sm'>
-                                    <img src='$file' class='bd-placeholder-img card-img-top' width='100%' height='270' />
-                                </div>
-                            </div>";
-                    }
-                ?>
-            </div>
-        </div>
-
-        <div class="my-4">
-            <div class="mb-2 border-bottom">
-                <h2 class="fw-bold">Joint Monorail Installation</h2>
-            </div>
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                <?php
-                    $photoSet1 = array(
-                        "assets/images/services/monorail/1.jpg",
-                        "assets/images/services/monorail/2.jpg",
-                        "assets/images/services/monorail/3.jpg",
-                    );
-                    
-                    foreach ($photoSet1 as $file) {
-                        echo "<div class='col'>
-                                <div class='card shadow-sm'>
-                                    <img src='$file' class='bd-placeholder-img card-img-top' width='100%' height='270' />
-                                </div>
-                            </div>";
-                    }
-                ?>
-            </div>
-        </div>
-    </div>
-</main>
-
-<?php
-    include_once("includes/footer.php");
-?>

includes/header.php

@@ -133,7 +133,16 @@
                                 <a class="nav-link" href="/">Home</a>
                             </li>
                             <li class="nav-item">
-                                <a class="nav-link" href="gallery.php">Gallery</a>
+                                <a class="nav-link" href="#serviceSection">Our Services</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#gallerySection">Gallery</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#clientSection">Clients</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#contactSection">Contact</a>
                             </li>
                         </ul>
                     </div>

index.php

@@ -90,65 +90,24 @@
             </div>
         </div>
 
-        <div id="serviceSection" class="container px-4 py-5">
+        <div id="serviceSection" class="container px-4 py-4">
             <h2 class="pb-2 border-bottom">Services</h2>
 
             <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
                 <div class="col d-flex flex-column align-items-start gap-2">
-                    <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+                    <h2 class="fw-bold text-body-emphasis">Spare Parts of Machinery Equipment</h2>
-                    <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
+                    <p class="text-body-secondary">We produce spare parts of machines according to client's drawings.
-                        add onto it with another sentence and probably just keep going until we run out of words.</p>
+                    </p>
-                    <a href="#" class="btn btn-primary btn-lg">Primary button</a>
                 </div>
 
                 <div class="col">
                     <div class="row row-cols-1 row-cols-sm-2 g-4">
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/spare-parts/1.jpg" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#collection"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
 
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/spare-parts/2.jpg" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#gear-fill"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#speedometer"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#table"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
                     </div>
                 </div>
@@ -158,126 +117,81 @@
                 <div class="col">
                     <div class="row row-cols-1 row-cols-sm-2 g-4">
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/steel-fabrication/1.jpg" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#collection"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
 
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/steel-fabrication/2.jpg" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#gear-fill"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#speedometer"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#table"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
                     </div>
                 </div>
 
-                <div class="col d-flex flex-column align-items-end gap-2">
+                <div class="col d-flex flex-column align-items-start gap-2">
-                    <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+                    <h2 class="fw-bold text-body-emphasis">Steel Fabrication & Assembly</h2>
-                    <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
+                    <p class="text-body-secondary">We provide steel-fabricated products and are ready to be assembled by
-                        add onto it with another sentence and probably just keep going until we run out of words.</p>
+                        the client.</p>
-                    <a href="#" class="btn btn-primary btn-lg">Primary button</a>
                 </div>
             </div>
 
             <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
                 <div class="col d-flex flex-column align-items-start gap-2">
-                    <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
+                    <h2 class="fw-bold text-body-emphasis">Steel Structure</h2>
-                    <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
+                    <p class="text-body-secondary">We provide services related to structure building for offices,
-                        add onto it with another sentence and probably just keep going until we run out of words.</p>
+                        factories and more. </p>
-                    <a href="#" class="btn btn-primary btn-lg">Primary button</a>
                 </div>
 
                 <div class="col">
                     <div class="row row-cols-1 row-cols-sm-2 g-4">
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/steel-structure/1.jpg" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#collection"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
 
                         <div class="col d-flex flex-column gap-2">
-                            <div
+                            <img src="assets/images/services/steel-structure/2.png" class="rounded-4">
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#gear-fill"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#speedometer"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
-                        </div>
-
-                        <div class="col d-flex flex-column gap-2">
-                            <div
-                                class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-                                <svg class="bi" width="1em" height="1em">
-                                    <use xlink:href="#table"></use>
-                                </svg>
-                            </div>
-                            <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
-                            <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.
-                            </p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div id="clientSection" class="container px-4 py-2" id="icon-grid">
+        <div id="gallerySection" class="container px-4 py-4">
+            <h2 class="pb-2 border-bottom">Gallery</h2>
+            <div class="album">
+                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+                    <?php
+                    $photoSet1 = array(
+                        array("assets/images/gallery/1.jpg", "1"),
+                        array("assets/images/gallery/2.jpg", "2"),
+                        array("assets/images/gallery/3.jpg", "3"),
+                        array("assets/images/gallery/4.jpg", "4"),
+                        array("assets/images/gallery/5.jpg", "5"),
+                        array("assets/images/gallery/6.jpg", "6"),
+                        array("assets/images/gallery/7.jpg", "7"),
+                        array("assets/images/gallery/8.jpg", "8"),
+                        array("assets/images/gallery/9.jpg", "9"),
+                        array("assets/images/gallery/10.jpg", "10"),
+                        array("assets/images/gallery/11.jpg", "11"),
+                        array("assets/images/gallery/12.jpg", "12"),
+                        array("assets/images/gallery/13.jpg", "13"),
+                        array("assets/images/gallery/14.jpg", "14"),
+                        array("assets/images/gallery/15.jpg", "15"),
+                    );
+
+                    foreach ($photoSet1 as $fileInfo) {
+                        $imageSrc = $fileInfo[0];
+                        $text = $fileInfo[1];
+                        echo "<div class='col'>
+                                <div class='card shadow-sm'>
+                                    <img src='$imageSrc' class='bd-placeholder-img card-img-top' width='100%' height='270' />
+                                </div>
+                            </div>";
+                    }
+                    ?>
+                </div>
+            </div>
+        </div>
+
+        <div id="clientSection" class="container px-4 py-4">
             <h2 class="pb-2 border-bottom">Clients</h2>
             <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 g-4 py-5">
                 <?php
@@ -316,17 +230,32 @@
 
         <div id="contactSection" class="container px-4 py-2" id="icon-grid">
             <div class="border-bottom"></div>
-            <div class="my-5 d-flex justify-content-center">
+            <div class="my-5 text-center">
-                <div align="center">
+                <h1 class="display-3 fw-bold">Get In Touch</h1>
-                    <h1 class="display-3 fw-bold">Get In Touch</h1>
-                    <p class="fs-5">Interested in our work? Let us provide you with our experience in steel fabrication
-                        for your next project. </p>
 
-                    <a href="contact.php">
+                <p class="fs-5">Interested in our work? Let us provide you with our experience in steel fabrication
-                        <button type="button" class="btn btn-primary btn-lg">Contact Us</button>
+                    for your next project.</p>
-                    </a>
+
+                <div class="row align-items-center justify-content-center">
+                    <h2>
+                        Tel: <a href="tel:+6638198277">+66-38-198-277</a>
+                    </h2>
+
+                    <h5>
+                        Or email to us at: <a href="mailto:pichit@empower-engineering.co.th">pichit@empower-engineering.co.th</a>
+                    </h5>
+
+                    <div id="socialMediaSection" class="grid gap-0 column-gap-3 justify-content-center">
+                        <a href="https://www.facebook.com/empower.engineering" class="icon-link link-body-emphasis">
+                            <i class="fs-3 bi bi-facebook"></i>
+                        </a>
+                        <a href="https://twitter.com/EmpowerEngin" class="icon-link link-body-emphasis">
+                            <i class="fs-3 bi bi-twitter"></i>
+                        </a>
+                    </div>
                 </div>
             </div>
+
         </div>
     </div>
 </main>

services.php

@@ -1,17 +0,0 @@
-<?php 
-    include_once("includes/header.php");
-?>
-
-<main>
-    <section class="py-5 mb-4 text-center" id="servicesBanner">
-        <div class="py-lg-5">
-            <div class="col-lg-6 col-md-8 mx-auto banner-caption">
-                <h1 class="display-1 fw-bold text-white">Services</h1>
-            </div>
-        </div>
-    </section>
-</main>
-
-<?php
-    include_once("includes/footer.php");
-?>