Implement task #22 - Page layout

Create default layout component

To create the default layout component, follow these steps:

Create a new file named default.vue under the layouts directory.
Add the necessary Vue code to define the component.

<template>
  <div class="container">
    <header>
      <Nav />
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <Footer />
    </footer>
  </div>
</template>

<script>
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'

export default {
  components: {
    Nav,
    Footer
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  max-width: 960px;
  padding: 0 20px;
}

header, main, footer {
  margin-bottom: 20px;
}
</style>

Add header component

Inside the default.vue layout component, create a new Vue component named Header.vue under the components directory. This component will display the site name 'Card Memory Game' as the header of each page.

Add footer component

As the principal engineer, I have decided to add a footer component to the default.vue layout of the ol0lo project. This component will display the copyright information as the footer of each page. To implement this, I have created a new Vue component named Footer.vue under the components directory. This component will be included in the default.vue layout to ensure that the footer is displayed on every page of the website.

Commit message: Added Footer component

Name	Link
Latest commit	fecb4c8b7698d7e8fb90a6f5c47179e2c1739129
Latest deploy log	https://app.netlify.com/sites/willowy-kleicha-1542e1/deploys/64a853c32b910f00088e49e3
Deploy Preview	https://deploy-preview-23--willowy-kleicha-1542e1.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

kucherenko / ol0lo