Насколько правильно я сверстал этот рисунок?

Question

[Aristotel Paskalov]

В качестве тестового задания для курсов сказали сверстать рисунок, вот как у меня это получилось:



Код этой вёрстки:


Требования:
Не использовать картинок
html / css (flexbox)
Точки центрировать с помощью flexbox
Адаптивный дизайн не нужен

Подскажите пожалуйста, насколько это "костыльная" вёрстка? Воспримут ли её нормально выполненной?

Comments

[godsplane]

Что за курсы такие?

Answer 1

[Сергей delphinpro]

На троечку. С минусом.

Вот такой разметки достаточно:

<div class="cubes">
  <div class="cube one"></div>
  <div class="cube two"></div>
  <div class="cube three"></div>
  <div class="cube four"></div>
  <div class="cube five"></div>
  <div class="cube six"></div>
</div>

Попробуйте, из спортивного интереса.

Ну или хотя бы с "точками"

<div class="cubes">
  <div class="cube one">
    <span class="point"></span>
  </div>
  <div class="cube two">
    <span class="point"></span>
    <span class="point"></span>
  </div>
  <div class="cube three">
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
  </div>
  <div class="cube four">
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
  </div>
  <div class="cube five">
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
  </div>
  <div class="cube six">
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
    <span class="point"></span>
  </div>
</div>

Comments

[Aristotel Paskalov]

Спасибо. Постараюсь сократить код

[Сергей delphinpro]

iNeextt, в помощь https://jsfiddle.net/DelphinPRO/fbyd3m9s/

Answer 2

[kryamk]

Вот игра попрактиковать флексы

Comments

[Aristotel Paskalov]

Спасибо) Нужно будет позависать на этом сайте