index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Login</title>
</head>

<body>
    <div class="wrapper">

        <div class="text">
            <h2>SolarTrack is a cutting-edge app for streamlined project monitoring in the solar panel industry. It
                offers real-time insights, collaboration, and analytics for efficient project execution. With
                SolarTrack, teams can track progress, optimize resources, and ensure successful solar panel
                installations.</h2>
        </div>
        <div class="logo">
            <img src="image/sun.svg" alt="ogo">
        </div>
        <div class="lgo-name">
            <h1>SunTrack</h1>
        </div>
        <div class="container-main">

            <div class="row">
                <div class="page">

                    <div class="input-box">
                        <header>Log in</header>
                        <div class="input-field">
                            <input type="text" class="box" id="username" placeholder="Username" required
                                autocomplete="off">

                        </div>
                        <div class="input-field">
                            <input type="text" class="box" id="password" placeholder="Password" required
                                autocomplete="off">

                            <input type="checkbox" class="check-box">
                            <label>Remember me</label>
                        </div>
                        <div class="input-field">
                            <input type="submit" id="submit" value="Log in">

                        </div>
                        <div class="retrieve">
                            <p1>Forgot Password? Click here</p1>
                        </div>
                        <div class="alternate">


                            <span>or</span>

                        </div>

                        <div class="social-icons">
                            <button class="apple"><img src="image/Apple Logo.svg">Log in with Apple</button>
                            <button class="facebook"><img src="image/Facebook Logo.svg">Log in with Facebook</button>
                            <button class="google"><img src="image/Google Logo.png">Log in with Google</button>

                        </div>




                    </div>
                    <div class="signup">Don't have an account yet? Sign up now</div>

                </div>
            </div>
        </div>
    </div>
</body>

</html>