VUE_GabenParadise/src/App.vue

<template>
  <div id="app">
    <div class="header-top">
      <div class>
        <h1 class="display-4">{{ title }}</h1>
        <p class="lead">{{ content }}</p>
      </div>
      <div class>
        <i id="sub-identifi" class="fa fa-bell-o bell" aria-hidden="true"></i>
      </div>
    </div>
    <Notification />
    <UpdateBar />
    <GamesList />
</template>

<style>
body {
  background: #151515;
  color: white;
}

.header-top {
  display: flex;
  align-items: space-between;
}

.bell {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 2;
}
</style>

<script>
import GamesList from "./components/GamesList.vue";
import Notification from "./components/Notification.vue";
import UpdateBar from "./components/UpdateBar.vue";

export default {
  name: "App",
  data() {
    return {
      title: "Gaben Paradise",
      content: "get information about free games in one place",
    };
  },
  components: {
    GamesList,
    Notification,
    UpdateBar
  },
};
</script>