app.py
from flask import Flask, render_template
# Inisialisasi Flask
app = Flask(__name__)
# Route halaman utama
@app.route("/")
def home():
return render_template("index.html")
# Route halaman About
@app.route("/about")
def about():
return """
<h1>About Us</h1>
<p>Selamat datang di halaman About.</p>
<a href="/">Kembali ke Home</a>
"""
# Menjalankan server
if __name__ == "__main__":
app.run(host='0.0.0.0')
index.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Flask Academy - Belajar Programming</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand fw-bold" href="/">
Flask Academy
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="btn btn-primary ms-lg-3"
href="#contact">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HERO SECTION -->
<section class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<span class="badge bg-primary mb-3">
Welcome to Flask Academy
</span>
<h1 class="display-4 fw-bold">
Learn Python.
Build Your Future.
</h1>
<p class="lead mt-3">
Belajar Python dan Web Development
dari dasar hingga menjadi developer
profesional.
</p>
<div class="mt-4">
<a href="#courses"
class="btn btn-primary btn-lg">
Explore Courses
</a>
<a href="#about"
class="btn btn-outline-dark btn-lg ms-2">
Learn More
</a>
</div>
</div>
<div class="col-lg-6 text-center mt-5 mt-lg-0">
<img
src="https://placehold.co/600x400/0d6efd/ffffff?text=Python+Flask"
class="img-fluid rounded shadow"
alt="Python Flask">
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="py-5" id="about">
<div class="container text-center">
<h2 class="fw-bold">Why Choose Us?</h2>
<p class="text-muted">
Platform belajar programming untuk semua orang.
</p>
<div class="row mt-4">
<div class="col-md-4 mb-3">
<div class="card feature-card p-4">
<h3>01</h3>
<h5>Easy Learning</h5>
<p>
Materi pembelajaran mudah dipahami
untuk pemula.
</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card p-4">
<h3>02</h3>
<h5>Practical Project</h5>
<p>
Belajar melalui praktik dan
project nyata.
</p>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card feature-card p-4">
<h3>03</h3>
<h5>Professional Skills</h5>
<p>
Tingkatkan kemampuan programming
dan web development.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- COURSES SECTION -->
<section class="bg-light py-5" id="courses">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Our Courses</h2>
<p class="text-muted">
Pilih materi belajar sesuai kebutuhan Anda.
</p>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5>Python Fundamentals</h5>
<p>
Belajar variabel, tipe data,
conditional, looping, dan function.
</p>
<a href="#contact"
class="btn btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5>Flask Web Development</h5>
<p>
Membangun aplikasi web dengan
Python Flask.
</p>
<a href="#contact"
class="btn btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5>Database Development</h5>
<p>
Belajar integrasi aplikasi
dengan database MySQL.
</p>
<a href="#contact"
class="btn btn-outline-primary">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="py-5" id="contact">
<div class="container text-center">
<h2 class="fw-bold">Start Learning Today!</h2>
<p>
Bergabunglah bersama Flask Academy.
</p>
<a href="mailto:info@flaskacademy.com"
class="btn btn-primary btn-lg">
Contact Us
</a>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-dark text-white text-center py-3">
<p class="mb-0">
© 2026 Flask Academy.
All Rights Reserved.
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
style.css
/* General */
body {
font-family: Arial, sans-serif;
color: #212529;
}
/* Hero Section */
.hero-section {
padding: 100px 0;
background: linear-gradient(
135deg,
#eaf2ff,
#ffffff
);
}
/* Feature Card */
.feature-card {
border: none;
border-radius: 15px;
transition: 0.3s;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* Footer */
footer {
font-size: 14px;
}
