Latihan Boostrap

Latihan Boostrap


Afril Muzzaqi Arif
5025201048


Dokumentasi



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Latihan bootstrap</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">
            <img src="gambar/logo.png" alt="logo" style="width:50px;">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Pemrograman</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Database</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Framework</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Lainnya</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="jumbotron text-center">
        <h1>Belajar Programming Simple dan Mudah</h1>
        <p>Tingkatkan skill programming kamu untuk belajar tutorial pemrograman gratis!</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar HTML & CSS</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Programming.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3><a href="#" style="text-decoration:none;color: black;">Web Programming</a> </h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Python.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar Python</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Desain_UI_&_UX.png"  width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Desain UI & UX</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

EAS PBKK

EAS POINT OF SALE ================================================================================================= Nama: Afril Muzzaqi Arif      -5025201048 Kelas: PBKK D 1.Bagaimana tahapan pembangunan aplikasi dengan memanfaatkan framework? 2.Dalam membangun aplikasi kapan sebuah framework diperlukan dan kapan tidak memerlukan framework. Jelaskan 3.Dengan menggunakan framework laravel buatlah deskribsi dan fitur  aplikasi sistem POS Alfamart 4.Tuliskan struktur tabelnya 5.Desain bentuk laporan output dalam bentuk pdf atau cetakan paper 6.Implementasikan dan buat presentasi video Jawab :  1. Tahapan pembangunan aplikasi dengan memanfaatkan framework secara singkat adalah sebagai berikut: Perencanaan: Identifikasi kebutuhan aplikasi dan pilih framework yang sesuai. Desain: Buat desain tampilan antarmuka pengguna dan struktur database. Pengembangan: Kodekan aplikasi menggunakan framework dan alat bantu yang disediakan. Pengujian: Uji aplikasi untuk memastikan kinerjanya sesuai dengan p
Baca selengkapnya

PBKK Quiz CI - Aplikasi Pemesanan Tiket

Gambar
Tiket Kereta Api Nama : Afril Muzzaqi Arif NRP : 5025201048 Kelas : PBKK D Deskripsi aplikasi dan ruang lingkup fitur Aplikasi Pembelian Tiket Kereta Berbasis Web adalah sebuah sistem informasi booking tiiket kereta api secara online yang dibangun guna memudahkan dalam transaksi pembelian tiket kereta secara online. Aplikasi ini dilengkapi dengan fitur login multi user, cek jadwal, transaksi booking, konfirmasi pembayaran, kelola gerbong, dan lain sebagainya. Ruang Lingkup Fitur Aplikasi Ticketing: Pemesanan Tiket: Pengguna dapat memilih maskapai yang diminati dan melakukan pemesanan tiket langsung melalui aplikasi. Mereka dapat memilih jenis tiket, jumlah tiket yang diinginkan, dan memilih tempat duduk (jika tersedia).  Pembayaran Aman: Aplikasi Ticketing menyediakan opsi pembayaran yang aman dan nyaman. Pengguna dapat memilih metode pembayaran yang mereka inginkan, seperti kartu kredit, debit, atau dompet digital, dan melengkapi transaksi dengan mudah. Fitur Aplikasi : Login Multi Us
Baca selengkapnya