Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Marinova stranica </title>
        <style>


        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 4px solid black;
        }
        td.sadrzaj1{
            width:75%;
            height:500px;

        }
        #meni, li{
            display:inline;
            list-style-type:none;
            margin:5px;
            font-weight:bold;
            padding:6px;
        }
        #prvimeni{
            display:inline;
        }
        a{
            color:#996515;
            text-decoration:none;
        }
        a:hover{
            color:white;
            background-color: black;
        }
        #footer{
            text-align:center;
            height:30px;

        }
        #meni{
            margin:0px;
            padding:0px;
        }
        #drugimeni{
            display:block;
            list-style-type:circle;
        }


        body {
            font-size: 14px;
            color: black;
            text-align: justify;

        }

        div {
        background-color: #000;
        margin: 30px;
        color: #fff;
        text-align: center;
        }

        .klasa1{
             font-weight: bold;
        }

        .klasa2{
             text-decoration: underline;
        }

        div,p{
            border: 1px solid black;
            display: inline-block;
            width:500px;
            margin: 5px;
            padding:8px;
            vertical-align: text-top;
        }

        #slika{
            margin-left:1px;
        }


        </style>
    </head>

    <body>
        <table>
            <tr>
                <th colspan="2" id="slika">
                    <img src="logo.png" height="150" alt="logo">
                </th>
            </tr>

            <tr>
                <div id="meni">
                    <td colspan="2" >
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>
                        </ul>
                    </td>
                </div>
            </tr>

            <tr>
                <td class="sadrzaj1">
                <h1>Vivamus sed dui tortor</h1>
        <p id="prvi">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas at neque ac tempor. Sed tempus convallis mi bibendum euismod. Duis erat lorem, faucibus pretium ullamcorper a, finibus non metus. Nunc tristique quam in sem tristique, eu volutpat massa congue. Morbi sed metus lacus. Nunc ac faucibus tellus. Nam porta, nisl ut lacinia consectetur, odio ipsum suscipit eros, ut sollicitudin sem mi sed orci. Maecenas turpis ligula, lacinia sit amet tempor id, dapibus quis mauris. Quisque urna ante, rhoncus nec est eu, porttitor consequat enim. Aenean sit amet mattis odio. Nunc non est dignissim, congue dolor at, sollicitudin justo. Donec vel dolor massa. Vestibulum posuere suscipit nunc, nec ornare tellus fermentum vitae. Sed vestibulum ut lorem vitae lobortis.
        </p>
        <input type="button" value="Sakrij/prikazi" onclick="hideprvi();"/>
            <script>
                var hidden = false;
                function hideprvi(){
                hidden = !hidden;
                    if(hidden) {
                        document.getElementById('prvi').style.visibility='hidden';
                    }else {
                        document.getElementById('prvi').style.visibility='visible';
                    }
                }
            </script>

            <input type="button" value="Bojanje" onclick="setColor();"/>

                <script>
                    function setColor(){
                        bgColorCode = '#'+Math.floor((Math.Random() * 999999)+ 100000);
                        elements = document.getElementByClassName('prvi');

                        for (var i = 0; i < elements.length; i++) {
                            document.getElementByClassName('prvi')[i].style.backgroundColor = bgColorCode;
                        }
                    }
                </script>


        <div id="drugi">
            In eu nibh ornare, sodales ante vitae, dictum turpis. Duis sed turpis vehicula, venenatis mi eget, convallis mauris. Etiam vitae sodales lectus, nec congue enim. Sed vitae nibh nec nunc vehicula euismod venenatis in ligula. Duis sit amet mattis velit, at bibendum nisl. Pellentesque dictum diam et libero cursus, convallis commodo purus rhoncus. Nunc eu posuere ante. In feugiat odio nec odio pulvinar finibus. Nam pretium velit et mi interdum, quis fringilla leo vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam rutrum ante ac neque elementum, vel dignissim magna faucibus. Mauris fermentum sapien sapien, sit amet dignissim urna ultricies quis. Curabitur eu elit varius, ornare dui id, vestibulum velit. Ut in dolor pharetra, ullamcorper enim id, tempus lorem. Vivamus libero erat, ornare non condimentum at, interdum quis nulla.
        </div>
        <input type="button" value="Sakrij/prikazi" onclick="hidedrugi();"/>
            <script>
                var hidden = false;
                function hidedrugi(){
                hidden = !hidden;
                    if(hidden) {
                        document.getElementById('drugi').style.visibility='hidden';
                    }else {
                        document.getElementById('drugi').style.visibility='visible';
                    }
        }
            </script>


        <p id="treci">
            Aenean ut magna nulla. Cras efficitur risus at bibendum bibendum. Sed quis purus nec leo feugiat tristique vel quis ante. Curabitur egestas pharetra bibendum. Vivamus laoreet viverra orci non sagittis. Proin dui ligula, posuere sollicitudin felis et, rutrum porttitor nisl. Ut ut iaculis ex. Morbi molestie pretium elit sed ultricies. Fusce rutrum, felis vitae mattis congue, ipsum orci finibus ipsum, id pretium ipsum ante eu arcu. Integer at eros vitae tellus condimentum faucibus.
        </p>
            <input type="button" value="Sakrij/prikazi" onclick="hidetreci();"/>
                <script>
                    var hidden = false;
                    function hidetreci(){
                        hidden = !hidden;
                        if(hidden) {
                            document.getElementById('treci').style.visibility='hidden';
                        }else {
                            document.getElementById('treci').style.visibility='visible';
                        }
                    }
        </script>

    <hr>
        <p id="cetvrti">
            Nunc quis quam vitae leo dictum luctus non eget ante. Nullam diam odio, sodales commodo lorem et, luctus hendrerit felis. Cras sed ante quis dolor efficitur tempor. Sed pretium laoreet    cursus. Vivamus tincidunt neque vitae purus pulvinar tincidunt. Proin fermentum blandit ante, ut eleifend mi facilisis et. Maecenas sagittis, dui a tempor accumsan, odio nisl tincidunt eros, in tristique velit libero in purus. Suspendisse nec mi ut est dignissim sodales sit amet quis dolor. Quisque non orci quis odio aliquam tristique. Aliquam gravida placerat convallis. Quisque imperdiet odio a ipsum condimentum
            venenatis. Maecenas et velit vel mauris varius mollis in euismod mauris. Duis bibendum ante nec tempus finibus. Aliquam erat volutpat.
        </p>
            <input type="button" value="Sakrij/prikazi" onclick="hidecetvrti();"/>
                <script>
                        var hidden = false;
                function hidecetvrti(){
                        hidden = !hidden;
            if(hidden) {
                document.getElementById('cetvrti').style.visibility='hidden';
            }else {
                document.getElementById('cetvrti').style.visibility='visible';
        }
    }
