Skip to content

Instantly share code, notes, and snippets.

@azizozbek

azizozbek/index.html

Created May 11, 2020 18:48
Show Gist options
  • Save azizozbek/e9ba903e9d2d7ec93167713ca5790abf to your computer and use it in GitHub Desktop.
Save azizozbek/e9ba903e9d2d7ec93167713ca5790abf to your computer and use it in GitHub Desktop.
Download ZIP
SLİDER LANDİNG PAGE // Tesla Test Drive
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home-Page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="wrapper">
<div class="hero">
<div class="container-fluid hero--container pad0">
<div class="header">
<div class="menu js-menu">
<div class="menu--shape">
<div class="menu--line">
<div class="menu--line--clr"></div>
</div>
<div class="menu--line">
<div class="menu--line--clr"></div>
</div>
<div class="menu--line">
<div class="menu--line--clr"></div>
</div>
</div>
</div>
<div class="logo">
<span class="logo__img">
<svg class="icon logo-txt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" id="logo-txt" width="100%" height="100%"><path d="M49.6 42.3h19.1c2.7-1 4.6-2.9 5.2-5.1H44.4c.6 2.3 2.5 4.3 5.2 5.1M0 27.3c.6 2.2 2.5 4.1 5.2 5.1h8l.4.2v20.2h5V32.5l.5-.2h8c2.6-1 4.6-2.9 5.1-5.1v-.1L0 27.3zm49.6 25.5h19.1c2.7-1 4.6-2.9 5.2-5.1H44.4c.6 2.3 2.5 4.1 5.2 5.1m0-20.3h19.1c2.7-1 4.6-2.9 5.2-5.1H44.4c.6 2.2 2.5 4 5.2 5.1m126.2-.2h19.1c2.7-1 4.6-2.8 5.1-5h-29.4c.5 2.3 2.6 4 5.2 5m-23 20.3c2.5-1 3.8-2.9 4.3-5h-22V27.3h-4.9v25.3h22.6zM93.1 32.3h17.6c2.6-.8 4.6-2.8 5.1-5H88.2v15.1H111v5.3H93.3c-2.6 1-4.5 2.7-5.1 4.9l-.1.2H116V37.3H93.1v-5zm78.4 4.9v15.5h4.9V42.5h17.9v10.3h4.9V37.2h-27.7z"></path></svg></svg>
</span>
</div>
<div class="social">
<button class="social__item">
<i class="fab fa-facebook-f"></i>
</button>
<button class="social__item">
<i class="fab fa-twitter"></i>
</button>
<button class="social__item">
<i class="fab fa-instagram"></i>
</button>
</div>
</div>
<div class="hero--wrp">
<span class="hero--bg-logo">
<svg xmlns="http://www.w3.org/2000/svg" id="logo-img" viewBox="0 0 100 100" xml:space="preserve" width="100%" height="100%"><g id="bT" transform="translate(-33.796 -64.797)"><path id="bpath35" class="bst0" d="M83.8 164.6l14-78.7c13.3 0 17.5 1.5 18.1 7.4 0 0 8.9-3.3 13.5-10.1-17.6-8.2-35.3-8.5-35.3-8.5L83.8 87.3 73.5 74.7s-17.7.4-35.3 8.5c4.5 6.8 13.5 10.1 13.5 10.1.6-6 4.8-7.4 18.1-7.4l14 78.7"></path><path id="bpath37" class="bst0" d="M83.8 71.1c14.2-.1 30.5 2.2 47.2 9.4 2.2-4 2.8-5.8 2.8-5.8-18.2-7.2-35.3-9.7-50-9.7-14.7.1-31.8 2.5-50 9.7 0 0 .8 2.2 2.8 5.8 16.7-7.2 33-9.5 47.2-9.4"></path></g></svg>
</span>
<div class="hero__block col-xl-2 col-lg-3 pad0">
<div class="hero__block--left">
<div class="sidebar">
<div class="sidebar__content">
<div class="sidebar--li js-sidebar--li" data-target="tab-1">MODEL 3</div>
<div class="sidebar--li js-sidebar--li active" data-target="tab-2">MODEL S</div>
<div class="sidebar--li js-sidebar--li" data-target="tab-3">MODEL X</div>
</div>
</div>
<div class="test-driver">
<span class="test-driver--txt">
WE ARE WAİTİNG <br> FOR YOU !
</span>
<a href="#" class="test-driver--button">
TEST DRİVE
</a>
</div>
</div>
</div>
<div class="hero__block col-xl-10 col-lg-9 pad0">
<div class="hero__block--cont hero__block-cont">
<div class="tab-slider js-tab-slider" id="tab-1">
<div class="tab-slider-cont">
<div class="tab-slider__item">
<img src="https://preview.ibb.co/eHpN0f/modal-3.png" alt="" class="tab-slider__img">
</div>
<ul class="tab-slider__txt">
<li class="tab-slider__txt--li">
<span><i class="fas fa-tachometer-alt"></i></span>
<strong>170</strong> km/h
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-battery-full"></i></span>
<strong>100</strong> kwh Battery & <strong>310</strong> mile range
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-tractor"></i></i></span>
<strong>5.1s</strong> From 0-60 mph
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-dollar-sign"></i></span>
<div class="price-order">67,000</div>
</li>
</ul>
</div>
</div>
<div class="tab-slider js-tab-slider active" id="tab-2">
<div class="tab-slider-cont">
<div class="tab-slider__item">
<img src="https://preview.ibb.co/nE0y6L/modal-s.png" alt="" class="tab-slider__img">
</div>
<ul class="tab-slider__txt">
<li class="tab-slider__txt--li">
<span><i class="fas fa-tachometer-alt"></i></span>
<strong>190</strong> km/h
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-battery-full"></i></span>
<strong>100</strong> kwh Battery & <strong>315</strong> mile range
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-tractor"></i></span>
<strong>2.5s</strong> From 0-60 mph
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-dollar-sign"></i></span>
<div class="price-order">87,000</div>
</li>
</ul>
</div>
</div>
<div class="tab-slider js-tab-slider " id="tab-3">
<div class="tab-slider-cont">
<div class="tab-slider__item">
<img src="http://i66.tinypic.com/2rf7fro.png" alt="" class="tab-slider__img">
</div>
<ul class="tab-slider__txt">
<li class="tab-slider__txt--li">
<span><i class="fas fa-tachometer-alt"></i></span>
<strong>165</strong> km/h
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-battery-full"></i></span>
<strong>100</strong> kwh Battery & <strong>295</strong> mile range
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-tractor"></i></i></span>
<strong>2.9s</strong> From 0-60 mph
</li>
<li class="tab-slider__txt--li">
<span><i class="fas fa-dollar-sign"></i></span>
<div class="price-order">107,000$</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="menu--modal js-menu--modal">
<span class="modal--bg">
<svg class="icon logo-img"><use xlink:href="assets/img/icons.svg#logo-img"></use></svg>
</span>
<div class="modal__menu--area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cum dolorem doloribus facilis maxime reiciendis reprehenderit? Accusamus aliquam animi asperiores atque consectetur, deserunt dolore eligendi fugiat illo iusto maxime minus modi mollitia non numquam omnis porro quaerat quasi qui reprehenderit similique ut vel, voluptatum. Dignissimos dolor dolorum facere non totam.
</div>
<div class="modal__menu--footer">
SAMPLE TESLA **TEST DRİVER** PAGE
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Raw
script.js
$(".js-sidebar--li").click(function (e) {
e.preventDefault();
var target = $(this).data("target");
$(".js-sidebar--li").removeClass("active");
$(".js-tab-slider").removeClass("active");
$(this).addClass("active");
$(".js-tab-slider#" + target).addClass("active");
});
$(".js-menu").click( function (e) {
e.preventDefault();
$(".js-menu--modal").toggleClass("active");
});
Raw
scripts
<script src="https://use.fontawesome.com/releases/v5.4.1/css/all.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
slider-landing-page-tesla-test-drive.markdown
Raw
style.scss
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
.pad0{
padding: 0;
}
.wrapper{
width: 100%;
height: 100vh;
background: #f2f2f2;
display: flex;
align-items: center;
justify-content: center;
}
.header{
width: 100%;
height: 80px;
background: rgba(0,0,0,.4);
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
}
.menu{
position: absolute;
background: #f9f9f9;
width: 80px;
height: 80px;
box-shadow: 0 0 17px 1px rgba(244, 252, 255, 0.3);
display: flex;
justify-content: center;
align-items: center;
transition: all .3s;
z-index: 99;
&:hover{
.menu--line--clr{
margin-left: 0;
}
}
&--shape{
width: 50px;
height: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
overflow: hidden;
cursor: pointer;
}
&--line{
width: 100px;
background: #b21f2d;
height: 5px;
border-radius: 4px;
position: relative;
transition: all .3s;
overflow: hidden;
&--clr{
position: relative;
width: 100%;
height: 100%;
background: #202020;
transition: .3s;
margin-left: -60px;
}
&:nth-child(1){
width: 100%;
}
&:nth-child(2){
width: 80%;
}
&:nth-child(3){
width: 60%;
}
}
//// modal /////
&--modal{
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: rgba(226, 224, 225, 0.97);
z-index: 9;
opacity: 0;
pointer-events: none;
transform: scale(.8);
transition: all ease-in-out .3s;
&.active{
transform: scale(1);
opacity: 1;
}
}
}
.logo{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 80px;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
.logo-txt{
width: 200px;
fill: #f9f9f9;
}
}
.hero{
width: 90%;
height: 90%;
box-shadow: 0 0 50px 1px rgba(18, 7, 70, .5);
overflow: hidden;
position: relative;
&--container{
height: 100%;
}
&--wrp{
width: 100%;
height: 100%;
position: relative;
display: flex;
background-image: radial-gradient(circle, red, #f30024, #e40037, #d30413, #69032d);
}
&__block{
height: 100%;
z-index: 1;
box-sizing: border-box;
&--cont{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&--left{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
}
&--bg-logo{
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%,-50%) scale(1);
opacity: .2;
}
}
.sidebar{
width: 100%;
height: 78%;
display: flex;
align-items: center;
position: relative;
&__content{
padding: 20px;
margin-left: 10px;
&:after{
content: "";
width: 1px;
height: 60%;
position: absolute;
background: rgba(244, 252, 255, 0.33);;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
&--li{
font-size: 24px;
transform: scale(1);
display: block;
opacity: .6;
font-weight: 700;
color: #f9f9f9;
cursor: pointer;
transition: all .3s;
&:hover{
transform: scale(1);
opacity: 1;
}
&.active{
transform: scale(1.1);
opacity: 1;
margin-left: 20px;
}
}
}
.tab-slider{
width: 80%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 100%;
opacity: 0;
transition: all ease-in-out .7s;
&.active{
opacity: 1;
left: 10%;
.tab-slider__img{
transform: scale(1);
}
.tab-slider__txt{
left: 0;
padding: 20px;
color: #f9f9f9;
opacity: 1;
}
}
&__item{
height: 78%;
display: flex;
align-items: center;
justify-content: center;
}
&__img{
width: 100%;
margin-top: 50px;
transform: scale(.6);
transition: all .3s;
}
&-cont{
display: flex;
flex-direction: column;
height: 100%;
}
&__txt{
height: 22%;
position: relative;
left: -100%;
padding: 20px;
opacity: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border-top: 1px solid rgba(244, 252, 255, 0.33);
width: 100%;
margin: 0;
transition: all 1.2s;
&--li{
width: 40%;
list-style: none;
font-size: 13px;
align-items: center;
justify-content: flex-start;
line-height: 1;
height: 40px;
padding: 0;
margin: 0;
display: inline-flex;
color: rgba(255, 255, 255, 0.6);
span{
width: 45px;
height: 45px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 6px;
color: #ff151f;
margin-right: 5px;
font-size: 24px;
}
strong{
margin-left: 20px;
margin-right: 6px;
font-size: 20px;
color: #f2f2f2;
}
.price-order{
font-size: 21px;
color: #f2f2f2;
margin-left: 20px;
}
}
}
}
.test-driver{
width: 100%;
height: 22%;
border-top: 1px solid rgba(244,252,255,0.33);
border-right: 1px solid rgba(244,252,255,0.33);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&--txt{
display: block;
margin-bottom: 20px;
color: #ffffff;
font-weight: 700;
font-size: 18px;
text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
&--button{
display: inline-table;
background-image: linear-gradient(to left bottom, #ffffff, #ededed, #dcdcdc, #cccaca, #bbb9b9);
padding: 10px 30px;
border-radius: 30px;
font-size: 18px;
font-weight: 700;
color: #f71b32;
text-decoration: none;
transition: all .3s;
&:hover{
box-shadow: 0 0 10px 2px rgba(9,9,9,.4);
color: #b21f2d;
}
}
}
.social{
position: absolute;
right: 0;
display: flex;
align-items: center;
margin-right: 20px;
&__item{
color: #ce0c06;
font-size: 19px;
margin-right: 15px;
height: 35px;
width: 35px;
background: #f4f4f4;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .8;
cursor: pointer;
transition: all ease-in-out .3s;
&:hover{
background: #f9f9f9;
color: #b21f2d;
opacity: 1;
}
&:last-child{
margin: 0;
}
}
}
.modal{
&--bg{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: .2;
}
&__menu{
&--area{
position: absolute;
width: 60%;
left: 50%;
top: 50%;
font-weight: 500;
transform: translate(-50%, -50%);
letter-spacing: 1px;
text-align: center;
font-size: 21px;
color: #484848;
}
&--footer{
position: absolute;
width: 470px;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
font-weight: 700;
background: #aa121f;
padding: 10px 50px;
border-radius: 30px;
color: #ffffff;
font-size: 18px;
box-shadow: 0px 9px 21px 4px rgba(160, 7, 20, 0.6);
}
}
}
@media all and (max-width: 1400px) {
.hero{
width: 100%;
height: 100%;
}
}
@media all and (max-width: 992px) {
.hero{
&--wrp{
flex-direction: column;
}
}
.sidebar{
height: 65%;
&__content{
display: flex;
margin: 0 auto;
&:after{
display: none;
}
}
&--li{
margin: 0 10px;
&.active{
margin: 0 10px;
}
}
}
.test-driver{
border: none;
height: 0;
&--txt{
text-align: center;
}
&--button{
box-shadow: 0 10px 22px 0 rgba(0,0,0,.3);
}
}
.tab-slider{
width: 100%;
&__txt{
position: absolute;
bottom: 0;
height: 40%;
&--li{
font-size: 10px;
span{
width: 35px;
height: 35px;
font-size: 18px;
}
}
}
&__img{
width: 80%;
}
&__item{
height: 30%;
}
&.active{
left:0
}
}
.modal__menu{
&--area{
width: 80%;
}
}
}
@media all and (max-width: 768px){
.test-driver{
&--button{
font-size: 13px;
padding: 6px 20px;
}
&--txt{
margin-bottom: 10px;
font-size: 16px;
margin-top: -60px;
}
}
.sidebar{
&--li{
font-size: 16px;
}
}
.tab-slider{
&__item{
height: 15%;
}
&__txt{
height: 40%;
&--li{
width: 50%;
span{
width: 30px;
height: 30px;
font-size: 16px;
}
strong{
font-size: 16px;
}
}
}
&__img{
width: 100%;
margin-top: 10px;
}
}
.social{
display: none;
}
.logo{
height: 60px;
&-txt{
width: 120px !important;
}
}
.header{
height: 60px;
}
.menu{
width: 60px;
height: 60px;
&--shape{
width: 40px;
height: 40px;
}
&--line{
height: 4px;
}
}
}
@media all and (max-width: 520px){
.tab-slider{
left: 0;
&.active{
left:0;
.tab-slider__txt{
&--li{
margin-top:0;
}
}
}
&__txt{
left: 0;
height: 60%;
display: inline-block;
transition: all .3s;
&--li{
width: 100%;
display: block;
margin-top: 100%;
transition: all .6s;
&:nth-child(2){
transition-delay: .2s;
}
&:nth-child(3){
transition-delay: .4s;
}
&:nth-child(4){
transition-delay: .6s;
}
strong{
margin-left: 10px;
}
}
}
}
.price-order{
font-size: 19px;
display: inline-block;
margin-left: 10px !important;
}
.modal__menu{
&--area{
font-size: 15px;
}
&--footer{
width: 280px;
font-size: 13px;
padding: 10px;
text-align: center;
}
}
}
@media all and (max-width: 350px){
.sidebar{
height: 62%;
&--li{
font-size: 14px;
}
}
}
Raw
styles
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment