Ya lo termine pero no es responsivo. | HTML y CSS: ambientes de desarrollo, estructura de archivos y tags | Alura Latam

en mi codigo la imagen use una propia y no la de figma asi que el marco que esta en la imagen de color azul lo realice con codigo al igual que posicionar la imagen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <title>Home</title>
</head>
<body>
    <div class="contenedor">
        <div class="texto">
          <h1>Eleva tú negocio digital a otro nivel <span> ¡con un Front-end de calidad! </span></h1>
          <p>¡Hola! Soy Jesús David, desarrollador Front-end con especialización en React, HTML y CSS. 
              Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?</p>
              <div class="contenedor-boton">
                  <button>Instagram</button>
                  <button>GitHub</button>
              </div>
        </div>
        <div class="contenedor-imagen">
            <div class="imagen">
                <img src="/img/me.png" alt="yo">
            </div>
        </div>
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: rgb(17, 16, 16);
}
.contenedor {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 100px;
}

.texto {
    width: 40%;
    height: 45%;
}

h1 {
    font-family: "Krona One", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 36px;
}

h1 span {
    color: #22D4FD;
}
  
p {
    font-family: "Montserrat", sans-serif;
    color: white;
    font-size: 24px;
    margin: 40px 0;
}

.contenedor-imagen {
    border-radius: 16px;
    border: 3px solid #22D4FD;
}

.contenedor-imagen .imagen img {
    width: 350px;
    border-radius: 16px;
    position: relative;
    right: 10px;
    top: 10px;
}


.contenedor-imagen .imagen {
    border-radius: 16px;
    height: 370px;
}

.contenedor-boton {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

button {
    border-Radius: 16px;
    Padding: 16px;
    Gap: 16px;
    background-color: #22D4FD;
    width: 48%;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: black;
    font-size: 24px;
}