Барбершоп ''Бородинский''

[viliksar]

Попал в неловкую ситуацию в базовом курсе от html академии. В вебинаре верстают шаблон Барбершоп ''Бородинский'', ну так вот в демке есть свой код, который создает подстветку блоков(демки у меня нет естественно). Фон просто напросто задали background(jpg макет), ну и подсветка идет поверх фона. Сетка на float. хочется полноценно идти по курсу и применить на практике знания. Кто проходил этот курс, поделитесь опытом пожалуйста.

Edited March 6, 2018 by viliksar

[mrnobody]

/*======================================
 Системное оформление - не изменять
=======================================*/

body {
  padding: 3px;
}

body > *,
body > * > *,
body > * > * > * {
  position: relative;
}

body > *::before,
body > * > *::before,
body > * > * > *::before {
  display: none;
}

body > *::before {
  top: -3px;
  left: -3px;
}

body > * > *::before {
  top: -3px;
  left: -3px;
}

body > * > * > *::before {
  top: 0;
  left: 0;
}

body > * {
  background: rgba(0, 128, 0, 0.2);
  box-shadow: 0 0 0 3px green;
}

body > *::before {
  color: white;

  background: green;
}

body > * > * {
  background: rgba(255, 45, 82, 0.2);
  box-shadow: 0 0 0 3px rgb(255, 45, 82);
}

body > * > *::before {
  color: white;

  background: rgb(255, 45, 82);
}

body > * > * > * {
  background: rgba(234, 255, 45, 0.2);
  box-shadow: inset 0 0 0 2px rgb(234, 255, 45);

}

body > * > * > *::before {
  color: black;

  background: rgb(234, 255, 45);
}

.main-header::before {
  content: ".main-header";
}

.container::before {
  content: ".container";
}

.main-header .container::before {
  top: auto;
  bottom: -28px;
}

.main-navigation::before {
  content: ".main-navigation";
}

.user-block::before {
  content: ".user-block";
}

.index-logo::before {
  content: ".index-logo";
}

.features::before {
  content: ".features";
  top: -28px;
}

.features-item::before {
  content: ".features-item";
}

.index-content::before {
  content: ".index-content";
}

.index-content-left::before {
  content: ".index-content-left";
  left: auto;
  right: 0;
}

.index-content-right::before {
  content: ".index-content-right";
  left: auto;
  right: 0;
}

.main-footer::before {
  content: ".main-footer";
}

.main-footer .container::before {
  top: -28px;
}

.footer-contacts::before {
  content: ".footer-contacts";
}

.footer-social::before {
  content: ".footer-social";
}

.footer-copyright::before {
  content: ".footer-copyright";
}

вот что у них есть в конце файла, но код в демках может различаться ,я был на потоке "HTML и CSS #14"

[viliksar]

mrnobody

Благодарю!

[htmlacademy]

Ой, лучше в свежем потоке поучаствуйте, а то уже почти год всё на флексах в курсе сделано. =)