I am trying to make the menu of the image and I cannot list the texts with the lines well
UPDATED
I was able to list the texts with the lines but they are not well ordered.
.cont {
display: flex;
cursor: pointer;
font-size: 10px;
}
.mbar {
width: 45px;
height: 6px;
margin: 5px 8px;
transition: 0.4s;
}
.br1 {
background-color: #a2d1cb;
}
.br2 {
background-color: #9a8542;
}
.br3 {
background-color: #eb6953;
}
.br4 {
background-color: #1d1d1b;
}
<a href="#">
<div class="cont"><div class="brt2">ABOUT</div> <div class="mbar br1"></div></div>
</a>
<a href="#">
<div class="cont"><div class="brt2">WORK</div> <div class="mbar br2"></div></div>
</a>
<a href="#">
<div class="cont"><div class="brt2">CLIENTS</div> <div class="mbar br3"></div></div>
</a>
<a href="#">
<div class="cont"><div class="brt2">CONTACT</div> <div class="mbar br4"></div></div>
</a>
I don't know much about html, but I would think you should wrap each of your items in a container:
then you apply the style:
And you would do that with each of the items.
Hello, I made a similar one with BootStrap, I'll pass you the complete code in case it helps you.
I did a mix between Bootstrap and the CSS you made.
Chauchis ?!
What you have to do is play with the different options offered by flex-box to order the elements in one way or another.
In this case, set the percentage of the size of the div that contains the text, and the alignment of the text with respect to the parent element, and the alignment of the objects with respect to the child container.
justify-content: flex-end;
I leave you an article where you can find out more about it
Flexbox by Css Tricks