Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            margin:12px 16px;
            color:white;
        }
        .nav{
            padding:10px;
        }
        .page{
            background-color: cadetblue;
            width: 420px;
        }

        .page-2 {
            background:royalblue;
            width: 600px;
        }
        ul{
            display: flex;
            flex-direction: row;
            /*list-style-type: none;*/
            vertical-align: top;
            margin:10px 0px;
            padding:0px;
        }
        ul>li{
            width:25%;
            margin:0 8px;
        }
        .nav a{
            text-decoration: none;
            color: crimson;
            display: inline-block;
            border: 5px solid black;
            background-color: cornsilk;
            padding: 5px;
        }
        a:hover {
            background-color: crimson;
            color: cornsilk;
        }
        .columns{
           display: flex;
           flex-direction: row;
        }
        .lcol, .rcol{
            background-color: whitesmoke;
            padding: 10px;
            margin:0 8px;
            width: 50%;
        }

        .title{
            margin: 12px 0px 12px 0px;
            text-align: center;
        }

        .profile{
            background-color: whitesmoke;
            padding: 10px 90px 10px 10px;
            display: inline-block;
            margin: 20px 10px 20px 12px;
        }
        .p{
            padding-bottom:12px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', (e) => {

            let task1 = document.querySelectorAll('a');
            task1.forEach(item => {
                console.log(item.innerText);
                // console.log(item.href);
                // item.href = "https://www.google.bg";
            });

            let task2 = document.querySelectorAll('.title');
            task2.forEach(item => {
                console.log(item.innerText);
            });

            let task3 = document.querySelectorAll('p');
            task3.forEach((item, index) => {
                // let param = item.innerText;
                // item.innerText = "НОВ ПАРАГРАФ " + (index+1);
                item.innerText = `НОВ ПАРАГРАФ ${index+1}`;
            });

            let task4 = document.querySelectorAll('img');
            task4.forEach(item => {
                console.log(item.src);
            });

            // let task5 = document.querySelectorAll('img');
            // task5.forEach(item => {
            //  item.src = 'http://placehold.it/20x80';
            // });

            let task6 = document.querySelectorAll('.columns > div');
            task6.forEach(item => {
                console.log(item.className);

            });

            let task7 = document.querySelectorAll('.columns > div');
            task7.forEach(item => {
                item.style.background = "magenta";
                item.style['background'] = "darkgreen";

                item.style.fontSize = "18px";
                item.style['font-size'] = "18px";

            });

            document.querySelectorAll('ul')[0].style.listStyleType = 'none';
            document.querySelectorAll('ul')[0].style['list-style-type'] = 'none';
   //       function edit() {
            // [...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
            //     .style.background= 'red';
            // }

            let task8 = document.querySelectorAll('.page')[0];
            task8.className = 'page-2';

            // let task8a = document.querySelectorAll('.page');
            // task8a.forEach(item => {
            //  item.className = 'page-2';
            // });

            let task9 = document.querySelectorAll('img');
            task9.forEach(item => {
                item.style.border = 'solid 2px red';
            });

            let task10 = document.querySelectorAll('img');
            task10.forEach(item => {
                item.addEventListener('mouseenter', (e) => {
                    e.target.style.border = 'solid 15px black';
                });
            });

            let task11 = document.querySelectorAll('a');
            task11.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    document.body.style.background = 'coral';
                });
            });


        });

    </script>


</head>
<body>
    <div class="page">
        <div class="nav">
            <ul>
                <li><a href="https://ue-varna.bg">Some random link name</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
        <div class="columns">
            <div class="lcol ">
                <div class="title">This is left column</div>
                <div><img class="img" src="http://placehold.it/150x150" alt="Snimka"></div>
            </div>
            <div class="rcol ">
                <div class="title">This is right column</div>
                <div><img class="img" src="http://placehold.it/150x150" alt="Kartinka"></div>
            </div>
        </div>
        <div class="p">
            <div class="profile">
                Вашето име, специаност, факултетен номер
            </div>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
        </div>
    </div>

</body>
</html>