Toonimizedapp.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toonimized App</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background: rgb(164,236,141);
            background: linear-gradient(90deg, rgba(164,236,141,1) 13%, rgba(219,224,47,1) 53%, rgba(196,206,22,1) 88%);      
         }



        .navbar-container {
            background: rgb(112, 220, 77);
            background: linear-gradient(90deg, rgba(112, 220, 77, 1) 0%, rgba(180, 185, 28, 1) 36%, rgba(196, 206, 22, 1) 94%);
            display: flex;
            justify-content: space-between;
            padding: 14.8px 47px 4.4px 8px;
            margin: 0px;
            font-size: 15px;
            font-family: Arial, Helvetica, sans-serif;
        }

        img {
            height: 22px;
        }

        td {
            padding: 12px;
        }

        #cartoon3 {


            height: 100vh;
            width: 100%;
            /* bottom: 0px; */
        }

        #cartoon2 {

            height: 100vh;
            width: 50%;
            position: absolute;
            left: 45vw;
            bottom: 0px;
            top: 10vh;
            /* right: 100px; */
        }

        #main-div {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 100%;
            justify-content: space-around;
        }

        #right-side-div {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 40%;
            background-color: aquamarine;
            justify-content: center;
        }

        #left-side-div {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 60%;
            justify-content: center;
            gap: 4vh;
        }

        #left-side-div h1 {
            font-size: 6vw;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-weight: bolder;
            padding-left: 20px;
        }


        #left-side-div h4 {
            font-size: 25px;
            font-family: Georgia, 'Times New Roman', Times, serif;
            padding-left: 30px;
            font-weight: bolder;
        }


    </style>
</head>

<body>

    <div class="navbar-container">

        <table>
            <tr>
                <td>Home</td>
                <td>Gallery</td>
                <td>Artists</td>
                <td>FAQ</td>
            </tr>
            <img src="https://res.cloudinary.com/dapozvnbr/image/upload/v1600086643/Logo_hafewu.png" alt="">
        </table>

    </div>

    <div id="main-div">
        <div id="left-side-div">
            <h1>Cartoonize</h1>
            <h1>Yourself</h1>

            <h4>No Generated!</h4>
            <h4>Enjoy an Artist Personalized Work of You!</h4>
        </div>

        <div id="right-side-div">
            <a>
                <img id="cartoon3"
                    src="https://res.cloudinary.com/dapozvnbr/image/upload/v1600086924/Home/home_i1wlpb.png" alt="">
                <img id="cartoon2"
                    src="https://res.cloudinary.com/dapozvnbr/image/upload/v1600085486/Home/GREENportalImp.new_1_3_3_jykcsl.png"
                    alt="">
            </a>
        </div>

    </div>


</body>

</html>