Легенда для карты

by Anatoly Kulikov

HTML

<div class="legendmap">
  <div class="legendmap__element">
     <i class="agree"></i>
     <p>Соглашения</p>
  </div>
  <div class="legendmap__element">
     <i class="project"></i>
     <p>Проекты</p>
  </div>
  <div class="legendmap__element">
     <i class="news"></i>
     <p>Новости</p>
  </div>
  <div class="legendmap__element">
     <i class="agree-project"></i>
     <p>Соглашения + Проекты</p>
  </div>
  <div class="legendmap__element">
     <i class="agree-news"></i>
     <p>Соглашения + Новости</p>
  </div>
  <div class="legendmap__element">
     <i class="project-news"></i>
     <p>Проекты + Новости</p>
  </div>
  <div class="legendmap__element">
     <i class="agree-project-news"></i>
     <p>В ассортименте</p>
  </div>
</div>

CSS

.legendmap {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
}
.legendmap__element {
  display: flex;
  align-items: center;
  width: 31%;
  margin: 1%;
}
.legendmap__element > i {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.legendmap__element > p {
  display: block;
  margin: 0;
}

.agree {
  background: #99CC99;
}
.project {
  background: #66CCCC;
}
.news {
  background: #3399FF;
}
.agree-project {
  background: #669966;
}
.agree-news {
  background: #6699CC;
}
.project-news {
  background: #669999;
}
.agree-project-news {
  background: #663399;
}