How to pop a child element out of a parent?

W

whitepro2132017-09-06 20:09:38

css

whitepro213, 2017-09-06 20:09:38

I can’t force out a child element (the "static" block, it should show off against the background of the "main-header__logo" block) from the parent (the "static-and-quality" block), I used a negative margin, I already wanted to use the absolute, but common sense stopped me . What other ways are there to "crowd out"? I would also appreciate advice on the rest of the shit I wrote)
HTML (don't judge BEM and semantic tags too harshly until you figure out how to use them)

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barbershop</title>
</head>
<body>
  <div class="wrapp">
    <header class="main-header">
      <div class="main-header__container">
        <nav class="main-header__nav">
          <ul class="nav__go">
            <li class="nav__li"><a href="index.html" class="nav__a">Главная</a></li>
            <li class="nav__li"><a href="#" class="nav__a">Наши работы</a></li>
            <li class="nav__li"><a href="#" class="nav__a">Записаться</a></li>
            <li class="nav__li"><a href="#" class="nav__a">Контакты</a></li>
            <li class="nav__li"><a href="#" class="nav__a">Html Academy</a></li>
          </ul>
          <ul class="nav__login">
            <li class="nav__li"><a href="#" class="nav__a">Вход</a></li>
          </ul>
        </nav>
      </div>
      <section class="main-header__logo">
        <div class="logo__container">
          <h3 class="logo__speciality">Barbershop</h3>
          <h2 class="logo__name"><span class="rhombus-left"></span>Borodinski<span class="rhombus-right"></span></h2>
          <img src="object/logo__img.png" alt="" class="logo__img">
        </div>
      </section>
    </header>


    <main class="main-content">
      <section class="static-and-quality">
        <div class="static">
          <div class="static__title-container">
            <h3 class="static__title">Стрижка у нас это выгодно!</h3>
            <p class="static__text">Мужская стрижка требует точного подхода. Обратимся <br> к статистике:</p><br>
            <span class="static__carefull">* — приведённые данные ложь</span>
          </div>
          <div class="static__quality">
            <div class="quality__row-top">
              <div class="quality__item quality__item--color1">
                <span class="quality__number quality__number--star">1 500</span>
                <br>
                <span class="quality__tagline">рублей вложений</span>
              </div>
              <div class="quality__item quality__item--color2">
                <span class="quality__number">7 200</span>
                <br>
                <span class="quality__tagline">секунд времени мастера</span>
              </div>
            </div>
            <div class="quality__row-bottom">
              <div class="quality__item quality__item--color3">
                <span class="quality__number">90 000</span>
                <br>
                <span class="quality__tagline">постриженных волос</span>
              </div>
              <div class="quality__item quality__item--color1">
                <span class="quality__number quality__number--star">500 000</span>
                <br>
                <span class="quality__tagline">лайков и комплиментов</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </div> 
</body>
</html>

css

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

@font-face {
  font-family: "SatisfyRegular";
  src: url("../fonts/SatisfyRegular/satisfy-regular.eot");
  src: url("../fonts/SatisfyRegular/satisfy-regular.eot?#iefix")format("embedded-opentype"),
  url(../fonts/SatisfyRegular/satisfy-regular.woff)format("woff"),
  url(../fonts/SatisfyRegular/Satisfy-Regular.ttf)format("truetype");
  font-style: normal;
  font-weight: normal;
}

* {
  box-sizing: border-box;
}

body{
  font-family: 'PT Sans Narrow', sans-serif;
}

/*-------MAIN-NAV-------*/
.main-header__container {
  min-height: 70px;
  background-color: #000;
  font-weight: bold;
}

.main-header__nav {
  width: 960px;
  margin: 0 auto;
}

.main-header__nav:after {
  content: "";
  display: block;
  clear: both;
}

.nav__go {
  float: left;
  font-size: 0px;
}

.nav__li {
  font-size: 18px;
  display: inline-block;
  list-style: none;
  transition: 0.3s;
}

.nav__li:hover {
  background-color: #826550;
}

.nav__a {
  display: inline-block;
  padding: 30px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -.2px;
  word-spacing: -.9px;
  border: 9px solid transparent;
  transition: 0.3s;
}

.nav__a:active {
  border: 9px solid #826550;
}

.nav__login {
  float: right;
}
/*-------MAIN-NAV-------*/



/*-------LOGO-------*/
.main-header__logo {
  min-height: 650px;
  padding: 60px 0 430px;
  background-image: url(../object/background-header-logo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /*Сократить код фона и поставить норм позиционирование*/
  color: #fff;
}

.logo__container {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}

.logo__speciality {
  margin-bottom: 25px;
  font-family: "SatisfyRegular";/*Подключить и поставить рукописный шрифт*/
  font-size: 36px;
  font-style: italic;/*Посмотреть сокрашенную запись*/
}

.logo__name {
  display: inline-block;
  margin: 0 -20px 0;
  font-size: 46px;
  font-family: 'Fjalla One', sans-serif;
  font-weight: bold;
  letter-spacing: 13px;
  text-shadow: 4px 3px 0px #000, 6px 4px 0px #636466;
  text-transform: uppercase;

}

.rhombus-left,
.rhombus-right {
  content: "";
  display: inline-block;
  margin: 15px 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  text-shadow: 4px 3px 0px #000, 6px 4px 0px #636466;
  /* Rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* Rotate Origin */
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.rhombus-left {
  float: left;

}

.rhombus-right {
  float: right;
}

.logo__img {
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}
/*-------LOGO-------*/

.static-and-quality {
  height: 555px;
  background-color: #353535;
}

.static {
  width: 960px;
  margin: -160px auto 0;
  position: relative;
  background-color: transparent;
}

.static::after {
  content: "";
  display: block;
  clear: both;
}

.static__title-container {
  max-width: 320px;
  max-height: 315px;
  min-height: 315px;
  padding: 25px 40px 35px 25px;
  position: relative;
  float: left;
  background-color: #fff;
}

.static__title {
  padding: 0 0 55px;
  color: #000;
  font-size: 40px;
  font-weight: bold;
}

.static__text {
  font-size: 20px;
  padding: 0 0 20px;
}

.static__carefull {
  color: #d2d2d2;
}

.static__quality {
  float: left;
  color: #fff;
}

.quality__row-top,
.quality__row-bottom {
  font-size: 0;
}

.quality__row-top::after,
.quality__row-bottom::after {
  content: "";
  display: block;
  clear: both;
}


.quality__item {
  min-width: 320px;
  max-height: 157.5px;
  padding: 25px 35px 60px;
  display: inline-block;
}

.quality__item--color1 {
  background-color: #404040;
}

.quality__item--color2 {
  background-color: #4e4e4e;
}

.quality__item--color3 {
  background-color: #353535;
}

.quality__number {
  display: inline-block;
  padding: 0 0 10px 0;
  font-size: 72px;
  font-weight: bold;
}

.quality__number--star::after {
  content: "*";
  display: inline-block;
  font-size: 30px;
  vertical-align: top;
}

.quality__tagline {
  font-size: 20px; 
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sasha, 2017-09-06
@whitepro213

whitepro213 is better in the form of design)
show a screenshot of the block of interest

O

oh, 2017-09-07
well @AnneSmith

shift in this case is the wrong approach, even if it works
there it is quite possible to make a grid