<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>
     <GamesList />
  </div>
</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";

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