Tugas Bootstrap

 

LATIHAN BOOTSTRAP

    Muhammad Raihan Athallah

    5025201206

    Kelas PWEB B



<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="index.html">
<img src="gambar/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-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

PBKK - KUIS APLIKASI TICKETING

Gambar
  BUS TICKETING Muhammad Raihan Athallah 5025201206 PBKK B Deskripsi Aplikasi Tiket Aplikasi Jual Tiket Bus Online adalah sebuah inovasi yang memudahkan pengguna untuk membeli tiket bus secara praktis dan efisien melalui platform digital. Dengan adanya aplikasi ini, pengguna dapat mengakses berbagai pilihan jadwal, tujuan, dan operator bus dengan mudah hanya dengan beberapa kali sentuhan layar ponsel. Keuntungan utama menggunakan aplikasi Jual Tiket Bus Online adalah kemudahan dan kecepatan dalam melakukan pemesanan tiket. Pengguna tidak perlu lagi antri di loket atau mencari agen perjalanan fisik untuk mendapatkan tiket bus. Cukup dengan beberapa langkah sederhana melalui aplikasi, pengguna dapat melakukan pembayaran menggunakan berbagai metode pembayaran yang aman dan terpercaya. Fungsi dalam Aplikasi Tiket Booking Online Pemesanan tiket bisa dilakukan secara online oleh pengguna. Pengguna dapat melihat jadwal keberangkatan kemudian memilih jadwal dan bus yang diinginkan. Setelah...
Baca selengkapnya

TUGAS 4 PWEB - Kode Post Finder

Gambar
  TUGAS 4 PWEB - Kode Post Finder Muhammad Raihan Athallah 5025201206 Kelas PWEB B Pada pertemuan sebelumnya diberikan tugas yaitu membuat pencarian kode pos dengan menggunkan javascript. Pada tugas kali ini saya menggunakan sumber data provinsi, kota, kecamatan, dan kode pos dari file json yang saya dapatkan melalui internet. Saya berhasil membuat pencarian kode pos melalui data yang berada pada file .json hanya saja performa saat tombol cari ditekan masih sangat lama karena banyak sekali data yang didapat apabila input yang dimasukkan terlalu umum. Kodepos Indonesia (raihanathallah.github.io) Berikut adalah hasil screenshoot tampilan website: dan berikut adalah source code-nya: index.html <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" />     < meta name = "viewport" content = "width=device-wid...
Baca selengkapnya

EAS PWEB

Gambar
  WEBSITE PENDAFTARAN DAN VERIFIKASI DATA PESERTA TES CPNS                               Kelas : PWEB (B)            Anggota Kelompok :                     5025201206 - MUHAMMAD RAIHAN ATHALLAH                     5025201261 - AQIL RAMADHAN HADIONO            DESKRIPSI APLIKASI     Aplikasi berupa form pendaftaran tes dengan menerim beberap macam input seperti  file,text, dan foto. Kemudian ada bagian admin atau dashboard panitia untuk  memantau data-data yang sudah terdaftar dan melakukan verifikasi apakah data    tersebut sudah benar apa tidak. Setelah terverifikasi panitia akan memberi izin untuk  mencetak kartu    peserta. Yang perlu dilakukan membuat 2 bagia...
Baca selengkapnya