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;
        }
        .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 links = document.getElementsByTagName('a');
            let counter = 0;
            for (let i = 0; i < links.length; i++) {
                links[i].addEventListener('mouseleave', (element) => {
                    element.target.style.color = 'blue';
                    element.target.style.fontSize = '16px';
                });

                links[i].addEventListener('mouseenter', (varna) => {
                    varna.target.style.color = 'green';
                    // varna.target.style.fontSize = '44px';
                });
            }

            let specialen = document.getElementsByTagName('a')[0];
            specialen.addEventListener('mouseenter', (e) => {
                e.target.style.background = 'blue';
            });

            let s = document.getElementsByClassName('special')[0];
            s.addEventListener('mouseenter', (e) => {
                e.target.style.display = 'none';
            });
            s.addEventListener('mouseleave', (e) => {
                e.target.style.display = 'block';
            });

            let btn = document.getElementsByTagName('input');
            btn[0].addEventListener('click', (e) => {

                if(e.target.value == 'DO NOT CLICK ME'){
                    e.target.value = 'Click me';
                    e.target.style.background = 'red';
                } else {
                    e.target.value = 'DO NOT CLICK ME';
                    e.target.style.background = 'green';
                }
            });
        });

    </script>
</head>
<body>
    <div class="wrapper">
        <nav>
            <img src="http://placehold.it/253x63" alt="">
            <ul class="menu">
                <li>
                    <a href="">Начало</a>
                </li>
                <li>
                    <a class='special' 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>
                    <input type="button" value="Click me">
                </li>
            </ul>
        </nav>
        <aside class="left-col">
            <figure>
                <img src="http://placehold.it/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="">Изтегли статията</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="http://placehold.it/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>