vista maquetada de informacion personal form

src/App.vue

@@ -1,14 +1,11 @@
 <template>
   <div id="app">
-    <Header />
       <router-view></router-view>
-    <Footer />
   </div>
 </template>
 
 <script>
-import Header from './components/Header'
-import Footer from './components/Footer'
+
 
 import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue'
@@ -20,18 +17,16 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 export default {
-  name: 'app',
-  components: {
-        Header,
-        Footer
-    },
+  name: 'app'
 }
 </script>
 
-<style scoped>
 
-#app {
-  
+<style>
+
+.row {
+  margin: 0 !important;
 }
 
-</style>
+
+</style>

src/components/ShoppingNav.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="BotonesShopping" class="row">
+ <router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop "> <a href="#" class="btn .azul btn-primary active" role="button" aria-pressed="true">Datos Personales</a></router-link>
+<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Direcciones</a> </router-link>
+<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Envio</a> </router-link>
+<router-link to="/datosPersonales" class="col-sm-3 col-md-3 col-lg-3 col-xl-3 col-12 mt-1 d-flex align-items-center navshop ">  <a href="#" class="btn .gris btn-secondary " role="button"  disabled>Pago</a>  </router-link>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+<style >
+
+.verde{
+    background-color: #29B026 ;
+}
+.azul{
+    background-color: #1B3D70 !important;
+}
+.gris{
+    background-color: #C4C4C4;
+}
+
+.navshop  a {
+ width: 100%;
+
+}
+
+@media screen and (max-width:1023px ) and (min-width: 770px) {
+  .navshop a {
+    font-size: .8rem !important;
+    }
+}
+
+
+
+</style>

src/icons.js

@@ -0,0 +1,30 @@
+import {library} from '@fortawesome/fontawesome-svg-core'
+import {
+    faUserSecret,
+    faUser,
+    faLock,
+    faGraduationCap,
+    faExternalLinkAlt,
+    faKey,
+    faExclamationCircle,
+    faEnvelope,
+    faShoppingCart,
+    faTrash,
+    faMapMarkerAlt,
+    faPhoneAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+
+library.add(faUserSecret)
+library.add(faUser)
+library.add(faLock)
+library.add(faExternalLinkAlt)
+library.add(faGraduationCap)
+library.add(faExclamationCircle)
+library.add(faKey)
+library.add(faEnvelope)
+library.add(faShoppingCart)
+library.add(faTrash)
+library.add(faMapMarkerAlt)
+library.add(faPhoneAlt)
+

src/main.js

@@ -1,36 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './routes'
+import "bootstrap"
+import "bootstrap/dist/css/bootstrap.min.css"
 
-import {library} from '@fortawesome/fontawesome-svg-core'
-import {
-    faUserSecret,
-    faUser,
-    faLock,
-    faGraduationCap,
-    faExternalLinkAlt,
-    faKey,
-    faExclamationCircle,
-    faEnvelope,
-    faShoppingCart,
-    faTrash,
-    faMapMarkerAlt,
-    faPhoneAlt
-} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
-
-library.add(faUserSecret)
-library.add(faUser)
-library.add(faLock)
-library.add(faExternalLinkAlt)
-library.add(faGraduationCap)
-library.add(faExclamationCircle)
-library.add(faKey)
-library.add(faEnvelope)
-library.add(faShoppingCart)
-library.add(faTrash)
-library.add(faMapMarkerAlt)
-library.add(faPhoneAlt)
+import "./icons"
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 

src/routes.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
+import PersonalData from './view/PersonalData.vue'
 
 const routes = [
     {
@@ -14,6 +15,11 @@ const routes = [
         component: Home,
         name: 'home'
     },
+    {
+        path: '/datosPersonales',
+        component: PersonalData,
+        name: 'personalData'
+    }
 ]
 
 Vue.use(VueRouter)

src/view/Home.vue

@@ -1,15 +1,22 @@
 <template>
+<div>
+<Header></Header>
 <div class="container my-5">
-  <h1>Hola</h1>
+  <h1 class="text-center">Home</h1>
+</div>
+<Footer></Footer>
 </div>
 </template>
 
 <script>
-export default {
+import Header from '../components/Header'
+import Footer from '../components/Footer'
 
+
+export default {
+components: {
+        Header,
+        Footer
+    }
 }
 </script>
-
-<style>
-
-</style>

src/view/PersonalData.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav></ShoppingNav>
+
+  <form class="mt-4">
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-check">
+    <input type="checkbox" class="form-check-input" id="exampleCheck1">
+    <label class="form-check-label" for="exampleCheck1">Check me out</label>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+
+</section>
+
+<aside class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 bg-primary">
+  <h3 class="text-center">status</h3>
+</aside>
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav
+    }
+}
+</script>
+
+<style scoped>
+
+</style>