1. Sekolah Dasar
  2. Sekolah Menengah Pertama
  3. Sekolah Menengah Atas
  4. Mata Pelajaran
  5. Programming

Bagaimana cara membuat jumbotron dibelakang navbar transparan.​

Berikut ini adalah pertanyaan dari kalokaradya pada mata pelajaran TI untuk jenjang Sekolah Dasar

Bagaimana cara membuat jumbotron dibelakang navbar transparan.​

Jawaban dan Penjelasan

Berikut ini adalah pilihan jawaban terbaik dari pertanyaan diatas.

Penjelasan:

Jika Anda menggunakan framework CSS seperti Bootstrap, Anda dapat menambahkan class .navbar-transparent ke elemen navbar untuk membuat navbar transparan. Kemudian, tambahkan class .mb-5 ke elemen jumbotron untuk membuat jarak antara navbar dan jumbotron. Contoh kode HTML yang dapat digunakan adalah seperti ini:

<!DOCTYPE html>

<html>

 <head>

   <title>Jumbotron Behind Navbar</title>

   <!-- Tambahkan link ke Bootstrap CSS -->

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

 </head>

 <body>

   <!-- Buat elemen navbar dengan class navbar-transparent -->

   <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-transparent">

     <a class="navbar-brand" href="#">Navbar</a>

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

       <span class="navbar-toggler-icon"></span>

     </button>

     <div class="collapse navbar-collapse" id="navbarNav">

       <ul class="navbar-nav">

         <li class="nav-item active">

           <a class="nav-link" href="#">Home</a>

         </li>

         <li class="nav-item">

           <a class="nav-link" href="#">About</a>

         </li>

         <li class="nav-item">

           <a class="nav-link" href="#">Contact</a>

         </li>

       </ul>

     </div>

   </nav>

   <!-- Buat elemen jumbotron dengan class mb-5 -->

   <div class="jumbotron jumbotron-fluid mb-5">

     <div class="container">

       <h1 class="display-4">Jumbotron</h1>

       <p class="lead">This is a jumbotron behind navbar</p>

     </div>

   </div>

 </body>

</html>

Perhatikan bahwa kode HTML di atas telah menambahkan link ke Bootstrap CSS pada bagian <head> dokumen HTML. Ini akan memastikan bahwa class .navbar-transparent dan .mb-5 dapat digunakan pada elemen navbar dan jumbotron.

Semoga dengan pertanyaan yang sudah terjawab oleh Yudagoo dapat membantu memudahkan mengerjakan soal, tugas dan PR sekolah kalian.

Apabila terdapat kesalahan dalam mengerjakan soal, silahkan koreksi jawaban dengan mengirimkan email ke yomemimo.com melalui halaman Contact

Last Update: Fri, 24 Feb 23
<< Previous Post
Next Post >>