Bootstrap 4

by Dug Sohn

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="https://tilt-vep-themes.s3.amazonaws.com/darpa-forward-2022.css">
<div class="event-info">
  <h1 class="text-center">
    Event Banner
  </h1>
  <div class="container">

    <div class="event-info-banner">
      <div class="col">
        <div class="event-info-date">
          <h5>
            Wednesday<br />
            September 13, 2022
          </h5>
        </div>
        <div class="event-info-details">
          <h3 class="event-info-time p-4">
            11:15am-11:25am
          </h3>
          <h2 class="event-info-type p-4">
            Event Type
          </h2>
          <h4 class="event-info-description p-4">
            Secure Handhelds on Assured Resilient Networks at the Tactical Edge (SHARE)
          </h4>
          <button class="event-info-join btn btn-outline-light btn-lg btn-block p-2">
          JOIN NOW!
          </button>
        </div>
      </div>
      <div class="event-info-footer">
        <div class="row">
          <div class="col-12">
            <img src="https://tilt-vep-images.s3.amazonaws.com/clients/darpa/darpa-forward-2022/lobby/info/Infopanel_AnimatedLogo.gif" width="100%">
          </div>
        </div>
      </div>

    </div>
  </div>

SCSS

.event-info-banner {
  background: #1e1e1e url("https://tilt-vep-images.s3.amazonaws.com/clients/darpa/darpa-forward-2022/lobby/info/InfoPanelBG.jpg") no-repeat;
  background-size: 100%;
  width: 310px;
  height: 730px;
  margin: 0 auto;
  position: relative;
  color: var(--white);

.event-info-date h5 {
  color: var(--white);
  font-size: 18px;
  padding-top: 40px;
  font-weight: 700;
}
  
 .event-info-details {
   border: 1px solid #8a949c;
   height: 435px;
   background: rgb(0, 0, 0);
   background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(19, 46, 87, 0.65) 100%);
   margin-top: 30px;
   overflow: hidden;
   position: relative;
   
   .event-info-time {
     font-size: 22px;
     font-weight: 800;
     border-bottom: 1px solid #8a949c;
   }
   .btn {
     position: absolute;
     width: 100%;
     border-radius: 0;
     bottom: -1px;
     border-right: 0;
     border-left: 0;
   }
   
   .event-info-type  {
     font-size: 30px;
     font-weight: 800;
     letter-spacing: 0.01em;
     margin-bottom: 0;
     padding-bottom: 10px !important;
   }
 
   .event-info-description {
     font-size: 26px;
     line-height: 36px;
     color: #d1d2d3;
          font-style: italic;
          padding-top: 10px !important;
   }
 }



.event-info-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
}