SKI V7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zadatak</title>
    <style>

    img{
        width:200px;
        display:inline-block;

    }


    div{
        background-color:mediumaquamarine;
        padding:10px;
        margin:10px;

    }


    div div{

        display:inline-block;
        width:75%;
        vertical-align:top;

    }

    div span{
      border:2px solid red;

      padding:10px;
      color:white;
      background-color:red;
      font-family: Arial, Helvetica, sans-serif;
     }

    div p:nth-child(1){
        color:red;
        font-weight: bold;
        font-size:2em;
        margin:0px 0 10px 0;


    }
    div p:nth-child(2){
            margin-top:0;
            margin-bottom:15px;

    }

    ul{
        list-style-type: none;
        text-align: center;
    }
    li{
        display:inline-block;
        padding:10px 20px;
        color:white;
        background-color:red;

    }
    li:hover{
        cursor:pointer;
        opacity:0.6;
    }

    </style>
</head>
<body>

    <ul>
        <li>Početna</li>
        <li>O nama</li>
        <li>Galerija</li>
        <li>Kontakt</li>
    </ul>
    <div>
        <img src="../img/bec.jpg" alt="">
        <div>
        <p >Beč - Nova godina 2019.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique
             odio culpectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique odio culpectetur adip
             isicidipisicing elit. Eaque, distinctio aperiam nobis nos
            trum similique odio culpecteto aperiam nobis nostrum similique odio culpa
             laborum modi provident alias, officiis hic rem voluptates error. Dolores fuga corporis fugit ipsum.</p>
        <span>Rezerviši</span>
</div>
    </div>
    <div>
            <img src="../img/pariz.jpg" alt="">
            <div>
            <p >Paris - Nova godina 2019.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique
                 odio culpectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique odio culpectetur adip
                 isicidipisicing elit. Eaque, distinctio aperiam nobis nos
                trum similique odio culpecteto aperiam nEaque, distinctio aperiam nobis nos
                trum similique odio ce odio culpa  isicidipisicing elit. Eaque, distinctio aperiam nobis nos
              trum similique odio culpecteto aperiam nobobis nostrum similique odio culpa
                 laborum modi provident alias, officiis hic rem voluptates error. Dolores fuga corporis fugit ipsum.</p>
            <span>Rezerviši</span>
    </div>
        </div>
        <div>
               <img src="../img/cirih.jpg" alt="">
                <div>
                <p >Cirih - Nova godina 2019.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique
                     odio culpectetur adipisicing elit. Eaque, distinctio aperiam nobis nostrum similique odio culpectetur adip
                     isicidipisicing elit. Eaque, distinctio aperiam nobis nos
                     trum siit. Eaque, dm similique odio culpa  isicidipisicing elit. Eaque, distinctio aperiam nobis nos
                 trum similique odio culpecteto aperiam nobis nostrum similique odio culpa
                     laborum modi provident alias, officiis hic rem voluptates error. Dolores fuga corporis fugit ipsum.</p>
                <span>Rezerviši</span>
        </div>
            </div>
</body>
</html>

-----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height:  300px;
        border: 1px solid red;
        background-color: blue;
        margin: 10px;
        box-shadow: 4px 4px 5px green;
    }

    #prvi{
        background: linear-gradient(Blue, yellow);
        box-shadow: none;
    }
    #drugi{
        background: repeating-radial-gradient(blue 10%,yellow 30%, red 50%);
        box-shadow: none;
    }

    p{
        font-size: 32px;
        font-family: Arial, Helvetica, sans-serif;
        color: red;
        text-shadow: 4px 5px 6px green;
    }
        </style>
</head>
<body>

    <p>Standardni korisnicki interfejsi</p>
    <div></div>
    <div id="prvi"></div>
    <div id="drugi"></div>
</body>
</html>

-------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    p{
        width: 300px;
        height: 300px;
        background-color: aqua;
        border: 1px solid red;
        font-size: 32px;
    }
    #prvi{
        transform: rotateX(140deg);
    }

    #drugi{
        transform: rotateY(180deg);
    }
    #treci{
        transform: rotateZ(170deg);
    }
        </style>
</head>
<body>
    <p>Ovo je paragraf bez transformacije</p>
    <p id="prvi">Ovo je paragraf nakon transfromacije</p>
    <p id="drugi">Ovo je paragraf nakon transfromacije</p>
    <p id="treci">Ovo je paragraf nakon transfromacije</p>
</body>
</html>

---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border:1px solid red;
            background-color: blue;
            /* transition: width 1s, height 1s; */
            transition: all 1s;
            transition-timing-function: ease-in;
            transition-delay: 1s;
        }

        div:hover{
            width:500px;
            height:500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
--------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 300px;
        border: 1px solid yellow;
        background-color: red;
        animation-name: prva;
        animation-direction: alternate;
        animation-timing-function: linear;
        animation-duration: 5s;
        animation-iteration-count: infinite;


    }

    @keyframes prva{
        10%{background-color: blue;}
        40%{background-color:yellow;}
        100%{background-color: green;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

-------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animirane loptice</title>
    <style>
        div{
            width: 750px;
            height: 750px;
            border: 1px solid red;
            position: relative;
        }

        #prva {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            border-radius: 50%;
            background: linear-gradient(red, yellow, green);
            animation-name: prva;
            animation-direction: alternate;
            animation-duration: 2s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;

        }
        #druga {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            border-radius: 50%;
            background: linear-gradient(red, yellow, green);
            animation-name: druga;
            animation-direction: alternate;
            animation-duration: 2s;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
            position: absolute;
            right:0;
            bottom:0;
        }

        @keyframes prva{
            100%{transform: translate(250px, 250px) rotate(180deg);}
        }
        @keyframes druga{
            100%{transform: translate(-250px, -250px) rotate(180deg);}
        }
    </style>
</head>
<body>
    <div>
        <div id="prva"></div>
        <div id="druga"></div>
    </div>
</body>
</html>

----------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-image: url("../img/stars-06.jpg")
        }

        img{

            animation-name: raketa;
            animation-duration: 10s;
            animation-direction: normal;
            animation-iteration-count: infinite;
        }

        @keyframes raketa{
            10%{transform: rotate(90deg)}
            22%{transform: rotate(135deg)}
            38%{transform: translate(600px, 600px) rotate(95deg)}
            45%{transform: translate(1000px, 400px) rotate(45deg)}
            65%{transform: translate(1000px, 200px) rotate(90deg)}
            75%{transform: translate(0px, 200px) rotate(270deg)}
        }
    </style>
</head>
<body>
    <img src="../img/spaceship.png" alt="">
</body>
</html>