05.html

<!DOCTYPE html>
<html>
<head>

    <title>05</title><!-- This is the title shown in the Window bar -->
    <meta charset="utf-8">
    <!-- You need this so the browser can understand ‘typographic quotes’ and accented characters éëê etc.-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- This tag is important if we make a responsive site
see http://kabk.github.io/govt4-coding/responsive-layout.html -->
    <style>
        html,body {
            width:100%;
            height:100%;
             background: red; /* For browsers that do not support gradients */
            /* For Safari 5.1 to 6.0 */
            background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
            /* For Opera 11.1 to 12.0 */
            background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
            /* For Fx 3.6 to 15 */
            background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
            /* Standard syntax */
            background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 

        }
        img {
            width:20%;
        }
        .nextprev {
            position:fixed;
            margin: 0 auto;
            margin-top:50vh;
            font-size:25px;
            color:green;
            font-family: 'Open Sans', sans-serif;
        /*    text-align: center;*/
        }
        a:hover {
            color:pink;

        }
        #circles {
            top:5vh;
            position:absolute;
            left: 10vw;
            
        }
        #rectangle {
            width:8%;
            left: 14vw;
            top:35vh;
            position:relative;
            animation: spin 3s linear infinite;
        }
            @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
            @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
            @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
        
        #stick {
            left:30vw;
            top: 60vh;
            position:relative;

              animation: 0.5s normal infinite 
              fadein; -webkit-animation: 0.5s normal infinite fadein;
                opacity:0
                }

                 @keyframes fadein{from{opacity:0}
                 to{opacity:1}
                 }
      
                @-webkit-keyframes fadein{from{opacity:0}
                 to{opacity:1}

        }
        #oval {
            width:10%;
            top:60vh;
            left:60vw;
            position:relative;
        }
        #disk {
            top:10vh;
            left:30vw;
            position:relative;
 
                
    -webkit-animation: move 4s linear infinite;
    -moz-animation:move 4s linear infinite;
    animation:move 4s linear infinite;
}
@-moz-keyframes move { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes move { 100% { -webkit-transform: rotate(360deg); } }
@keyframes move { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


    </style>
    </head>
    <body>
        <img id = "circles" src="ingredients/circle.png">
        <img id = "rectangle" src="ingredients/rect.png">
        <img id = "stick" src="ingredients/1.png">
        <img id = "oval" src="ingredients/2.png">        
        <img id = "disk" src="ingredients/3.png">
        <div class="nextprev">
            <a href="04.html">Prevvvvious</a>
            <a href="06.html">Nexxxxxt</a>
        </div>

    </body>
</html>