Scribd
Upload
104 views2 pages

Code Design Dashboard

This document contains the code for a responsive sidebar dashboard template. It includes a header, mobile navigation bar, sidebar, and content area. The header contains branding and a logout button. The sidebar holds user profile information and navigation links. The content area displays informational cards. JavaScript code is included to toggle the mobile navigation menu.

Uploaded by

Tutorial Abdi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
104 views2 pages

Code Design Dashboard

This document contains the code for a responsive sidebar dashboard template. It includes a header, mobile navigation bar, sidebar, and content area. The header contains branding and a logout button. The sidebar holds user profile information and navigation links. The content area displays informational cards. JavaScript code is included to toggle the mobile navigation menu.

Uploaded by

Tutorial Abdi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

1 <!

DOCTYPE html>
2 <html lang="en" dir="ltr">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Responsive Sidebar Dashboard Template</title>
7 <link rel="stylesheet" href="style.css">
8
9 </head>
10 <body>
11
12 <input type="checkbox" id="check">
13 <!--header area start-->
14 <header>
15 <label for="check">
16 <i class="fas fa-bars" id="sidebar_btn"></i>
17 </label>
18 <div class="left_area">
19 <h3>SMK TELADAN<span> BISA</span></h3>
20 </div>
21 <div class="right_area">
22 <a href="#" class="logout_btn">Logout</a>
23 </div>
24 </header>
25 <!--header area end-->
26 <!--mobile navigation bar start-->
27 <div class="mobile_nav">
28 <div class="nav_bar">
29 <img src="1.png" class="mobile_profile_image" alt="">
30 <i class="fa fa-bars nav_btn"></i>
31 </div>
32 <div class="mobile_nav_items">
33 <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
34 <a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
35 <a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
36 <a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
37 <a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
38 <a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
39 </div>
40 </div>
41 <!--mobile navigation bar end-->
42 <!--sidebar start-->
43 <div class="sidebar">
44 <div class="profile_info">
45 <img src="1.png" class="profile_image" alt="">
46 <h4>NAMA SISWA</h4>
47 </div>
48 <a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
49 <a href="#"><i class="fas fa-cogs"></i><span>Kelas</span></a>
50 <a href="#"><i class="fas fa-table"></i><span>Ruangan</span></a>
51 <a href="#"><i class="fas fa-th"></i><span>Guru</span></a>
52 <a href="#"><i class="fas fa-info-circle"></i><span>Siswa</span></a>
53
54 </div>
55 <!--sidebar end-->
56
57 <div class="content">
58 <div class="card">
59 <p>INFORMASI 1</p>
60 </div>
61 <div class="card">
62 <p>INFORMASI 2</p>
63 </div>
64 <div class="card">
65 <p>INFORMASI 3</p>
66 </div>
67 </div>
68
C:\Users\User A\Downloads\Responsive Sidebar Dashboard Template UI Design - Using CSS, HTML Javascript\Responsive Sidebar Dashboard Templat
69 <script type="text/javascript">
70 $(document).ready(function (){
71 $('.nav_btn').click(function (){
72 $('.mobile_nav_items').toggleClass('active');
73 });
74 });
75 </script>
76
77 </body>
78 </html>

C:\Users\User A\Downloads\Responsive Sidebar Dashboard Template UI Design - Using CSS, HTML Javascript\Responsive Sidebar Dashboard Templat

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy