From ccbf2353f3679f9d16d4a0a497b9563d0ed0ad38 Mon Sep 17 00:00:00 2001
From: ditaajipratama <ditaajipratama@protonmail.com>
Date: Wed, 26 Jun 2024 09:49:53 +0700
Subject: [PATCH] First commit

---
 index.html | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 318 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f0fd733
--- /dev/null
+++ b/index.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kids Private Courses</title>
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      background-color: #f8f9fa;
+    }
+    .navbar {
+      margin-bottom: 0;
+    }
+    .header {
+      background: url('https://img.freepik.com/free-photo/little-cute-boy-proud-when-he-finish-drawing-with-happiness-raised-two-hands-his-head-smile_1150-15403.jpg') no-repeat center center;
+      background-size: cover;
+      color: white;
+      padding: 100px 0;
+      text-align: center;
+      position: relative;
+      min-height: 400px;
+    }
+    .header-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 123, 255, 0.6);
+      z-index: 1;
+    }
+    .header-content {
+      position: relative;
+      z-index: 2;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 3em;
+      font-family: 'Comic Sans MS', cursive, sans-serif;
+    }
+    .header p {
+      font-size: 1.5em;
+    }
+    .packages {
+      padding: 50px 0;
+      text-align: center;
+    }
+    .packages h2 {
+      font-size: 2.5em;
+      margin-bottom: 50px;
+    }
+    .package {
+      border-radius: 15px;
+      padding: 20px;
+      margin: 20px 0;
+      background-color: white;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.2s;
+      color: white;
+    }
+    .package:hover {
+      transform: scale(1.05);
+    }
+    .package:nth-child(1) { background-color: #FF6F61; }
+    .package:nth-child(2) { background-color: #6B5B95; }
+    .package:nth-child(3) { background-color: #FFA07A; }
+    .package:nth-child(4) { background-color: #88B04B; }
+    .package .btn {
+      background-color: white;
+      color: black;
+      border: none;
+      margin-top: 10px;
+      padding: 10px 20px;
+      border-radius: 5px;
+    }
+    .package .btn:hover {
+      background-color: #f0f0f0;
+      color: black;
+    }
+    .package img {
+      width: 80px;
+      margin-bottom: 10px;
+    }
+    .about-us {
+      padding: 50px 0;
+      background-color: #FFC857;
+      text-align: center;
+    }
+    .about-us h2 {
+      font-size: 2.5em;
+      margin-bottom: 20px;
+    }
+    .about-us p {
+      font-size: 1.2em;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .price-plan {
+      padding: 50px 0;
+      text-align: center;
+      background-color: #fff;
+    }
+    .price-plan h2 {
+      font-size: 2.5em;
+      margin-bottom: 50px;
+    }
+    .price-card {
+      border-radius: 15px;
+      padding: 30px;
+      margin: 20px;
+      background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.2s;
+      color: white;
+      position: relative;
+      overflow: hidden;
+    }
+    .price-card:hover {
+      transform: scale(1.05);
+    }
+    .price-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.1);
+      z-index: 1;
+      pointer-events: none;
+    }
+    .price-card h3 {
+      font-size: 2em;
+      margin-bottom: 20px;
+    }
+    .price-card p {
+      font-size: 1.2em;
+      margin-bottom: 10px;
+      z-index: 2;
+      position: relative;
+    }
+    .price-card .btn {
+      margin-top: 20px;
+      padding: 10px 20px;
+      border-radius: 50px;
+      z-index: 2;
+      position: relative;
+      background-color: rgba(255, 255, 255, 0.9);
+      color: #333;
+      border: none;
+    }
+    .price-card .btn:hover {
+      background-color: rgba(255, 255, 255, 1);
+      color: #333;
+    }
+    .get-started {
+      padding: 50px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #f8f9fa;
+      text-align: left;
+    }
+    .get-started .content {
+      flex: 1;
+      font-size: 1.2em;
+      margin-right: 20px;
+    }
+    .get-started .btn {
+      font-size: 1.2em;
+      padding: 15px 30px;
+      border-radius: 50px;
+    }
+    .footer {
+      background-color: #343a40;
+      color: white;
+      padding: 20px 0;
+      text-align: center;
+    }
+    .footer a {
+      color: #ffc107;
+      text-decoration: none;
+    }
+    .footer a:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container">
+      <a class="navbar-brand" href="#">Kids Courses</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item active">
+            <a class="nav-link" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Header -->
+  <div class="header">
+    <div class="header-overlay"></div>
+    <div class="container header-content">
+      <h1>Kids Private Courses</h1>
+      <p>Engaging and fun courses for kids of all ages!</p>
+    </div>
+  </div>
+
+  <!-- Packages Section -->
+  <div class="container packages">
+    <h2>Our Packages</h2>
+    <div class="row">
+      <div class="col-lg-3 col-md-6">
+        <div class="package" style="background-color: #FF6F61;">
+          <img src="https://cdn-icons-png.freepik.com/512/1660/1660842.png" alt="Math Icon">
+          <h2>Math</h2>
+          <p>Enhance your math skills with our comprehensive math courses.</p>
+          <button class="btn">Learn More</button>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="package" style="background-color: #6B5B95;">
+          <img src="https://cdn-icons-png.freepik.com/512/6309/6309332.png" alt="Science Icon">
+          <h2>Science</h2>
+          <p>Explore the wonders of science with hands-on experiments.</p>
+          <button class="btn">Learn More</button>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="package" style="background-color: #88B04B;">
+          <img src="https://cdn-icons-png.freepik.com/512/8458/8458128.png" alt="English Icon">
+          <h2>English</h2>
+          <p>Improve your English skills with our engaging courses.</p>
+          <button class="btn">Learn More</button>
+        </div>
+      </div>
+      <div class="col-lg-3 col-md-6">
+        <div class="package" style="background-color: #FFA07A;">
+          <img src="https://cdn-icons-png.freepik.com/512/9311/9311787.png" alt="History Icon">
+          <h2>History</h2>
+          <p>Discover the past with our interactive history courses.</p>
+          <button class="btn">Learn More</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- About Us Section -->
+  <div class="about-us">
+    <h2>About Us</h2>
+    <p>We provide a variety of engaging and educational courses designed to inspire and nurture the creativity and curiosity of kids. Our mission is to create a fun and safe learning environment where children can explore their interests and develop new skills.</p>
+  </div>
+
+  <!-- Price Plan Section -->
+  <div class="container price-plan">
+    <h2>Price Plan</h2>
+    <div class="row">
+      <div class="col-lg-4 col-md-6">
+        <div class="price-card" style="background: linear-gradient(135deg, #69FF97 0%, #00E4FF 100%);">
+          <h3>Basic Plan</h3>
+          <p>$19.99/month</p>
+          <p>Access to all basic courses</p>
+          <button class="btn">Get Started</button>
+        </div>
+      </div>
+      <div class="col-lg-4 col-md-6">
+        <div class="price-card" style="background: linear-gradient(135deg, #FFD3A5 0%, #FD6585 100%);">
+          <h3>Standard Plan</h3>
+          <p>$29.99/month</p>
+          <p>Access to all courses plus premium content</p>
+          <button class="btn">Get Started</button>
+        </div>
+      </div>
+      <div class="col-lg-4 col-md-6">
+        <div class="price-card" style="background: linear-gradient(135deg, #C9FFBF 0%, #FFAFBD 100%);">
+          <h3>Premium Plan</h3>
+          <p>$39.99/month</p>
+          <p>Unlimited access to all courses and exclusive resources</p>
+          <button class="btn">Get Started</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Get Started Section -->
+  <div class="container get-started">
+    <div class="content">
+      <p>Join us today and let your children embark on a journey of learning and fun. Our courses are tailored to suit the needs of every child and help them grow in a supportive environment.</p>
+    </div>
+    <button class="btn btn-primary">Get Started</button>
+  </div>
+
+  <!-- Footer -->
+  <div class="footer">
+    <div class="container">
+      <p>&copy; 2024 Kids Private Courses. All rights reserved.</p>
+      <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
+    </div>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+</body>
+</html>
+
