Не отображаются полосы прогресса

280
04 сентября 2018, 00:00

Не могу понять, где ошибка в коде, почему не отображается полоса прогресса?

.box-skills_item { 
  flex: 1; 
  width: 50%; 
} 
 
.box-skills_item-content { 
  padding-right: 45px; 
} 
 
.about-wrap-content { 
  display: flex; 
  align-items: flex-start; 
  flex: 1; 
} 
 
.about-wrap-content_icon { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 40px; 
  width: 125px; 
  height: 125px; 
  margin-right: 29px; 
  flex: none; 
  border: 2px solid #f39c12; 
  background-color: #fff; 
  border-radius: 50%; 
} 
 
.about-wrap-content_text h6 { 
  margin-bottom: 20px; 
} 
 
.about-wrap-content_text p { 
  color: #737373; 
  font-size: 16px; 
  font-weight: 400; 
  line-height: 28px; 
} 
 
.about-wrap-content_text .about-text { 
  line-height: 28px; 
  color: #e74c3c; 
  font-size: 20px; 
  font-weight: 300; 
  margin-bottom: 25px; 
} 
 
.bars-line { 
  height: 10%; 
  background: #e7e7e7; 
} 
 
.bars-line div { 
  height: 10%; 
  background: #f39c12; 
}
<div class="box-skills_item box-skills_item-content"> 
  <div class="about-wrap-content"> 
    <div class="about-wrap-content_icon"> 
      <span class="icon-params"></span> 
    </div> 
     
    <div class="about-wrap-content_text"> 
      <h6>Our Skills</h6> 
      <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.</p> 
    </div> 
  </div> 
  <div class="box-bars"> 
   
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span> / 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
</div>

Answer 1

.box-skills_item { 
  flex: 1; 
  width: 50%; 
} 
 
.box-skills_item-content { 
  padding-right: 45px; 
} 
 
.about-wrap-content { 
  display: flex; 
  align-items: flex-start; 
  flex: 1; 
} 
 
.about-wrap-content_icon { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 40px; 
  width: 125px; 
  height: 125px; 
  margin-right: 29px; 
  flex: none; 
  border: 2px solid #f39c12; 
  background-color: #fff; 
  border-radius: 50%; 
} 
 
.about-wrap-content_text h6 { 
  margin-bottom: 20px; 
} 
 
.about-wrap-content_text p { 
  color: #737373; 
  font-size: 16px; 
  font-weight: 400; 
  line-height: 28px; 
} 
 
.about-wrap-content_text .about-text { 
  line-height: 28px; 
  color: #e74c3c; 
  font-size: 20px; 
  font-weight: 300; 
  margin-bottom: 25px; 
} 
 
.bars-title { 
  font-weight: bold; 
} 
 
.bars-line { 
  height: 10px; 
  background: #e7e7e7; 
  margin: 10px 0; 
} 
 
.bars-line div { 
  height: 10px; 
  background: #f39c12; 
}
<div class="box-skills_item box-skills_item-content"> 
  <div class="about-wrap-content"> 
    <div class="about-wrap-content_icon"> 
      <span class="icon-params"></span> 
    </div> 
     
    <div class="about-wrap-content_text"> 
      <h6>Our Skills</h6> 
      <p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit.</p> 
    </div> 
  </div> 
  <div class="box-bars"> 
   
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span>/ 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
    <div class="bars"> 
      <div class="bars-title"> 
        Design <span> / 88%</span> 
      </div> 
      <div class="bars-line"> 
        <div style="width: 88%;"></div> 
      </div> 
    </div> 
     
</div>

READ ALSO
@font-face не работает

@font-face не работает

Добрый день друзья возникла проблема с работой @font-faceКод раньше работал а сейчас никак не отображается

236
Позиционирование дочерних блоков

Позиционирование дочерних блоков

Возникла проблема в простой вещиПоказывать нечего

236
Cannot read property &#39;play&#39; of undefined JQuery

Cannot read property 'play' of undefined JQuery

Пытаюсь сделай простейший драмХотел, чтобы при клики на класс button запускался звук

242
Верстка макетов

Верстка макетов

Вопрос по верстке макетовЧасто , скорее всего из за неопытности, при верстке по макетам приходится подбирать маргины, паддинги, различные...

252