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

LATIHAN PWEB - JQuery

Gambar
LATIHAN PWEB - JQuery Muhammad Raihan Athallah 5025201206 Kelas PWEB B Pada pertemuan kali ini diberi tugas untuk membuat implementasi JQuery simple dengan membuat tombol yang apabila ditekan akan menambah angka pada tampilan. index.html <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "utf-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />     < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin = "anonymous" />     < title >Program Jquery Menambah Nilai Dengan Tombol</ title >   </ head >   < body class = "bg-dark" >     < div class = "d-flex mt-4 m-auto" id = "container" sty...
Baca selengkapnya

PBKK - Tugas 1 Membuat Aplikasi Desktop Sederhana

Gambar
MEMBUAT APLIKASI DESKTOP SEDERHANA Nama : Muhammad Raihan Athallah NRP     : 5025201206 Kelas  : Pemrograman Berbasis Kerangka Kerja B =========================================================================== Pada tugas kali ini kami diminta membuat sebuah aplikasi dekstop berupa kalkulator menggunakan bahasa pemrograman C# dan menggunakan .NET. Tugas ini dikerjakan menggunakan tools Visual Studio 2019.  Kalkulator bisa menerima input berupa angka dan operasi matematika seperti +,- ,x, / kemudian ada tombol "=" untuk menampilkan hasil dari perhitungan sesuai dengan input yang diterima. Berikut adalah screenshoot hasil percobaan membuat aplikasi kalkulator. Terima Kasih.
Baca selengkapnya

ETS PWEB - BookGeDeBook

Gambar
 ETS PWEB - BookGeDeBook Pada Penugasan ETS ini kami dari kelompok BookGedeBook yang beranggotakan : 5025201206 - MUHAMMAD RAIHAN ATHALLAH 5025201261 - AQIL RAMADHAN HADIONO 5025201196 - AHMAD HAFIZ MAHARDIKA Membuat Sebuah StartUp yang memiliki misi untuk meningkatkan literasi di Indonesia. Layanan yang kami tawarkan adalah sebuah online store yang menjual buku cetak fisik bisa juga dengan pdf. Dengan adanya ini kami berharap buku semakin mudah untuk dijangkau tiap golongan dan juga membantu mempromosikan karya-karya penulis Indonesia.  Kemudian pada ETS ini diminta untuk membuat sebuah website front-end untuk profil StartUp kami. Tools yang kami gunakan antara lain: IDE                  : Visual Studio Code Bahasa           : Html,CSS, Javascript Framework    :  Bootstrap Untuk Source Code bisa dilihat pada link Repository berikut RaihanAthallah/ets_pweb (github.com) Link Video Pro...
Baca selengkapnya