adding latest tutorials

2020-02-26 01:10:16 +00:00
parent 8b1d7f6f45
commit 4f666020c1
26 changed files with 20725 additions and 29 deletions
--- a/tutorials/events-app/src/views/Home.vue
+++ b/tutorials/events-app/src/views/Home.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="home">
+    <section class="hero">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Welcome to the Animal Rescue League
+          </h1>
+          <h2 class="subtitle">
+            Make sure you check out the upcoming events below:
+          </h2>
+          <div class="button-block">
+            <button class="button is-xl is-dark">Sign up to browse events</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  components: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.hero {
+  text-align: center;
+  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 400px;
+}
+
+.hero-body .title {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
+  padding: 40px 0 20px 0;
+  font-size: 60px;
+}
+
+.subtitle {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
+  font-size: 30px;
+}
+
+.button-block {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  position: absolute;
+  bottom: -150px;
+
+  .button {
+    margin-right: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .welcome {
+    width: 400px;
+    padding: 10px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.is-xl {
+  font-size: 1.7rem;
+}
+</style>