Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animated scroll on page load</title>

    <!-- Jquery (important) -->
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <!-- Custom Script -->
    <script>

// Get and reset hash value BEFORE DOM loads.
let hash;

hash = window.location.hash;

if("" !== hash)
{
    window.location.hash = "";
}

    </script>

    <!-- Custom Style -->
    <style>

body {
    font-size: 18px;
    background-color: #111;
}

h1::before {
    content: "•";
    color: #6c757d;
}

@media (max-width: 1200px), (max-height: 760px){
    body {
        font-size: 16px;
    }
}

.text-light, .text-white {
    color: #aaa !important;
}

.border-light {
    border-color: #aaa !important;
}

    </style>
</head>
<body>
    <div class="container bg-dark">
        <header>
            <h1 class="text-light border-bottom border-light pb-3 pt-1"><span class="text-muted">l</span>orem ipsum</h1>
        </header>
        <nav class="navbar navbar-expand p-0 pb-2">
            <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link text-light" href="#home">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#features">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#about">About</a>
                </li>
              </ul>
        </nav>
    </div>
    <div class="container py-3">
        <h2 class="text-muted">Sem quam semper</h2>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-6 p-0">
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Donec vitae</h2>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </div>
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Libero venenatis faucibus</h2>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                </div>
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
            </div>
            <div class="col-6 p-0">
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Libero venenatis faucibus</h2>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                </div>
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Donec vitae</h2>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pt-3" id="form">
        <div class="container p-4 bg-info">
            <h2 class="pb-3 border-bottom border-dark">Important Area</h2>
            <p>Please verify your data:</p>
            <form>
                <div class="form-row">
                    <div class="col my-1">
                        <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text font-weight-bold">Name</div>
                            </div>
                            <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Hans Dieter" disabled>
                        </div>
                    </div>
                    <div class="col my-1">
                        <label class="sr-only" for="inlineFormInputGroupMail">Username</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text font-weight-bold">Mail</div>
                            </div>
                            <input type="text" class="form-control" id="inlineFormInputGroupMail" placeholder="example@example.com" disabled>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-auto mt-3">
                        <button type="submit" class="btn btn-success">Correct</button>
                        <button type="reset" class="btn btn-danger">Nope</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="container mt-4">
        <div class="row">
            <div class="col-6 p-0">
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Libero venenatis faucibus</h2>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                </div>
                <div class="mr-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
            </div>
            <div class="col-6 p-0">
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Maecenas tempus</h2>
                    <p class="text-white">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                </div>
                <div class="ml-1 mb-2 p-4 bg-dark">
                    <h2 class="text-light pb-3 mb-3 border-bottom border-light">Libero venenatis faucibus</h2>
                    <p class="text-white">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
                    <p class="text-white">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.</p>
                </div>
            </div>
        </div>
    </div>
    <footer class="container p-5 mt-4 bg-dark">
        <div class="p-5"></div>
    </footer>
    <script>

// Wait for DOM to load.
$(document).ready(function()
{
    // Cancel if no hash is set.
    if(hash === "")
    {
        return;
    }

    // Animated scrolling.
    $("html, body").animate
    (
        {
            scrollTop: $(hash).offset().top
        },
        200,
        function()
        {
            // After the animation finishes add the hash back to the url.
            window.location.hash = hash;
        }
    );
});

    </script>
</body>
</html>