main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="Assets/main.css">
    <script src="Assets/script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GCAL</title>
    <link rel="icon" href="Assets/logo.png" type="image/png">
</head>
<body>
    <div class="mainLayout">
        <div class="displayArea">
            <div class="rightArea">
                <img class="button1" src="Assets/button.png"onclick="button1()">
                <div class="circle">
                    <div class="circleText1">ENTER HERE</div>
                    <input type="text" id="userInput1" placeholder="00" onfocus="clearPlaceholder(this)" >
                </div>
            </div>
            <div class="leftArea">
                <div class="logoArea">
                    <img src="Assets/logo.png" class="logo">
                    <p class="logoText">CAL</p>
                </div>
                    <p class="introText">Want to calculate your college grades? <br>Our easy to use GPA calculator will help you<br> Calculate your GPA and stay on top of your study grades in just minutes! </p>
                    <p class="introText2">How Many Courses...</p>
                
            </div>
        </div>
         <div class="footer">
            <p class="footerText">© [2023] GPACalculator. All Rights Reserved. Created by Oshith Roshantha 	&#x1F607;</p>
         </div>   
    </div>
</body>
</html>