</script>

<hr>
<p id="peti">
    Integer hendrerit massa a ligula consectetur maximus sit amet vel urna. <br> Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br> Curabitur accumsan quam nulla, a congue ligula congue eget.<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>
    <span class = "klasa1">Praesent</span> commodo lacinia sem sit amet pharetra.<br>
    <span class ) "klasa1">Praesent</span> gravida dolor eu mauris tempus ultrices.<br>
    <span class = "klasa1">Praesent</span> maximus nibh ac <span class = "klasa2">felis</span> suscipit, et vehicula lorem consequat.<br>
        Pellentesque ac ultricies odio.
</p>
    <input type="button" value="Sakrij/prikazi" onclick="hidepeti();"/>
        <script>
            var hidden = false;
            function hidepeti(){
            hidden = !hidden;
                if(hidden) {
                    document.getElementById('peti').style.visibility='hidden';
                }else {
                    document.getElementById('peti').style.visibility='visible';
            }
        }
</script>

                </td>

                <td class="sadrzaj2">
                    <ul>
                            <li id="drugimeni">LIST ITEM 1</a></li>
                            <li id="drugimeni">LIST ITEM 2</a></li>
                            <li id="drugimeni">LIST ITEM 3</a></li>
                        </ul>
                </td>
            </tr>

            <tr id="footer">
                <td colspan="2">
                    <p>Proteini.si &#174 </p>
                </td>
            </tr>
        </table>
    </body>
</html>