Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>

    <style>
      body {
        margin: 0px;
      }

      #header {
        height: 100px;
        background:#cccccc;
        padding: 50px;
      }

      #header div {
        display: inline-block;
        vertical-align: middle;
      }

      #logo-container {
        margin-right: 50px;
      }

      #logo-container img {
        height: 100px;
        width:auto;
      }

      #header-text-container h1 {
        font-family: "Helvetica";
      }

      #banner {
         height: 720px;
         background-color: #000;
         text-align: center;
      }

      #content {
        padding: 50px;
        min-height: 500px;
      }


      }

      #footer {
        height: 100px;
        padding: 10px;
        background: #cccccc;
      }

      #footer div {
        display: inline-block;
        width: 33%;
      }


    </style>
  </head>
  <body>

    <div id="app"> <!-- main div -->

      <div id="header"> <!-- header -->
        <div id="logo-container">
          <img src="https://image.flaticon.com/icons/png/128/201/201565.png" />
        </div>
        <div id="header-text-container">
          <h1>Road to Success</h1>
        </div>
      </div>

      <div id="banner"> <!-- banner -->
          }
          <iframe width="1080" height="720" src="https://www.youtube.com/embed/-mOM5pZ8XCg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>

      <div id="content"> <!-- content -->
        <div v-for="story in stories">
          <span>{{ story.name }}</span>..
          <span class="text">{{ story.message }}</span>
        </div>
        <hr>
        <h3>Your Comment</h3>

        <div>
          <input type="text" v-model="name" placeholder="Your name"/>
          <br/>
          <br/>
          <textarea v-model="message" placeholder="Your comment"></textarea>
          <br>
          <br/>
          <button v-on:click="addStory">Submit</button>
        </div>
        <hr>
      </div>

      <div id="footer"> <!-- footer -->
        <div>
          <p class="text">
            Beginning place. Multiply moving divided darkness so, forth first male all, be one called dominion cattle have gathering man moveth.
          </p>
        </div>

        <div>
          <p class="text">
            Light female open called. Make lights, there for forth unto there. Waters great air creepeth were can't one great night.
          </p>
        </div>

        <div>
          <p class="text">
            You'll. From stars don't they're behold, fill gathered. After let bring gathered she'd for won't good. Male one face. Firmament.
          </p>
        </div>
      </div>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

      var app = new Vue({
        el: "#app",
        data: {
          stories: [
            {

            }
          ],
          name: "",message: ""
        },
        methods: {
          addStory() {
            this.stories.push({
              name: this.name,message: this.message
            });

            this.name = "";this.message = "";
          }
        }
      })

    </script>

  </body>
</html>