<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="glass" x="0px" y="0px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g id="glass">
<path class="glass" fill-rule="evenodd" clip-rule="evenodd" fill="transparent" stroke="#000000" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="22.9256" d=" M21,57.2c0-0.8,2.2-0.6,3.7-1.1c6.8-1.9,5.2-18.3,1.9-22.8c-3-4.3-4.9-10.4-4.2-19.6c0.3-3.8,0.6-7.6,1.2-11.4c0.3-0.6,3.3-1,6.9-1 c3.6,0,6.6,0.4,6.9,1c0.9,3.8,1.1,7.6,1.3,11.5c0.6,9.2-1.2,15.3-4.2,19.6c-3.3,4.6-4.8,20.9,1.9,22.8c1.5,0.5,3.7,0.3,3.7,1.1 C41,59.7,20.2,59.7,21,57.2z"/>
</g>
</svg>
@import "bootstrap/less/variables.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/normalize.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/buttons.less"
// Bootstrap
@import "bootstrap/less/variables.less"
...
@import "bootstrap/less/buttons.less"
// Project Styles
@import "project.less"
animation-fill-mode: forwards
поможет. Это заморозит анимацию в её конечной точке.animation-iteration-count: infinite
.background
, а под «Новости» и «Все новости» подложить фон того цвета, которого обычный фон. Минусы: не подходит для сложных фонов, фигово переноситсяfloat: left
, «Все новости» — float: right
, после них блок с display: block
, он сам займёт всю ширину между ними. Ему задать высоту и поставить линию на фон или бордером. Минусы: фигово переносится.display: flex
, разделитель в отдельный блок, ему flex-grow: 1
. Минусы: поддерживается только новыми браузерами.<a onclick="changeButtonsBackground()">Home</a>
event
, который можно будет использовать так:function changeButtonsBackground(event){
event.target.style.backgroundColor="#8e58a3";
}
.navMenuItem.active {
background-color: #8e58a3;
}
function changeButtonsBackground(event){
event.target.classList.add('active');
}