Commit 7560eff7 authored by Silvana's avatar Silvana

home page

parent a9de4244
This diff is collapsed.
<template>
<div id="app">
<header class="banner">
<div class="container row center">
<div class="container row">
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Eurecom.svg/2000px-Eurecom.svg.png" alt="Eurecom Logo"> -->
<span>WebInt Project</span>
<div>The Recipes </div>
<router-link to="/profile">Login</router-link>
</div>
</header>
......
......@@ -26,6 +26,12 @@ header span {
font-family: Chalkduster, fantasy
}
header div {
text-align: left;
/* justify-content: left; */
width: 90%;
}
header img {
height: 35px;
/*position: absolute;*/
......
......@@ -137,5 +137,5 @@ li p {
}
.content{
background-image: url("../../assets/logoModif.jpeg"),url("../../assets/logo2.jpeg");
/*background-image: url("../../assets/logoModif.jpeg"),url("../../assets/logo2.jpeg");*/
}
......@@ -87,6 +87,9 @@ export default {
background: #e0e0e0;
overflow: auto;
}
footer {
padding-top: 50px;
}
</style>
<template>
<div >
<h2>
Recipe
</h2>
<div>
<div class="home-content">
<h1>
The Recipes
</h1>
<router-link to="/recipe">Go to Recipe</router-link><br>
<router-link to="/profile">Go to Profile</router-link>
<search-bar></search-bar>
<carousel :per-page="1">
<!-- <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">
<slide>
<img src="../assets/waffle.jpg">
</slide>
......@@ -46,6 +47,7 @@
</div>
</div>
</div>
</div>
<custom-footer></custom-footer>
</div>
</template>
......@@ -100,5 +102,16 @@ export default {
text-align: justify;
font-size: 0.8em;
}
.trend-recipes .row {
max-width: 1000px;
}
.carousel-home img {
object-fit: cover;
height: 300px;
}
.home-content {
max-width: 1000px;
margin: auto;
}
</style>
<template lang="html">
<div class="greeting">
<input v-model="message" placeholder="What do you search for?">
<div class="search-bar">
<!-- <input v-model="message" placeholder="What do you search for?"> -->
<vue-single-select
id="select"
v-model="selected"
:options="options"
:required="true"
:max-results="5"
placeholder="What do you want to cook?"
></vue-single-select>
</div>
</template>
<script>
import Autocomplete from 'v-autocomplete'
import VueSingleSelect from "vue-single-select";
import 'v-autocomplete/dist/v-autocomplete.css'
export default {
components: {
VueSingleSelect
},
props: {
selected: String
},
data: () => ({
message:"",
options:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
}),
}
</script>
<style>
.search-bar {
/*width: 100%;*/
margin: 30px;
}
.search-bar input {
width: 90% !important;
}
#select .search-input {
width: 100% !important;
}
#select div.cursor-pointer {
display: none;
}
</style>
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