<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="section dark" id="upcomingEvents"> <h2 class="section-title">Upcoming Events</h2> <div class="accordion" id="upcomingEventsAccordion"> <div class="card"> <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <div class="date"> <div class="number"><span>09</span></div> <div class="day-month"> <span class="day">Wed</span> <span class="month">Sep</span> </div> </div> <div class="title"> <h2> Test Event 1 <span class="divider">/</span> <span class="sub">Webinar</span> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-compact-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67z" /> </svg> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-compact-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M7.776 5.553a.5.5 0 0 1 .448 0l6 3a.5.5 0 1 1-.448.894L8 6.56 2.224 9.447a.5.5 0 1 1-.448-.894l6-3z" /> </svg> </h2> </div> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#upcomingEventsAccordion"> <div class="card-body"> <p>Wed, Sep 9, 2020 10:29 PM</p> <p>Test Event Location 1</p> <p class="dont-miss">Short Teaser for test event 1</p> </div> </div> </div> </div> </section>

#upcomingEvents { padding-bottom: 0; padding-left: 20px; padding-right: 20px; } #upcomingEvents .accordion .card { border: none; font-family: "Barlow", sans-serif; letter-spacing: 0px; border-bottom: 5px solid #fff; } #upcomingEvents .accordion .card-header { border-bottom: none; border-top: 5px solid #fff; background-color: #012644; color: #fff; display: flex; align-items: center; min-height: 75px; cursor: pointer; padding: 1.5rem 1rem 1.5rem 0; margin-top: -5px; transition: all 0.5s; } #upcomingEvents .accordion .card-header svg { margin-left: 10px; } #upcomingEvents .accordion .card-header:hover .date, #home-page #upcomingEvents .accordion .card-header:not(.collapsed) .date { width: 0px; padding: 0; overflow: hidden; transition: all 0.3s; } #upcomingEvents .accordion .card-header:hover h2, #home-page #upcomingEvents .accordion .card-header[aria-expanded="true"] h2 { color: #B4B4B4; } #upcomingEvents .accordion .card-header[aria-expanded="true"] .bi-chevron-compact-up { display: inline; } #upcomingEvents .accordion .card-header[aria-expanded="true"] .bi-chevron-compact-down { display: none; } #upcomingEvents .accordion .date { display: flex; align-items: center; padding-right: 1rem; width: 125px; } #upcomingEvents .accordion .day-month { display: flex; flex-direction: column; } #upcomingEvents .accordion .day-month span { font-size: 0.7rem; line-height: 1.3; } #upcomingEvents .accordion .number { font-size: 2.1rem; padding-right: 10px; line-height: 1; font-weight: 200; } #upcomingEvents .accordion .title h2 { font-size: 1.3rem; margin: 0; color: #fff; text-transform: capitalize; letter-spacing: 0px; font-weight: 300; } #upcomingEvents .accordion .title .sub { font-size: 0.8rem; } #upcomingEvents .accordion .bi-chevron-compact-up { display: none; } #upcomingEvents .accordion .card-body { background-color: #012644; color: #fff; margin-bottom: -5px; border-bottom: 5px solid #B4B4B4; } #upcomingEvents .accordion .card-body p { margin-bottom: 0; font-size: 0.8rem; } #upcomingEvents .accordion .card .card-header:not(.collapsed) { border-top: 5px solid #B4B4B4; border-bottom: none; } .section.dark { background-color: #012644; padding-top: 4rem; margin-top: 5rem; } .section.dark .section-title { color: #fff; } .section .section-title { text-align: center; margin-bottom: 4rem; text-transform: capitalize; font-size: 2rem; }