index.html

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- library animation AOS -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <!-- My css -->
    <link rel="stylesheet" href="css/style.css">

    <!-- link icon bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.0/font/bootstrap-icons.css">


    <title>TR Code | Home</title>
</head>

<body class="m-3">

    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white p-3">
        <div class="container">
            <a class="navbar-brand me-4 fs-3 fw-bold" href="index.html">TR Code</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="learning.html">Learning</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="bootcamp.html">Bootcamp</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="contact.html">Contact</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <button class="btn btn-primary me-3" type="submit">Daftar</button>
                    <button class="btn btn-primary" type="submit">Login</button>
                </form>
            </div>
        </div>
    </nav>
    <!-- end navbar -->


    <!-- hero section -->
    <section>
        <div class="container-lg mt-5 mb-5">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-6 col-md-6 text-center">
                    <img src="img/herosection_index.jpg" alt="Web-Developer" title="Web-Developer" class="img-fluid">
                </div>
                <div class="col-lg-6 col-md-6">
                    <h1>Belajar coding berstandar internasional</h1>
                    <p>Kembangkan skillmu disini untuk menjadi developer handal yang terarah dengan problem solving yang
                        baik</p>
                    <a class="btn btn-primary" href="learning.html" role="button">Mulai Belajar</a>
                </div>
            </div>
        </div>
    </section>
    <!-- end hero section -->


    <!-- Program Kerjasama -->
    <section>
        <div class="container-fluid bg-light pt-5 pb-5" data-aos="fade-down" data-aos-offset="300"
            data-aos-duration="1500">
            <div class="row text-center justify-content-center mb-4">
                <div class="col-lg-6">
                    <h2>Program Kerjasama Kami</h2>
                    <p>Bekerja sama bersama partner, kami memberikan peluang para developer muda mengikuti era digital
                        yang selalu update.</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-4">
                    <div class="card mb-3 colab">
                        <div class="card-body">
                            <h5 class="card-title">BarBar (Belajar Bareng)</h5>
                            <p class="card-text">BarBar merupakan program kerjasama kami bersama Codega selama 5 hari
                                untuk menciptakan website statis maupun dinamis</p>
                            <a class="btn btn-primary" href="#" role="button">Lihat Event</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card colab">
                        <div class="card-body">
                            <h5 class="card-title">Data Science S1</h5>
                            <p class="card-text">Data Science S1 merupakan program kerjasama kami bersama codega
                                mengikuti perkembangan zaman menggunakan big data</p>
                            <a class="btn btn-primary" href="#" role="button">Lihat Event</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end Program Kerjasama -->


    <!-- detail 1 -->
    <section>
        <div class="container-lg pt-5 pb-5" data-aos="fade-right" data-aos-offset="300" data-aos-duration="2000">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-6 col-md-6 text-center">
                    <img src="img/section1_index.jpg" alt="Web Developer" title="Web Developer" class="img-fluid">
                </div>
                <div class="col-lg-6 col-md-6">
                    <h3>Belajar di TR Code lebih terarah & selalu up to date</h3>
                    <p>Belajar lebih produktif dengan materi selalu up to date dengan perkembangan zaman untuk
                        menyiapkan teknologi di era digital.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- end detail 1 -->


    <!-- detail 2 -->
    <section>
        <div class="container-lg pt-5 pb-5" data-aos="fade-left" data-aos-offset="400" data-aos-duration="2000">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-6 col-md-6 text-center">
                    <img src="img/section2_index.jpg" alt="E-Learning" title="E-Learning" class="img-fluid">
                </div>
                <div class="col-lg-6 col-md-6">
                    <h3>Belajar bersama e-learning TR Code dengan waktu yang fleksibel</h3>
                    <p>Memudahkan kalian untuk menghemat waktu & menggunakan waktu dengan baik. Belajar dengan waktu
                        sesuai keinginan kalian.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- end detail 2 -->


    <!-- testimoni -->
    <section class="bg-light py-5" data-aos="zoom-in" data-aos-offset="300" data-aos-duration="1000">
        <div class="container-fluid">
            <div class="container">
                <div class="row text-center">
                    <div class="col">
                        <h2>Testimoni Coders</h2>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
                                    class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                                    aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                                    aria-label="Slide 3"></button>
                            </div>
                            <div class=" carousel-inner text-center pb-5 px-5">
                                <!-- slide 1 -->
                                <div class="carousel-item active">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-8 col-md-10">
                                            <i class="bi bi-person-circle fs-1"></i>
                                            <h5>Helga Aka</h5>
                                            <h6>Junior Frond End Developer</h6>
                                            <p>Course learning nya singkat , jelas & mudah dimengerti cocok untuk
                                                pemula. Maka rekomendasi banget untuk para pemula belajardi TR code
                                                dengan pembelajaran yang dibimbing oleh para developer profesional</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- slide 2 -->
                                <div class="carousel-item">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-8 col-md-10 col-sm-12">
                                            <i class="bi bi-person-circle fs-1"></i>
                                            <h5>Helga Aka</h5>
                                            <h6>Software Developer</h6>
                                            <p>Course learning nya singkat , jelas & mudah dimengerti cocok untuk
                                                pemula. Maka rekomendasi banget untuk para pemula belajardi TR code
                                                dengan pembelajaran yang dibimbing oleh para developer profesional</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- slide 3 -->
                                <div class="carousel-item">
                                    <div class="row justify-content-center">
                                        <div class="col-lg-8 col-md-10 col-sm-12">
                                            <i class="bi bi-person-circle fs-1"></i>
                                            <h5>Helga Aka</h5>
                                            <h6>Data Engineer</h6>
                                            <p>Course learning nya singkat , jelas & mudah dimengerti cocok untuk
                                                pemula. Maka rekomendasi banget untuk para pemula belajardi TR code
                                                dengan pembelajaran yang dibimbing oleh para developer profesional</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end testimoni -->


    <hr>
    <!-- footer -->
    <footer>
        <div class="container">
            <div class="row justify-content-center mt-5 mb-4">
                <div class="col-md-3">
                    <h5>Tentang Kami</h5>
                    <ul class="list-unstyled">
                        <li><a href="" class="text-decoration-none text-dark">Blog</a></li>
                        <li><a href="" class="text-decoration-none text-dark">Teka - Teki</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>Event</h5>
                    <ul class="list-unstyled">
                        <li><a href="" class="text-decoration-none text-dark">Belajar Bareng</a></li>
                        <li><a href="" class="text-decoration-none text-dark">Data Science S1</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>Coders</h5>
                    <ul class="list-unstyled">
                        <li><a href="" class="text-decoration-none text-dark">Leaderboard Developers</a></li>
                        <li><a href="" class="text-decoration-none text-dark">Grup Diskusi</a></li>
                    </ul>
                </div>
            </div>
            <div class="row text-center mb-4">
                <div class="col">
                    <a href=""><i class="bi bi-facebook text-dark me-3 fs-3"></i></a>
                    <a href=""><i class="bi bi-instagram text-dark me-3 fs-3"></i></a>
                    <a href=""><i class="bi bi-twitter text-dark me-3 fs-3"></i></a>
                    <a href=""><i class="bi bi-youtube text-dark fs-3"></i></a>
                </div>
            </div>
        </div>
        <hr>
        <p class="text-center m-4">&copy; 2021 TR Code | All Rights Reserved <br> by Helga Aka</p>
    </footer>
    <!-- end footer -->


    <!-- script AOS -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({
            once: true
        });
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
    </script>
    <!--
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
</body>

</html>