center container to middle of page

chingu-voyage7 · Dec 13, 2018 · 44b4567 · 44b4567
1 parent b56ca89
commit 44b4567
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <v-app>
-    <app-home />
+    <v-content>
+      <app-home/>
+    </v-content>
   </v-app>
 </template>
 

diff --git a/client/src/components/Landing.vue b/client/src/components/Landing.vue
@@ -1,22 +1,20 @@
 <template>
-  <v-app>
-    <v-content>
-      <v-container grid-list-xs>
-        <v-layout row wrap>
-          <v-flex xs12 md6>
-            <div>Icon</div>
+      <v-container grid-list-xs fill-height>
+        <v-layout row wrap justify-space-around align-center>
+          <v-flex xs12 sm5>
+            <div class='text-xs-center'>
+              <v-icon size='300' color='grey darekn-1'>chat</v-icon>
+            </div>
           </v-flex>
-          <v-flex xs12 md6>
-            <div>
-              <h1>Lorem ipsum dolort.</h1>
-              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quibusdam ea, dolor suscipit doloribus voluptatem quasi fugit quas quos nisi accusamus, maiores nulla omnis. Rem expedita natus repudiandae illum harum.</p>
-              <v-btn color="success">Get Started</v-btn>
+          <v-flex xs12 sm5>
+            <div class='text-xs-center'>
+              <h1 class='pb-3 display-1 font-weight-medium'>Lorem ipsum dolort.</h1>
+              <p class='font-weight-thin body-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quibusdam ea, dolor suscipit doloribus voluptatem quasi fugit quas quos nisi accusamus, maiores nulla omnis. Rem expedita natus repudiandae illum harum.</p>
+              <v-btn color="success" class='mt-3 px-5' depressed>Get Started</v-btn>
             </div>
           </v-flex>
         </v-layout>
       </v-container>
-    </v-content>
-  </v-app>
 </template>
 
 <script>