From fa3f2d2cd196998bd1d0d09a0c649d7f26500ded Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Sun, 10 May 2020 09:24:22 -0400
Subject: Added the files

---
 components/Logo.vue        | 79 ++++++++++++++++++++++++++++++++++++++++++++++
 components/README.md       |  7 ++++
 components/VuetifyLogo.vue | 18 +++++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 components/Logo.vue
 create mode 100644 components/README.md
 create mode 100644 components/VuetifyLogo.vue

(limited to 'components')

diff --git a/components/Logo.vue b/components/Logo.vue
new file mode 100644
index 0000000..6c72854
--- /dev/null
+++ b/components/Logo.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="VueToNuxtLogo">
+    <div class="Triangle Triangle--two" />
+    <div class="Triangle Triangle--one" />
+    <div class="Triangle Triangle--three" />
+    <div class="Triangle Triangle--four" />
+  </div>
+</template>
+
+<style>
+.VueToNuxtLogo {
+  display: inline-block;
+  animation: turn 2s linear forwards 1s;
+  transform: rotateX(180deg);
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  width: 245px;
+}
+
+.Triangle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.Triangle--one {
+  border-left: 105px solid transparent;
+  border-right: 105px solid transparent;
+  border-bottom: 180px solid #41b883;
+}
+
+.Triangle--two {
+  top: 30px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 87.5px solid transparent;
+  border-right: 87.5px solid transparent;
+  border-bottom: 150px solid #3b8070;
+}
+
+.Triangle--three {
+  top: 60px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 70px solid transparent;
+  border-right: 70px solid transparent;
+  border-bottom: 120px solid #35495e;
+}
+
+.Triangle--four {
+  top: 120px;
+  left: 70px;
+  animation: godown 0.5s linear forwards 3s;
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 60px solid #fff;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes godown {
+  100% {
+    top: 180px;
+  }
+}
+
+@keyframes goright {
+  100% {
+    left: 70px;
+  }
+}
+</style>
diff --git a/components/README.md b/components/README.md
new file mode 100644
index 0000000..a079f10
--- /dev/null
+++ b/components/README.md
@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._
diff --git a/components/VuetifyLogo.vue b/components/VuetifyLogo.vue
new file mode 100644
index 0000000..9a60937
--- /dev/null
+++ b/components/VuetifyLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <img class="VuetifyLogo" alt="Vuetify Logo" src="/vuetify-logo.svg" />
+</template>
+
+<style>
+.VuetifyLogo {
+  height: 180px;
+  width: 180px;
+  transform: rotateY(560deg);
+  animation: turn 3.5s ease-out forwards 1s;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+</style>
-- 
cgit v1.2.3