<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<style>
.mybuttonWA {
margin: 0;
padding: 0;
text-align: center;
position: fixed;
bottom: 35px;
right: 45px
}
.buttonWA {
font-size: 17px;
color: #f0e2dd;
background: #1fe76e;
padding: 10px;
margin: 0;
overflow: hidden;
border-radius: 3px;
text-decoration: none
}
.mybuttonWA .buttonWA:hover {
background: #62abd0
}
.mybuttonWA2 {
margin: 0;
padding: 0;
text-align: center;
position: fixed;
bottom: 85px;
right: 45px
}
.buttonWA2 {
font-size: 17px;
color: #000000;
background: #cacfcc;
padding: 10px;
margin: 0;
overflow: hidden;
border-radius: 3px;
text-decoration: none
}
.mybuttonWA2 .buttonWA2:hover {
background: #62abd0
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header class="header">
<div id="menu-btn" class="fas fa-bars"></div>
<a href="#" class="logo"> <img src="image/logo-new.png" width="150"> </a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#vehicles">vehicles</a>
<a href="#services">services</a>
<a href="#featured">featured</a>
<a href="#reviews">reviews</a>
<a href="#contact">contact</a>
</nav>
<div id="login-btn">
<button class="btn">login</button>
<i class="far fa-user"></i>
</div>
</header>
<div class="login-form-container">
<span id="close-login-form" class="fas fa-times"></span>
<form action="">
<h3>user login</h3>
<input type="email" placeholder="Email" class="box">
<input type="password" placeholder="Password" class="box">
<p> forget your password <a href="#">click here</a> </p>
<input type="submit" value="login" class="btn">
<p>or login with</p>
<div class="buttons">
<a href="#" class="btn"> google </a>
<a href="#" class="btn"> facebook </a>
</div>
<p> don\'t have an account <a href="#">create one</a> </p>
</form>
</div>
<div id=\'whatsapp-chat\' class=\'hide\'>
<div class=\'header-chat\'>
<div class=\'head-home\'>
<h3>Hello!</h3>
<p>Selamat datang di Aplikasi untuk membantu kamu apabila ada kendala
customer-care@toyota.astra.co.id</p>
</div>
<div class=\'get-new hide\'>
<div id=\'get-label\'></div>
<div id=\'get-nama\'></div>
</div>
</div>
<div class=\'home-chat\'>
<!-- Info Contact Start -->
<!-- <a class=\'informasi\' href=\'javascript:void\' title=\'Chat Whatsapp\'>
<div class=\'info-avatar\'><img
src=\'https://2.bp.blogspot.com/-y6xNA_8TpFo/XXWzkdYk0MI/AAAAAAAAA5s/RCzTBJ_FbMwVt5AEZKekwQqiDNqdNQJjgCLcBGAs/s70/supportmale.png\' />
</div>
<div class=\'info-chat\'>
<span class=\'chat-label\'>Support</span>
<span class=\'chat-nama\'>Udin</span>
</div><span class=\'my-number\'>6281977094280</span>
</a> -->
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class=\'informasi\' href=\'javascript:void\' title=\'Chat Whatsapp\'>
<div class=\'info-avatar\'><img src=\'image/tasia.png\' />
</div>
<div class=\'info-chat\'>
<span class=\'chat-label\'>Support</span>
<span class=\'chat-nama\'>Tasia</span>
</div>
</a>
<!-- Info Contact End -->
<div class=\'blanter-msg\'>Hubungi kami atau tekan nomor ini <b><a
href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Apa%20Kabar">+628
22-8980-2000</a></b></a> layanan mulai <i>0:00 hingga 24:00</i></div>
</div>
<div class=\'start-chat hide\'>
<div class=\'first-msg\'><span>Hallo! Apa yang bisa kubantu ? Apakah mobilnya sudah servis ?</span></div>
<div class=\'blanter-msg\'><textarea id=\'chat-input\' placeholder=\'Write a response\' maxlength=\'120\'
row=\'1\'></textarea>
<a href=\'javascript:void;\' id=\'send-it\'>Send</a></div>
</div>
<div id=\'get-number\'></div><a class=\'close-chat\' href=\'javascript:void\'>×</a>
</div>
<a class=\'blantershow-chat\' href=\'javascript:void\' title=\'Show Chat\'><i class=\'fab fa-rocketchat\'></i>Tanya
Tasia</a>
<!-- <div class="mybuttonWA">
<a class="buttonWA" href="https://api.whatsapp.com/send?phone=6282289602000&text=Halo%20Admin%20Apa%20Kabar"
rel="nofollow" target="_blank"><i class="fa fa-whatsapp"> </i> WhatsApp</a>
</div> -->
<!-- <div class="mybuttonWA2">
<a class="buttonWA2"
href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Apa%20Kabar" rel="nofollow"
target="_blank">Tanya Tasia <img src="image/tasia.png" alt="tasia" width="50px" height="55px"> </a>
</div> -->
<section class="home" id="home">
<h3 data-speed="-2" class="home-parallax">find your car</h3>
<img data-speed="5" class="home-parallax" src="image/home-img.png" alt="">
<a data-speed="7" href="#featured" class="btn home-parallax">explore cars</a>
</section>
<section class="icons-container">
<div class="icons">
<i class="fas fa-home"></i>
<div class="content">
<h3>150+</h3>
<p>branches</p>
</div>
</div>
<div class="icons">
<i class="fas fa-car"></i>
<div class="content">
<h3>4770+</h3>
<p>cars sold</p>
</div>
</div>
<div class="icons">
<i class="fas fa-users"></i>
<div class="content">
<h3>320+</h3>
<p>happy clients</p>
</div>
</div>
<div class="icons">
<i class="fas fa-car"></i>
<div class="content">
<h3>1500+</h3>
<p>news cars</p>
</div>
</div>
</section>
<section class="vehicles" id="vehicles">
<h1 class="heading"> popular <span>vehicles</span> </h1>
<div class="swiper vehicles-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/toyota/4runner.png" alt="">
<div class="content">
<h3>Toyota 4Runner</h3>
<div class="price"> <span>price : </span> Rp818.189.143,50/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/86.png" alt="">
<div class="content">
<h3>Toyota 86</h3>
<div class="price"> <span>price : </span> Rp427.556.933,50/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/avalon.png" alt="">
<div class="content">
<h3>Toyota Avalon</h3>
<div class="price"> <span>price : </span> Rp717.537.194,50/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/c-hr.png" alt="">
<div class="content">
<h3>Toyota C-HR</h3>
<div class="price"> <span>price : </span> Rp394.239.142,45/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/camry.png" alt="">
<div class="content">
<h3>Toyota Camry</h3>
<div class="price"> <span>price : </span> Rp517.630.448,20/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/corolla.png" alt="">
<div class="content">
<h3>Toyota Corolla</h3>
<div class="price"> <span>price : </span> Rp387.780.880,00/- </div>
<p>
new
<span class="fas fa-circle"></span> 2021
<span class="fas fa-circle"></span> automatic
<span class="fas fa-circle"></span> petrol
<span class="fas fa-circle"></span> 183mph
</p>
<a href="#" class="btn">check out</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="services" id="services">
<h1 class="heading"> our <span>services</span> </h1>
<div class="box-container">
<div class="box">
<i class="fas fa-car"></i>
<h3>Jual Mobil</h3>
<p>Melayani jual beli Mobil</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%20Beli%20Mobil%20Dong" class="btn"> read more</a>
</div>
<div class="box">
<i class="fas fa-tools"></i>
<h3>Perbaikan Suku Cadang</h3>
<p>Melayani perbaikan suku cadang</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%20Perbaikan%20Mobil%20Dong" class="btn"> read more</a>
</div>
<div class="box">
<i class="fas fa-car-crash"></i>
<h3>Asuransi Mobil</h3>
<p>Asuransi Mobil Terjamin</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%20dapat%20info%20Asuransi%20Mobil%20Dong" class="btn"> read more</a>
</div>
<div class="box">
<i class="fas fa-car-battery"></i>
<h3>Layanan Penggantian Aki</h3>
<p>Pergantian Aki dengan yang sudah tidak ada listrik</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%20Perbaikan%20Aki%20Dong" class="btn"> read more</a>
</div>
<div class="box">
<i class="fas fa-gas-pump"></i>
<h3>Tukar Oli</h3>
<p>Jasa Tukar Oli yang terpercaya</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%Tukar%20Oli%20Mobil%20Dong" class="btn"> read more</a>
</div>
<div class="box">
<i class="fas fa-headset"></i>
<h3>24/7 Mendukung Service</h3>
<p>Mendukung service selama 24 jam selama 7 hari secara penuh</p>
<a href="https://api.whatsapp.com/send?phone=6282289802000&text=Halo%20Admin%20Pengen%Tanya%20Mobil%20Dong" class="btn"> read more</a>
</div>
</div>
</section>
<section class="featured" id="featured">
<h1 class="heading"> <span>featured</span> cars </h1>
<div class="swiper featured-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/toyota/gr-supra.png" alt="">
<div class="content">
<h3>Toyota GR Supra</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price">Rp779.696.188,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/highlander.png" alt="">
<div class="content">
<h3>Toyota Highlander</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price">Rp720.388.524,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/prius.png" alt="">
<div class="content">
<h3>Toyota Prius</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price">Rp531.773.045,00/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/rav4.png" alt="">
<div class="content">
<h3>Toyota RAV4</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price">Rp466.620.154,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper featured-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/toyota/sienna.png" alt="">
<div class="content">
<h3>Toyota Sienna</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price">Rp592.078.674,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/tacoma.png" alt="">
<div class="content">
<h3>Toyota Tacoma</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price">Rp617.740.644,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/tundra.png" alt="">
<div class="content">
<h3>Toyota Tundra</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<div class="price">Rp742.272.482,25/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
<div class="swiper-slide box">
<img src="image/toyota/yaris.png" alt="">
<div class="content">
<h3>Toyota Yaris</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="price">Rp223.686.838,50/-</div>
<a href="#" class="btn">check out</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="newsletter">
<h3>subscribe for latest updates</h3>
<p>Fitur Langganan untuk pengguna Auto2000</p>
<form action="">
<input type="email" placeholder="enter your email">
<input type="submit" value="subscribe">
</form>
</section>
<section class="reviews" id="reviews">
<h1 class="heading"> client\'s <span>review</span> </h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/pic-1.png" alt="">
<div class="content">
<p>Setiap kali saya melakukan servis, saya dapat melihat history record servis kendaraan yang
lengkap dan komprehensif serta bisa diakses di seluruh cabang Auto2000 maupun melalui
aplikasi.</p>
<h3>Bhagawad G</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide box">
<img src="image/pic-2.png" alt="">
<div class="content">
<p>Sejak pertama beli Toyota, saya selalu percayakan Auto2000, termasuk untuk after sales
servicenya. Mekaniknya handal dan tersertifikasi. Layanan reminder servis dan booking online
juga.</p>
<h3>Agatha</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<div class="swiper-slide box">
<img src="image/pic-3.png" alt="">
<div class="content">
<p>Di Auto2000, saya mudah mendapatkan jadwal servis karena sudah booking terlebih dahulu dan
langsung dilayani ketika sampai di bengkel.</p>
<h3>Bagus Prakoso</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide box">
<img src="image/pic-4.png" alt="">
<div class="content">
<p>Service di Auto2000, petugas service nya ramah, snack nya banyak, ruang tunggunya juga
nyaman. Betah service disini.</p>
<h3>Farida</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<div class="swiper-slide box">
<img src="image/pic-5.png" alt="">
<div class="content">
<p>Penjelasan yang diberikan salesman kepada pelanggan sangat jelas dan rinci terkait dengan
fitur-fitur yang terdapat pada kendaraan.</p>
<h3>Adib Fathoni</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<div class="swiper-slide box">
<img src="image/pic-6.png" alt="">
<div class="content">
<p>Saya pernah beli mobil di Auto2000 Kelapa Gading, pelayanannya cepat dan jelas, nggak
berbelit-belit, nggak tipu-tipu diskon dan promonya. Mantap lah pokoknya salesmannya
Auto2000.</p>
<h3>Magdalena</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="contact" id="contact">
<h1 class="heading"><span>contact</span> us</h1>
<div class="row">
<iframe class="map"
src="https://maps.google.com/maps?q=AUTO2000%20manyar%20gresik&t=&z=13&ie=UTF8&iwloc=&output=embed"
allowfullscreen="" loading="lazy"></iframe>
<form action="">
<h3>get in touch</h3>
<input type="text" placeholder="Your name" class="box">
<input type="email" placeholder="Your email" class="box">
<input type="tel" placeholder="Subject" class="box">
<textarea placeholder="Your message" class="box" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>
</div>
</section>
<section class="footer" id="footer">
<div class="box-container">
<div class="box">
<h3>our branches</h3>
<a href="#"> <i class="fas fa-map-marker-alt"></i> india </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> japan </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> france </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> russia </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> USA </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Indonesia </a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#"> <i class="fas fa-arrow-right"></i> home </a>
<a href="#"> <i class="fas fa-arrow-right"></i> vehicles </a>
<a href="#"> <i class="fas fa-arrow-right"></i> services </a>
<a href="#"> <i class="fas fa-arrow-right"></i> featured </a>
<a href="#"> <i class="fas fa-arrow-right"></i> reviews </a>
<a href="#"> <i class="fas fa-arrow-right"></i> contact </a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> +628 22-8980-2000 </a>
<a href="#"> <i class="fas fa-phone"></i> +628 22-8980-2000 </a>
<a href="#"> <i class="fas fa-envelope"></i> customer-care@toyota.astra.co.id </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> PT. Toyota Astra Motor
Jl. Laksda Yos Sudarso, Sunter II </a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#"> <i class="fab fa-instagram"></i> instagram </a>
<a href="#"> <i class="fab fa-linkedin"></i> linkedin </a>
<a href="#"> <i class="fab fa-pinterest"></i> pinterest </a>
</div>
</div>
<div class="credits"> AUTO 2000 | all rights reserved </div>
</section>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
<script>
/* Whatsapp Chat Widget by www.idblanter.com */
$(document).on("click", "#send-it", function () {
var a = document.getElementById("chat-input");
if ("" != a.value) {
var b = $("#get-number").text(),
c = document.getElementById("chat-input").value,
d = "https://web.whatsapp.com/send",
e = b,
f = "&text=" + c;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
var d = "whatsapp://send";
var g = d + "?phone=" + e + f;
window.open(g, \'_blank\')
}
}), $(document).on("click", ".informasi", function () {
document.getElementById("get-number").innerHTML = $(this).children(".my-number").text(), $(
".start-chat,.get-new").addClass("show").removeClass("hide"), $(".home-chat,.head-home")
.addClass("hide").removeClass("show"), document.getElementById("get-nama").innerHTML = $(this)
.children(".info-chat").children(".chat-nama").text(), document.getElementById("get-label")
.innerHTML = $(this).children(".info-chat").children(".chat-label").text()
}), $(document).on("click", ".close-chat", function () {
$("#whatsapp-chat").addClass("hide").removeClass("show")
}), $(document).on("click", ".blantershow-chat", function () {
$("#whatsapp-chat").addClass("show").removeClass("hide")
});
</script>
</body>
</html>