Untitled

HTML

<!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sluff</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <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" href="css/index.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="page-container">
            <section class="menu">
                <header>
                    <div class="container1">
                        <div class= "row justify-items-start">
                            <div class="col-lg-3"><a href="#">Contact</a></div>
                            <div class="col-lg-3"><a href="#">Dasboards</a></div>
                            <div class="col-lg-3"><a href="#">Prices</a></div>
                        </div>
                    </div>
                </header>
            </section>
            <section id=intro>
                <div>
                    <H1>Sluff</H1>
                </div>
                <button type="button" class="btn btn-dark">Dark</button>
                <div>
                    <span>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nisi, fugit rem voluptatum, sequi nemo, non corrupti ut ratione architecto cupiditate quasi ipsa vero animi possimus voluptate rerum quia sapiente!
                    </span>
                </div>
            </section>
            <section id="dashboards">
                <div>
                    <span>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Alias nam eaque autem quae vel necessitatibus vitae ullam perspiciatis magni blanditiis.
                         Temporibus consequatur debitis qui maxime nobis voluptate suscipit laudantium autem?
                    </span>
                </div>
            </section>
                <footer>
                    <div style="margin: 10px;">
                        <span>&copy;2020</span>
                        <span>Made by <a href="https://twitter.com/madwashed">Saarel</a></span>
                   </div>
                </footer>
        </div>
    </body>
</html>


CSS

:root{
--purpleback:#2A2033;
--words:#d4d2d6;
--purplebottom:#251c2d;
--purpletop:#211928;
}

*{
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-app-region: no-drag;
}

html{
    scroll-behavior: smooth;
    font-family: Helvetica;
}

#page-container {
    position: relative;
    min-height: 100vh;
  }

body{
    background-color: var(--purpleback);

}

.menu{
    margin: 0;
    padding: 0;
    background-color: var(--purpletop);
    background-attachment: fixed;
}


#intro{
    color: var(--words);
    text-align: center;
}

#dashboards{
    color: var(--words);
    text-align: center;
}


footer{
    background-color: var(--purplebottom);
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.0rem;
}

footer span{
    color: var(--words);
    text-align: bottom;
}

footer a{
    color: var(--words);
    text-decoration: none;
}