carrusel y vista home

This commit is contained in:
casnet1
2020-10-18 02:00:59 -05:00
parent d4e15ddb55
commit 89eb22bae5
6 changed files with 349 additions and 144 deletions
+126 -130
View File
@@ -1786,6 +1786,16 @@
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1812,6 +1822,34 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1833,6 +1871,25 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1897,6 +1954,16 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1913,6 +1980,18 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
@@ -4533,6 +4612,11 @@
}
}
},
"dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5689,6 +5773,15 @@
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
"dev": true
},
"global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"requires": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -7266,6 +7359,14 @@
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
"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.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -7533,9 +7634,9 @@
"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
},
"node-forge": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
"integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
"dev": true
},
"node-ipc": {
@@ -8821,8 +8922,7 @@
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
"dev": true
"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
},
"process-nextick-args": {
"version": "2.0.1",
@@ -9418,12 +9518,12 @@
"dev": true
},
"selfsigned": {
"version": "1.10.7",
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
"integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
"version": "1.10.8",
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
"integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
"dev": true,
"requires": {
"node-forge": "0.9.0"
"node-forge": "^0.10.0"
}
},
"semver": {
@@ -10909,6 +11009,23 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vue-carousel": {
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
"integrity": "sha512-a2zxh7QJioDxNMguqcuJ7TPbfgK5bGDaAXIia7NWxPAWsEvNE4ZtHgsGu40L5Aha4uyjmNKXvleB14QAXFoKig==",
"requires": {
"global": "^4.3.2",
"regenerator-runtime": "^0.12.1",
"vue": "^2.5.17"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"vue-eslint-parser": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
@@ -10967,127 +11084,6 @@
}
}
},
"vue-loader-v16": {
<<<<<<< HEAD
"version": "npm:vue-loader@16.0.0-beta.7",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
"integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
"dev": true,
"optional": true,
"requires": {
"@types/mini-css-extract-plugin": "^0.9.1",
"chalk": "^3.0.0",
"hash-sum": "^2.0.0",
"loader-utils": "^1.2.3",
"merge-source-map": "^1.1.0",
"source-map": "^0.6.1"
},
"dependencies": {
"ansi-styles": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
"dev": true,
"optional": true,
"requires": {
"@types/color-name": "^1.1.1",
=======
"version": "npm:vue-loader@16.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz",
"integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
>>>>>>> origin
"color-convert": "^2.0.1"
}
},
"chalk": {
<<<<<<< HEAD
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
=======
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
>>>>>>> origin
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
<<<<<<< HEAD
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"optional": true
=======
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
>>>>>>> origin
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
+1
View File
@@ -20,6 +20,7 @@
"jquery": "^3.5.1",
"sweetalert2": "^10.1.0",
"vue": "^2.6.11",
"vue-carousel": "^0.18.0",
"vue-router": "^3.4.3"
},
"devDependencies": {
+3
View File
@@ -27,6 +27,9 @@ export default {
.row {
margin: 0 !important;
}
.VueCarousel-wrapper{
overflow:inherit !important;
}
</style>
+60
View File
@@ -0,0 +1,60 @@
<template>
<div class="divMaster row ">
<div
id="carouselExampleControls"
class="carousel slide col-12 mx-auto"
data-ride="carousel"
>
<div class="carousel-inner">
<div
class="carousel-item"
v-bind:key="img.id"
v-for="(img, idx) in imgs"
:class="{ active: idx == 0 }"
>
<img :src="img" class="d-block w-100 img-fluid" alt="img" />
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgs: [
'https://www.acatlan.unam.mx/images/1410.jpg',
'https://www.acatlan.unam.mx/images/1402.jpg',
'https://www.acatlan.unam.mx/images/1421.jpg',
'https://www.acatlan.unam.mx/images/1330.jpg'
]
};
}
};
</script>
<style scoped>
.divMaster {
height: auto;
}
</style>
+2 -6
View File
@@ -2,11 +2,8 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './view/Home.vue'
<<<<<<< HEAD
import PersonalData from './view/PersonalData.vue'
=======
import Cart from './view/Cart.vue'
>>>>>>> origin
const routes = [
{
@@ -20,15 +17,14 @@ const routes = [
name: 'home'
},
{
<<<<<<< HEAD
path: '/datosPersonales',
component: PersonalData,
name: 'personalData'
=======
},
{
path: '/cart',
component: Cart,
name: 'cart'
>>>>>>> origin
}
]
+157 -8
View File
@@ -1,22 +1,171 @@
<template>
<div>
<Header></Header>
<div class="container my-5">
<h1 class="text-center">Home</h1>
</div>
<Footer></Footer>
</div>
<div class="body">
<Header></Header>
<div class="row ">
<div class="col-12 col-md-10 col-lg-10 col-xl-10 mx-auto">
<CarruselImg />
</div>
</div>
<!-- lo mas vendido -->
<div class="row ">
<div class="col-12 smx-auto">
<div class="my-5">
<h5 class="text-center font-weight-bold">Lo más vendido</h5>
<carousel
:autoplay="true"
:perPage=2
:perPageCustom="[[480, 3],[900, 4]]"
:resistanceCoef=20
:autoplayHoverPause=true
:minSwipeDistance=200
>
<slide class="carousel-items card mx-2 shadow"
v-bind:key="item.id"
v-for="(item, idx) in items"
:class="{ active: idx == 0 }">
<img :src="item.img" class="card-img-top" alt="img" />
<div class="card-body">
<h5 class="text-center"> <b >${{item.precio}}</b></h5>
<p class="card-text overflow-clip">{{item.descripcion}}</p>
</div>
</slide>
<slide class="carousel-items card mx-2 shadow"></slide>
</carousel>
</div>
</div>
</div>
<!-- lo mas reciente -->
<div class="row ">
<div class="col-12 smx-auto">
<div class="my-5">
<h5 class="text-center font-weight-bold">Lo más reciente</h5>
<carousel
:autoplay="true"
:perPage=2
:perPageCustom="[[480, 3],[900, 4]]"
:resistanceCoef=20
:autoplayHoverPause=true
:minSwipeDistance=200
>
<slide class="carousel-items card mx-2 shadow"
v-bind:key="item.id"
v-for="(item, idx) in items"
:class="{ active: idx == 0 }">
<img :src="item.img" class="card-img-top" alt="img" />
<div class="card-body">
<h5 class="text-center"> <b >${{item.precio}}</b></h5>
<p class="card-text overflow-clip">{{item.descripcion}}</p>
</div>
</slide>
<slide class="carousel-items card mx-2 shadow"></slide>
</carousel>
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import { Carousel, Slide } from 'vue-carousel'
import CarruselImg from '../components/Carrousel'
export default {
components: {
Header,
Footer
Footer,
Carousel,
CarruselImg,
Slide
},
data(){
return{
items:[
{
img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/361-home_default/las-pasiones-en-la-prensa-mexicana-siglos-xix-xxi.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/362-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-1-livello.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/363-home_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/364-home_default/herramientas-tic-guia-de-inicio.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/365-home_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
} ,
{
img:'https://tienda.acatlan.unam.mx/366-home_default/espacio-semico-ambiental.jpg',
precio:199.00,
descripcion:'esta es la descripcion del articulo'
}
]
}
}
}
</script>
<style scoped>
.overflow-clip {
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.VueCarousel-dot:active{
border: none;
}
.body{
/* background-color: #E5E5E5; */
overflow-x: hidden;
}
.VueCarousel-wrapper{
overflow-x:inherit ;
overflow-y:inherit ;
}
.shadow{
-webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
}
</style>