I really need help with the implementation of the header-line, I did it for now, but I understand that it is not right, and this thing gnaws at the soul. I hope for your help, thank you!

This header-line

.top-line { padding-top: 25px; } .top-line a { display: inline-block; padding-right: 120px; vertical-align: middle; } .top-line .top-text { display: inline-block; } .top-line .top-text p { display: inline-block; padding: 10px 0 10px 50px; font-size: 18px; vertical-align: middle; background-image: url(../img/icon.png); background-repeat: no-repeat; } .top-line .top-text p:nth-of-type(1) { background-position: 0 -15px; } .top-line .top-text p:nth-of-type(2) { background-position: 0 -85px; } .top-line .top-text p span { font-size: 24px; font-weight: bold; vertical-align: baseline; } 
 <div class="top-line"> <a href=""><img src="img/logo-top.png" alt="Logo"></a> <div class="top-text"> <p><span>100%</span> натурально</p> <p><span>100%</span> эффективно</p> </div> </div>

  • What exactly bothers you? It is a viable option, the only thing I would be to replace p with a div and remove the .top-line from selectors to reduce specificity. Everything else can be taste. - E_K
  • I do not know, somehow it doesn’t look semantically =) - Polyakov Denis
  • instead of <div class = "top-line"> write <header class = "top-line">. So it will be more semantic. - Yuri

0