helloAdvCSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello,world!</title>
        <style>
            html,
            body {
                display: flex;
                height: 100%;
                align-items: center;
                justify-content: center;
            }
            .centered {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               padding: 50px;
               background-color: orange;
               border: 2px solid orange;
               border-radius: 8px;
            }
            #main {
                display: none;
            }
            #disp {
                display: flex;
            }

            button,
            input{
                background-color: orangered;
                border-radius: 28px;
                border:1px solid red;
                font-size: 1.2em;
                font-weight: bold;
                padding: 16px 31px;
                margin: 10px;
            }

            input {
                background-color: orange;
                border:2px solid red;
            }

            button:hover {
                background-color: red;
            }
            button:active {
                position:relative;
                top: 2px;
            }
            button,input:focus {
                outline: 0;
            }
        </style>
    </head>
    <body>
        <div class="centered" id="main">
            <h1 id="greeter">Hello, Stranger!</h1>
            <input id="nameIn" type="text">
            <button id="btn">Say hello!</button>
        </div>
        <div class="centered" id="disp">
            <button id="showBtn">SHOW!</button>
        </div>
        <script>
            showBtn.addEventListener( "click" , function() {main.style.display='flex'; disp.style.display='none'});
            greeter.addEventListener( "click" , function() {main.style.display='none'; disp.style.display='flex'});
            btn.addEventListener( "click" , function() {greeter.innerText = "Hello, " + (nameIn.value !="" ? nameIn.value + "!" : " John Doe!");});
        </script>
    </body>
</html>