modified layout
|
@ -1 +1,3 @@
|
||||||
.history/
|
.history/
|
||||||
|
.DS_Store
|
||||||
|
._DS_Store
|
|
@ -18,13 +18,13 @@ body {
|
||||||
}
|
}
|
||||||
/* Since positioning the image, we need to help out the caption */
|
/* Since positioning the image, we need to help out the caption */
|
||||||
.carousel-caption {
|
.carousel-caption {
|
||||||
bottom: 6rem;
|
bottom: 12rem;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Declare heights because of positioning of img element */
|
/* Declare heights because of positioning of img element */
|
||||||
.carousel-item {
|
.carousel-item {
|
||||||
height: 32rem;
|
height: 40rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,28 +1,59 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
|
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
font-family: "Rubik", sans-serif;
|
font-family: "Rubik", sans-serif;
|
||||||
font-optical-sizing: auto;
|
font-optical-sizing: auto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 40em) {
|
||||||
|
/* Bump up size of carousel content */
|
||||||
|
.banner-caption p {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#banner-1 {
|
#banner-1 {
|
||||||
background: rgba(0, 0, 0, .2) url("../images/banners/damper.jpg");
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/1.jpg");
|
||||||
background-blend-mode: darken;
|
background-blend-mode: darken;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#banner-2 {
|
#banner-2 {
|
||||||
background: rgba(0, 0, 0, .3) url("../images/banners/concrete-layout.jpg");
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/2.jpg");
|
||||||
background-blend-mode: darken;
|
background-blend-mode: darken;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#banner-3 {
|
#banner-3 {
|
||||||
background: rgba(0, 0, 0, .3) url("../images/banners/drone-cover.jpg");
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/3.jpg");
|
||||||
|
background-blend-mode: darken;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#servicesBanner {
|
||||||
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/services-banner.jpg");
|
||||||
|
background-blend-mode: darken;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#galleryBanner {
|
||||||
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/gallery-banner.jpg");
|
||||||
|
background-blend-mode: darken;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
#contactBanner {
|
||||||
|
background: rgba(0, 0, 0, 0.6) url("../images/banners/3.jpg");
|
||||||
background-blend-mode: darken;
|
background-blend-mode: darken;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 3.9 MiB |
After Width: | Height: | Size: 832 KiB |
Before Width: | Height: | Size: 203 KiB |
Before Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 99 KiB |
After Width: | Height: | Size: 124 KiB |
After Width: | Height: | Size: 76 KiB |
After Width: | Height: | Size: 88 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 18 KiB |
17
contact.php
|
@ -0,0 +1,17 @@
|
||||||
|
<?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");
|
||||||
|
?>
|
117
gallery.php
|
@ -0,0 +1,117 @@
|
||||||
|
<?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");
|
||||||
|
?>
|
|
@ -46,7 +46,7 @@
|
||||||
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
class="btn btn-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||||
id="bd-theme"
|
id="bd-theme"
|
||||||
type="button"
|
type="button"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
|
@ -113,7 +113,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<header class="container" data-bs-theme="dark">
|
<header class="container" data-bs-theme="dark">
|
||||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
|
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="navbar-brand fw-bold" href="/">EMPower Engineering Co.,Ltd</a>
|
<a class="navbar-brand fw-bold" href="/">EMPower Engineering Co.,Ltd</a>
|
||||||
<button
|
<button
|
||||||
|
@ -132,18 +132,9 @@
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="/">Home</a>
|
<a class="nav-link" href="/">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="services.php">Services</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="facility.php">Facility</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="gallery.php">Gallery</a>
|
<a class="nav-link" href="gallery.php">Gallery</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="contact.php">Contact Us</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
249
index.php
|
@ -1,22 +1,24 @@
|
||||||
<?php
|
<?php
|
||||||
include("includes/header.php");
|
include_once("includes/header.php");
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<main class="container">
|
<main>
|
||||||
<div id="mainCarousel" class="carousel slide mt-4 mb-2" data-bs-ride="carousel">
|
<div id="mainCarousel" class="carousel slide mt-2 mb-2" data-bs-ride="carousel">
|
||||||
<div class="carousel-indicators">
|
<div class="carousel-indicators">
|
||||||
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active" aria-current="true"
|
||||||
|
aria-label="Slide 1"></button>
|
||||||
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||||
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-inner rounded-4">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active" id="banner-1">
|
<div class="carousel-item active" id="banner-1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<h1 class="display-2 fw-bold text-white">Steel Fabrication</h1>
|
<h1 class="display-1 fw-bold text-white">Professional Steel Fabrication</h1>
|
||||||
<p class="text-white"> We specialize in steel fabrication, producing spare parts and assembly equipment according to customer's drawing for heavy usage and industries. </p>
|
<p class="text-white">We specialize in steel fabrication, producing spare parts and assembly
|
||||||
|
equipment according to customer's drawing for heavy usage and industries.</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-lg btn-primary" href="contact.php">Contact Us</a>
|
<a class="btn btn-lg btn-primary" href="#serviceSection">Learn More</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -24,10 +26,10 @@
|
||||||
<div class="carousel-item" id="banner-2">
|
<div class="carousel-item" id="banner-2">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<h1 class="display-2 fw-bold text-white">Trusted in Quality</h1>
|
<h1 class="display-1 fw-bold text-white">Trusted in Quality</h1>
|
||||||
<p class="text-white"> We have experience in steel fabrication for more than 30 years. We are also certified with the ISO9001:2015 standard. </p>
|
<p class="text-white">30 years of experience in steel and parts manufacturing jobs</p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-lg btn-primary" href="services.php">Learn more</a>
|
<a class="btn btn-lg btn-primary" href="gallery.php">View Gallery</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,10 +37,10 @@
|
||||||
<div class="carousel-item" id="banner-3">
|
<div class="carousel-item" id="banner-3">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="carousel-caption">
|
<div class="carousel-caption">
|
||||||
<h1 class="display-2 fw-bold text-white">Facility</h1>
|
<h1 class="display-1 fw-bold text-white">Contact</h1>
|
||||||
<p class="text-white"> We have industry standard equipments for our production lineup including CNC machines, robot welding and steel cutters. </p>
|
<p class="text-white">Want to start your steel fabrication project? We've got you covered. </p>
|
||||||
<p>
|
<p>
|
||||||
<a class="btn btn-lg btn-primary" href="facility.php">Browse gallery</a>
|
<a class="btn btn-lg btn-primary" href="#contactSection">Contact Us</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,34 +55,229 @@
|
||||||
<span class="visually-hidden">Next</span>
|
<span class="visually-hidden">Next</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="container px-4 py-5" id="featured-3">
|
<div class="container" data-bs-spy="scroll" data-bs-target="#mainNavbar">
|
||||||
|
<div id="aboutSection" class="container px-4 py-5" id="featured-3">
|
||||||
<h2 class="pb-2 border-bottom">About Us</h2>
|
<h2 class="pb-2 border-bottom">About Us</h2>
|
||||||
<div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
|
<div class="row g-4 py-4 row-cols-1 row-cols-lg-3">
|
||||||
<div class="feature col">
|
<div class="feature col">
|
||||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
<div
|
||||||
|
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||||
<i class="bi bi-info-circle"></i>
|
<i class="bi bi-info-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="fs-2 text-body-emphasis">Founding</h3>
|
<h3 class="fs-2 text-body-emphasis">Founding</h3>
|
||||||
<p> We were established on the 12th of January 2012 in Lad Krabang, Bangkok. Later moved to our current facility in Phanat Nikhom, Chon Buri. </p>
|
<p> We were established on the 12th of January 2012 in Lad Krabang, Bangkok. Later moved to our
|
||||||
|
current facility in Phanat Nikhom, Chon Buri. </p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature col">
|
<div class="feature col">
|
||||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
<div
|
||||||
|
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||||
<i class="bi bi-person-circle"></i>
|
<i class="bi bi-person-circle"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="fs-2 text-body-emphasis">Faculty</h3>
|
<h3 class="fs-2 text-body-emphasis">Faculty</h3>
|
||||||
<p> We currently have 130 employees in our company with 6 people in our engineering department and 6 people in our quality control department. </p>
|
<p> We currently have 130 employees in our company with 6 people in our engineering department and 6
|
||||||
|
people in our quality control department. </p>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature col">
|
<div class="feature col">
|
||||||
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
<div
|
||||||
|
class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
|
||||||
<i class="bi bi-pin-map"></i>
|
<i class="bi bi-pin-map"></i>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="fs-2 text-body-emphasis">Location</h3>
|
<h3 class="fs-2 text-body-emphasis">Location</h3>
|
||||||
<p> Our main office and factory is located in Nong Prue, Phanat Nikhom, Chon Buri, Thailand. <a href="https://maps.app.goo.gl/mr4cnQrVeLW8yVaDA">View our Google Maps Location.</a>
|
<p> Our main office and factory is located in Nong Prue, Phanat Nikhom, Chon Buri, Thailand. <a
|
||||||
|
href="https://maps.app.goo.gl/mr4cnQrVeLW8yVaDA">View our Google Maps Location.</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container px-4 py-2" id="icon-grid">
|
|
||||||
|
<div id="serviceSection" class="container px-4 py-5">
|
||||||
|
<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>
|
||||||
|
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
|
||||||
|
add onto it with another sentence and probably just keep going until we run out of words.</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
|
||||||
|
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
|
||||||
|
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 class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
|
||||||
|
<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
|
||||||
|
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
|
||||||
|
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">
|
||||||
|
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
|
||||||
|
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
|
||||||
|
add onto it with another sentence and probably just keep going until we run out of words.</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>
|
||||||
|
<p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll
|
||||||
|
add onto it with another sentence and probably just keep going until we run out of words.</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
|
||||||
|
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
|
||||||
|
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">
|
||||||
<h2 class="pb-2 border-bottom">Clients</h2>
|
<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">
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-3 g-4 py-5">
|
||||||
<?php
|
<?php
|
||||||
|
@ -117,12 +314,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container px-4 py-2" id="icon-grid">
|
<div id="contactSection" class="container px-4 py-2" id="icon-grid">
|
||||||
<div class="border-bottom"></div>
|
<div class="border-bottom"></div>
|
||||||
<div class="my-5 d-flex justify-content-center">
|
<div class="my-5 d-flex justify-content-center">
|
||||||
<div align="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>
|
<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">
|
<a href="contact.php">
|
||||||
<button type="button" class="btn btn-primary btn-lg">Contact Us</button>
|
<button type="button" class="btn btn-primary btn-lg">Contact Us</button>
|
||||||
|
@ -130,8 +328,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
include("includes/footer.php");
|
include_once("includes/footer.php");
|
||||||
?>
|
?>
|
17
services.php
|
@ -0,0 +1,17 @@
|
||||||
|
<?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");
|
||||||
|
?>
|