Untitled

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        body{
            font-family: 'Open Sans', Arial, sans-serif;
        }
        a {
            text-decoration: none;
            color: #770000;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .wrapper{
            width:1170px;
            margin:0 auto;
        }
        nav{
            padding-left:20px;
            margin-bottom:40px;
        }
        nav img, .menu, .menu li{
            display: inline-block;
            vertical-align:top;
        }
        .menu li{
            width:90px;
            margin-right:3px;
            border-bottom:3px solid #770000;
            box-shadow: 0px 8px 6px -6px black;
            height:40px;
            text-align: center;
            padding-bottom:8px;
        }
        .menu li a{
            color:black;
            text-transform: uppercase;
            font-weight: bold;
        }
        .menu li:hover a{
            color:#770000;
        }
        .menu{
            padding-left:20px;
        }

        .left-col{
            background: #DADADA;
            width:170px;
            padding: 10px 10px 50px 10px;
            text-align: center;
            font-size:12px;
            font-weight:bold;

        }

        figure{
            margin:0 0 25px 0;
        }

        figure img{
            border:solid black 3px;
        }

        figcaption{
            font-size: 11.2px;
            color:#656565;
            margin:4px 0px;
            font-weight:bold;
        }

        .issue{
            background: #F4F4F4;
            padding:10px 20px;
            margin-bottom:5px;
            font-size:12px;
        }

        .issue a{
            color:#656565;
        }

        .hidden{
            margin-top:-4px;
            background: #F4F4F4;
            margin-bottom:5px;
            padding:10px;
        }
        .left-col, section, .right-col, .left, .right{
            display: inline-block;
            vertical-align: top;
        }
        section{
            margin:0 10px;
            border:solid 3px #DADADA;
            padding:10px;
            border-radius:5px;
            width:735px;
            color:#656565;
        }
        .right{
            text-align: right;
            width:66%;
        }
        .left{
            width:33%;
        }
        section a{
            font-weight: bold;
        }
        .row{
            margin-top:30px;
        }
        .row:nth-child(1){
            margin: 0;
        }

        .menu li:nth-child(1){
            width:80px;
        }
        .menu li:nth-child(2){
            width:95px;
        }
        .menu li:nth-child(3){
            width:135px;
        }
        .menu li:nth-child(4){
            width:135px;
        }
        .menu li:nth-child(5){
            width:155px;
        }
        .menu li:nth-child(6){
            width:115px;
        }
        .menu li:nth-child(7){
            width:75px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let counter = 0;
            let links = document.querySelectorAll('a');
            links.forEach(item => {
                item.addEventListener('mouseenter', (e) => {
                    counter++;
                    console.log(window.getComputedStyle(e.target).color);
                    if(window.getComputedStyle(e.target).color == 'rgb(119, 0, 0)') {
                        e.target.innerText += ' ' + counter;
                    }
                    if(e.target.style.color == 'rgb(30, 188, 203)') {
                        let text = e.target.innerText;
                        let textArr = text.split(' ');
                        let newText = '';
                        for(let i = 0; i < textArr.length - 1; i++){
                            newText += textArr[i] + ' ';
                        }
                        newText += counter;
                        console.log(counter);
                        e.target.innerText = newText;
                    }
                    e.target.style.color = '#6a9235';
                });
                item.addEventListener('mouseleave', (e) => {
                    e.target.style.color = '#1EBCCB';
                });
            });


        });
    </script>
</head>
<body>
    <div class="wrapper">
        <nav>
            <img src="https://placehold.co/253x63" alt="">
            <ul class="menu">
                <li>
                    <a href="">Начало</a>
                </li>
                <li>
                    <a href="">Цели и обхват</a>
                </li>
                <li>
                    <a href="">Редакционна колегия</a>
                </li>
                <li>
                    <a href="">Указания към авторите</a>
                </li>
                <li>
                    <a href="">Указания към рецензентите</a>
                </li>
                <li>
                    <a href="">Етична политика</a>
                </li>
                <li>
                    <a href="">Архив</a>
                </li>
            </ul>
        </nav>
        <aside class="left-col">
            <figure>
                <img src="https://placehold.co/164x230" alt="">
                <figcaption> ISSN 1310-0343 - печатно </figcaption>
                <figcaption> ISSN 2367-6949 - онлайн </figcaption>
            </figure>
            <a href=""> Текущо издание </a>
            <div class="issue">
                <a href=""> Издание 2018 </a>
            </div>
            <div class="hidden">
                <div>
                    <a href=""> бр. 4/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 3/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 2/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 1/2018 г. </a>
                </div>
            </div>
            <div class="issue">
                <a href=""> Издание 2017 </a>
            </div>
            <div class="issue">
                <a href=""> Издание 2016 </a>
            </div>
            <div class="issue">
                <a href=""> Издание 2015 </a>
            </div>
        </aside>
        <section>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="" style="color:#770000">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a><div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
            <div class="row">
                <div class="left">
                    Мария Станимирова Токушева
                </div>
                <div class="right">
                    Модел за определяне на оптимална производствена програма
                </div>
            </div>
            <a href="">Изтегли статията</a>
        </section>
        <aside class="left-col">
            <figure>
                <img src="https://placehold.co/164x230" alt="">
                <figcaption> ISSN 1310-0343 - печатно </figcaption>
                <figcaption> ISSN 2367-6949 - онлайн </figcaption>
            </figure>
            <a href=""> Текущо издание </a>
            <div class="issue">
                <a href=""> Издание 2018 </a>
            </div>
            <div class="hidden">
                <div>
                    <a href=""> бр. 4/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 3/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 2/2018 г. </a>
                </div>
                <div>
                    <a href=""> бр. 1/2018 г. </a>
                </div>
            </div>
            <div class="issue">
                <a href=""> Издание 2017 </a>
            </div>
            <div class="issue">
                <a href=""> Издание 2016 </a>
            </div>
            <div class="issue">
                <a href=""> Издание 2015 </a>
            </div>
        </aside>
    </div>
</body>
</html>