Commit e5162634 authored by Silvana's avatar Silvana

Home Page Mock

parent 7560eff7
......@@ -5,21 +5,36 @@
The Recipes
</h1>
<!-- <router-link to="/recipe">Go to Recipe</router-link><br> -->
<router-link to="/recipe">Go to Recipe</router-link><br>
<!-- <router-link to="/profile">Go to Profile</router-link> -->
<search-bar id="home-search-bar"></search-bar>
<carousel :per-page="3" class="carousel-home" autoplay="true" loop="true" autoplayTimeout="3000">
<carousel :per-page="3" class="carousel-home" :autoplay="true" :loop="true" :autoplayTimeout="3000">
<slide>
<img src="../assets/waffle.jpg">
<img src="https://ichef.bbci.co.uk/images/ic/1280xn/p060z50q.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/pennealarrabiatapast_83813_16x9.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</slide>
<slide>
<img src="../assets/waffle.jpg">
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/waffles_82356_16x9.jpg">
</slide>
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/spaghettivongole_88988_16x9.jpg">
</slide>
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</slide>
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/smokedsalmonandpotat_90568_16x9.jpg">
</slide>
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/christmas_roast_duck_83066_16x9.jpg">
</slide>
<slide>
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/membrillo_and_stilton_28987_16x9.jpg">
</slide>
</carousel>
......@@ -28,8 +43,8 @@
<div class="row" >
<div v-for="cat in categories">
<div class="category-item">
<img src="../assets/waffle.jpg">
<p>Name</p>
<img :src="cat.img">
<p>{{cat.title}}</p>
</div>
</div>
</div>
......@@ -38,11 +53,11 @@
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
<div v-for="cat in categories">
<div v-for="item in items">
<div class="recipe-item">
<img src="../assets/waffle.jpg">
<p class="title">Delicious waffle</p>
<p class="desc">This Classic Waffle Recipe makes perfectly crisp waffles with fluffy insides that are to die for! Made with simple ingredients you already have.</p>
<img :src="item.img">
<p class="title">{{item.title}}</p>
<p class="desc">{{item.description}}</p>
</div>
</div>
</div>
......@@ -63,7 +78,76 @@ export default {
CustomFooter
},
data: () => ({
categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
// categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ],
categories:[{
title: "Desserts",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/low-fat_chocolate_sponge_79500_16x9.jpg"
},
{
title: "Italian",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/cuisines/italian_16x9.jpg"
},
{
title: "Low-sugar",
img: "https://ichef.bbci.co.uk/images/ic/320xn/p05w5zpr.jpg"
},
{
title: "Vegetarian",
img: "https://ichef.bbci.co.uk/images/ic/320xn/p05vftxg.jpg"
},
{
title: "Mexican",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_320/cuisines/mexican_16x9.jpg"
}],
items: [{
title:"Chicken Curry",
description: "From classic chicken tikka masala to Thai green curry, take a tour of global flavours with BBC Food's top curry recipes. Take on your takeaway and spice up suppertime with our favourite chicken jalfrezi, chicken korma, Japanese katsu curry or quick coconut chilli chicken.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/chickenjalfrezi_91772_16x9.jpg"
},
{
title:"Lemon Cake",
description: "Try one of our fresh and zesty lemon cake recipes, from the classic lemon drizzle to Delia’s ultimate lemon curd layer cake.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/lemon_cake_29430_16x9.jpg"
},
{
title:"Pork Pie",
description: "Pork pie's are a British classic. Herby pork housed in hot water crust pastry, they're a brilliant addition to a picnic or party table. We have pork pie recipes from Paul Hollywood, Hairy Bikers and more.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/small_pork_pies_with_11074_16x9.jpg"
},
{
title:"Opera Cake",
description: "A joconde sponge is a decorative almond-flavored sponge cake made in layers. Opéra gâteau is an elaborate version of it, here made with kirsch syrup and a chocolate ganache.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/opera_cake_04536_16x9.jpg"
},
{
title:"Stuffed Roast Turkey Breast",
description: "Less than 2 hours of roasting makes this stuffed turkey crown a relatively quick Christmas dinner. As well as lemon and thyme, the stuffing features tart dried cranberries, crunchy almonds and sweet leeks.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/roast_turkey_crown_10545_16x9.jpg"
},
{
title:"Chocolate Cupcakes",
description: "An easy chocolate cupcake recipe that's quick to prepare for birthdays, parties and bake sales.",
img:"https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/chocolate_cupcakes_14164_16x9.jpg"
},
],
carouselImgs: [
{
title: "Low-sugar Cake",
img: "https://ichef.bbci.co.uk/images/ic/1280xn/p060z50q.jpg"
},
{
title: "Penne al'arrabiata",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/pennealarrabiatapast_83813_16x9.jpg"
},
{
title: "Easy chicken traybakes",
img: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg"
},
{
title: "",
img: ""
},
]
}),
computed: {
......
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