membuat halaman utama pada dasboard
assalalamualaikum wr.wb
retna sari
membuat halaman utama pada dasboard
dengan langkah langkah sebagai berikut:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="kk/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<a class="navbar-brand" href="#">selamat datang admin</a>
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<div class="icon ml-4">
<h5>
<i class="fas fa-bell mr-3"></i>
<i class="fas fa-envelope mr-3"></i>
<i class="fas fa-sign-out-alt mr-3"></i>
</h5>
</div>
</div>
</nav>
</nav>
<div class="row ">
<div class="col-md-2 bg-dark p-4 pt-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active text-white" href="#"> <i class="fas fa-tachometer-alt"></i>dashboard</a><hr clas="bg-secondary">
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"> <i class="fas fa-graduation-cap mr-3"></i>daftar siswa</a><hr class="bg-secondary">
</li>
<a class="nav-link text-white" href="#"> <i class="fas fa-chalkboard-teacher mr-3"></i>daftar guru</a><hr class="bg-secondary">
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"> <i class="fas fa-user-edit mr-3"></i>daftar pegawai</a><hr class="bg-secondary">
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#"> <i class="fas fa-paper-plane mr-3"></i>nilai siswa </a><hr class="bg-secondary">
</li>
</ul>
</div>
<div class="col-md-10 p-5 pt-3">
<h3><i class="fas fa-tachometer-alt"></i>dashboard</h3><hr>
<div class="row text-white">
<div class="card bg-info mr-3" style="width: 18rem;">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h5 class="card-title">Daftar siswa</h5>
<div class="display-4">543</div>
<a href="#">Lihat Detail</a>
</div>
</div>
<div class="card bg-info mr-3" style="width: 18rem;">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h5 class="card-title">Daftar siswa</h5>
<div class="display-4">543</div>
<a href="#">Lihat Detail</a>
</div>
</div>
<div class="card bg-info mr-3" style="width: 18rem;">
<div class="card-body">
</div>
<div class="card-body-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h5 class="card-title">Daftar siswa</h5>
<div class="display-4">543</div>
<a href="#">Lihat Detail</a>
</div>
</div>
</div>
<div class="card mt-3" style="width: 18rem;">
<div class="card-header">
<i class="fab fa-instagram"></i>
</div>
<div class="card-body">
<h5 class="card-title"> instagram</h5>
<a href="#" class="btn btn-primary">follow</a>
</div>
</div>
<div class="card mt-3" style="width: 18rem;">
<div class="card-header">
<i class="fab fa-instagram"></i>
</div>
<div class="card-body">
<h5 class="card-title"> instagram</h5>
<a href="#" class="btn btn-primary">follow</a>
</div>
</div>
<div class="card mt-3" style="width: 18rem;">
<div class="card-header">
<i class="fab fa-instagram"></i>
</div>
<div class="card-body">
<h5 class="card-title"> instagram</h5>
<a href="#" class="btn btn-primary">follow</a>
</div>
</div>
</div>
</div>
kemudian pastikikan semua benar ,lalu cek dengan cara klik kanan open in browser
maka akan menjadi seperti gambar di bawah ini
Komentar
Posting Komentar