Completed Image
|
@ -0,0 +1 @@
|
|||
.history/
|
|
@ -18,7 +18,7 @@ body {
|
|||
}
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
bottom: 3rem;
|
||||
bottom: 6rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,3 +6,29 @@ html, body {
|
|||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#banner-1 {
|
||||
background: rgba(0, 0, 0, .2) url("../images/banners/damper.jpg");
|
||||
background-blend-mode: darken;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#banner-2 {
|
||||
background: rgba(0, 0, 0, .3) url("../images/banners/concrete-layout.jpg");
|
||||
background-blend-mode: darken;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#banner-3 {
|
||||
background: rgba(0, 0, 0, .3) url("../images/banners/drone-cover.jpg");
|
||||
background-blend-mode: darken;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#companyLogo {
|
||||
max-width: 100%;
|
||||
height: 100px;
|
||||
}
|
After Width: | Height: | Size: 203 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 812 KiB |
After Width: | Height: | Size: 7.6 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 9.0 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 8.3 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 4.7 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 8.6 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 9.6 KiB |
After Width: | Height: | Size: 3.4 KiB |
|
@ -1,8 +1,8 @@
|
|||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<footer class="container border-top pt-4">
|
||||
<p class="float-end"><a href="#">Back to top</a></p>
|
||||
<p>
|
||||
© 2005-2024 EMPower Engineering Co.,Ltd
|
||||
© 2012-2024 EMPower Engineering Co.,Ltd
|
||||
</p>
|
||||
</footer>
|
||||
<script
|
||||
|
|
|
@ -113,9 +113,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
<header class="container" data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">EMPower Engineering Co.,Ltd</a>
|
||||
<a class="navbar-brand fw-bold" href="/">EMPower Engineering Co.,Ltd</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
|
@ -136,7 +136,7 @@
|
|||
<a class="nav-link" href="services.php">Services</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="facilities.php">Facilities</a>
|
||||
<a class="nav-link" href="facility.php">Facility</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="gallery.php">Gallery</a>
|
||||
|
|
289
index.php
|
@ -3,174 +3,133 @@
|
|||
?>
|
||||
|
||||
<main class="container">
|
||||
<div id="mainCarousel" class="carousel slide mt-4 mb-4" data-bs-ride="carousel">
|
||||
<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="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#mainCarousel"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
<div class="carousel-inner rounded-4">
|
||||
<div class="carousel-item active">
|
||||
<svg
|
||||
class="bd-placeholder-img"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
/>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Example headline.</h1>
|
||||
<p class="opacity-75">
|
||||
Some representative placeholder content for the first slide of
|
||||
the carousel.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="#">Sign up today</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
class="bd-placeholder-img"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
/>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Another example headline.</h1>
|
||||
<p>
|
||||
Some representative placeholder content for the second slide
|
||||
of the carousel.
|
||||
</p>
|
||||
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg
|
||||
class="bd-placeholder-img"
|
||||
width="100%"
|
||||
height="100%"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
focusable="false"
|
||||
>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="var(--bs-secondary-color)"
|
||||
/>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>One more for good measure.</h1>
|
||||
<p>
|
||||
Some representative placeholder content for the third slide of
|
||||
this carousel.
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="#">Browse gallery</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="carousel-control-prev"
|
||||
type="button"
|
||||
data-bs-target="#mainCarousel"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button
|
||||
class="carousel-control-next"
|
||||
type="button"
|
||||
data-bs-target="#mainCarousel"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<h2 class="pb-2 border-bottom">About Us</h2>
|
||||
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
|
||||
<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">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
<div id="mainCarousel" class="carousel slide mt-4 mb-2" data-bs-ride="carousel">
|
||||
<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="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Founding</h3>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<div class="carousel-inner rounded-4">
|
||||
<div class="carousel-item active" id="banner-1">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1 class="display-2 fw-bold text-white">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>
|
||||
<a class="btn btn-lg btn-primary" href="contact.php">Contact Us</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" id="banner-2">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1 class="display-2 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>
|
||||
<a class="btn btn-lg btn-primary" href="services.php">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" id="banner-3">
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1 class="display-2 fw-bold text-white">Facility</h1>
|
||||
<p class="text-white"> We have industry standard equipments for our production lineup including CNC machines, robot welding and steel cutters. </p>
|
||||
<p>
|
||||
<a class="btn btn-lg btn-primary" href="facility.php">Browse gallery</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Faculty</h3>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
<i class="bi bi-pin-map"></i>
|
||||
</div>
|
||||
<h3 class="fs-2 text-body-emphasis">Location</h3>
|
||||
<p>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="icon-link">
|
||||
Call to action
|
||||
<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="container px-4 py-5" id="featured-3">
|
||||
<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="feature col">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<i class="bi bi-pin-map"></i>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-4 py-2" id="icon-grid">
|
||||
<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
|
||||
$files = array(
|
||||
"assets/images/logo/arb.jpg",
|
||||
"assets/images/logo/carpenter.jpg",
|
||||
"assets/images/logo/cpac.jpg",
|
||||
"assets/images/logo/herrenknecht.jpg",
|
||||
"assets/images/logo/t.jpg",
|
||||
"assets/images/logo/top.jpg",
|
||||
"assets/images/logo/ts.jpg",
|
||||
"assets/images/logo/ariya.jpg",
|
||||
"assets/images/logo/cd.png",
|
||||
"assets/images/logo/danieli.jpg",
|
||||
"assets/images/logo/packsys.jpg",
|
||||
"assets/images/logo/tft.jpg",
|
||||
"assets/images/logo/toprofit.jpg",
|
||||
"assets/images/logo/tyk.jpg",
|
||||
"assets/images/logo/bohringer.jpg",
|
||||
"assets/images/logo/civil.jpg",
|
||||
"assets/images/logo/fellow.jpg",
|
||||
"assets/images/logo/striker.png",
|
||||
"assets/images/logo/tm.jpg",
|
||||
"assets/images/logo/transpower.png"
|
||||
);
|
||||
|
||||
foreach ($files as $file) {
|
||||
echo '<div class="col d-flex justify-content-center">';
|
||||
echo ' <img id="companyLogo" src="' . $file . '" alt="' . basename($file, ".jpg") . '" class="bi text-body-secondary flex-shrink-0 me-3" >';
|
||||
echo '</div>';
|
||||
echo "\n";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container px-4 py-2" id="icon-grid">
|
||||
<div class="border-bottom"></div>
|
||||
<div class="my-5 d-flex justify-content-center">
|
||||
<div align="center">
|
||||
<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">
|
||||
<button type="button" class="btn btn-primary btn-lg">Contact Us</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php
|
||||
|
|