home.html

<html>
    <head>
        <title>
            sample web
        </title>
<link rel="stylesheet" href="can.css">
<script>
    function cal(){
        window.open("cal.html")
    }
    function todo(){
        window.open("todolist.html")
    }
    function alarm(){
        window.open("alarm.html")
    }
    function budget(){
        window.open("bud.html")
    }
    function quote(){
        window.open("quote.html")
    }
    function chatbot(){
        window.open("chot.html")
    }
    function pomodoro(){
        window.open("pomo.html")
    }


</script>
    </head>
    <body>
        <div class="banner">
            <div class="content">
                <h1 style="font-size: 50px;">You may delay but time will not...!!</h1>
                <p style="color: white;">Start your work now</p>
                <div>
                    <button type="button" onclick="cal()"><span></span>Calendar</button>
                    <button type="button" onclick="todo()"><span></span>To-Do List</button>
                    <button type="button" onclick="alarm()"><span></span>Alarm Clock</button>
                    <button type="button" onclick="budget()"><span></span>Budget Planner</button>
                    <button type="button" onclick="quote()"><span></span>Quote Generator</button>
                    <button type="button" onclick="chatbot()"><span></span>Chat Bot</button>
                    <button type="button" onclick="pomodoro()"><span></span>Pomodoro</button>

                </div>
            </div>
        </div> 

    </body>
</html>