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">
    <title>Sheet as Backend</title>
    <link rel="icon" type="image/x-icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP7KAYKdsFrMOD9dm7Ze3REw2oaepOUM_8qA&usqp=CAU">
</head>
<style>
    ::selection {
        color: #3d5af1;
        background-color: #000;
    }
    *{
        font-family: cursive;
    }
    .li{
        padding: 20px;
        border-bottom:2px #3d5af1 solid ;
        width: 70%;
        list-style: none;
    }
    img{
        height:50%;
        width: 50%;
    }
    .loader-container {
        margin-top: -22px;
        margin-left: -8px;
        width: 100%;
        height: 110%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        background: #000;
        z-index: 1;
    }
    .spinner {
        width: 64px;
        height: 64px;
        border: 8px solid;
        border-color: #3d5af1 transparent #3d5af1 transparent;
        border-radius: 50%;
        animation: spin-anim 1.2s linear infinite;
    }
    .heading{
        font-size: 2rem;
        font-weight: 600;
    }
    .description{
        font-size: 1.5rem;
        font-weight: 400;
    }
    
    @keyframes spin-anim {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
</style>
<body>
    <div class="loader-container" id="loader-container">
        <div class="spinner"></div>
    </div>
    <h1 class="hi">hi how are you tho</h1>
    <div class="out">
        <ul class="ul">
            <li class="li">
                <h1 class="heading">heading</h1>
                <img src="https://www.bitsathy.ac.in/wp-content/uploads/slider-03-1.jpg" alt="">
                <div class="description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas excepturi libero recusandae eligendi et dignissimos voluptate alias aut adipisci, officia necessitatibus explicabo sint porro voluptatibus rerum praesentium nisi harum aperiam?
                </div>

            </li>
        </ul>
    </div>
    <!-- <img src="https://drive.google.com/file/d/1tWz4rLhQc-Vv_mNwGl-lr6dUABI-9mp2/view?usp=sharing" alt=""> -->
</body>
<script src="./index.js" defer></script>
</html>