@iNeextt

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

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

QC9OYvm.png

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


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

Подскажите пожалуйста, насколько это "костыльная" вёрстка? Воспримут ли её нормально выполненной?
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
На троечку. С минусом.

Вот такой разметки достаточно:
<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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
kryamk
@kryamk
Вот игра попрактиковать флексы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы