This commit is contained in:
2022-07-24 22:30:12 +00:00
parent 2053101d46
commit 139b40bfc7
2 changed files with 316 additions and 127 deletions

View File

@@ -13,4 +13,12 @@ body {
@media (min-width: 992px) {
.rounded-lg-3 { border-radius: .3rem; }
}
.gz-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

View File

@@ -165,147 +165,328 @@
</div>
<main>
<div>
<div class="col-12">
<h1 class="display-4 fw-bold lh-1 mb-3">Service</h1>
<div class="container col-xxl-8 px-4 py-5">
<div id="service" class="text-center pt-5">
<h1 class="display-2 fw-bold lh-1 mb-3">Service</h1>
</div>
<div id="service" class="container col-xxl-8 px-4 py-5">
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-6 fw-bold lh-1 mb-3">
Scheduling
</h2>
<p>
Here is a blurb about scheduling. Perhaps even
an image need some lorem text here
</p>
</div>
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-6 fw-bold lh-1 mb-3">
Work orders
</h2>
<p>
Here is a blurb about wo. Perhaps even an image
need some lorem text here
</p>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">Scheduling</h2>
<p>
Here is a blurb about scheduling. Sed ut
perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?
</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
</div>
</div>
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">Work orders</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
</div>
</div>
<!-- <div id="service2" class="px-4 pt-5 my-5 text-center border-bottom">
<h3 class="display-5 fw-bold">Work orders</h3>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
Quickly design and customize responsive mobile-first
sites with Bootstrap, the worlds most popular
front-end open source toolkit, featuring Sass
variables and mixins, responsive grid system,
extensive prebuilt components, and powerful
JavaScript plugins.
<!-- /item -->
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">Quotes</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
<div
class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"
>
<button
type="button"
class="btn btn-primary btn-lg px-4 me-sm-3"
>
Primary button
</button>
<button
type="button"
class="btn btn-outline-secondary btn-lg px-4"
>
Secondary
</button>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh">
<div class="container px-5">
<img
src="/r/image/logo.svg"
class="img-fluid border rounded-3 shadow-lg mb-4"
alt="Example image"
width="700"
height="500"
loading="lazy"
/>
</div>
</div>
<!-- /item -->
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<h3 class="display-5 fw-bold">Quotes</h3>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">
Quickly design and customize responsive mobile-first
sites with Bootstrap, the worlds most popular
front-end open source toolkit, featuring Sass
variables and mixins, responsive grid system,
extensive prebuilt components, and powerful
JavaScript plugins.
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">
Preventive maintenance
</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
<div
class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"
>
<button
type="button"
class="btn btn-primary btn-lg px-4 me-sm-3"
>
Primary button
</button>
<button
type="button"
class="btn btn-outline-secondary btn-lg px-4"
>
Secondary
</button>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh">
<div class="container px-5">
<img
src="/r/image/logo.svg"
class="img-fluid border rounded-3 shadow-lg mb-4"
alt="Example image"
width="700"
height="500"
loading="lazy"
/>
</div>
</div>
<!-- /item -->
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">Contracts</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
</div>
</div>
<!-- /item -->
</div> -->
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">
Customer service requests
</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
</div>
</div>
<!-- /item -->
<!-- item -->
<div
class="row flex-lg-row-reverse align-items-center g-5 py-5"
>
<div class="col-10 col-sm-8 col-lg-6">
<img
src="/r/image/ss-overview.png"
class="d-block mx-lg-auto img-fluid"
alt="Bootstrap Themes"
width="700"
height="500"
loading="lazy"
/>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold lh-1 mb-3">
Customer Unit service history
</h2>
<p>Here is a blurb about wo.</p>
<p>
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?"
</p>
</div>
</div>
<!-- /item -->
</div>
<!-- end of service block -->
</main>
<footer class="footer mt-auto py-5 border-top">