TUGAS 4 PWEB: Membuat Website dengan Bootstrap

 

Tugas 4

Rahmat Faris Akbar
5025201003
PWEB (B)


    Kali ini kita akan mencoba membuat sebuah situs web sederhana dengan menggunakan bootstrap.

    Link Penting:


    Kode:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Template Web Responsive dengan 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">
    <!-- Brand -->
    <a class="navbar-brand" href="index.html">
    <img src="images/logo.png" alt="logo" style="width:200px;">
    </a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <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 Itu Mudah</h1>
    <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
    </div>
    <div class="container">
    <div class="row">
    <div class="col-12 col-md-6 col-xl-3">
    <div class="card">
    <a href="artikel.html"><img src="images/HTML&CSS.jpg" width="100%" alt="Belajar HTML & CSS" class="card-img-top img-fluid"></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="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
    </div>
    </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    <div class="card">
    <a href="artikel.html"><img src="images/web programming.png" width="100%" alt="Web Programming" class="card-img-top img-fluid"></a>
    <div class="caption">
    <h3><a href="artikel.html" 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="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
    </div>
    </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    <div class="card">
    <a href="artikel.html"><img src="images/python.jpg" width="100%" alt="Belajar Python" class="card-img-top img-fluid"></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="artikel.html" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
    </div>
    </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3">
    <div class="card">
    <a href="artikel.html"><img src="images/uiux.jpg" width="100%" alt="Desain UI & UX" class="card-img-top img-fluid"></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="artikel.html" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="jumbotron text-center" style="margin-bottom:0">
    <p>Copyright 2022 tugas 4</p>
    </div>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub

    Dokumentasi Website:



    Comments

    Post a Comment

    Popular posts from this blog

    TUGAS 7 PPB F : ViewModel and State in Compose

    Image
    TUGAS 7   ViewModel and State in Compose 5025201003 -  Rahmat Faris Akbar PPB (F)           Pada minggu ke-14 kelas Pemrograman Perangkat Bergerak F, kita ditugaskan membuat  aplikasi game Unscramble menggunakan Jetpack Compose dan ViewModel dari library Android Jetpack mengikuti panduan tutorial ViewModel and State in Compose . Panduan ini akan memandu kita melalui pengaturan proyek, memahami arsitektur, dan mengimplementasikan fungsionalitas game. Gambaran Proyek                Aplikasi Unscramble adalah permainan kata tunggal di mana pemain menebak kata yang diacak. Aplikasi ini menampilkan kata yang diacak, dan pemain menebak kata yang benar menggunakan semua huruf yang disediakan. Poin diberikan untuk tebakan yang benar, dan permainan melacak jumlah kata yang ditebak dengan benar. Setiap permainan terdiri dari 10 kata...
    Read more

    EVALUASI TENGAH SEMESTER PPB F

    Image
    Evaluasi Tengah Semester   Studi Kasus Aplikasi "myITS Mahasiswa" 5025201003 -  Rahmat Faris Akbar PPB (F) Link Docs:  jawaban dalam bentuk docs 1. Apa keuntungan menggunakan platform mobile Android dibandingkan dengan platform Propietary seperti Apple? Jawaban: Keterbukaan dan Fleksibilitas :  Android adalah sistem operasi yang bersifat open-source, yang memungkinkan para pengembang dan produsen perangkat untuk mengubah dan menyesuaikan sistem sesuai dengan kebutuhan mereka. Hal ini berbeda dengan iOS dari Apple yang memiliki sistem yang tertutup dan terkontrol ketat. Variasi Perangkat :  Android digunakan oleh berbagai merek dan model smartphone dan tablet, memberikan lebih banyak pilihan perangkat bagi konsumen dalam berbagai segmen harga. Sementara itu, Apple hanya menyediakan beberapa model yang umumnya berada di segmen harga lebih tinggi. Biaya Pengembangan yang Lebih Rendah :  Untuk para pengembang, masuk ke pasar Androi...
    Read more

    Membuat Website Profil Diri menggunakan HTML & CSS

    Image
    Tugas 1 Rahmat Faris Akbar 5025201003 PWEB (B)           Pada mata kuliah Pemrograman Web diawali dengan tugas membuat sutu profil diri dalam bentuk website. Pada tugas pertama ini kita baru bisa menggunakan html (sebagai structure language dalam website development dan juga konten dari website ini) & css (sebagai desain yang ditambahkan kedalam HTML untuk membentuk layout style). Tools yang digunakan adalah code editor (visual studio code), browser (chrome), dan github. Konten dari profil diri kali ini saya bagi menjadi 5 section yang terdiri dari: Home - sapaan - deskripsi diri - foto - tombol "Hire Me" yang memiliki referensi ke section contact About - perkenalan (nama dan profesi) - cita-cita - download CV - biodata (alamat, umur, website, status, pendidikan, asal, email, dan kontak) - riwayat pendidikan - pengalaman kepanitiaan Roadmaps (hal-hal yang ingin dikuasai dalam perencanaan ke depan) Portofolio (aplikasi yang pernah dibuat beserta link dan...
    Read more