viliksar

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

Recommended Posts

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

b37117870950d167446c8e24eafe79da.jpg

Edited by viliksar

Share this post


Link to post
Share on other sites

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

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"

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,382
    Total Members
    3,128
    Most Online
    VlGo
    Newest Member
    VlGo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.