Skip to main content
se añadieron 92 caracteres en el cuerpo
Origen Enlace
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 {
        margin-topwidth: 20%;
    }
 .section-home {100%;
            text-align: center;
        position: absolute;
   margin-top: 20px;/*o    margin-top: 10%*/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>

//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 {
        margin-top: 20%;
    }
 .section-home {
            text-align: center;
            margin-top: 20px;/*o 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>

//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>

se añadieron 58 caracteres en el cuerpo
Origen Enlace
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 {
        margin-top: 20%;
    }
 .section-home {
            text-align: center;
            margin-top: 10px;20px;/*o 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>

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

 .section-home {
            text-align: center;
            margin-top: 10px;/*o 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>

//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 {
        margin-top: 20%;
    }
 .section-home {
            text-align: center;
            margin-top: 20px;/*o 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>

se añadieron 58 caracteres en el cuerpo
Origen Enlace
Jonathan Perez
  • 1.5k
  • 2
  • 5
  • 18

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

 .section-home {
            text-align: center;
            margin-top: 10px;/*o 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>

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

 .section-home {
            margin-top: 10px;
        }
<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>

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

 .section-home {
            text-align: center;
            margin-top: 10px;/*o 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>

Origen Enlace
Jonathan Perez
  • 1.5k
  • 2
  • 5
  • 18
Loading