Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Startbootstrap - Business Casual - dynamic opening hours
.opening-hours-section {
&.cta {
padding: 3rem 0 2.5rem 0;
background-color: fade-out($primary, 0.1);
.cta-inner {
position: relative;
padding: 2rem;
margin: 0.5rem;
background-color: fade-out($white, 0.15);
&:before {
border-radius: 0.5rem;
content: '';
position: absolute;
top: -0.5rem;
bottom: -0.5rem;
left: -0.5rem;
right: -0.5rem;
border: 0.25rem solid fade-out($white, 0.15);
}
a {
position: relative;
}
}
}
.section-heading {
.section-heading-upper {
display: block;
font-size: 1rem;
font-weight: 800;
}
.section-heading-lower {
display: block;
font-size: 3rem;
font-weight: 100;
}
}
.list-hours {
font-size: 0.9rem;
.list-hours-item {
border-bottom: 1px solid fade-out($primary, 0.5);
padding-bottom: .25rem;
margin-bottom: 1rem;
font-style: italic;
&.today {
font-weight: bold;
color: $primary;
}
}
@media(min-width: 992px) {
width: 50%;
font-size: 1.1rem;
}
}
.address {
strong {
font-size: 1.2rem;
}
}
}
<?php
// determine current weekday
function getCurrentDayClass($number) {
return $number == date('N', strtotime(date("Y-m-d"))) ? ' today' : '';
}
?>
<!-- Opening Hours -->
<section class="opening-hours-section cta" id="opening-hours">
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<div class="cta-inner text-center rounded">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Come on in</span>
<span class="section-heading-lower">We're open</span>
</h2>
<ul class="list-unstyled list-hours mb-4 text-left mx-auto">
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(1); ?>">Monday<span class="ml-auto">Closed</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(2); ?>">Tuesday<span class="ml-auto">7:00 AM to 8:00 PM</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(3); ?>">Wedneyday<span class="ml-auto">7:00 AM to 8:00 PM</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(4); ?>">Thursday<span class="ml-auto">7:00 AM to 8:00 PM</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(5); ?>">Friday<span class="ml-auto">7:00 AM to 8:00 PM</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(6); ?>">Saturday<span class="ml-auto">9:00 AM to 5:00 PM</span></li>
<li class="list-unstyled-item list-hours-item d-flex<?php echo getCurrentDayClass(7); ?>">Sunday<span class="ml-auto">Closed</span></li>
</ul>
<p class="address mb-4">
<em><strong>1116 Orchard Street</em><br>Golden Valley, Minnesota
</p>
<p class="mb-0">
<small>
<em>Call Anytime<br>(317) 585-8468</em>
</small>
</p>
</div>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment