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