Add a quick report link which shows at the top on mobile
This commit is contained in:
parent
31ca1a2f45
commit
d19c3fe265
1 changed files with 40 additions and 0 deletions
|
|
@ -14,6 +14,13 @@
|
|||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.quick-report-mobile {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.quick-report-desktop {
|
||||
background-color: #ffefd5;
|
||||
border-left: 4px solid #ff9800;
|
||||
}
|
||||
{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Header -->
|
||||
|
|
@ -47,6 +54,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Report for Mobile - Only visible on small screens -->
|
||||
<section class="py-3 quick-report-mobile d-md-none">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h4 class="mb-2">On the go?</h4>
|
||||
<a href="/service-request-quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
|
||||
<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="py-5">
|
||||
|
|
@ -101,6 +121,25 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Report for Desktop - Only visible on medium screens and up -->
|
||||
<div class="row mt-4 d-none d-md-block">
|
||||
<div class="col-12">
|
||||
<div class="card quick-report-desktop">
|
||||
<div class="card-body py-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h5 class="mb-1">Need to make a quick report?</h5>
|
||||
<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
||||
<a href="/service-request-quick" class="btn btn-warning">Quick Report</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -118,4 +157,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue