Ignorance ruining everything

I appreciate that you are bringing so many things in your design, but check whether it is consistent or appealing everywhere. You will understand in following photos.
This is good:

This is where ignorance comes into play

I think the following code is more consistent.

<!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>Document</title>

</head>

<body>

    <style>

        body {

            width: 100vw;

            min-height: 100vh;

            height: max-content;

            overflow: hidden;

            margin: 0;

        }

        

        body>img {

            position: absolute;

            height: 100vh;

            width: 100vw;

            background-repeat: no-repeat;

            object-fit: cover;

            z-index: -1;

        }

        

        .container {

            height: 100vh;

            width: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        .card-container {

            width: 280px;

            display: flex;

            flex-flow: column;

            height: max-content;

        }

        

        .card-container img {

            width: 100%;

            height: 200px;

            object-fit: cover;

            margin: 0;

            border-top-left-radius: 10px;

            border-top-right-radius: 10px;

        }

        

        .section {

            width: 100%;

            height: max-content;

            background: rgba(53, 53, 53, 0.47);

            backdrop-filter: blur(62px);

            font-family: Poppins, sans-serif;

            margin: 0;

        }

        

        #heading {

            display: flex;

            font-size: 18px;

            line-height: 1.4em;

            flex-flow: column nowrap;

            color: white;

            padding: 20px;

            padding-bottom: 5px;

        }

        

        #regularDetails {

            align-self: flex-end;

            width: 100%;

            height: 30px;

            display: flex;

            /* padding: 10px;

            padding-top: 0; */

            justify-content: space-between;

            margin-bottom: 10px;

            padding-left: 22px;

        }

        

        #regularDetails div {

            width: 50%;

            display: flex;

        }

        

        #regularDetails :first-child {

            font-size: 14px;

            font-weight: bold;

            color: rgb(182, 182, 182);

        }

        

        #regularDetails :last-child {

            color: rgb(238, 232, 232);

            font-size: 16px;

        }

        

        #regularDetails :last-child:hover {

            color: white;

            cursor: pointer;

        }

    </style>

    <img src="https://wallpaperaccess.com/full/524676.jpg" alt="china wall">

    <div class="container">

        <div class="card-container">

            <img src="https://i.kinja-img.com/gawker-media/image/upload/c_fit,f_auto,g_center,pg_1,q_60,w_965/68517823670148cd47ce73ba4e835dfc.jpg">

            <div class="section">

                <div id="heading">

                    Homeowner Shoos Away Feral Driverless Car Rooting Around Garage

                </div>

                <div id="regularDetails">

                    <div>33 mins ago</div>

                    <div>The Onion</div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Try the above code, Have a nice day

Thank you for your feedback.

1 Like

When I send that msg, I was half slept so I can’t say certain things. You people are doing great, sonner or later we will replace Chrome. You people got best business model introducing crypto is one of the best things a browser can do, anyway. Tell my best wishes to the person who come up this kind of business model…

1 Like