Header component

Now that you have understood the fundamentals of single file components, implement the header component by following the next steps:

1. Create a new folder /src/components/common
2. Create a new file /src/components/common/Header.vue
3. Write the following code in Header.vue, as shown in the following example:

<template>
  <header class="app-header app-bg">
    <div class="maxHeight flex flex-align-items--center">
      <img src="../../assets/logo.png" class="app-logo" />
      <span class="app-slogan">Shop 'till you Drop</span>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
}
</script>

<style scoped>
.app-header {
  height: 200px;
  border-bottom: 1px solid black;
}

.app-header::after {
  content: "";
  height: 200px;
  opacity: 0.5;
  background: url('../../assets/herobg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position...