smx design layout

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#dua">Link</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid mb-3"
        style="background-image: url('https://picsum.photos/1200/600');
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh;">

        <div class="container">
            <div class="row vh-100">
                <div class="col-5 my-auto">
                    <!-- <div class="position-absolute top-50 start-0 translate-middle-y"> -->
                        <h1 class="display-4">Selamat Datang</h1>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum, repellat?</p>
                    <!-- </div> -->
                    <button class="btn btn-primary">Tombol 1</button>
                    <button class="btn btn-secondary">Tombol 2</button>
                </div>
            </div>

        </div>

    </div>

    <div class="container" id="dua">
        <div class="row vh-100">
            <div class="col-6">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus repellat repellendus est quos, quaerat voluptatum dolorem nihil nostrum perferendis earum atque natus? Dolor ullam odit quo sint aspernatur iste quod inventore, ducimus nobis dolores consequatur assumenda numquam aperiam rerum sapiente? Aliquam molestiae suscipit et animi impedit dolorum similique fugiat consectetur.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>