Let's Build a Website

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>The Sun</title>

        <style>
        #title{
          color: blue;
          text-align: center;
          font-family: "Arial";
          font-size: 50px;
        }

        body{
          background-color: black;
        }

        #picSun{
          position: absolute;
          left: 20px;
          top: 200px;
        }

        #btnSunInfo{
          position: absolute;
          left: 20px;
          top: 550px;
        }

        #btnHideSun{
          position: absolute;
          left: 300px;
          top: 550px;
        }

        #sunList{
          color: white;
          position: absolute;
          left: 20px;
          top: 600px;
        }

        .btnStyle{
          background-color: green;
          color: white;
          border-radius: 15px;
          border: 1px solid green;
          padding: 10px 13px;
          cursor: pointer;
        }
        </style>

    </head>
      <script>
        var showSun = function(){
          document.getElementById("sunList").innerHTML = '<li>The Sun is the star at the center of the Solar System</li> <li>The Sun is a G-type main-sequence star (G2V)</li> <li>The Sun is roughly middle aged and has not changed dramatically for over four billion</li>';
        }

        var hideSun = function(){
          document.getElementById("sunList").innerHTML = '<p></p>';
        }
      </script>
  <body>

    <h1 id="title">The Sun</h1>

    <img id="picSun" src="https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA's_Solar_Dynamics_Observatory_-_20100819.jpg"
    alt="Picture of the Sun" width="350">

    <button id="btnSunInfo" onclick="showSun()" class="btnStyle">Show Info</button>
    <button id="btnHideSun" onclick="hideSun()" class="btnStyle">Hide Info</button>

    <ul id="sunList">

    </ul>

  </body>
</html>