monaxys
2 years ago
68 changed files with 330 additions and 5 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 213 B |
After Width: | Height: | Size: 116 KiB |
After Width: | Height: | Size: 5.5 MiB |
After Width: | Height: | Size: 301 KiB |
After Width: | Height: | Size: 96 KiB |
@ -0,0 +1,73 @@ |
|||||||
|
<template lang="pug"> |
||||||
|
.carousel |
||||||
|
.container |
||||||
|
h2.carousel__title Our tesla car model |
||||||
|
ul.carousel-list |
||||||
|
li.carousel-list__el(:class="{active: curSlideIdx === 0}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}") |
||||||
|
img(src="../assets/images/tesla_m3.png") |
||||||
|
div Model 3 |
||||||
|
li.carousel-list__el(:class="{active: curSlideIdx === 1}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}") |
||||||
|
img(src="../assets/images/tesla-4.png") |
||||||
|
div Model S |
||||||
|
li.carousel-list__el(:class="{active: curSlideIdx === 2}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}") |
||||||
|
img(src="../assets/images/tesla-x.png") |
||||||
|
div Model X |
||||||
|
</template> |
||||||
|
<style lang="scss"> |
||||||
|
.carousel{ |
||||||
|
overflow: hidden; |
||||||
|
&__title{ |
||||||
|
text-transform: uppercase; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 38px; |
||||||
|
line-height: 46px; |
||||||
|
letter-spacing: 0.025em; |
||||||
|
} |
||||||
|
.carousel-list{ |
||||||
|
display: flex; |
||||||
|
padding: 0; |
||||||
|
|
||||||
|
&__el{ |
||||||
|
font-weight: 500; |
||||||
|
font-size: 25px; |
||||||
|
line-height: 30px; |
||||||
|
letter-spacing: 0.025em; |
||||||
|
text-transform: uppercase; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
list-style: none; |
||||||
|
transition: opacity ease-in-out 0.3s, transform ease-in-out 0.3s; |
||||||
|
&:not(.active){ |
||||||
|
opacity: 0.5; |
||||||
|
} |
||||||
|
img{ |
||||||
|
max-height: 345px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "Carousel", |
||||||
|
data (){ |
||||||
|
return{ |
||||||
|
curSlideIdx: 0, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
slide(){ |
||||||
|
if (this.curSlideIdx < 3-1){ |
||||||
|
this.curSlideIdx++; |
||||||
|
} |
||||||
|
else{ |
||||||
|
this.curSlideIdx = 0; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
setInterval(this.slide, 2000); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -1 +1,3 @@ |
|||||||
@import './vars'; |
@import './vars'; |
||||||
|
@import './reset'; |
||||||
|
@import './fonts'; |
||||||
|
@ -0,0 +1,179 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-BlackItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-BlackItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-BlackItalic.ttf') format('truetype'); |
||||||
|
font-weight: 900; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraBoldItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-BoldItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-BoldItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-BoldItalic.ttf') format('truetype'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-LightItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-LightItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-LightItalic.ttf') format('truetype'); |
||||||
|
font-weight: 300; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Bold.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Bold.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Bold.ttf') format('truetype'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraLightItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); |
||||||
|
font-weight: 200; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Medium.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Medium.ttf') format('truetype'); |
||||||
|
font-weight: 500; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Italic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Italic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Italic.ttf') format('truetype'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-SemiBold.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); |
||||||
|
font-weight: 600; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Black.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Black.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Black.ttf') format('truetype'); |
||||||
|
font-weight: 900; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Regular.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Regular.ttf') format('truetype'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-ThinItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-ThinItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-ThinItalic.ttf') format('truetype'); |
||||||
|
font-weight: 100; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-MediumItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-MediumItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-MediumItalic.ttf') format('truetype'); |
||||||
|
font-weight: 500; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-ExtraBold.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraBold.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-SemiBoldItalic.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); |
||||||
|
font-weight: 600; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Light.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Light.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Light.ttf') format('truetype'); |
||||||
|
font-weight: 300; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-ExtraLight.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraLight.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-ExtraLight.ttf') format('truetype'); |
||||||
|
font-weight: 200; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Montserrat'; |
||||||
|
src: url('../assets/fonts/Montserrat-Thin.woff2') format('woff2'), |
||||||
|
url('../assets/fonts/Montserrat-Thin.woff') format('woff'), |
||||||
|
url('../assets/fonts/Montserrat-Thin.ttf') format('truetype'); |
||||||
|
font-weight: 100; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
@ -0,0 +1,5 @@ |
|||||||
|
button{ |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
padding: 0; |
||||||
|
} |
Loading…
Reference in new issue