Main page initial

parent 47431ae6
......@@ -3243,6 +3243,11 @@
}
}
},
"dom-walk": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
"integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
......@@ -4678,6 +4683,22 @@
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
"dev": true
},
"global": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
"integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
"requires": {
"min-document": "^2.19.0",
"process": "~0.5.1"
},
"dependencies": {
"process": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
"integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
}
}
},
"globals": {
"version": "11.9.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.9.0.tgz",
......@@ -6080,6 +6101,14 @@
"integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
"dev": true
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"requires": {
"dom-walk": "^0.1.0"
}
},
"mini-css-extract-plugin": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz",
......@@ -7654,8 +7683,7 @@
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha1-+hpxVEdkwDb4xJsToIsllMn4oN4=",
"dev": true
"integrity": "sha1-+hpxVEdkwDb4xJsToIsllMn4oN4="
},
"regenerator-transform": {
"version": "0.13.3",
......@@ -9460,6 +9488,16 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.21.tgz",
"integrity": "sha1-PTPc0Du4E5Es6JSoMDq1U2mcSoU="
},
"vue-carousel": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.17.0.tgz",
"integrity": "sha512-KdRm65ABQWYqIi/5JWJWi2lUIOl7+lNRJW47kplD+OheKrYA8PrCgPhCXODTwOny25DqoyT7z0ynX/TZ849xXw==",
"requires": {
"global": "^4.3.2",
"regenerator-runtime": "^0.12.1",
"vue": "^2.5.17"
}
},
"vue-hot-reload-api": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",
......
......@@ -11,6 +11,7 @@
},
"dependencies": {
"vue": "^2.5.17",
"vue-carousel": "^0.17.0",
"vue-router": "^3.0.2"
},
"devDependencies": {
......
......@@ -9,17 +9,10 @@
<div class="content">
</div>
<main>
<aside class="sidebar">
<main class="content">
<router-view></router-view>
</main>
</aside>
<div class="content">
<router-view></router-view>
</div>
</main>
<footer>
<p>Copyright 2019</p>
</footer>
</div>
</div>
......@@ -118,5 +111,9 @@ footer p {
margin-left:10px;
}
main {
padding: 30px;
}
</style>
<template lang="html">
<div class="greeting">
<div >
<h2>
Wellcome to the Vue.js blog
Recipe
</h2>
<img src="../assets/logo.png" alt="vuejs logo">
<search-bar></search-bar>
<carousel :per-page="1">
<slide>
<img src="../assets/waffle.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/waffle.jpg">
</slide>
</carousel>
<div class="top-categories">
<h2>Top Categories</h2>
<div class="row" >
<div v-for="cat in categories">
<div class="category-item">
<img src="../assets/waffle.jpg">
<p>Name</p>
</div>
</div>
</div>
</div>
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
<div v-for="cat in categories">
<div class="recipe-item">
<img src="../assets/waffle.jpg">
<p>Content</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from './SearchBar.vue';
export default {
name: 'app',
components: {
SearchBar
},
data: () => ({
categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
}),
computed: {
},
methods: {
}
}
</script>
<style>
.greeting {
display: flex;
......@@ -15,4 +74,25 @@
text-align: center;
flex-direction: column;
}
.top-categories img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.category-item {
padding: 10px;
}
.recipe-item {
padding: 10px;
}
.recipe-item img {
width: 300px;
height: 200px;
object-fit: cover;
}
</style>
<template lang="html">
<div class="greeting">
<input v-model="message" placeholder="What do you search for?">
</div>
</template>
<style>
</style>
......@@ -11,11 +11,15 @@ new Vue({
import Vue from 'vue'
import Router from 'vue-router'
import VueCarousel from 'vue-carousel';
import App from './App.vue'
import Home from './components/Home.vue'
import ProfileSetup from './components/ProfileSetup.vue'
import Recipe from './components/Recipe.vue'
Vue.use(VueCarousel);
Vue.use(Router)
const router = new Router({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment