Preloader/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Preloader</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>  <!--*************-->
</head>
<body>


    <!-- Preloader -->
    <div id="preloader">
        <div class="loader"></div>
    </div>


    <header class="header">
        <nav class="container">
            <h1 class="logo">DOM</h1>
            <ul class="nav-items">
                <li><a href="#home">Home</a></li>
                <li><a href="#">ToDo</a></li>
                <li><a href="#">Sign Up</a></li>
            </ul>
        </nav>
        <div class="headline">
            <h2 id="main-heading">Manage Your Tasks</h2>
            <!-- <button class="btn btn-headline" onclick="click1()">Learn More..</button>  Inline HTML Event -->
            <button class="btn btn-headline">Learn More..</button>
        </div>
    </header>

    <section class="todo container">
        <h2>Your Plan for Today ?</h2>
        <form class="form-todo">
            <input type="text" name="" id="" placeholder="Add Todo">
            <input type="submit" value="Add Todo" class="btn">
        </form>
        <ul class="todo-list">
        </ul>
    </section>

    <section class="signup container">
        <h2>Sign Up</h2>
        <form action="" class="signup-form">
            <div class="form-group">
                <label for="username">User Name</label>
                <input type="text" name="username" id="username">
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" name="password" id="password">
            </div>
            <div class="form-group">
                <label for="confirmPassword">Confirm Password</label>
                <input type="password" name="confirmPassword" id="confirmPassword">
            </div>
            <div class="form-group">
                <label for="phone">Phone No</label>
                <input type="text" name="phone" id="phone">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email">
            </div>
            <div class="form-group">
                <label for="username">About Yourself</label>
                <textarea name="about" id="about" cols="30" rows="10"></textarea>
            </div>
            <button type="submit" class="btn btn-signup">Submit</button>

        </form>
    </section>


    <!-- To make the page more time to load -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Dcc4SSDpIhI?si=4OPVgSHFJ2sdznNe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
   
    
</body>
</html>