Adding more text HTML-CodePudding

I'm making a personal site but I am also a bit of a newbie. I wanted to eventually implement some sort of smooth scrolling but for now, I'm trying to add more text and place it in the center of the screen. I can't seem to figure out how to do it, I've tried a few different things but not what I'm looking for. My vision is a smaller line of text that says "Hi, my name is", then in large text "name". Underneath I want smaller text in more paragraph form. Here is what I currently have:

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@1,700;1,800&display=swap');
*

{
    margin: 0;
    padding: 0;
    bottom: 0;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body
{
    min-height: 100vh;
    background: linear-gradient(#000, #fff);
}
header
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: top;
}
header .logo
{
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}
.header img 
{
    float: left;
    width: 160px;
    height: 150px;
    position: absolute;
    left: 50px;
    top: -20px;

}
  

header ul
{
    display: flex;
    justify-content: center;
    align-items: top;
}
header ul li
{
    list-style: none;
    margin-left: 20px;
    margin-top: 10px;
}
header ul li a
{
    text-decoration: none;
    padding: 6px 15px;
    color: #fff;
    border-radius: 20px;
}
header ul li a:hover ,
header ul li a.active
{
    background: #CEE4F3;
    color: #000;
}
section
{
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 100px;
    z-index: -1000;
    
}
section img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1000;
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>personal site</title>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <div >
            <img src="logo-no-background.png" alt="logo" />
          </div>
        <ul>
            <li><a href="#" >Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Personal Projects</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>
    <section>
        <img src="7076118.jpg" id="wavy">
    </section>
</body>
</html>

CodePudding user response：

You can use prompt() to get user input. Then assign that to the innerText of a DOM element.

const input = prompt('enter your name: ');
const name = document.querySelector('.name');

name.innerText = input;

<h2>Hi, my name is</h2>
<h1 ></h1>

CodePudding user response：

I assume you want to achieve something the this? You can then play around with the style properties to achieve your desired results. Mark correct if helped