Skip to main content
4 de 4
se añadieron 92 caracteres en el cuerpo
Jonathan Perez
  • 1.5k
  • 2
  • 5
  • 18

//Edit: solo se mueve el row-1 porque a los demás les estás dando una posición absoluta.

Veo que tienes creada una clase en la etiqueta section, podrías aplicar un margin a esta etiqueta para poder bajar los items:

 .title {
        font-family: var(--font-Retro);
        text-align: center;
        text-shadow: 2px 2px var(--pink-light);
        letter-spacing: 0.5px;
        font-size: 40px;
        margin-top: 50px;
    }
    
    .type-1 {
        color: var(--pink-retro);
    }
    
    .type-2 {
        color: white;
        font-size: 33px;
        top: 147px;
        /*position: absolute;*/
        left: 51%;
    }
    
    #row-1 {
        font-size: 57px;
    }
    
    #row-3 {
        top: 166px;
        left: 42%;
        z-index: -1; 
        /*position: absolute;*/
    }
    
    .section-home {
        width: 100%;
        text-align: center;
        position: absolute;
        margin-top: 10%;
    }
  
<html>

<head>
    <title>HOLA MUNDO</title>
</head>

<body>
    <section class="section-home">
        <h1 class="title">
            <span class="type-1" id="row-1">Hey, there</span></br>
            <span class="type-2" id="row-2">I'm</span></br>
            <span class="type-1" id="row-3">María Antonieta</span>
        </h1>
    </section>
</body>

</html>

Jonathan Perez
  • 1.5k
  • 2
  • 5
  • 18