HTML-Prototype von DZNE

<div class="c-events">
  <ul class="c-events__list o-list-bare">
    <li><a class="c-events__highlight-event" href="#">
        <div class="c-events__highlight-event-date"><svg xmlns="http://www.w3.org/2000/svg" width="68.103" height="77.117" viewBox="0 0 68.103 77.117">
<path data-name="Pfad 22" d="M0,192H68.1v40.969a7.265,7.265,0,0,1-7.3,7.23H7.3a7.265,7.265,0,0,1-7.3-7.23Zm9.729,12.05v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41H12.161A2.428,2.428,0,0,0,9.729,204.05Zm19.458,0v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41H31.619A2.428,2.428,0,0,0,29.187,204.05Zm21.89-2.41a2.428,2.428,0,0,0-2.432,2.41v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41ZM9.729,223.329v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41H12.161A2.428,2.428,0,0,0,9.729,223.329Zm21.89-2.41a2.428,2.428,0,0,0-2.432,2.41v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41Zm17.026,2.41v4.82a2.428,2.428,0,0,0,2.432,2.41h4.864a2.428,2.428,0,0,0,2.432-2.41v-4.82a2.428,2.428,0,0,0-2.432-2.41H51.077A2.428,2.428,0,0,0,48.645,223.329Z" transform="translate(0 -163.081)" fill="#fff"/>
<g>
<path data-name="Pfad 23" d="M60.806,9.64h-7.3V4.82a4.865,4.865,0,0,0-9.729,0V9.64H24.322V4.82a4.865,4.865,0,0,0-9.729,0V9.64H7.3A7.265,7.265,0,0,0,0,16.869V24.1H68.1v-7.23A7.265,7.265,0,0,0,60.806,9.64Z" fill="#fa9622"/>
<path data-name="Pfad 24" d="M71.3,256H66.432A2.428,2.428,0,0,0,64,258.41v4.82a2.428,2.428,0,0,0,2.432,2.41H71.3a2.428,2.428,0,0,0,2.432-2.41v-4.82A2.428,2.428,0,0,0,71.3,256Z" transform="translate(-54.271 -217.441)" fill="#fa9622"/>
</g>
</svg>03.05.
        </div>
        <div class="c-events__highlight-event-container">
          <h3 class="c-events__highlight-event-name">DZNE Lecture Series</h3>
          <div class="c-events__highlight-event-description u-line-clamp-2">
            <p>Spannende Vorträge über Aktuelles aus unserer Forschung</p>
          </div>
          <p class="c-events__highlight-event-location"><svg class="c-events__highlight-event-icon" xmlns="http://www.w3.org/2000/svg" width="15.039" height="20" viewBox="0 0 15.039 20">
<path d="M13.786,7.519a6.266,6.266,0,0,0-12.532,0A6.825,6.825,0,0,0,1.9,10a23.953,23.953,0,0,0,1.708,3.215A57.48,57.48,0,0,0,7.523,18.7a58.187,58.187,0,0,0,3.912-5.483A24.658,24.658,0,0,0,13.143,10,6.946,6.946,0,0,0,13.786,7.519Zm1.253,0c0,3.423-4.582,9.517-6.591,12.031a1.183,1.183,0,0,1-1.856,0C4.582,17.036,0,10.942,0,7.519a7.519,7.519,0,0,1,15.039,0Zm-9.4,0a1.88,1.88,0,1,0,1.88-1.88,1.88,1.88,0,0,0-1.88,1.88Zm1.88,3.133a3.133,3.133,0,1,1,3.133-3.133A3.133,3.133,0,0,1,7.519,10.653Z" fill="#fa9622"/>
</svg>DZNE Lecture und über Lifesize
          </p>
        </div></a></li>
    <li class="c-events__regular-events-container">
      <ul class="c-events__regular-events o-list-bare">
        <li class="c-events__event"><a class="c-events__event-link" href="#">
            <h3 class="c-events__event-regular-title">06.09. | Music &amp; Brain</h3>
            <p class="c-events__event-target-group"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="20" viewBox="0 0 25 20">
