index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="gradient">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">

        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Cover</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Contact</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1>Background Generator</h1>
            <input class="color1 btn btn-lg btn-secondary" type="color" name="color1" value="#00ff00">
            <input class="color2 btn btn-lg btn-secondary" type="color" name="color2" value="#ff0000">
            <div>
                <button class="random btn btn-lg btn-secondary" type="button" name="random">Random</button>
            </div>
            <h2>Current CSS Background</h2>
            <h4 class="masthead-brand"></h4>
        </main>

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Learning project <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">kzhecheva</a>.</p>
            </div>
        </footer>


    </div>
    <script type="text/javascript" src="bundle.js"></script>
</body>

</html>