Browse Source

Intro and carousel

master
monaxys 2 years ago
parent
commit
601402d842
  1. BIN
      src/assets/fonts/Montserrat-Black.ttf
  2. BIN
      src/assets/fonts/Montserrat-Black.woff
  3. BIN
      src/assets/fonts/Montserrat-Black.woff2
  4. BIN
      src/assets/fonts/Montserrat-BlackItalic.ttf
  5. BIN
      src/assets/fonts/Montserrat-BlackItalic.woff
  6. BIN
      src/assets/fonts/Montserrat-BlackItalic.woff2
  7. BIN
      src/assets/fonts/Montserrat-Bold.ttf
  8. BIN
      src/assets/fonts/Montserrat-Bold.woff
  9. BIN
      src/assets/fonts/Montserrat-Bold.woff2
  10. BIN
      src/assets/fonts/Montserrat-BoldItalic.ttf
  11. BIN
      src/assets/fonts/Montserrat-BoldItalic.woff
  12. BIN
      src/assets/fonts/Montserrat-BoldItalic.woff2
  13. BIN
      src/assets/fonts/Montserrat-ExtraBold.ttf
  14. BIN
      src/assets/fonts/Montserrat-ExtraBold.woff
  15. BIN
      src/assets/fonts/Montserrat-ExtraBold.woff2
  16. BIN
      src/assets/fonts/Montserrat-ExtraBoldItalic.ttf
  17. BIN
      src/assets/fonts/Montserrat-ExtraBoldItalic.woff
  18. BIN
      src/assets/fonts/Montserrat-ExtraBoldItalic.woff2
  19. BIN
      src/assets/fonts/Montserrat-ExtraLight.ttf
  20. BIN
      src/assets/fonts/Montserrat-ExtraLight.woff
  21. BIN
      src/assets/fonts/Montserrat-ExtraLight.woff2
  22. BIN
      src/assets/fonts/Montserrat-ExtraLightItalic.ttf
  23. BIN
      src/assets/fonts/Montserrat-ExtraLightItalic.woff
  24. BIN
      src/assets/fonts/Montserrat-ExtraLightItalic.woff2
  25. BIN
      src/assets/fonts/Montserrat-Italic.ttf
  26. BIN
      src/assets/fonts/Montserrat-Italic.woff
  27. BIN
      src/assets/fonts/Montserrat-Italic.woff2
  28. BIN
      src/assets/fonts/Montserrat-Light.ttf
  29. BIN
      src/assets/fonts/Montserrat-Light.woff
  30. BIN
      src/assets/fonts/Montserrat-Light.woff2
  31. BIN
      src/assets/fonts/Montserrat-LightItalic.ttf
  32. BIN
      src/assets/fonts/Montserrat-LightItalic.woff
  33. BIN
      src/assets/fonts/Montserrat-LightItalic.woff2
  34. BIN
      src/assets/fonts/Montserrat-Medium.ttf
  35. BIN
      src/assets/fonts/Montserrat-Medium.woff
  36. BIN
      src/assets/fonts/Montserrat-Medium.woff2
  37. BIN
      src/assets/fonts/Montserrat-MediumItalic.ttf
  38. BIN
      src/assets/fonts/Montserrat-MediumItalic.woff
  39. BIN
      src/assets/fonts/Montserrat-MediumItalic.woff2
  40. BIN
      src/assets/fonts/Montserrat-Regular.ttf
  41. BIN
      src/assets/fonts/Montserrat-Regular.woff
  42. BIN
      src/assets/fonts/Montserrat-Regular.woff2
  43. BIN
      src/assets/fonts/Montserrat-SemiBold.ttf
  44. BIN
      src/assets/fonts/Montserrat-SemiBold.woff
  45. BIN
      src/assets/fonts/Montserrat-SemiBold.woff2
  46. BIN
      src/assets/fonts/Montserrat-SemiBoldItalic.ttf
  47. BIN
      src/assets/fonts/Montserrat-SemiBoldItalic.woff
  48. BIN
      src/assets/fonts/Montserrat-SemiBoldItalic.woff2
  49. BIN
      src/assets/fonts/Montserrat-Thin.ttf
  50. BIN
      src/assets/fonts/Montserrat-Thin.woff
  51. BIN
      src/assets/fonts/Montserrat-Thin.woff2
  52. BIN
      src/assets/fonts/Montserrat-ThinItalic.ttf
  53. BIN
      src/assets/fonts/Montserrat-ThinItalic.woff
  54. BIN
      src/assets/fonts/Montserrat-ThinItalic.woff2
  55. 3
      src/assets/images/arrow-scroll.svg
  56. BIN
      src/assets/images/menu_button.png
  57. BIN
      src/assets/images/tesla-4.png
  58. BIN
      src/assets/images/tesla-bg.png
  59. BIN
      src/assets/images/tesla-x.png
  60. BIN
      src/assets/images/tesla_m3.png
  61. 73
      src/components/Carousel.vue
  62. 27
      src/components/Header.vue
  63. 37
      src/pages/TeslaMode.vue
  64. 2
      src/scss/_common.scss
  65. 179
      src/scss/_fonts.scss
  66. 5
      src/scss/_reset.scss
  67. 2
      src/scss/_vars.scss
  68. 7
      src/scss/main.scss