<path d="M5,5A3.75,3.75,0,1,1,8.75,8.75,3.75,3.75,0,0,1,5,5Zm5.535,8.125A5.719,5.719,0,0,1,16.25,18.75h-15a5.714,5.714,0,0,1,5.715-5.625ZM8.75,10a5,5,0,1,0-5-5A5,5,0,0,0,8.75,10ZM6.965,11.875A6.963,6.963,0,0,0,0,18.84,1.16,1.16,0,0,0,1.16,20H16.34a1.16,1.16,0,0,0,1.16-1.16,6.963,6.963,0,0,0-6.965-6.965ZM23.8,20A1.2,1.2,0,0,0,25,18.8a6.3,6.3,0,0,0-6.3-6.3H16.3c-.172,0-.344.008-.516.02a8.121,8.121,0,0,1,1.2,1.23H18.7a5.051,5.051,0,0,1,5.051,5h-5v.09a2.415,2.415,0,0,1-.3,1.16ZM16.875,10a4.375,4.375,0,1,0-2.59-7.9,6.242,6.242,0,0,1,.484,1.219,3.124,3.124,0,1,1-.328,4.27,6.39,6.39,0,0,1-.664,1.129A4.366,4.366,0,0,0,16.875,10Z" fill="#fa9622"/>
</svg>für Ärzte und Betroffene
            </p></a></li>
        <li class="c-events__event"><a class="c-events__event-link" href="#">
            <h3 class="c-events__event-regular-title">10.10. | DZNE Infotag</h3>
            <p class="c-events__event-target-group"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="20" viewBox="0 0 25 20">
<path d="M5,5A3.75,3.75,0,1,1,8.75,8.75,3.75,3.75,0,0,1,5,5Zm5.535,8.125A5.719,5.719,0,0,1,16.25,18.75h-15a5.714,5.714,0,0,1,5.715-5.625ZM8.75,10a5,5,0,1,0-5-5A5,5,0,0,0,8.75,10ZM6.965,11.875A6.963,6.963,0,0,0,0,18.84,1.16,1.16,0,0,0,1.16,20H16.34a1.16,1.16,0,0,0,1.16-1.16,6.963,6.963,0,0,0-6.965-6.965ZM23.8,20A1.2,1.2,0,0,0,25,18.8a6.3,6.3,0,0,0-6.3-6.3H16.3c-.172,0-.344.008-.516.02a8.121,8.121,0,0,1,1.2,1.23H18.7a5.051,5.051,0,0,1,5.051,5h-5v.09a2.415,2.415,0,0,1-.3,1.16ZM16.875,10a4.375,4.375,0,1,0-2.59-7.9,6.242,6.242,0,0,1,.484,1.219,3.124,3.124,0,1,1-.328,4.27,6.39,6.39,0,0,1-.664,1.129A4.366,4.366,0,0,0,16.875,10Z" fill="#fa9622"/>
</svg>für Ärzte und Betroffene
            </p></a></li>
        <li class="c-events__event"><a class="c-events__event-link" href="#">
            <h3 class="c-events__event-regular-title">12.12. | Music &amp; Brain</h3>
            <p class="c-events__event-target-group"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="20" viewBox="0 0 25 20">
<path d="M5,5A3.75,3.75,0,1,1,8.75,8.75,3.75,3.75,0,0,1,5,5Zm5.535,8.125A5.719,5.719,0,0,1,16.25,18.75h-15a5.714,5.714,0,0,1,5.715-5.625ZM8.75,10a5,5,0,1,0-5-5A5,5,0,0,0,8.75,10ZM6.965,11.875A6.963,6.963,0,0,0,0,18.84,1.16,1.16,0,0,0,1.16,20H16.34a1.16,1.16,0,0,0,1.16-1.16,6.963,6.963,0,0,0-6.965-6.965ZM23.8,20A1.2,1.2,0,0,0,25,18.8a6.3,6.3,0,0,0-6.3-6.3H16.3c-.172,0-.344.008-.516.02a8.121,8.121,0,0,1,1.2,1.23H18.7a5.051,5.051,0,0,1,5.051,5h-5v.09a2.415,2.415,0,0,1-.3,1.16ZM16.875,10a4.375,4.375,0,1,0-2.59-7.9,6.242,6.242,0,0,1,.484,1.219,3.124,3.124,0,1,1-.328,4.27,6.39,6.39,0,0,1-.664,1.129A4.366,4.366,0,0,0,16.875,10Z" fill="#fa9622"/>
</svg>für Ärzte und Betroffene
            </p></a></li>
      </ul>
      <div class="c-events__overview-button-container"><a class="c-events__overview-button" href="#">Zur Terminübersicht</a></div>
    </li>
  </ul>
</div>