<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Image in CSS: Flexbox -- flex-item</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <main class="container">
        <section>
            <div class="img-wrapper">
                <img src="https://user-images.githubusercontent.com/78242022/283794539-fc01d463-7bad-4887-a02a-2b9c3eed891f.jpg" alt="">
            </div>
            <div class="btn">
                <aside>
                    <button>
                        <span">Book a Call</span>
                        <i class="fa-solid fa-envelope"></i>
                    </button>

                    <button>
                        <span>Download Porfolio</span>
                        <i class="fa-solid fa-arrow-down"></i>
                    </button>
                </aside>
            </div>
            <div class="content">
               <p> 
                <strong>Aarav Sharma</strong> is a highly innovative UX designer known for his ability to seamlessly blend user-centered design principles with cutting-edge technology. With a keen eye for detail and a passion for creating intuitive digital experiences, Sharma has played a pivotal role in revolutionizing user interfaces across various platforms.</p>
            </div>
        </section>
    </main>
</body>
</html>
                                
 body {
        width: 100vw;
        height: 100vh;
        background-color: var(--gray-1);
    }

    :root {
        --transparent: rgba(1, 1, 1, 0);

        --black-0: #010101;
        --black-1: #111317;
        --black-2: #22262e;
        --black-3: #2b2f39;

        --gray-0: #6e7a92;
        --gray-1: #f4f5f8;
        --gray-2: #d3d7de;
        --gray-3: #a6aebc;

        --gradient-1: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,212,255,1) 100%);
    }

    .container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .container section {
        position: relative;
        width: 22em;
    }

    .container img {

        border-radius: 10px;
        width: 100%;
        height: auto;
    }

    .container .btn {
        width: 100%;
        position: absolute;
        bottom: 30%;

        left: 0px;
    }

    button {
        display: flex;
        justify-content: space-between;
        padding:3px;
        line-height: 3em;
        background-color: var(--gray-1);
        border: none;
        border-radius: 100px;
        cursor: pointer;
        color: var(--black-1);
        transition: 0.5s all;
    }

    button:last-child {
        background-color: var(--transparent);
        border: 2px solid var(--gray-1);
        color: var(--gray-1)
    }
    
    button:hover {
        background: var(--black-2);
        color: var(--gray-1);
    }

    i {
        display: inline-block;
        padding: 1em;
        border-radius: 100px;
        line-height: 100%;
        background-color: var(--black-0);
        color: var(--gray-1);
    }

    span {
        display: inline-block;
        padding: 0 10px;
    }

    aside {
        display: flex;
        justify-content: space-around;
    }

    .content p {
        font-family: calibri;
        color: var(--black-3);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.