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%;
            }

           /* .text {
                font-size: 20px;
            }*/

        </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/bRM2Gn9nU7Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>

            <div id="content"> <!-- content -->

                <div v-for="story in stories">
                    <span>{{ story.name }}</span>
                    <span>{{ story.message }}</span>
                </div>

                <div v-if="stories.length == 1">
                    <p>No comments yet</p>
                </div>

                <hr>
                <h3>Add Comment</h3>
                <div>
                    <input type="text" v-model="name" placeholder="Your name"/>
                    <br/>
                    <br/>
                    <textarea v-model="message" placeholder="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: ""
                        }
                    ],
                    name: "",
                    message: ""
                },
                methods: {
                    addStory() {

                        this.stories.push({
                            name: this.name + ' : ',
                            message: this.message,
                        });

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

                // beforeMount(){
                //     this.validation()
                // },

            })

        </script>

    </body>
</html>