API tools faq
paste
grage95

Untitled

grage95
Dec 2nd, 2024
13
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Perl 8.28 KB | None | 0 0
raw download clone embed print report
  1. /project
  2. │
  3. ├── index.html      (File HTML utama)
  4. ├── css/
  5. │   └── style.css   (File CSS)
  6. ├── js/             (opsional, jika ada JavaScript tambahan)
  7. │
  8. └── assets/
  9.     └── images/     (Folder untuk gambar)
  10. <!DOCTYPE html>
  11. <html lang="en">
  12. <head>
  13.   <meta charset="UTF-8">
  14.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15.   <meta name="description" content="Belanja mudah, cepat, dan aman di Toko Online Anda">
  16.   <title>Landing Page - Toko Online</title>
  17.   <!-- Bootstrap CSS -->
  18.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  19.   <!-- Custom CSS -->
  20.   <link rel="stylesheet" href="css/style.css">
  21. </head>
  22. <body>
  23.  
  24.   <!-- Hero Section -->
  25.   <header class="hero-section text-center text-white">
  26.     <div class="container py-5">
  27.       <h1 class="display-4">Belanja Mudah, Cepat, dan Aman</h1>
  28.       <p class="lead">Temukan produk favorit Anda dengan harga terbaik.</p>
  29.       <a href="#best-sellers" class="btn btn-lg btn-primary">Belanja Sekarang</a>
  30.     </div>
  31.   </header>
  32.  
  33.   <!-- Value Proposition -->
  34.   <section class="features py-5">
  35.     <div class="container text-center">
  36.       <div class="row">
  37.         <div class="col-md-3">
  38.           <i class="bi bi-truck display-4"></i>
  39.           <h5>Gratis Ongkir</h5>
  40.           <p>Pengiriman ke seluruh Indonesia tanpa biaya tambahan.</p>
  41.         </div>
  42.         <div class="col-md-3">
  43.           <i class="bi bi-bag display-4"></i>
  44.           <h5>Promo Terbaik</h5>
  45.           <p>Dapatkan diskon besar setiap hari.</p>
  46.         </div>
  47.         <div class="col-md-3">
  48.           <i class="bi bi-arrow-counterclockwise display-4"></i>
  49.           <h5>Pengembalian Mudah</h5>
  50.           <p>Garansi pengembalian dalam 7 hari.</p>
  51.         </div>
  52.         <div class="col-md-3">
  53.           <i class="bi bi-check2 display-4"></i>
  54.           <h5>100% Original</h5>
  55.           <p>Jaminan produk asli berkualitas tinggi.</p>
  56.         </div>
  57.       </div>
  58.     </div>
  59.   </section>
  60.  
  61.   <!-- Best Sellers -->
  62.   <section id="best-sellers" class="py-5">
  63.     <div class="container">
  64.       <h2 class="text-center">Produk Populer</h2>
  65.       <div class="row">
  66.         <div class="col-md-4">
  67.           <div class="card">
  68.             <img src="assets/images/product1.jpg" class="card-img-top" alt="Produk 1">
  69.             <div class="card-body text-center">
  70.               <h5 class="card-title">Produk 1</h5>
  71.               <p class="card-text">Rp 100.000</p>
  72.               <a href="#" class="btn btn-primary">Beli Sekarang</a>
  73.             </div>
  74.           </div>
  75.         </div>
  76.         <div class="col-md-4">
  77.           <div class="card">
  78.             <img src="assets/images/product2.jpg" class="card-img-top" alt="Produk 2">
  79.             <div class="card-body text-center">
  80.               <h5 class="card-title">Produk 2</h5>
  81.               <p class="card-text">Rp 150.000</p>
  82.               <a href="#" class="btn btn-primary">Beli Sekarang</a>
  83.             </div>
  84.           </div>
  85.         </div>
  86.         <div class="col-md-4">
  87.           <div class="card">
  88.             <img src="assets/images/product3.jpg" class="card-img-top" alt="Produk 3">
  89.             <div class="card-body text-center">
  90.               <h5 class="card-title">Produk 3</h5>
  91.               <p class="card-text">Rp 200.000</p>
  92.               <a href="#" class="btn btn-primary">Beli Sekarang</a>
  93.             </div>
  94.           </div>
  95.         </div>
  96.       </div>
  97.     </div>
  98.   </section>
  99.  
  100.   <!-- Footer -->
  101.   <footer class="text-center py-4">
  102.     <p>&copy; 2024 Toko Online Anda. All Rights Reserved.</p>
  103.   </footer>
  104.  
  105.   <!-- Bootstrap JS -->
  106.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  107. </body>
  108. </html>
  109.  
  110. /* General Reset */
  111. body {
  112.   font-family: 'Arial', sans-serif;
  113.   line-height: 1.6;
  114. }
  115.  
  116. .hero-section {
  117.   background: url('assets/images/hero.jpg') no-repeat center center/cover;
  118.   height: 80vh;
  119.   display: flex;
  120.   align-items: center;
  121.   justify-content: center;
  122.   color: #fff;
  123. }
  124.  
  125. .features h5 {
  126.   margin-top: 15px;
  127.   color: #333;
  128. }
  129.  
  130. .features p {
  131.   color: #666;
  132. }
  133.  
  134. .card img {
  135.   height: 200px;
  136.   object-fit: cover;
  137. }
  138.  
  139. footer {
  140.   background: #f8f9fa;
  141.   color: #333;
  142. }
  143.  
  144.  
  145.  
  146. <!DOCTYPE html>
  147. <html lang="en">
  148. <head>
  149.   <meta charset="UTF-8">
  150.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  151.   <meta name="description" content="Tentang Kami - Pelajari lebih lanjut tentang visi, misi, dan tim kami.">
  152.   <title>Tentang Kami</title>
  153.   <!-- Bootstrap CSS -->
  154.   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  155.   <!-- Custom CSS -->
  156.   <link rel="stylesheet" href="css/style.css">
  157. </head>
  158. <body>
  159.  
  160.   <!-- Navbar -->
  161.   <nav class="navbar navbar-expand-lg navbar-light bg-light">
  162.     <div class="container">
  163.       <a class="navbar-brand" href="index.html">Toko Online Anda</a>
  164.       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  165.         <span class="navbar-toggler-icon"></span>
  166.       </button>
  167.       <div class="collapse navbar-collapse" id="navbarNav">
  168.         <ul class="navbar-nav ms-auto">
  169.           <li class="nav-item"><a class="nav-link" href="index.html">Beranda</a></li>
  170.           <li class="nav-item"><a class="nav-link active" href="about.html">Tentang Kami</a></li>
  171.           <li class="nav-item"><a class="nav-link" href="#contact">Kontak</a></li>
  172.         </ul>
  173.       </div>
  174.     </div>
  175.   </nav>
  176.  
  177.   <!-- Hero Section -->
  178.   <header class="about-hero text-white text-center py-5">
  179.     <div class="container">
  180.       <h1 class="display-4">Tentang Kami</h1>
  181.       <p class="lead">Kenali lebih dekat siapa kami, visi, dan misi kami.</p>
  182.     </div>
  183.   </header>
  184.  
  185.   <!-- Visi dan Misi -->
  186.   <section class="py-5">
  187.     <div class="container">
  188.       <h2 class="text-center">Visi & Misi Kami</h2>
  189.       <div class="row mt-4">
  190.         <div class="col-md-6">
  191.           <h4>Visi</h4>
  192.           <p>Mewujudkan pengalaman belanja online terbaik yang aman, nyaman, dan menyenangkan untuk semua pelanggan.</p>
  193.         </div>
  194.         <div class="col-md-6">
  195.           <h4>Misi</h4>
  196.           <ul>
  197.             <li>Menyediakan produk berkualitas dengan harga terbaik.</li>
  198.             <li>Mengutamakan kepuasan pelanggan dengan layanan prima.</li>
  199.             <li>Mendorong inovasi dalam pengalaman belanja online.</li>
  200.           </ul>
  201.         </div>
  202.       </div>
  203.     </div>
  204.   </section>
  205.  
  206.   <!-- Tim Kami -->
  207.   <section class="team bg-light py-5">
  208.     <div class="container">
  209.       <h2 class="text-center">Tim Kami</h2>
  210.       <div class="row mt-4 text-center">
  211.         <div class="col-md-4">
  212.           <img src="assets/images/team1.jpg" alt="Tim 1" class="rounded-circle mb-3" width="150">
  213.           <h5>Nama Tim 1</h5>
  214.           <p>CEO & Founder</p>
  215.         </div>
  216.         <div class="col-md-4">
  217.           <img src="assets/images/team2.jpg" alt="Tim 2" class="rounded-circle mb-3" width="150">
  218.           <h5>Nama Tim 2</h5>
  219.           <p>CTO</p>
  220.         </div>
  221.         <div class="col-md-4">
  222.           <img src="assets/images/team3.jpg" alt="Tim 3" class="rounded-circle mb-3" width="150">
  223.           <h5>Nama Tim 3</h5>
  224.           <p>CMO</p>
  225.         </div>
  226.       </div>
  227.     </div>
  228.   </section>
  229.  
  230.   <!-- Kontak -->
  231.   <section id="contact" class="py-5">
  232.     <div class="container">
  233.       <h2 class="text-center">Hubungi Kami</h2>
  234.       <p class="text-center">Jika Anda memiliki pertanyaan atau masukan, jangan ragu untuk menghubungi kami.</p>
  235.       <div class="row mt-4">
  236.         <div class="col-md-6">
  237.           <h5>Alamat Kami</h5>
  238.           <p>Jalan Raya No. 123, Kota, Negara</p>
  239.         </div>
  240.         <div class="col-md-6">
  241.           <h5>Email & Telepon</h5>
  242.           <p>Email: info@tokoanda.com</p>
  243.           <p>Telepon: +62 812 3456 7890</p>
  244.         </div>
  245.       </div>
  246.     </div>
  247.   </section>
  248.  
  249.   <!-- Footer -->
  250.   <footer class="text-center py-4 bg-dark text-white">
  251.     <p>&copy; 2024 Toko Online Anda. All Rights Reserved.</p>
  252.   </footer>
  253.  
  254.   <!-- Bootstrap JS -->
  255.   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  256. </body>
  257. </html>
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!