подскажите пожалуйста, хочу, чтобы три моих блока шли в ряд (фото, названия, прогрессив бар), добавил display: flex
к общему для них блоку с классом skills-bar
, однако в ряд встали только фото и название, поэтому я добавил display: flex
к общему блоку для названий и бара с классом skills-name-bar
, но после этого ширина бара резко уменьшилась. Пробовал вместо flex
использовать iline-block
, но блоки не становятся в ряд. Как выставить блоки с названиями и прогрессив бар в ряд?
html,
:root {
--background: rgba(0, 214, 170, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-family: 'Playfair Display', serif;
font-weight: 400;
}
.container {
max-width: 1100px;
margin: auto;
}
#skills {
margin-top: 50px;
color: #C4C4C4
}
#skills .skills-bar {
display: flex;
margin: auto 0;
}
#skills .skills-image {
width: 40%;
margin-left: 20px;
}
#skills .skills-image img {
width: 80%;
}
#skills .skills-name-bar {
margin: auto 0;
width: 100%;
border: 2px solid red;
}
}
#skills .toolbar {
margin: auto 0;
width: 100%;
display: 2px solid red
}
#skills .outerbar {
width: 100%;
height: 20px;
background-color: #d8d8d8;
border-radius: 100px;
margin-bottom: 20px;
}
#skills .bar {
background: linear-gradient(to right bottom, #0b968f, #00a786, #1bb66f, #58c24c, #8fcb0a);
border: 1px solid #58c24c;
box-shadow: 0 1px 1px -8px #1bb66f, 0 1px 3px #1bb66f;
border-radius: 100px;
height: 100%;
transition: width 1s linear;
min-width: 200px;
}
#skills .percent-label {
float: right;
margin-right: 5px;
font-size: 12px;
line-height: 1.7em;
color: #fff;
}
#skills .skill-name {
font-weight: 600;
letter-spacing: 4px;
margin: 0 30px;
}
#skills .skill-name-label {
margin-bottom: 20px;
}
/* Animate the blue skill bar on page load */
@keyframes bar {
0% {
width: 0;
}
}
#skills .bar {
-webkit-animation: bar 2s ease-in-out;
-moz-animation: bar 2s ease-in-out;
animation: bar 2s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<div id="skills">
<div class="container">
<div class="skills-bar">
<div class="skills-image">
<img src="https://images.unsplash.com/photo-1489423561257-34e31d8836b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=518&q=80">
</div>
<div class="skills-name-bar">
<div class="skill-name">
<div class="skill-name-label">Portrairs:</div>
<div class="skill-name-label">City:</div>
<div class="skill-name-label">Studio:</div>
<div class="skill-name-label">Nature:</div>
<div class="skill-name-label">Beauty:</div>
<div class="skill-name-label">Other:</div>
</div>
<div class="toolbar">
<div class="outerbar">
<div class="bar" style="width: 90%;">
<div class="percent-label"><span id="count">90</span>%</div>
</div>
</div>
<div class="outerbar">
<div class="bar" style="width: 70%;">
<div class="percent-label"><span id="count">70</span>%</div>
</div>
</div>
<div class="outerbar">
<div class="bar" style="width: 60%;">
<div class="percent-label"><span id="count">50</span>%</div>
</div>
</div>
<div class="outerbar">
<div class="bar" style="width: 80%;">
<div class="percent-label"><span id="count">80</span>%</div>
</div>
</div>
<div class="outerbar">
<div class="bar" style="width: 30%;">
<div class="percent-label"><span id="count">30</span>%</div>
</div>
</div>
<div class="outerbar">
<div class="bar" style="width: 75%;">
<div class="percent-label"><span id="count">75</span>%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>