Organizer Page

by Javid Jamae

HTML

<div class="Organizer">
  <div class="top-banner section">
    Image goes here
  </div>
  
  <div class="section description">
    This is a description
  </div>
  
  <div class="section statistics">
    Some stats
  </div>
  
  <div class="section speakers h-container">
    <h1>
      Past and upcoming speakers
    </h1>
    <div class="speakers-row v-container-center">
        <div class="speaker h-container">
          Speaker 1
        </div>
        <div class="speaker h-container">
          Speaker 2
        </div>
        <div class="speaker h-container">
          Speaker 3
        </div>
    </div>
  </div>

  <div class="section event-hosts">
    Some hosts
  </div>
  
</div>

CSS

.h-container {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.v-container-center {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
}

.Organizer {
  border: 1px solid red;
}

.Organizer .section {
  padding: 5em;
}

.Organizer .top-banner {
  border: 1px solid blue;
}

.Organizer .description {
  border: 1px solid blue;
}

.Organizer .speakers {
  background-color: lightblue;
}

.Organizer .speakers .speakers-row {
  flex-wrap: wrap;
  width: 80%;
  max-width: 40em;
  padding: 1em 0;
  -ms-flex-align: start;
  align-items: flex-start;
}