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

@@ -14,3 +14,11 @@ body {
@media (min-width: 992px) { @media (min-width: 992px) {
.rounded-lg-3 { border-radius: .3rem; } .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,36 +165,11 @@
</div> </div>
<main> <main>
<div> <div class="container col-xxl-8 px-4 py-5">
<div class="col-12"> <div id="service" class="text-center pt-5">
<h1 class="display-4 fw-bold lh-1 mb-3">Service</h1> <h1 class="display-2 fw-bold lh-1 mb-3">Service</h1>
</div> </div>
<div id="service" class="container col-xxl-8 px-4 py-5"> <!-- 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-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>
</div>
<div <div
class="row flex-lg-row-reverse align-items-center g-5 py-5" class="row flex-lg-row-reverse align-items-center g-5 py-5"
> >
@@ -209,103 +184,309 @@
/> />
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h2 class="display-6 fw-bold lh-1 mb-3"> <h2 class="display-5 fw-bold lh-1 mb-3">Scheduling</h2>
Work orders
</h2>
<p> <p>
Here is a blurb about wo. Perhaps even an image Here is a blurb about scheduling. Sed ut
need some lorem text here 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> </p>
</div> </div>
</div> </div>
</div> <!-- item -->
<!-- <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.
</p>
<div <div
class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5" class="row flex-lg-row-reverse align-items-center g-5 py-5"
> >
<button <div class="col-10 col-sm-8 col-lg-6">
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 <img
src="/r/image/logo.svg" src="/r/image/ss-overview.png"
class="img-fluid border rounded-3 shadow-lg mb-4" class="d-block mx-lg-auto img-fluid"
alt="Example image" alt="Bootstrap Themes"
width="700" width="700"
height="500" height="500"
loading="lazy" loading="lazy"
/> />
</div> </div>
</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>
<h3 class="display-5 fw-bold">Quotes</h3> <p>
<div class="col-lg-6 mx-auto"> "Sed ut perspiciatis unde omnis iste natus error sit
<p class="lead mb-4"> voluptatem accusantium doloremque laudantium, totam
Quickly design and customize responsive mobile-first rem aperiam, eaque ipsa quae ab illo inventore
sites with Bootstrap, the worlds most popular veritatis et quasi architecto beatae vitae dicta
front-end open source toolkit, featuring Sass sunt explicabo. Nemo enim ipsam voluptatem quia
variables and mixins, responsive grid system, voluptas sit aspernatur aut odit aut fugit, sed quia
extensive prebuilt components, and powerful consequuntur magni dolores eos qui ratione
JavaScript plugins. 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>
</div>
</div>
<!-- /item -->
<!-- item -->
<div <div
class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5" class="row flex-lg-row-reverse align-items-center g-5 py-5"
> >
<button <div class="col-10 col-sm-8 col-lg-6">
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 <img
src="/r/image/logo.svg" src="/r/image/ss-overview.png"
class="img-fluid border rounded-3 shadow-lg mb-4" class="d-block mx-lg-auto img-fluid"
alt="Example image" alt="Bootstrap Themes"
width="700" width="700"
height="500" height="500"
loading="lazy" loading="lazy"
/> />
</div> </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>
</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>
<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>
</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 -->
<!-- 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> </main>
<footer class="footer mt-auto py-5 border-top"> <footer class="footer mt-auto py-5 border-top">