index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>+Note | Better Programming Notes</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.1.0/granim.js"></script>
    <style>

    *{
        margin: 0;
        padding: 0
    }

    html{
        width: 100%;
        height: 100%;
    }

    body{
        width: 100%;
        text-align: center;
        color: #ffffff;
        box-sizing: border-box;
        font-family: 'Open Sans';
    }

    #canvas-basic {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -100
    }

    .page-title{
        font-size: 3em;
        margin-top: 15%
    }

    .subtitle{
        font-weight: normal;
        color: #b2d3d9;
        margin-top: 20px;
        font-size: 18px;
        margin-bottom: 70px
    }

    .download-btn{
        display: inline-block;
        width: 180px;
        border: 1px solid #ffffff;
        padding: 10px 0;
        color: #ffffff;
        text-decoration: none;
        margin: 0 20px;
        background-color: rgba(256, 256, 256, 0.05);
        opacity: 0.7;
        border-radius: 6px;
        transition: 0.3s all ease;
    }

    .download-btn:hover{
        opacity: 1;
        background-color: rgba(256, 256, 256, 0.2);
        transition: 0.3s all ease;
    }

    </style>
    <script>

    window.onload = function(){
        var granimInstance = new Granim({
            element: '#canvas-basic',
            name: 'basic-gradient',
            direction: 'left-right',
            opacity: [1, 1],
            isPausedWhenNotInView: true,
            states : {
                "default-state": {
                    gradients: [
                        ['#155799', '#159957'],
                        ['#AA076B', '#61045F'],
                        ['#02AAB0', '#00CDAC'],
                        ['#DA22FF', '#9733EE'],
                        ['#2298d8', '#00c876']
                    ]
                }
            }
        });
    }

    </script>
</head>
<body>
    <h1 class="page-title">+Note</h1>
    <h3 class="subtitle">A Note-taking Application For Code Lovers</h3>

    <a href="https://www.dropbox.com/s/h6q8e86lollmz1k/%2BNote-win.zip?dl=1" class="download-btn">Windows x64</a>
    <a href="https://www.dropbox.com/s/idd8gkl7aa57gt2/%2BNote-OSX.zip?dl=1" class="download-btn">Mac OS</a>
    <canvas id="canvas-basic"></canvas>
</body>
</html>