viliksar

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

Рекомендованные сообщения

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

b37117870950d167446c8e24eafe79da.jpg

Изменено пользователем viliksar

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

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"

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Не пропустите! Сэкономьте до 90% на лучших курсах 2018 года.