BIN
src/assets/fonts/Montserrat-Black.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Black.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Black.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BlackItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BlackItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BlackItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Bold.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Bold.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Bold.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BoldItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BoldItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-BoldItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBold.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBold.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBold.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBoldItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBoldItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraBoldItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLight.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLight.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLight.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLightItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLightItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ExtraLightItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Italic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Italic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Italic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Light.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Light.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Light.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-LightItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-LightItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-LightItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Medium.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Medium.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Medium.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-MediumItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-MediumItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-MediumItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Regular.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Regular.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Regular.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBold.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBold.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBold.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBoldItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBoldItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-SemiBoldItalic.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Thin.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Thin.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-Thin.woff2

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ThinItalic.ttf

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ThinItalic.woff

Binary file not shown.

BIN
src/assets/fonts/Montserrat-ThinItalic.woff2

Binary file not shown.

3
src/assets/images/arrow-scroll.svg

@ -0,0 +1,3 @@
<svg width="61" height="33" viewBox="0 0 61 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60.1788 0.744359C59.1863 -0.24812 57.582 -0.24812 56.5895 0.744359L30.4615 26.8722L4.33363 0.744359C3.34116 -0.24812 1.73684 -0.24812 0.74436 0.744359C-0.24812 1.73684 -0.24812 3.34116 0.74436 4.33363L28.6669 32.2562C29.1619 32.7512 29.8117 33 30.4616 33C31.1115 33 31.7613 32.7512 32.2563 32.2562L60.1789 4.33363C61.1713 3.34116 61.1713 1.73684 60.1788 0.744359Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 493 B

BIN
src/assets/images/menu_button.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 B

BIN
src/assets/images/tesla-4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

BIN
src/assets/images/tesla-bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 MiB

BIN
src/assets/images/tesla-x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

BIN
src/assets/images/tesla_m3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

73
src/components/Carousel.vue

@ -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>

27
src/components/Header.vue

@ -6,6 +6,10 @@ header.header.container
a.header-nav__item(href="#") Test Drive a.header-nav__item(href="#") Test Drive
a.header-nav__item(href="#") Contacts a.header-nav__item(href="#") Contacts
a.header-nav__item(href="#") Shop a.header-nav__item(href="#") Shop
Button.header-menu(@click="")
div.header-menu__strip
div.header-menu__strip
div.header-menu__strip
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.header{ .header{
@ -18,11 +22,12 @@ header.header.container
} }
} }
.header-nav{ .header-nav{
@media screen and (max-width: 1024px){
display: none;
}
&__item { &__item {
margin: 0 8px; margin: 0 8px;
text-transform: uppercase; text-transform: uppercase;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
line-height: 27px; line-height: 27px;
@ -36,5 +41,23 @@ header.header.container
} }
} }
} }
&-menu{
background: transparent;
display:flex;
flex-direction: column;
width: 30px;
@media screen and (min-width: 1024px){
display: none;
}
&__strip{
height: 2px;
background: black;
width: 100%;
&:not(:last-child){
margin-bottom: 7px;
}
}
}
} }
</style> </style>

37
src/pages/TeslaMode.vue

@ -2,17 +2,22 @@
.tesla-mode .tesla-mode
Header.tesla-mode__header/ Header.tesla-mode__header/
.intro .intro
img.intro__bg(src="../assets/images/tesla-bg.png" alt="")
.intro__scroll-arrow
include ../assets/images/arrow-scroll.svg
Carousel/
Footer/ Footer/
h1 modelS h1 modelS
</template> </template>
<script> <script>
import Header from "../components/Header.vue" import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue" import Footer from "../components/Footer.vue"
import Carousel from "../components/Carousel.vue"
export default { export default {
name: "TeslaMode", name: "TeslaMode",
components: { components: {
Header, Header,
Carousel,
Footer, Footer,
} }
} }
@ -25,10 +30,38 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
z-index: 100;
} }
.intro{ .intro{
background: wheat; background: wheat;
min-height: 100vh; position: relative;
overflow: hidden;
max-height: 1000px;
height: 100vh;
&__scroll-arrow{
height: 33px;
width: 61px;
position: absolute;
bottom: 23px;
left: 0;
right: 0;
margin: 0 auto;
animation: scrollArrow 2s ease-in-out infinite;
}
&__bg{
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
}
}
@keyframes scrollArrow {
from, to{
transform: none;
}
50%{
transform: translateY(-70%) scale(1.1);
} }
} }
</style> </style>

2
src/scss/_common.scss

@ -1 +1,3 @@
@import './vars'; @import './vars';
@import './reset';
@import './fonts';

179
src/scss/_fonts.scss

@ -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;
}

5
src/scss/_reset.scss

@ -0,0 +1,5 @@
button{
border: none;
outline: none;
padding: 0;
}

2
src/scss/_vars.scss

@ -1,4 +1,4 @@
$main-font: Avenir, Helvetica, Arial, sans-serif, -apple-system; $main-font: Montserrat, sans-serif, -apple-system;
// colors // colors
$bg-color: white; $bg-color: white;

7
src/scss/main.scss

@ -1,3 +1,10 @@
*,*::before,*::after{
box-sizing: border-box;
}
html,body{
margin: 0;
padding: 0;
}
body { body {
font-family: $main-font; font-family: $main-font;
background-color: $bg-color; background-color: $bg-color;

Loading…
Cancel
Save