Hola. Alguien podría explicarme dos cosas: <ol> <li>¿Cómo pongo el texto del párrafo en dos líneas al costado derecho?. Que ocupe el cinc...

jose manuel meneses silva

Pregunta

student•hace 4 años

Hola. Alguien podría explicarme dos cosas:

¿Cómo pongo el texto del párrafo en dos líneas al costado derecho?. Que ocupe el cincuenta por ciento del lado derecho. 2. ¿Cómo hago para poner el cuadro de foto encima de los otros para que ocupe casi la mitad de la pantalla del lado izquierdo?

![](

<<!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>3 squares</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main>
        <div class="position-title">
            <header class="title">This is Bambina</header>
        </div>
        <div class="picture">box for picture</div>
        <div class="text">
            <p class="words">I am a lovely she-dog. I have been with my masters for 3 years.

            I am a happy dog. Wish there was no cat here but, Life is not perfect.
            </p>
            
        </div>
       

        <div class="button">
            <button>Click here to learn more</button>

        </div>
        
       
    </main>
</body>
</html>>

<body{
    background-color:rgba(172, 255, 47, 0.418);
}
.position-title{
    display: flex;
    justify-content: flex-end;
}
.title{
    background-color: teal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    width: 30%;
    height:45px;
    text-align: center;
    color:white;
    margin: 80px;
    border-radius: 20px;
}
.text{
    background-color: aliceblue;
    height:320px;
    display:flex;
    justify-content: flex-end;
    position:relative;
}
.words{
    font-size:x-large;
    float:right;
}
.picture{
    width:100px;
    height:100px;
    background-color: cyan;
    
}
.button{
    display:flex;
    justify-content: flex-end;
    margin: 30px;
    margin-right: 180px;
}>

jose manuel meneses silva

student•hace 4 años

Gracias Ismael.

Ismael Torres

student•hace 4 años

Buen día José Te comparto el código y antes te comento: Para hacer un salto de línea en un párrafo, utilizas la etiqueta <br> si necesitas mayor explicación del código que te dejo, no dudes en contactarme. Saludos:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { width: 100%; margin: 0; padding: 0; } p, figure { margin: 0; padding: 0; } .container{ display: flex; } .container > * { width: 50%; } </style> </head> <body> <div class="container"> <figure> <img src="photo.jpg" alt="Foto"> </figure> <div> <p>I am a lovely she-dog. I have been with my masters for 3 years. <br> I am a happy dog. Wish there was no cat here but, Life is not perfect.</p> </div> </div> </body> </html>

Hola. Alguien podría explicarme dos cosas: <ol> <li>¿Cómo pongo el texto del párrafo en dos líneas al costado derecho?. Que ocupe el cinc...

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS