Menu
Menu merupakan grup yang memiliki sebanyak sepuluh elemen di dalamnya, yang mana setiap elemennya memiliki kegunaanya masing - masing dalam proses pengembangan sebuah proyek website
1. Tag menu
Elemen tag menu merupakan elemen yang berfungsi untuk menampilkan sebuah informasi berupa tag yang terdapat dalam sebuah proyek pengembangan website.
<div class="col-lg-4 col-md-6 col-sm-10 col-12">
<div class="tagmenu-menu shadow">
<div class="tagmenuhead-menu">
<div class="tagmenutitlecontainer-menu">
<p class="tagmenutitle-menu">Categories</p>
</div>
</div>
<div class="tagmenubody-menu">
<div class="tagmenucontainer-menu">
<a href="" style="margin:0; ">Funny</a>
</div>
<div class="tagmenucontainer-menu">
<a href="" style="margin:0; ">Comedy</a>
</div>
</div>
</div>
</div>
2. Menu grid I
Elemen menu grid I merupakan elemen yang berfungsi untuk menampilkan pilihan menu kedalam bentuk grid yang lengkap dengan gambar sesuai menu tersebut.
<div class="col-12" style="padding: 0px;">
<div class="menugrid1-menu">
<div class="col-3">
<div class="menugrid1imagepreview-menu">
<img src="assets/images/gardenappliance.png" alt="Card image cap" class="menugrid1imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid1overlay-menu">
<div class="menugrid1text-menu">
<a href="" >Garden</a>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid1imagepreview-menu">
<img src="assets/images/classicitems.png" alt="Card image cap" class="menugrid1imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid1overlay-menu">
<div class="menugrid1text-menu">
<a href="" >Classic Items</a>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid1imagepreview-menu">
<img src="assets/images/kitchenware.png" alt="Card image cap" class="menugrid1imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid1overlay-menu">
<div class="menugrid1text-menu">
<a href="" >Kitchen Ware</a>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid1imagepreview-menu">
<img src="assets/images/wooditems.png" alt="Card image cap" class="menugrid1imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid1overlay-menu">
<div class="menugrid1text-menu">
<a href="" >Wood Items</a>
</div>
</div>
</div>
</div>
</div>
</div>
3. Menu grid II
Elemen menu grid II merupakan elemen yang memiliki fungsi mirip dengan menu grid I namun terdapat perbedaan desain yaitu dengan penambahan padding pada masing - masing gambar menu.
<div class="col-12" style="padding: 0px;">
<div class="menugrid2-menu">
<div class="col-3">
<div class="menugrid2imagecontainer-menu">
<div class="menugrid2imagepreview-menu">
<img src="assets/images/gardenappliance.png" alt="Card image cap" class="menugrid2imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid2overlay-menu">
<div class="menugrid2text-menu">
<a href="" >Garden</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid2imagecontainer-menu">
<div class="menugrid2imagepreview-menu">
<img src="assets/images/classicitems.png" alt="Card image cap" class="menugrid2imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid2overlay-menu">
<div class="menugrid2text-menu">
<a href="" >Classic Items</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid2imagecontainer-menu">
<div class="menugrid2imagepreview-menu">
<img src="assets/images/kitchenware.png" alt="Card image cap" class="menugrid2imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid2overlay-menu">
<div class="menugrid2text-menu">
<a href="" >Kitchen Ware</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="menugrid2imagecontainer-menu">
<div class="menugrid2imagepreview-menu">
<img src="assets/images/wooditems.png" alt="Card image cap" class="menugrid2imagepreviewpic-menu" alt="IMAGE">
<div class="menugrid2overlay-menu">
<div class="menugrid2text-menu">
<a href="" >Wood Items</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
4. Sidebar medium I
Elemen sidebar medium I merupakan elemen yang berfungsi untuk menampilkan pilihan menu dengan posisi disamping kiri halaman website.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"rel="stylesheet">
</head>
<style>
body{
margin:0px;
}
.container-fluid {
display: flex;
width: 100%;
box-sizing: border-box;
}
ul.demo{
list-style-type: none;
margin: 0;
padding: 15px 15px 15px 30px;
box-sizing: border-box;
}
.demo li{
margin: 15px 0px 15px 0px;
}
.sticky a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #44485C;
font-size: 13px;
}
.sticky{
position: fixed;
width: 14rem;
top: 0;
bottom:0;
overflow-y: auto;
margin-top: 50px;}
.sidebarmedium1head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
.sidebarmedium1-menu{
background-color: white;
width: 14rem;
float: left;
bottom: 0;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.content p{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 12px;
line-height: 1.4em;
}
.overlay{
background-color: rgba(0, 0, 0, 10%);
width: 100%;
bottom: 0;
height: 100%;
position: absolute;
display: none;
}
.sidebarmedium1footer-menu{
bottom: 0;
position: absolute;
padding: 15px 15px 15px 30px;
box-sizing: border-box;
}
@media(max-width: 960px){
.sidebarmedium1-menu-sm{
display: none ;
width: 20rem;
position: relative;
z-index: 1;
}
.sidebarmedium1head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
#menubutton{
visibility: visible !important;
}
.content{
background-color: #EFF3F6;
width: 100% !important;
float: left;
position: absolute;
z-index: -1;
left: 0;
right: 0;
}
.navbar{
background-color: #EFF3F6;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.sticky{
background-color: white;
margin-top: 47px;
}
}
@media(min-width: 960px){
.sidebarmedium1-menu-lg{
display: block !important ;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.navbar{
background-color: #EFF3F6 !important;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.overlay{
display: none !important;
}
}
</style>
<script>
function openNav() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("trigger").style.display = "block";
document.getElementById("navbar").style.backgroundColor = "#CCD0D5";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("trigger").style.display = "none";
}
</script>
<body>
<div class="container-fluid">
<div class="sidebarmedium1-menu sidebarmedium1-menu-sm sidebarmedium1-menu-lg" id="mySidebar">
<div class="sidebarmedium1head-menu">Menu</div>
<div class="sticky">
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
<div class="sidebarmedium1footer-menu">
<a href="">Settings</a>
</div>
</div>
</div>
<div class="content" id="main">
<div onclick="closeNav()" class="overlay" id="trigger"></div>
<div class="navbar" id="navbar">
<a id="menubutton" style="margin: 0px; visibility: hidden;" onclick="openNav()" class="material-icons">menu</a>
</div>
<div style="padding: 45px 15px 15px 15px; box-sizing: border-box;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
</div>
</div>
</div>
</body>
</html>
5. Sidebar medium II
Elemen sidebar medium II merupakan elemen yang dikembangkan dari elemen sidebar medium I namun dengan penambahan fitur accordion pada setiap pilihan menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"rel="stylesheet">
</head>
<style>
body{
margin:0px;
}
.container-fluid {
display: flex;
width: 100%;
box-sizing: border-box;
}
.demo{
display: none;
}
ul.demo{
list-style-type: none;
margin: 0;
padding: 0px 15px 0px 15px;
box-sizing: border-box;
}
.demo li{
margin: 15px 0px 15px 0px;
}
.sticky a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 400;
color: #7A7F9A;
font-size: 13px;
}
.label-container{
padding: 9px 15px 9px 30px;
}
.sidebarmedium2-menu label{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
.sticky{
position: fixed;
width: 14rem;
top: 0;
bottom:0;
overflow-y: auto;
margin-top: 68px;
}
.sidebarmedium2head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
.sidebarmedium2-menu{
background-color: white;
width: 14rem;
float: left;
bottom: 0;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.content p{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 12px;
line-height: 1.4em;
}
.overlay{
background-color: rgba(0, 0, 0, 10%);
width: 100%;
bottom: 0;
height: 100%;
position: absolute;
display: none;
}
.sidebarmedium2footer-menu{
bottom: 0;
position: relative;
padding: 9px 15px 9px 30px;
box-sizing: border-box;
color : #44485C;
}
.sidebarmedium2footer-menu a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
@media(max-width: 960px){
.sidebarmedium2-menu-sm{
display: none ;
width: 20rem;
position: relative;
z-index: 1;
}
.sidebarmedium2head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
#menubutton{
visibility: visible !important;
}
.content{
background-color: #EFF3F6;
width: 100% !important;
float: left;
position: absolute;
z-index: -1;
left: 0;
right: 0;
}
.navbar{
background-color: #EFF3F6;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.sticky{
background-color: white;
margin-top: 47px;
padding-top: 21px;
box-sizing: border-box;
}
}
@media(min-width: 960px){
.sidebarmedium2-menu-lg{
display: block !important ;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.navbar{
background-color: #EFF3F6 !important;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.overlay{
display: none !important;
}
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var demo = this.nextElementSibling;
if (demo.style.display === "block") {
demo.style.display = "none";
} else {
demo.style.display = "block";
}
});
}
function openNav() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("trigger").style.display = "block";
document.getElementById("navbar").style.backgroundColor = "#CCD0D5";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("trigger").style.display = "none";
}
</script>
<body>
<div class="container-fluid">
<div class="sidebarmedium2-menu sidebarmedium2-menu-sm sidebarmedium2-menu-lg" id="mySidebar">
<div class="sidebarmedium2head-menu">Menu Label</div>
<div class="sticky">
<div class="label-container">
<label class="accordion">Getting Started</label>
<ul class="demo">
<li><a href="https://www.google.com">Installation</a></li>
<li><a href="">Browser Support</a></li>
<li><a href="">Custom Version</a></li>
<li><a href="">What’s New ?</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">Elements</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">Layouts</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">Components</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">Utilities</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">Experimental</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="sidebarmedium2footer-menu">
<a href="">Settings</a>
</div>
</div>
</div>
<div class="content" id="main">
<div onclick="closeNav()" class="overlay" id="trigger"></div>
<div class="navbar" id="navbar">
<a id="menubutton" style="margin: 0px; visibility: hidden;" onclick="openNav()" class="material-icons">menu</a>
</div>
<div style="padding: 45px 15px 15px 15px; box-sizing: border-box;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
6. Sidebar medium III
Elemen sidebar medium III merupakan elemen yang berfungsi untuk menampilkan pilihan menu yang disertai dengan icon guna merepresentasikan menu itu sendiri.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1d04696186.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"rel="stylesheet">
</head>
<style>
body{
margin:0px;
}
.container-fluid {
display: flex;
width: 100%;
box-sizing: border-box;
}
.demo{
display: none;
}
ul.demo{
list-style-type: none;
margin: 0;
padding: 0px 15px 0px 25px;
box-sizing: border-box;
}
.demo li{
margin: 15px 0px 15px 0px;
}
.sticky a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 400;
color: #7A7F9A;
font-size: 13px;
}
.label-container{
padding: 9px 15px 9px 30px;
}
.test{
margin-right: 10px;
}
.sidebarmedium3-menu label{
text-decoration: none;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
.sticky{
position: fixed;
width: 14rem;
top: 0;
bottom:0;
overflow-y: auto;
margin-top: 68px;
}
.sidebarmedium3head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
.sidebarmedium3-menu{
background-color: white;
width: 14rem;
float: left;
bottom: 0;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.content p{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 12px;
line-height: 1.4em;
}
.overlay{
background-color: rgba(0, 0, 0, 10%);
width: 100%;
bottom: 0;
height: 100%;
position: absolute;
display: none;
}
.sidebarmedium3footer-menu{
bottom: 0;
position: relative;
padding: 9px 15px 9px 30px;
box-sizing: border-box;
color : #44485C;
}
.sidebarmedium3footer-menu a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
@media(max-width: 960px){
.sidebarmedium3-menu-sm{
display: none ;
width: 20rem;
position: relative;
z-index: 1;
}
.sidebarmedium3head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
#menubutton{
visibility: visible !important;
}
.content{
background-color: #EFF3F6;
width: 100% !important;
float: left;
position: absolute;
z-index: -1;
left: 0;
right: 0;
}
.navbar{
background-color: #EFF3F6;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.sticky{
background-color: white;
margin-top: 47px;
padding-top: 21px;
box-sizing: border-box;
}
}
@media(min-width: 960px){
.sidebarmedium3-menu-lg{
display: block !important ;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.navbar{
background-color: #EFF3F6 !important;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.overlay{
display: none !important;
}
}
</style>
<script>
function openNav() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("trigger").style.display = "block";
document.getElementById("navbar").style.backgroundColor = "#CCD0D5";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("trigger").style.display = "none";
}
</script>
<body>
<div class="container-fluid">
<div class="sidebarmedium3-menu sidebarmedium3-menu-sm sidebarmedium3-menu-lg" id="mySidebar">
<div class="sidebarmedium3head-menu">Menu Label</div>
<div class="sticky">
<div class="label-container">
<label class="accordion">
<i class="fas fa-flag test"></i>Getting Started
</label>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-tools test"></i>Elements
</label>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-th test"></i>Layouts
</label>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-toolbox test"></i>Components
</label>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-user-cog test"></i>Utilities
</label>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-flask test"></i>Experimental
</label>
</div>
<div class="sidebarmedium3footer-menu">
<a href="">
<i class="fas fa-cog test"></i>Settings
</a>
</div>
</div>
</div>
<div class="content" id="main">
<div onclick="closeNav()" class="overlay" id="trigger"></div>
<div class="navbar" id="navbar">
<a id="menubutton" style="margin: 0px; visibility: hidden;" onclick="openNav()" class="material-icons">menu</a>
</div>
<div style="padding: 45px 15px 15px 15px; box-sizing: border-box;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
7. Sidebar medium IV
Elemen sidebar medium IV merupakan elemen yang dikembangkan dari elemen sidebar medium III dengan penambahan fitur accordion didalamnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1d04696186.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"rel="stylesheet">
</head>
<style>
body{
margin:0px;
}
.container-fluid {
display: flex;
width: 100%;
box-sizing: border-box;
}
.demo{
display: none;
}
ul.demo{
list-style-type: none;
margin: 0;
padding: 0px 15px 0px 25px;
box-sizing: border-box;
}
.demo li{
margin: 15px 0px 15px 0px;
}
.sticky a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 400;
color: #7A7F9A;
font-size: 13px;
}
.label-container{
padding: 9px 15px 9px 30px;
}
.test{
margin-right: 10px;
}
.sidebarmedium4-menu label{
text-decoration: none;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
.sticky{
position: fixed;
width: 14rem;
top: 0;
bottom:0;
overflow-y: auto;
margin-top: 68px;
}
.sidebarmedium4head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
.sidebarmedium4-menu{
background-color: white;
width: 14rem;
float: left;
bottom: 0;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.content p{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 12px;
line-height: 1.4em;
}
.overlay{
background-color: rgba(0, 0, 0, 10%);
width: 100%;
bottom: 0;
height: 100%;
position: absolute;
display: none;
}
.sidebarmedium4footer-menu{
bottom: 0;
position: relative;
padding: 9px 15px 9px 30px;
box-sizing: border-box;
color : #44485C;
}
.sidebarmedium4footer-menu a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #44485C;
font-size: 14px;
cursor: pointer;
}
@media(max-width: 960px){
.sidebarmedium4-menu-sm{
display: none ;
width: 20rem;
position: relative;
z-index: 1;
}
.sidebarmedium4head-menu{
background-color: white;
padding: 25px 15px 15px 30px;
box-sizing: border-box;
position: fixed;
width: 14rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #090865;
font-size: 14px;
}
#menubutton{
visibility: visible !important;
}
.content{
background-color: #EFF3F6;
width: 100% !important;
float: left;
position: absolute;
z-index: -1;
left: 0;
right: 0;
}
.navbar{
background-color: #EFF3F6;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.sticky{
background-color: white;
margin-top: 47px;
padding-top: 21px;
box-sizing: border-box;
}
}
@media(min-width: 960px){
.sidebarmedium4-menu-lg{
display: block !important ;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 14rem);
float: left;
display: table;
}
.navbar{
background-color: #EFF3F6 !important;
padding: 11px;
width: 100%;
box-sizing: border-box;
color: black;
position: fixed;
}
.overlay{
display: none !important;
}
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var demo = this.nextElementSibling;
if (demo.style.display === "block") {
demo.style.display = "none";
} else {
demo.style.display = "block";
}
});
}
function openNav() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("trigger").style.display = "block";
document.getElementById("navbar").style.backgroundColor = "#CCD0D5";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("trigger").style.display = "none";
}
</script>
<body>
<div class="container-fluid">
<div class="sidebarmedium4-menu sidebarmedium4-menu-sm sidebarmedium4-menu-lg" id="mySidebar">
<div class="sidebarmedium4head-menu">Menu Label</div>
<div class="sticky">
<div class="label-container">
<label class="accordion">
<i class="fas fa-flag test"></i>Getting Started
</label>
<ul class="demo">
<li><a href="">Installation</a></li>
<li><a href="">Browser Support</a></li>
<li><a href="">Custom Version</a></li>
<li><a href="">What’s New ?</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-tools test"></i>Elements
</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-th test"></i>Layouts
</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-toolbox test"></i>Components
</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-user-cog test"></i>Utilities
</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="label-container">
<label class="accordion">
<i class="fas fa-flask test"></i>Experimental
</label>
<ul class="demo">
<li><a href="">Getting Started</a></li>
<li><a href="">Elements</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Components</a></li>
<li><a href="">Utilities</a></li>
<li><a href="">Experimental</a></li>
</ul>
</div>
<div class="sidebarmedium4footer-menu">
<a href="">
<i class="fas fa-cog test"></i>Settings
</a>
</div>
</div>
</div>
<div class="content" id="main">
<div onclick="closeNav()" class="overlay" id="trigger"></div>
<div class="navbar" id="navbar">
<a id="menubutton" style="margin: 0px; visibility: hidden;" onclick="openNav()" class="material-icons">menu</a>
</div>
<div style="padding: 45px 15px 15px 15px; box-sizing: border-box;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
8. Sidebar small I
Elemen sidebar small I merupakan opsi jika menginginkan elemen sidebar dengan ukuran yang minimalis, hal ini dikarenakan oleh ukuran dari sidebar small I yang sangan sederhana dan paling kecil di kelasnya.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1d04696186.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"rel="stylesheet">
</head>
<style>
body{
margin:0px;
}
.container-fluid {
display: flex;
width: 100%;
box-sizing: border-box;
}
.sticky a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 400;
color: #7A7F9A;
font-size: 13px;
}
.label-container{
padding: 9px 15px 20px 15px;
text-align: center;
}
.sidebarsmall1-menu label{
text-decoration: none;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
color: #7A7F9A;
font-size: 14px;
cursor: pointer;
}
.sticky{
position: fixed;
width: 4rem;
top: 0;
bottom:0;
overflow-y: auto;
margin-top: 68px;
}
.sidebarsmall1head-menu{
background-color: white;
padding: 25px 15px 15px 15px;
box-sizing: border-box;
position: fixed;
width: 4rem;
font-family: 'Inter', sans-serif;
font-weight: 700;
color: #7A7F9A;
text-align: center;
font-size: 14px;
}
.sidebarsmall1-menu{
background-color: white;
width: 4rem;
float: left;
bottom: 0;
}
.content{
background-color: #EFF3F6;
width: calc(100% - 4rem);
float: left;
display: table;
}
.content p{
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 12px;
line-height: 1.4em;
}
.sidebarsmall1footer-menu{
bottom: 0;
position: absolute;
padding: 9px 15px 25px 15px;
box-sizing: border-box;
text-align: center;
width: 4rem;
color : #7A7F9A;
}
.sidebarsmall1footer-menu a{
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: #7A7F9A;
font-size: 14px;
cursor: pointer;
}
</style>
<script>
function openNav() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("trigger").style.display = "block";
document.getElementById("navbar").style.backgroundColor = "#CCD0D5";
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("trigger").style.display = "none";
}
</script>
<body>
<div class="container-fluid">
<div class="sidebarsmall1-menu sidebarsmall1-menu-sm sidebarsmall1-menu-lg" id="mySidebar">
<div class="sidebarsmall1head-menu"> <i class="fas fa-bars"></i></div>
<div class="sticky">
<div class="label-container">
<label>
<a href="https://www.facebook.com"><i class="fas fa-flag test"></i></a>
</label>
</div>
<div class="label-container">
<label>
<i class="fas fa-tools test"></i>
</label>
</div>
<div class="label-container">
<label>
<i class="fas fa-th test"></i>
</label>
</div>
<div class="label-container">
<label>
<i class="fas fa-toolbox test"></i>
</label>
</div>
<div class="label-container">
<label>
<i class="fas fa-user-cog test"></i>
</label>
</div>
<div class="label-container">
<label>
<i class="fas fa-flask test"></i>
</label>
</div>
<div class="sidebarsmall1footer-menu">
<a href="">
<i class="fas fa-cog test"></i>
</a>
</div>
</div>
</div>
<div class="content">
<div style="padding: 20px; box-sizing: border-box;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam, mi eu fringilla posuere,
nisl risus lobortis nunc, eget viverra elit diam vel lectus. Phasellus efficitur tempus justo.
Nam in hendrerit ex, in accumsan mauris. Ut aliquam augue urna, nec ultricies nulla porta in.
Nullam vitae tincidunt massa. Etiam ornare dui eu dolor porta, ut convallis magna placerat.
Nulla varius aliquet urna. Sed a eros velit. Sed commodo neque non sapien vestibulum, vitae aliquam dui molestie.
Suspendisse efficitur venenatis purus nec rhoncus. Praesent mi risus, maximus ac arcu commodo, porta ornare ex.
Vivamus consectetur sit amet risus ut suscipit. Donec fermentum tellus ac magna ultricies aliquam.
Curabitur ornare, nisi ac ultrices semper, orci sapien ultrices elit, eu mollis elit ipsum eu lectus.</p>
<p>
Sed hendrerit commodo sodales. Nulla nec volutpat sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas et tortor sed tortor facilisis posuere. Ut commodo, tortor ac iaculis viverra, nibh nisi faucibus tellus,
id porttitor purus ligula vitae velit. Integer viverra varius enim. Nullam eget est sed nisi congue dictum.
Etiam mollis, velit euismod rhoncus eleifend, turpis nibh dapibus erat, non condimentum turpis nisl eget odio.
Pellentesque sed ex sed lacus auctor fermentum. Cras ac sapien vitae est feugiat tristique.
Etiam eget sapien eget augue porta hendrerit ut commodo elit. Fusce vel justo sed tellus sollicitudin sodales.
</p>
<p>
Suspendisse hendrerit vel enim at venenatis. Ut dictum ultricies eros a ultrices. Pellentesque ac sagittis libero.
Nam pretium dignissim ligula egestas molestie. Aenean sagittis felis ultricies ex congue tempor.
Donec eget consectetur felis. Maecenas sed metus accumsan mauris finibus tincidunt eget non dui.
Nunc id hendrerit metus, sit amet pellentesque tellus.
</p>
<p>
Vestibulum et leo semper, ultricies lorem a, hendrerit sapien. Cras eleifend orci leo, vitae semper turpis vulputate pretium.
Aliquam eget ante eget nulla congue vehicula. Donec lectus massa, maximus eget convallis id, auctor a risus.
Integer vehicula nibh dolor. Donec tristique egestas egestas. Cras fermentum id sem et luctus. Donec finibus nunc metus,
non porttitor nisl pharetra vitae. Curabitur blandit tellus vitae quam laoreet, at tristique diam sollicitudin.
Sed tincidunt ipsum ac condimentum ultrices. Maecenas vitae libero viverra, venenatis tellus a, congue ex. Donec dictum,
nulla non semper vehicula, mi velit accumsan eros, et pretium ex augue semper ex. Nullam at libero eu arcu interdum mattis at nec nibh.
Etiam non gravida orci.
</p>
<p>
Ut rutrum sollicitudin lectus, a mollis quam gravida eu. Pellentesque maximus scelerisque diam a feugiat. Etiam nec arcu lobortis, sagittis ex at,
maximus neque. Sed molestie suscipit justo, vel finibus urna rutrum vel. Mauris venenatis sem sit amet neque blandit,
vitae sollicitudin erat pellentesque. Curabitur vulputate feugiat turpis, at posuere urna accumsan et.
Duis sed fermentum nisi. Vivamus consequat dui sem, ac gravida dolor consectetur et. Proin tincidunt ornare ultrices.
Praesent sit amet dui lorem. Suspendisse faucibus est non felis rutrum fringilla. Mauris sit amet dui id mauris congue accumsan.
Donec quis ex molestie, dictum dui sit amet, tincidunt turpis.
</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
9. Navbar I
Elemen navbar I merupakan elemen yang berfungsi untuk menampilkan menu dengan posisi di bagian atas website.
<div class="navbar-menu" id="Navbar-menu">
<a href="#home">Helmets</a>
<a href="#news">Riding Gear</a>
<a href="#contact">Parts</a>
<a href="#about">Accessories</a>
<a href="#home">Tires</a>
<a href="#news">Women</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction6()">
<i class="fa fa-bars"></i>
</a>
</div>
10. Footer navigation
Elemen footer navigation merupakan elemen yang berfungsi untuk menampilkan pilihan menu dengan posisi di bagian bawah website.
<div style="background-color: white;">
<div style="display: table; border-bottom: 0.4px solid #D0D0D0; width: 100%;">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-10 col-12">
<div class="footernavigation-menu">
<div class="footernavigationmenucontainer-menu">
<div class="footernavigationhead-menu">
<div class="footernavigationtitlecontainer-menu">
<p class="footernavigationtitle-menu">Information</p>
</div>
</div>
<div class="footernavigationbody-menu">
<ul class="footernavigationlistcontainer-menu">
<li><a href="">Sitemap</a></li>
<li><a href="">Term & Condition</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">DMCA</a></li>
<li><a href="">2257</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-10 col-12">
<div class="footernavigation-menu">
<div class="footernavigationmenucontainer-menu">
<div class="footernavigationhead-menu">
<div class="footernavigationtitlecontainer-menu">
<p class="footernavigationtitle-menu">Work WIth Us</p>
</div>
</div>
<div class="footernavigationbody-menu">
<ul class="footernavigationlistcontainer-menu">
<li><a href="">Press</a></li>
<li><a href="">Advertise</a></li>
<li><a href="">Webmaster</a></li>
<li><a href="">Partners</a></li>
<li><a href="">Internship</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-10 col-12">
<div class="footernavigation-menu">
<div class="footernavigationmenucontainer-menu">
<div class="footernavigationhead-menu">
<div class="footernavigationtitlecontainer-menu">
<p class="footernavigationtitle-menu">Support and Help</p>
</div>
</div>
<div class="footernavigationbody-menu">
<ul class="footernavigationlistcontainer-menu">
<li><a href="">Content Review</a></li>
<li><a href="">Contact Support</a></li>
<li><a href="">Trust and Safety</a></li>
<li><a href="">Feedback</a></li>
<li><a href="">User Controls</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-10 col-12">
<div class="footernavigation-menu">
<div class="footernavigationmenucontainer-menu">
<div class="footernavigationhead-menu">
<div class="footernavigationtitlecontainer-menu">
<p class="footernavigationtitle-menu">Discover</p>
</div>
</div>
<div class="footernavigationbody-menu">
<ul class="footernavigationlistcontainer-menu">
<li><a href="">Blog</a></li>
<li><a href="">Insight</a></li>
<li><a href="">Tips & Tricks</a></li>
<li><a href="">Monthly Content Awards</a></li>
<li><a href="">More</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="container-fluid">
<div class="row">
<div class="footernavigationlinksocialbody-menu">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 footernavigationcol6-menu">
<p class="footernavigationtext-menu">© 2020 Maynooth Furniture. All Rights Reserved.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 footernavigationcol6_1-menu">
<a href="google.com"><i class="fab fa-twitter footernavigationsocialicon-menu"></i></a>
<a href="google.com"><i class="fab fa-instagram footernavigationsocialicon-menu"></i></a>
<a href="google.com"><i class="fab fa-youtube footernavigationsocialicon-menu"></i></a>
<a href="google.com"><i class="fab fa-discord footernavigationsocialicon-menu"></i></a>
<a href="google.com"><i class="fab fa-reddit footernavigationsocialicon-menu"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Made On Earth By Human. All rights reserved © 2022.