html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by ODLNT && SHEWE UCHI K -->
<!-- Huge shout-out to ODLNT for showing how the data-active property can allow for different classes to show as active, so that each accordion can light up individually when clicked: -->
<!--Huge Shout-Out to Lenny Atomz for his implementation of iframes, and the inspiration of that to implement for the searchbar in the code: -->
<!--THIS PROJECT IS ADAPTED FROM MANY FOUNDATIONAL EXAMPLES OF W3SCHOOLS CODE, AND AS SUCH THE CREDIT FOR THIS DEMO RESEARCH PROJECT IS LARGELY OWED TO REFSNES DATA INC. THE REFERENCES FOR THIS DESIGN ARE LISTED BELOW:
COPYRIGHT RULES:
https://www.w3schools.com/about/about_copyright.asp
SIDEBAR:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push_opacity
Vertical Tabs:
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp
ACCORDION:
https://www.w3schools.com/w3css/w3css_accordions.asp
CARDS:
https://www.w3schools.com/w3css/w3css_cards.asp
BOX-SHADOW:
https://www.w3schools.com/w3css/4/w3.css
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by ODLNT && Shewe Uchi K*/
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #d4c7ac;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
// Created by ODLNT && Shewe Uchi K
window.onscroll = function(){
var pos = document.documentElement.scrollTop;
var calc_height = document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scroll = pos*100 /calc_height;
document.getElementById("progress").style.width=scroll + "%";
document.getElementById("progress1").style.width=scroll + "%";
document.getElementById("progress2").style.width=scroll + "%";
document.getElementById("progress3").style.width=scroll + "%";
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run