Browse Source

Tesla-model ready

master
monaxys 2 years ago
parent
commit
66728b90e6
  1. BIN
      src/assets/images/car-back.png
  2. BIN
      src/assets/images/fabric.png
  3. BIN
      src/assets/images/tesla-store.png
  4. BIN
      src/assets/images/tesla-wheel.png
  5. 183
      src/pages/TeslaMode.vue

BIN
src/assets/images/car-back.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 808 KiB

BIN
src/assets/images/fabric.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1015 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

183
src/pages/TeslaMode.vue

@ -7,27 +7,58 @@
include ../assets/images/arrow-scroll.svg include ../assets/images/arrow-scroll.svg
Carousel/ Carousel/
.vid-descr .vid-descr
video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay) video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls)
.vid-descr__descr All Model Xs come standard with two electric motorsone at the front axle and one at the rearwhich enables them with all-wheel-drive capability. The standard Long Range model is quick and Tesla claims a zero-to-60-mph time of 4.4 seconds. .vid-descr__descr All Model Xs come standard with two electric motorsone at the front axle and one at the rearwhich enables them with all-wheel-drive capability. The standard Long Range model is quick and Tesla claims a zero-to-60-mph time of 4.4 seconds.
a.vid-descr__link(href="#") Read more -> a.vid-descr__link(href="#") Read more ->
.container.shop-selector
.shop-selector__txt
h2 Select your market
ul.shop-list
li.shop-list__item
a(href="#") North America
li.shop-list__item
a(href="#") Europe
li.shop-list__item
a(href="#") Middle-east
li.shop-list__item
a(href="#") Asia/Pacific
img.shop-selector__image(src="../assets/images/tesla-store.png" alt="")
.fabric
img(src="../assets/images/fabric.png" alt="")
.container.test-drive
.test-drive__image
img.test-drive__image1(src="../assets/images/car-back.png")
img.test-drive__image2(src="../assets/images/tesla-wheel.png")
.test-drive__txt
h2 Test drive
.description
p #[a(href="") Learm more] online to prepare for your self-guided appointment.
p Drivers must have a valid U.S. driver's license.
.container.user-log
h2 Book a Test drive
.user-input
input.user-input__input(placeholder="Your First and Last name")
input.user-input__input(placeholder="Your Phone number")
input.user-input__input(placeholder="Model")
button ->
Footer/ Footer/
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" import Carousel from "../components/Carousel.vue"
export default { export default {
name: "TeslaMode", name: "TeslaMode",
components: { components: {
Header, Header,
Carousel, Carousel,
Footer, Footer,
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.tesla-mode{ .tesla-mode{
&__header{ &__header{
position: absolute; position: absolute;
top: 0; top: 0;
@ -42,6 +73,7 @@ export default {
overflow: hidden; overflow: hidden;
max-height: 1000px; max-height: 1000px;
height: 100vh; height: 100vh;
&__scroll-arrow{ &__scroll-arrow{
height: 33px; height: 33px;
width: 61px; width: 61px;
@ -52,6 +84,7 @@ export default {
margin: 0 auto; margin: 0 auto;
animation: scrollArrow 2s ease-in-out infinite; animation: scrollArrow 2s ease-in-out infinite;
} }
&__bg{ &__bg{
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
@ -88,8 +121,144 @@ export default {
color: black; color: black;
} }
} }
.shop-selector{
display:flex;
margin-top: 250px;
margin-bottom: 250px;
&__txt{
margin-right: 106px;
h2{
font-weight: 600;
font-size: 38px;
line-height: 46px;
letter-spacing: 0.025em;
text-transform: uppercase;
color: #000000;
}
}
.shop-list{
padding-left: 0;
&__item{
list-style: none;
font-weight: 400;
font-size: 28px;
line-height: 34px;
letter-spacing: 0.025em;
text-transform: capitalize;
color: #000000;
a{
color: inherit;
text-decoration: none;
}
}
}
&__image{
width: 100%;
}
}
.fabric{
display: flex;
justify-content: flex-end;
margin: 250px 0;
img{
height: 380px;
}
}
.test-drive{
display: flex;
margin-bottom: 250px;
max-width: 1139px;
position: relative;
padding-bottom: 155px;
&__image1{
height: 646px;
margin-right: 416px;
}
&__image2{
height: 436px;
position: absolute;
left: 277px;
bottom: 0;
}
&__txt{
h2{
font-weight: 600;
font-size: 38px;
line-height: 46px;
letter-spacing: 0.025em;
text-transform: uppercase;
color: #000000;
margin-top: 0;
margin-bottom: 90px;
}
.description{
height: 299px;
p{
font-weight: 300;
font-size: 28px;
line-height: 34px;
letter-spacing: 0.025em;
text-transform: uppercase;
a{
color: inherit;
}
}
}
}
}
.user-log{
max-width: 1155px;
margin-bottom: 250px;
h2{
font-weight: 600;
font-size: 38px;
line-height: 46px;
letter-spacing: 0.025em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 99;
color: #000000;
}
.user-input{
display: flex;
justify-content: space-between;
button{
background: transparent;
}
&__input{
border-top: none;
border-right: none;
border-left: none;
border-bottom: 3px solid black;
padding-bottom: 5px;
outline: none;
&:not(:last-of-type){
width: 100%;
max-width: 360px;
}
&:last-of-type{
width: 100%;
max-width: 300px;
}
&::placeholder{
font-weight: 600;
font-size: 24px;
line-height: 29px;
letter-spacing: 0.025em;
color: #5E5E5E;
}
}
}
} }
}
@keyframes scrollArrow { @keyframes scrollArrow {
from, to{ from, to{
transform: none; transform: none;

Loading…
Cancel
Save