| Server IP : 185.124.137.27 / Your IP : 216.73.216.174 Web Server : LiteSpeed System : Linux id-dci-web1986.main-hosting.eu 5.14.0-611.26.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Thu Jan 29 05:24:47 EST 2026 x86_64 User : u686484674 ( 686484674) PHP Version : 8.0.30 Disable Function : system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, symlink, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/u686484674/domains/idikotabandung.com/public_html/IDI/project/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Template Simple Sidebar Menu → by InsertApps.com</title>
<link rel="stylesheet" href="https://unpkg.com/ace-css/css/ace.min.css">
<style>
/*Additional Style */
/* ######## START FOCUS CSS CODE HERE */
#sidenav {
max-height: 100vh;
height: 100vh;
max-width: 70vw;
min-width: 300px;
overflow-x: hidden;
overflow-y: auto;
transition: all .3s ease-in-out;
transform: translate(-150%, 0px);
-webkit-transform: translate(-150%, 0px);
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-ms-transform: translate(-150%, 0px);
}
#sidenav.active {
transition: all .3s ease-in-out;
transform: translate(0%, 0px);
-webkit-transform: translate(0%, 0px);
-ms-transform: translate(0%, 0px);
box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
}
/* ######## END FOCUS CSS CODE HERE */
.burger {
height: 16px
}
.burger span {
display: block;
width: 20px;
height: 2px;
border-radius: 3px;
}
.pointer {
cursor: pointer;
}
.close {
width: 23px;
height: 23px;
}
.cross {
height: 23px;
width: 2px;
border-radius: 3px;
}
.cross.left {
transform: rotate(45deg);
}
.cross.right {
transform: rotate(-45deg);
}
.align-middle {
vertical-align: middle
}
</style>
</head>
<body>
<header class="bg-blue px2 py1 m0 flex items-center white">
<div class="burger pointer flex flex-column justify-between mr2">
<span class="bg-white"></span>
<span class="bg-white"></span>
<span class="bg-white"></span>
</div>
<a class="white caps text-decoration-none h3 bold" href="#">Logo</a>
<nav class="ml-auto">
<ul class="list-reset m0 h5 caps">
<li class="inline-block btn p0 mr1">About</li>
<li class="inline-block btn p0">Blog</li>
</ul>
</nav>
</header>
<!-- ######## START FOCUS SIDEBAR CODE HERE -->
<div id="sidenav" class="fixed z4 top-0 left-0 bg-white p2">
<div class="close flex items-center justify-center relative pointer mb2 right">
<div class="absolute cross bg-gray left"></div>
<div class="absolute cross bg-gray right"></div>
</div>
<div class="bg-blue circle mb2 flex items-center justify-center white" style="width: 68px;height: 68px">
<svg aria-hidden="true" class="block" width="36" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 20">
<g fill="currentColor">
<path d="M15,0.7L12.6,0c-0.1,0-0.2,0-0.2,0.1l-0.7,2.4c0,0.1,0,0.2,0.1,0.2l2.4,0.7c0.1,0,0.2,0,0.2-0.1l0.7-2.4
C15.1,0.8,15.1,0.7,15,0.7z"></path>
<path d="M13.8,4.8l-2.4-0.7c-0.1,0-0.2,0-0.2,0.1L6.9,19.1c0,0.1,0,0.2,0.1,0.2L9.4,20c0.1,0,0.2,0,0.2-0.1L13.9,5
C14,4.9,13.9,4.8,13.8,4.8z"></path>
<path d="M4.9,11.1l-0.8-0.8l-0.3-0.3l0.3-0.3l0.6-0.6l2.4-2.4c0.1-0.1,0.1-0.4,0-0.5L5.7,4.7c-0.1-0.1-0.4-0.1-0.5,0L0.1,9.8
C0,10,0,10.2,0.1,10.4l5.1,5.1c0.1,0.1,0.4,0.1,0.5,0L7.2,14c0.1-0.1,0.1-0.4,0-0.5L4.9,11.1z"></path>
<path d="M17.1,9.1l0.8,0.8l0.3,0.3l-0.3,0.3L17.2,11l-2.4,2.4c-0.1,0.1-0.1,0.4,0,0.5l1.5,1.5c0.1,0.1,0.4,0.1,0.5,0l5.1-5.1
c0.1-0.1,0.1-0.4,0-0.5l-5.1-5.1c-0.1-0.1-0.4-0.1-0.5,0l-1.5,1.5c-0.1,0.1-0.1,0.4,0,0.5L17.1,9.1z">
</path>
</g>
</svg>
</div>
<p class="m0 muted bold">InsertApps</p>
<hr>
<ul class="list-reset muted m0">
<li class="h6 caps mb2">about</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
<path fill-rule="evenodd"
d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z" />
</svg>
<span class="align-middle">About</span>
</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z" />
</svg>
<span class="align-middle">Email</span>
</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
<path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
<path fill-rule="evenodd"
d="M2.5 3.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z" />
</svg>
<span class="align-middle">RSS</span>
</li>
</ul>
<hr>
<ul class="list-reset muted m0">
<li class="h6 caps mb2">Categories</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
<path fill-rule="evenodd"
d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
</svg>
<span class="align-middle">Category Item</span>
</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
<path fill-rule="evenodd"
d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
</svg>
<span class="align-middle">Category Item</span>
</li>
<li class="pointer mb2">
<svg class="inline-block align-middle mr2" width="22" height="22" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 1h5v1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6h1v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z" />
<path d="M9 4.5V1l5 5h-3.5A1.5 1.5 0 0 1 9 4.5z" />
<path fill-rule="evenodd"
d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z" />
</svg>
<span class="align-middle">Category Item</span>
</li>
</ul>
</div>
<!-- ######## END FOCUS SIDEBAR CODE HERE -->
<main class="max-width-4 mx-auto bg-white p2" style="min-height: 100vh">
<img class="fit block" src="https://freebiespic.com/images/2017/01/IMG_9916_Asia-child-smile-in-the-garden.jpg"
alt="Red ros flower">
<h1>HTML Template Simple Sidebar Menu</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores, deleniti molestias consectetur iure
consequuntur quisquam hic culpa voluptatibus sint quos reprehenderit. Fugiat distinctio dolorem rerum ipsa
quisquam quam, atque enim.</p>
<p>Image source by <a href="https://freebiespic.com/photos/wireless-keyboard-image/">Freebiespic.com</a></p>
</main>
<footer class="px2 py3 bg-silver navy center">
<p class="muted">Copyright ©2020 → <a class="text-decoration-none navy"
href="https://insertapps.com/">InsertApps.com</a>. All rights reserved. <a
class="text-decoration-none navy" href="https://insertapps.com/privacy/">Privacy</a></p>
</footer>
<!-- ######## START FOCUS JS CODE HERE -->
<script>
let burger = document.querySelector('.burger');
let close = document.querySelector('.close');
let sidenav = document.querySelector('#sidenav');
// Burger click function
burger.addEventListener('click', function () {
sidenav.classList.add('active');
});
// Close click function
close.addEventListener('click', function () {
sidenav.classList.remove('active');
});
</script>
<!-- ######## /END FOCUS JS CODE HERE -->
</body>
</html>