m-index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MODAL BOX</title>
    <link rel="stylesheet" href="./m-style.css">
</head>

<body>
    <div class="whole">
        <header>
            <h1>Welcome to modal</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores similique fugiat quia ullam
                dignissimos eligendi consequuntur adipisci sequi, impedit atque voluptatibus incidunt exercitationem
                autem officia veniam eum dolore, dolor praesentium!</p>
        </header>
        <div class="container">
            <div class="about">
                <h1>About</h1>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. At inventore in, consequuntur vitae
                    repellat hic quae quaerat pariatur incidunt, modi accusantium tempore illo dolorem minus suscipit
                    expedita iste, maxime veniam beatae voluptatibus ipsa officiis eum? Doloribus molestiae vitae nulla
                    officia tenetur nobis sit, optio ab voluptatibus tempora ratione odit alias.
                </p>
                <button id="btn">Submit(Show modal)</button>
            </div>
            <div class="side">
                <div class="proj1">
                    <h3>project1</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit animi temporibus quae deleniti
                        cupiditate, ipsam exercitationem nihil unde voluptate aut? Corporis, autem veniam?</p>
                </div>
                <div class="proj2">
                    <h3>project2</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit animi temporibus quae deleniti
                        cupiditate, ipsam exercitationem nihil unde voluptate aut? Corporis, autem veniam?</p>
                </div>
            </div>
        </div>
    </div>

    <!-- modal box above the main page-->
    <div class="modalbg">
        <div class="modalbox">
            <div class="close">
            X
            </div>
            <h2>Give your details</h2>
            <form action="#">
                <label for="name">Name: </label>
                <input type="text" name="name">
                <label for="mobile">Contact no.: </label>
                <input type="number" name="mobile">
                <button id="submit">Submit</button>
            </form>
        </div>
    </div>

    <script src="./m-app.js"></script>
</body>

</html>