There is such an element in the layout. However, I have been racking my brains for the second day and can’t think of how this can be released when working with bootstrap. This is the essence of the issue.

heads will roll

Closed due to the fact that the issue is too common for participants user207618, Kromster , user194374, Denis , Denis Bubnov 13 Jan '17 at 15:13 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 3
    Though I write the code in 2 days wrote? Present. ) - Andrey Fedorov
  • No, the line behind them. I tried to just draw a line and put circles on top of them, but it turns out just an orgy of adaptation. - Danil
  • Show what you tried. From scratch here, many can draw it. - user207618
  • @ Danil, well, duck, you need to set the dimensions of the line in relative units. - Andrey Fedorov

2 answers 2

* { padding: 0; margin: 0; box-sizing: border-box; } ul { max-width: 650px; margin: 30px auto; list-style: none; font-size: 16px; text-align: center; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; } ul:before { content: ''; position: absolute; top: 50%; left: 0; margin-top: -2px; width: 100%; height: 4px; background: #C5FCC5; z-index: -1; } ul > li { margin: 15px 0; color: #fff; width: 80px; height: 80px; line-height: 80px; background: #C5FCC5; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); position: relative; } ul > li:first-child { background: #6CEE5A; } ul > li:before { content: ''; position: absolute; top: 50%; right: -50%; margin-top: -50px; height: 100px; width: 20px; border: 1px solid #91E0E5; border-bottom: none; border-top: none; } ul > li:last-of-type:before { display: none; } @media screen and (max-width: 600px) { ul > li:before { display: none; } } 
 <ul> <li>2016</li> <li>2015</li> <li>2014</li> <li>2013</li> <li>2012</li> </ul>

  • one
    And where are the sticks? - user207618
  • @Other in Photoshop - Grundy
  • one
    @Grundy, it's thinner there. - user207618

 .cell{ display: inline-block; padding: 15px 18px; border-left: 1px solid cyan; border-right: 1px solid cyan; position: relative; } .wrapper{ float:left; padding: 0px 10px; } .cell > span{ position: absolute; top: calc(50% - 0.7em); left: calc(50% - 1.1em); color: white; font-family: Arial; font-size: 12px; } .cell > svg{ height: 40px !important; width: 40px !important; fill: hsl(120, 80%, 90%); stroke: green; stroke-width: 0px; transition: all 0.1s ease-in; padding: 1px; --opacity: 0.4; } .wrapper:hover > .cell > svg { fill: lightgreen; } .super-wrapper{ display: inline-block; width: auto; } .super-wrapper:after{ content: ''; position: absolute; display: block; background-color: hsl(120, 80%, 90%); height: 4px; width: 200px; top: 42px; left: 40px; z-index: -1; } 
 <div class='super-wrapper'> <div class='wrapper'> <div class='cell'> <span>2016</span> <svg> <circle cx='20' cy='20' r='20'/> </svg> </div> </div> <div class='wrapper'> <div class='cell'> <span>2015</span> <svg> <circle cx='20' cy='20' r='20'/> </svg> </div> </div> <div class='wrapper'> <div class='cell'> <span>2014</span> <svg> <circle cx='20' cy='20' r='20'/> </svg> </div> </div> </div>

To code the stick in the center was broken normally, and the working day is coming to an end, so, hit the crutch, if it is necessary, you will finish: ^)

If not, I finish it tomorrow.