├── src ├── validators │ ├── checked.js │ └── minLength.js ├── assets │ ├── img │ │ ├── good-1.jpg │ │ ├── paper.jpg │ │ ├── thanks.png │ │ ├── Main_bg.jpg │ │ ├── coffee-1.jpg │ │ ├── coffee-2.jpg │ │ ├── coffee-3.jpg │ │ ├── coffee_bg.jpg │ │ ├── goods_bg.jpg │ │ ├── coffee_girl.jpg │ │ ├── coffee_item.jpg │ │ ├── contacts_bg.jpg │ │ └── coffee_goods.jpg │ ├── scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── style.scss │ │ ├── _mainpage.scss │ │ └── _pages.scss │ └── logo │ │ ├── Beans_logo_dark.svg │ │ ├── Beans_logo.svg │ │ ├── Logo_black.svg │ │ └── Logo.svg ├── filters │ └── index.js ├── mixins │ ├── navigate.js │ └── loading.js ├── main.js ├── App.vue ├── components │ ├── NavItem.vue │ ├── NavBarComponent.vue │ ├── ProductCard.vue │ ├── FooterComponent.vue │ └── SpinnerComponent.vue ├── store │ ├── bestsellers.js │ ├── goods.js │ ├── index.js │ ├── coffee.js │ └── links.js ├── router │ └── index.js └── views │ ├── ThanksView.vue │ ├── ItemView.vue │ ├── GoodsView.vue │ ├── HeroView.vue │ ├── OurCoffeeView.vue │ └── ContactView.vue ├── public ├── favicon.ico └── index.html ├── babel.config.js ├── vue.config.js ├── .gitignore ├── jsconfig.json ├── README.md ├── package.json └── db.json /src/validators/checked.js: -------------------------------------------------------------------------------- 1 | export const validCheckbox = (value) => value.include('') -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/img/good-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/good-1.jpg -------------------------------------------------------------------------------- /src/assets/img/paper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/paper.jpg -------------------------------------------------------------------------------- /src/assets/img/thanks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/thanks.png -------------------------------------------------------------------------------- /src/assets/img/Main_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/Main_bg.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee-1.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee-2.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee-3.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee_bg.jpg -------------------------------------------------------------------------------- /src/assets/img/goods_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/goods_bg.jpg -------------------------------------------------------------------------------- /src/validators/minLength.js: -------------------------------------------------------------------------------- 1 | 2 | export const minLength = (value) => { 3 | return value.length > 5 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/img/coffee_girl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee_girl.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee_item.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee_item.jpg -------------------------------------------------------------------------------- /src/assets/img/contacts_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/contacts_bg.jpg -------------------------------------------------------------------------------- /src/assets/img/coffee_goods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wigrovski/coffee-shop/HEAD/src/assets/img/coffee_goods.jpg -------------------------------------------------------------------------------- /src/filters/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | 4 | Vue.filter('addCurrency', (value) => { 5 | return value + '$' 6 | }) -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /src/mixins/navigate.js: -------------------------------------------------------------------------------- 1 | export const navigate = { 2 | methods: { 3 | navigate(id) { 4 | this.$router.push({name: this.name, params: {id: id}}) 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | package-lock.json 5 | 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | 6 | import './assets/scss/style.scss' 7 | import './filters' 8 | 9 | Vue.config.productionTip = false 10 | 11 | 12 | 13 | 14 | 15 | 16 | new Vue({ 17 | router, 18 | store, 19 | render: h => h(App), 20 | }).$mount('#app') 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /src/mixins/loading.js: -------------------------------------------------------------------------------- 1 | 2 | export const loading = { 3 | computed: { 4 | loading() { 5 | return this.$store.getters["getIsLoading"] 6 | } 7 | }, 8 | beforeMount() { 9 | this.$store.dispatch("setIsLoading", true) 10 | setTimeout(() => { 11 | this.$store.dispatch("setIsLoading", false) 12 | }, 500) 13 | }, 14 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | }, 19 | "vueCompilerOptions": { 20 | "target": 2.7, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Coffe-Shop on VueJS 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Customize configuration 19 | See [Configuration Reference](https://cli.vuejs.org/config/). 20 | 21 | ### For full work need JSON server 22 | ``` 23 | json-server --watch db.json 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/NavItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/store/bestsellers.js: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid' 2 | 3 | const bestsellers = { 4 | state: { 5 | bestsellers: [], 6 | }, 7 | mutations: { 8 | setBestData(state, data) { 9 | state.bestsellers = data 10 | } 11 | }, 12 | actions: { 13 | setBestData({ commit }, data) { 14 | commit('setBestData', data) 15 | } 16 | }, 17 | getters: { 18 | getBestsellers(state) { 19 | return state.bestsellers 20 | }, 21 | } 22 | 23 | } 24 | 25 | export default bestsellers -------------------------------------------------------------------------------- /src/assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | padding: 20px 0 3 | } 4 | .footer { 5 | display: flex; 6 | align-items: flex-end; 7 | justify-content: center; 8 | margin-top: 30px; 9 | list-style-type: none; 10 | &__item { 11 | font-size: 12px; 12 | padding: 10px 20px; 13 | font-weight: normal; 14 | a { 15 | color: #000; 16 | 17 | &:visited { 18 | text-decoration: none; 19 | color: #000; 20 | } 21 | &:hover { 22 | text-decoration: none; 23 | color: #000; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/store/goods.js: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid' 2 | 3 | const goods = { 4 | state: { 5 | goods: [] 6 | }, 7 | mutations: { 8 | setGoodsData(state, data) { 9 | state.goods = data 10 | } 11 | }, 12 | actions: { 13 | setGoodsData({ commit }, data) { 14 | commit('setGoodsData', data) 15 | } 16 | }, 17 | getters: { 18 | getGoods(state) { 19 | return state.goods 20 | }, 21 | getProductByPleasure(state) { 22 | return (id) => { 23 | return state.goods.find((card) => id === card.id) 24 | } 25 | } 26 | 27 | } 28 | } 29 | 30 | export default goods -------------------------------------------------------------------------------- /src/assets/scss/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | align-items: flex-end; 4 | margin-top: 30px; 5 | list-style-type: none; 6 | &__item { 7 | font-size: 12px; 8 | padding: 10px 20px; 9 | font-weight: normal; 10 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 11 | 12 | &:first-child { 13 | transform: translateY(3px); 14 | } 15 | a { 16 | color: #fff; 17 | 18 | &:visited { 19 | text-decoration: none; 20 | color: #fff; 21 | } 22 | &:hover { 23 | text-decoration: none; 24 | color: #fff; 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import links from './links' 4 | import bestsellers from './bestsellers' 5 | import goods from './goods' 6 | import coffee from './coffee' 7 | 8 | Vue.use(Vuex) 9 | 10 | const store = new Vuex.Store({ 11 | state: { 12 | isLoading: false, 13 | }, 14 | mutations: { 15 | setIsLoading(state, value) { 16 | state.isLoading = value 17 | } 18 | }, 19 | actions: { 20 | setIsLoading({ commit }, value) { 21 | commit("setIsLoading", value) 22 | } 23 | }, 24 | getters: { 25 | getIsLoading(state) { 26 | return state.isLoading 27 | } 28 | }, 29 | modules: { 30 | links, 31 | bestsellers, 32 | goods, 33 | coffee, 34 | } 35 | }) 36 | 37 | export default store -------------------------------------------------------------------------------- /src/assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Merienda'; 6 | outline: none; 7 | } 8 | body { 9 | overflow-x: hidden; 10 | } 11 | .title { 12 | font-size: 24px; 13 | text-align: center; 14 | &-big { 15 | color: #ffffff; 16 | font-weight: bold; 17 | font-size: 40px; 18 | margin-bottom: 0; 19 | text-align: center; 20 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 21 | } 22 | } 23 | .line { 24 | width: 240px; 25 | height: 1px; 26 | background-color: #000000; 27 | margin: 0 auto; 28 | margin-top: 60px; 29 | margin-bottom: 60px; 30 | } 31 | .form-check { 32 | margin-top: 10px; 33 | } 34 | 35 | @import 'header'; 36 | @import 'mainpage'; 37 | @import 'pages'; 38 | @import 'footer'; 39 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | <%= htmlWebpackPlugin.options.title %> 12 | 13 | 14 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coffee-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@vue/composition-api": "^1.7.1", 11 | "@vuelidate/core": "^2.0.2", 12 | "@vuelidate/validators": "^2.0.2", 13 | "core-js": "^3.8.3", 14 | "current": "^0.1.6", 15 | "debounce": "^2.0.0", 16 | "seamless-scroll-polyfill": "^2.3.0", 17 | "uuid": "^9.0.0", 18 | "vue": "^2.6.14", 19 | "vue-router": "^3.6.5", 20 | "vuex": "^3.4.0" 21 | }, 22 | "devDependencies": { 23 | "@vue/cli-plugin-babel": "~5.0.0", 24 | "@vue/cli-service": "~5.0.0", 25 | "sass": "^1.58.0", 26 | "sass-loader": "^13.2.0", 27 | "vue-template-compiler": "^2.6.14" 28 | }, 29 | "browserslist": [ 30 | "> 1%", 31 | "last 2 versions", 32 | "not dead" 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | import HeroView from '../views/HeroView.vue' 4 | import OurCoffeeView from '../views/OurCoffeeView.vue' 5 | import ForYourPleasure from '../views/GoodsView.vue' 6 | import ContactView from '../views/ContactView.vue' 7 | import ThanksView from '../views/ThanksView.vue' 8 | import ItemView from '../views/ItemView.vue' 9 | 10 | Vue.use(VueRouter) 11 | 12 | const routes = [ 13 | { path: '/', component: HeroView }, 14 | { path: '/our-coffee', component: OurCoffeeView }, 15 | { path: '/for-your-pleasure', component: ForYourPleasure }, 16 | { path: '/contact', component: ContactView }, 17 | { path: '/thanks', component: ThanksView }, 18 | { name: 'coffee', path: '/our-coffee/:id', component: ItemView }, 19 | { name: 'goods', path: '/for-your-pleasure/:id', component: ItemView }, 20 | ] 21 | 22 | 23 | 24 | const router = new VueRouter({ 25 | mode: 'history', 26 | routes 27 | }) 28 | 29 | export default router -------------------------------------------------------------------------------- /src/components/NavBarComponent.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 36 | -------------------------------------------------------------------------------- /src/components/ProductCard.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /src/store/coffee.js: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid' 2 | 3 | const coffee = { 4 | state: { 5 | coffee: [], 6 | searchValue: '', 7 | sortValue: '' 8 | }, 9 | mutations: { 10 | setCoffeeData(state, data) { 11 | state.coffee = data 12 | }, 13 | setSearchValue(state, value) { 14 | state.searchValue = value 15 | }, 16 | setSortValue(state, value) { 17 | state.sortValue = value 18 | }, 19 | }, 20 | actions: { 21 | setCoffeeData({ commit }, data) { 22 | commit('setCoffeeData', data) 23 | }, 24 | setSearchValue({ commit }, value) { 25 | commit('setSearchValue', value) 26 | }, 27 | setSortValue({ commit }, value) { 28 | commit('setSortValue', value) 29 | }, 30 | }, 31 | getters: { 32 | getCoffee(state) { 33 | return state.coffee 34 | }, 35 | getProductByCoffee(state) { 36 | return (id) => { 37 | return state.coffee.find((card) => id == card.id) 38 | } 39 | }, 40 | getSearchValue(state) { 41 | return state.searchValue 42 | }, 43 | } 44 | } 45 | 46 | export default coffee -------------------------------------------------------------------------------- /src/store/links.js: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from 'uuid' 2 | 3 | const links = { 4 | state: { 5 | header: { 6 | id: uuidv4(), 7 | text: '', 8 | link: '/', 9 | icon: 'Logo.svg', 10 | }, 11 | footer: { 12 | id: uuidv4(), 13 | text: '', 14 | link: '/', 15 | icon: 'Logo_black.svg', 16 | }, 17 | other: [ 18 | 19 | { 20 | id: uuidv4(), 21 | text: 'Our coffee', 22 | link: '/our-coffee', 23 | }, 24 | { 25 | id: uuidv4(), 26 | text: 'For your pleasure', 27 | link: '/for-your-pleasure', 28 | }, 29 | { 30 | id: uuidv4(), 31 | text: 'Contact us', 32 | link: '/contact', 33 | }, 34 | ] 35 | }, 36 | getters: { 37 | getHeaderLinks(state) { 38 | return {header: state.header, other: state.other } 39 | }, 40 | getFooterLinks(state) { 41 | return {footer: state.footer, other: state.other } 42 | }, 43 | 44 | } 45 | } 46 | 47 | export default links -------------------------------------------------------------------------------- /src/components/FooterComponent.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | -------------------------------------------------------------------------------- /src/views/ThanksView.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | -------------------------------------------------------------------------------- /src/assets/logo/Beans_logo_dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/SpinnerComponent.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/scss/_mainpage.scss: -------------------------------------------------------------------------------- 1 | .preview { 2 | height: 640px; 3 | background: url('../img/Main_bg.jpg') center center no-repeat; 4 | background-size: cover; 5 | 6 | .title-big { 7 | margin-top: 110px; 8 | } 9 | &__subtitle { 10 | color: #ffffff; 11 | font-weight: bold; 12 | font-size: 40px; 13 | margin-top: 110px; 14 | margin-bottom: 0; 15 | text-align: center; 16 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 17 | } 18 | &__subtitle { 19 | font-size: 24px; 20 | margin-top: 20px; 21 | text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 22 | } 23 | &__btn { 24 | display: block; 25 | width: 120px; 26 | height: 30px; 27 | margin: 0 auto; 28 | margin-top: 18px; 29 | border: 1px solid #fff; 30 | border-radius: 4px; 31 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); 32 | color: #fff; 33 | text-align: center; 34 | font-weight: bold; 35 | line-height: 28px; 36 | font-size: 14px; 37 | 38 | &:visited { 39 | text-decoration: none; 40 | color: #fff; 41 | } 42 | &:hover { 43 | text-decoration: none; 44 | color: #fff; 45 | } 46 | } 47 | } 48 | 49 | .beanslogo { 50 | display: block; 51 | margin: 0 auto; 52 | margin-top: 20px; 53 | } 54 | 55 | .about { 56 | padding: 80px 0 110px 0; 57 | background-color: #fff; 58 | &__text { 59 | margin-top: 40px; 60 | text-align: center; 61 | font-size: 14px; 62 | } 63 | } 64 | .best { 65 | padding: 80px 0 110px 0; 66 | background-color: #fff; 67 | background: url('../img/paper.jpg') center center no-repeat; 68 | background-size: cover; 69 | 70 | &__wrapper { 71 | display: flex; 72 | flex-wrap: wrap; 73 | } 74 | &__item { 75 | width: 220px; 76 | min-height: 240px; 77 | margin: 0 auto; 78 | margin-top: 40px; 79 | padding: 22px 24px; 80 | background: rgba(255, 255, 255, 0.65); 81 | border-radius: 8px; 82 | img { 83 | display: block; 84 | margin: 0 auto; 85 | width: 151px; 86 | height: 130px; 87 | object-fit: cover; 88 | } 89 | &-title, &-price { 90 | font-size: 14px; 91 | margin-top: 10px; 92 | text-align: right; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/views/ItemView.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | -------------------------------------------------------------------------------- /src/views/GoodsView.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | -------------------------------------------------------------------------------- /src/assets/logo/Beans_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/views/HeroView.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | -------------------------------------------------------------------------------- /src/assets/scss/_pages.scss: -------------------------------------------------------------------------------- 1 | .banner { 2 | height: 260px; 3 | 4 | .title-big { 5 | margin-top: 60px; 6 | } 7 | } 8 | 9 | .banner.coffepage-banner { 10 | background: url('../img/coffee_bg.jpg') center center no-repeat; 11 | background-size: cover; 12 | } 13 | .banner.goodspage-banner { 14 | background: url('../img/goods_bg.jpg') center center no-repeat; 15 | background-size: cover; 16 | } 17 | .banner.contactspage-banner { 18 | background: url('../img/contacts_bg.jpg') center center no-repeat; 19 | background-size: cover; 20 | } 21 | .banner.itempage-banner { 22 | background: url('../img/coffee_bg.jpg') center center no-repeat; 23 | background-size: cover; 24 | } 25 | 26 | .shop { 27 | padding: 70px 0 40px 0; 28 | .title { 29 | margin-top: 10px; 30 | } 31 | &__girl { 32 | display: block; 33 | margin: 0 auto; 34 | } 35 | &__text { 36 | margin-top: 25px; 37 | font-size: 14px; 38 | text-align: center; 39 | } 40 | &__search { 41 | &-label { 42 | margin-right: 20px; 43 | } 44 | &-input { 45 | width: 180px; 46 | height: 30px; 47 | box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); 48 | border: none; 49 | border-radius: 4px; 50 | font-size: 12px; 51 | padding: 0 15px; 52 | 53 | &::placeholder { 54 | text-align: center 55 | } 56 | } 57 | } 58 | &__filter { 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | &-label { 63 | margin-right: 35px; 64 | } 65 | &-btn { 66 | width: 75px; 67 | height: 30px; 68 | background-color: #fff; 69 | border: none; 70 | box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); 71 | font-size: 12px; 72 | outline: none; 73 | cursor: pointer; 74 | &:first-child { 75 | border-radius: 4px 0px 0px 4px; 76 | } 77 | &:last-child { 78 | border-radius: 0px 4px 4px 0px; 79 | } 80 | &:focus { 81 | outline: none 82 | } 83 | } 84 | } 85 | &__wrapper { 86 | display: flex; 87 | flex-wrap: wrap; 88 | } 89 | &__item { 90 | width: 220px; 91 | min-height: 240px; 92 | margin: 60px 40px 0 40px; 93 | padding: 22px 24px; 94 | background: rgba(255, 255, 255, 0.65); 95 | border-radius: 8px; 96 | box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25); 97 | transition: 0.3s all; 98 | &:hover { 99 | box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.25); 100 | } 101 | img { 102 | display: block; 103 | margin: 0 auto; 104 | width: 151px; 105 | height: 130px; 106 | object-fit: cover; 107 | } 108 | &-title, &-price, &-country { 109 | font-size: 14px; 110 | margin-top: 10px; 111 | text-align: right; 112 | } 113 | } 114 | &__point { 115 | margin-top: 16px; 116 | 117 | span { 118 | font-weight: bold; 119 | } 120 | &-price { 121 | font-size: 24px; 122 | font-weight: normal !important; 123 | } 124 | &:first-child { 125 | margin-top: 26px; 126 | } 127 | } 128 | } 129 | 130 | input { 131 | border: 1px solid rgba(0, 0, 0, 0.49) !important; 132 | box-shadow: 4px 4px 20px rgba(3, 2, 2, 0.25); 133 | border-radius: 4px; 134 | background: #fff; 135 | } 136 | 137 | .textarea label { 138 | display: block; 139 | text-align: center; 140 | } 141 | 142 | .textarea textarea { 143 | resize: none; 144 | border: 1px solid rgba(0, 0, 0, 0.49); 145 | box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25); 146 | border-radius: 4px; 147 | background: #fff; 148 | } 149 | 150 | .send-btn { 151 | display: block; 152 | margin: 0 auto; 153 | margin-top: 40px; 154 | border-color: rgba(0, 0, 0, 0.49) !important; 155 | } 156 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "bestsellers": [ 3 | { 4 | "id": 0, 5 | "name": "Solimo Coffee Beans 2 kg", 6 | "image": "https://images-na.ssl-images-amazon.com/images/I/815O9ktyfUL._SL1500_.jpg", 7 | "price": "10.73$" 8 | }, 9 | { 10 | "id": 1, 11 | "name": "Presto Coffee Beans 1 kg", 12 | "image": "https://images-na.ssl-images-amazon.com/images/I/91Ryk2gKejL._SL1500_.jpg", 13 | "price": "15.99$" 14 | }, 15 | { 16 | "id": 2, 17 | "name": "AROMISTICO Coffee 1 kg", 18 | "image": "https://images-na.ssl-images-amazon.com/images/I/71qBQnpQFYL._SL1500_.jpg", 19 | "price": "6.99$" 20 | } 21 | ], 22 | "coffee": [ 23 | { 24 | "id": 0, 25 | "name": "Death Wish Bean", 26 | "country": "Brazil", 27 | "image": "https://images-na.ssl-images-amazon.com/images/I/91DlZZBjxzL._SX522_.jpg", 28 | "price": "12.99$", 29 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 30 | }, 31 | { 32 | "id": 1, 33 | "name": "AROMISTICO Coffee 1 kg", 34 | "country": "Brazil", 35 | "image": "https://images-na.ssl-images-amazon.com/images/I/71qBQnpQFYL._SL1500_.jpg", 36 | "price": "6.99$", 37 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 38 | }, 39 | { 40 | "id": 2, 41 | "name": "Solimo Coffee Beans 2 kg", 42 | "country": "Kenya", 43 | "image": "https://images-na.ssl-images-amazon.com/images/I/815O9ktyfUL._SL1500_.jpg", 44 | "price": "10.73$", 45 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 46 | }, 47 | { 48 | "id": 3, 49 | "name": "Black Rifle Coffee", 50 | "country": "Kenya", 51 | "image": "https://images-na.ssl-images-amazon.com/images/I/91vwF6Kh8IL._SX522_.jpg", 52 | "price": "19.75$", 53 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 54 | }, 55 | { 56 | "id": 4, 57 | "name": "Presto Coffee Beans 1 kg", 58 | "country": "Columbia", 59 | "image": "https://images-na.ssl-images-amazon.com/images/I/91Ryk2gKejL._SL1500_.jpg", 60 | "price": "15.99$", 61 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 62 | }, 63 | { 64 | "id": 5, 65 | "name": "Organic Coffee One Cup", 66 | "country": "Columbia", 67 | "image": "https://images-na.ssl-images-amazon.com/images/I/51M2fmEXTIL.jpg", 68 | "price": "24.99$", 69 | "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet." 70 | } 71 | ], 72 | "goods": [ 73 | { 74 | "id": 0, 75 | "name": "Electric Spice and Coffee Grinder", 76 | "image": "https://images-na.ssl-images-amazon.com/images/I/41qvqWRCm3L.jpg", 77 | "price": "36.99$" 78 | }, 79 | { 80 | "id": 1, 81 | "name": "Manual Coffee Grinder", 82 | "image": "https://images-na.ssl-images-amazon.com/images/I/91gR5HFtmaL._SL1500_.jpg", 83 | "price": "25.99$" 84 | }, 85 | { 86 | "id": 2, 87 | "name": "Coffee Cup with Lid", 88 | "image": "https://images-na.ssl-images-amazon.com/images/I/71L5Ut1HHSL._SL1500_.jpg", 89 | "price": "15.99$" 90 | }, 91 | { 92 | "id": 3, 93 | "name": "Pour Over Coffee Maker", 94 | "image": "https://images-na.ssl-images-amazon.com/images/I/916TPwGqfML._SL1500_.jpg", 95 | "price": "45.99$" 96 | } 97 | ], 98 | "contacts": [] 99 | } -------------------------------------------------------------------------------- /src/views/OurCoffeeView.vue: -------------------------------------------------------------------------------- 1 | 80 | -------------------------------------------------------------------------------- /src/views/ContactView.vue: -------------------------------------------------------------------------------- 1 | 139 | 140 | -------------------------------------------------------------------------------- /src/assets/logo/Logo_black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/assets/logo/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | --------------------------------------------------------------------------------