Untitled

<!DOCTYPE html>
<html lang="en-US">

    <head>

        <meta charset="UTF-8">

        <title>Photography</title>

        <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="JavaScript2b.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>


    </head>

    <body>

    <div id="header">
    </div>

        <div id="wrap">

            <div id="container">

                <div id="controllers">


                    <div id="previous" class="buttons" onclick="change(-1);">
                    </div>

                    <div id="next" class="buttons" onclick="change(1);">
                    </div>

                </div>

                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>

                <div>
                    <p id="tag">Poem</p>
                </div>

            </div>

        </div>

    <div id="footer">
    </div>

    </body>

  <script type="text/javascript" src="JavaScript2.js"></script>

</html>

@font-face {font-family: Eagle-Light;
                    src: url("Eagle-Light.otf") format("opentype");
                    }

@font-face {font-family: Raleway Light;
                    src: url("Raleway Light.otf") format("opentype");
                    }

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

#header {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: yellow;
}

#wrap {
    position: relative;
    clear: both;
    padding: 0px;
    width: 100%;
}

#footer {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: lightgray;
    display: block;
}

#container {
    position: relative;
    margin: 15px auto;
}

#controllers {
    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 10px;
    background-image: url(Images/carremoins.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    z-index: 4;

}

#next {
    background-image: url(Images/carreplus.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    z-index: 4;
    background-position: center center;
}

#container:hover .buttons {
/*  display: block;*/
opacity: 1;
}

#tag {
    position: relative;
    height: 40px;
    line-height: 1.7em;
    padding-top: 5px;
    text-align: center;
    font-size: 1.1em;
}


.buttons {
    cursor: pointer;
    top: 50%;
    z-index: 3;
/*  display: none;*/
    opacity: 0;
    transition: opacity .3s ease-in-out;
}


#imagewrap{
    position: relative;
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    height: 100vh;
}

#front {
    display: block;
}

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;
}


a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}