Kamis, 22 Februari 2024

BOOTSTRAP V : CARDS

CARDS



Apa itu Bootstrap Cards?

Bootstrap Cards adalah komponen yang menampilkan gambar beserta deskripsi dari gambar tersebut beserta judul.

Contoh Codingan dan Hasil Cards :

Coding :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Masardhan</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
  <div class="container-fluid mt-3">
      <h3>Top 3 Summit Indonesia</h3>
      <p>
        Bagi para pendaki gunung, menginjakkan kaki di puncak tertinggi di
        Indonesia merupakan sebuah kepuasan tersendiri. Maka tak heran, ada
        istilah 3 puncak (three summits) gunung tertinggi di Indonesia,dan
        inilah daftar gunung berikut
      </p>
    </div>

    <div class="d-flex justify-content-center">
      <div class="card mx-3" style="width: 18rem">
        <img src="puncak-gunungjpeg-20230213030306.jpeg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Gunung Jaya Wijaya</h5>
          <p class="card-text">
            Puncak Jaya Wijaya atau Piramida Carstensz ialah sebuah puncak tertinggi yang menjadi bagian dari Pegunungan Barisan Sudirman
             yang terdapat di Kabupaten Mimika, Provinsi Papua Tengah, Indonesia. Puncak Jaya atau Piramida Carstensz mempunyai ketinggian 4.883 mdpl
             dan di sekitarnya terdapat gletser dengan nama yang sama yakni gletser Carstensz, satu-satunya gletser tropika di Indonesia,
              yang tersisa dan secara perlahan mulai menipis akibat pemanasan global.
          </p>
          <a href="#" class="btn btn-primary">View More</a>
        </div>
      </div>
      <div class="card mx-3" style="width: 18rem">
        <img src="2jpg-33865b703c8b3044721bd03e6c716b17.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Gunung Kerinci</h5>
          <p class="card-text">
            Gunung Kerinci (juga dieja dengan "Kerintji") adalah gunung tertinggi di pulau Sumatra dan gunung berapi tertinggi di Indonesia juga Asia Tenggara.
             Gunung Kerinci terletak di perbatasan Kabupaten Kerinci, Jambi dan Kabupaten Solok Selatan, Sumatera Barat, di Pegunungan Bukit Barisan dengan ketinggian 3.805 mdpl.
              Gunung ini juga menjadi batas antara wilayah Suku Kerinci dengan Etnis Minangkabau yang dikelilingi hutan lebat Taman Nasional Kerinci Seblat, yang merupakan habitat harimau sumatra
               dan badak sumatra
          </p>
          <a href="#" class="btn btn-primary">View More</a>
        </div>
      </div>
      <div class="card mx-3" style="width: 18rem">
        <img src="puncak-gunung-rinjani6.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h5 class="card-title">Gunung Rinjani</h5>
          <p class="card-text">
            Gunung Rinjani adalah gunung yang berlokasi di Pulau Lombok, Nusa Tenggara Barat.
             Gunung yang merupakan gunung berapi kedua tertinggi di Indonesia dengan ketinggian 3.726 mdpl
              serta terletak pada lintang 8º25' LS dan 116º28' BT ini merupakan gunung favorit bagi pendaki Indonesia karena keindahan pemandangannya.
               Gunung ini merupakan bagian dari Taman Nasional Gunung Rinjani yang memiliki luas sekitar 41.330 ha
                dan ini akan diusulkan penambahannya sehingga menjadi 76.000 ha ke arah barat dan timur
          </p>
          <a href="#" class="btn btn-primary">View More</a>
        </div>
      </div>
    </div>
  </body>
</html>



Hasil :











di Februari 22, 2024 0 komentar

Kamis, 25 Januari 2024

BOOTSTRAP V : NAVIGATION BAR

NAVIGATION BAR


Apa itu Navigation Bar?

NavBar atau navigation bar adalah bagian dari tampilan website yang berisi menu navigasi yang terdiri dari beberapa tautan atau link. Tujuan dari NavBar adalah untuk membantu pengguna dalam navigasi website dan mencari informasi yang diinginkan dengan mudah

Contoh Codingan dan Hasil Navigation Bar :

Coding :

><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARDHAN NAVBAR </title>
   <style>*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial;
}
body{
    background: url(istockphoto-1361203525-612x612.jpg);
    background-size: cover;
    height: 100vh;
    background-position: center;
}
header{
    width:100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    box-shadow: 0 0 10px #000;
    background: rgba(0,0,0,0.5);
}
#chk1{
    display: none;
     
     
}
i{
    color: #fff;
    cursor: pointer;
}
header .logo{
    flex: 1;
    color:#fff;
     
    margin-left: 50px;
    text-transform: uppercase;
    font-size: 15px;
}
header .search-box{
    flex: 1;
    position: relative;
}
.search-box input{
    width:100%;
    height: 40px;
    border: none;
    outline: none;
    background:#f2f2f2;
    border-radius: 30px;
    color:black;
    font-size: 16px;
    padding-left: 5px;
    padding-right: 40px;
    text-align: center;
     
}
 
.search-box button{
    cursor: pointer;
    width:40px;
    height: 40px;
    border-radius: 30px;
    border:none;
    position: absolute;
    top:0;
    right: 0;
    transform: scale(0.9);
    background: green;
    color: #fff;
}
header ul {
    flex:2;
    display: flex;
    justify-content: space-evenly;
}
header ul li{
    list-style: none;
}
header ul li a{
    text-decoration: none;
    color:#fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 15px;
}
header ul li a:hover{
    border-bottom: 2px solid cadetblue;
}
header .menu{
    font-size: 2.5em;
    display: none;
}
@media(max-width:1000px){
    .search-box button{
        position: absolute;
    }
    header ul{
        position: fixed;
        top:100px;
        right: -100%;
        background: rgba(0,0,0,0.5);
        height: calc(100vh - 100px);
        width:50%;
        flex-direction: column;
        align-items: center;
        transition: right 0.5s linear;
    }
     
    header .menu{
        display: block;
        width:100px;
        text-align: center;
    }
    #chk1:checked ~ ul{
        right: 0;
       
    }
 
}</style>
</head>
<body>
    <header>
        <input type ="checkbox" name ="" id ="chk1">
        <div class="logo"><h1>ARDHAN CODE</h1></div>
            <div class="search-box">
                <form>
                    <input type ="text" name ="search" id ="srch" placeholder="Search">
                    <button type ="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                <li>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                     
                </li>
            </ul>
            <div class="menu">
                <label for="chk1">
                    <i class="fa fa-bars"></i>
                   
                </label>
            </div>
    </header>
   
</body>
</html>!

 Hasil :




di Januari 25, 2024 0 komentar

Kamis, 11 Januari 2024

Bootstrap and Container

CONTAINER AND BOOTSTRAP


#APA ITU CONTAINER?
      Container adalah fondasi dasar dari blok layout. Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar. Container juga memiliki breakpoint. Ukuran kontainer akan 100% pada breakpoint tertentu. 



#APA ITU BOOTSTRAP?
     Bootstrap adalah salah satu framework CSS yang berfokus pada pengembangan front-end website. Di dalamnya mengandung HTML, CSS, dan JavaScript untuk membuat tampilan website yang modern, responsif, dan mobile-friendly


#CONTOH HASIL BOOTSTRAP AND CONTAINER :









di Januari 11, 2024 0 komentar
Langganan: Komentar (Atom)
Sir Ardhan © 2008 Template by:
SkinCorner