upcoming events test design

by John Doe

HTML

<div>Upcoming events</div>
<br>
<div class='eventBlock'>
  <div style='background-image: url("https://cataas.com/cat?width=300")' class='photo'></div>
  <div class='textBlock'>
    <div class='title'>International band Music Festival International band Music Festival</div>
    <div class='dates'>Montag 10. Oktober - Sonntag 30. Oktober</div>
    <div class='addressBlock'>
      <div class='icon'><img src='https://raw.githubusercontent.com/seanyeh/fontawesome-svgs/master/svg/map-marker-alt-solid.svg'/></div>
      <div class='address'>36 Guild Street London, UK</div>
    </div>
  </div>
</div>
<br>
<div class='moreEventsBlock'>
  <button class='moreEventsBtn'>weitere Events</button>
</div>

CSS

body {
  background-color: #ebf2f5;
  font-family: "Open Sans", Arial, sans-serif;
}

.eventBlock {
  padding: 10px 10px 5px 10px;
  background-color: #ccd8dd7d;
  border-radius: 10px;
  max-width: 312px; /*temp*/
}

.photo {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.textBlock {
  padding: 10px;
}

.title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dates {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #cd7158;
}

.addressBlock {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}

.icon {
  margin-right: 5px;
}

.icon img {
  width: 10px;
  height: 12px;
}

.address {
  
}

.moreEventsBlock {
  display: flex;
  width: 100%;
  justify-content: center;
}

.moreEventsBtn {
  font-size: 0.8125rem;
  text-align: center;
  color: #fff;
  background-color: #044362;
  border: 0;
  border-radius: 20px;
  margin-bottom: 1rem;
  padding: 8px 16px;
}