-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (112 loc) · 5.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<title>Company Karoseri</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- Image Slider (Carousel) -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/image1.png" class="d-block w-100" alt="Image 1">
<div class="carousel-caption d-none d-md-block">
<h5>Karoseri Terbaik Di Tempat Kami</h5>
<p>Kami percaya memberikan kualitas pengerjaan terbaik.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/image2.png" class="d-block w-100" alt="Image 2">
<div class="carousel-caption d-none d-md-block">
<h5>Spesialis Pembuatan Dumb Truck</h5>
<p>Solusi karoseri terbaik untuk kebutuhan Anda.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/truck-2391940_1920.jpg" class="d-block w-100" alt="Image 3">
<div class="carousel-caption d-none d-md-block">
<h5>Profesional dan Berpengalaman</h5>
<p>Didukung oleh tenaga ahli dan alat modern.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<section class="story">
<h2>Our Vision</h2>
<p>Menjadi Pelopor dalam Industri Karoseri</p>
<p>Sejak berdirinya perusahaan kami, kami telah berkomitmen untuk menghadirkan inovasi dan kualitas terbaik dalam setiap produk yang kami buat. Kami adalah perusahaan karoseri yang mengkhususkan diri dalam pembuatan kendaraan berat seperti dumb truck dan berbagai solusi transportasi yang dirancang untuk memenuhi kebutuhan industri dan pelanggan kami.</p>
<section class="founders">
<h3>Our Founders</h3>
<div class="container">
<div class="row">
<!-- Founder 1 -->
<div class="col-md-4">
<div class="card">
<img src="images/founder.jpg" class="card-img-top" alt="Founder 1">
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="card-text">Founder and CEO. With a vision for excellence in karoseri.</p>
</div>
</div>
</div>
<!-- Founder 2 -->
<div class="col-md-4">
<div class="card">
<img src="images/founder.jpg" class="card-img-top" alt="Founder 2">
<div class="card-body">
<h5 class="card-title">Jane Smith</h5>
<p class="card-text">Co-Founder and CTO. Innovator in karoseri technology.</p>
</div>
</div>
</div>
<!-- Founder 3 -->
<div class="col-md-4">
<div class="card">
<img src="images/founder.jpg" class="card-img-top" alt="Founder 3">
<div class="card-body">
<h5 class="card-title">Michael Brown</h5>
<p class="card-text">Co-Founder and COO. Expert in operations and quality control.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>© 2024 Company Karoseri. All rights reserved.</p>
</footer>
<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>