Semantic HTML, Flexbox, Javascript Functions, CSS Responcive.

Community feedback

• 

  Arif Faisal•580

  @arifaisal123Posted over 1 year ago

  You can use a <div> element for the center line, and use it as an absolute position. In this way, the line will not change its position despite change in width (from desktop to mobile). For the purple circle, you can use another div that will stay on top of the center line. In mobile view, it will be in the center, and in desktop, it will be right aligned.

  You can explore my code snippet for clarification: .line { content: ""; display: block; position: absolute; top: 148px; left: 0; right: 0; height: 1px; background-color: $font-tertiary; }

  .purple-icon { background-color: $font-secondary; border: 2px solid $font-secondary; border-radius: 80px; width: 50px; height: 50px; margin: 0 auto; position: relative; display: flex; justify-content: center; align-items: center;

  0