This commit is contained in:
Jonas_Jones 2022-11-19 18:11:12 +01:00
parent 1ef09035b8
commit b283560e10
170 changed files with 7729 additions and 7622 deletions

0
.gitignore vendored Normal file → Executable file
View file

0
.src/assets/404.gif Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

Before After
Before After

0
.src/assets/account.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

0
.src/assets/contact.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

0
.src/assets/dark-mode.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

0
.src/assets/discord_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Before After
Before After

8
.src/assets/downloads.svg Normal file → Executable file
View file

@ -1,4 +1,4 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/> <path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/>
<path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/> <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 363 B

Before After
Before After

0
.src/assets/github_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Before After
Before After

0
.src/assets/icons/account.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

0
.src/assets/icons/contact.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

0
.src/assets/icons/dark-mode.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

8
.src/assets/icons/downloads.svg Normal file → Executable file
View file

@ -1,4 +1,4 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/> <path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/>
<path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/> <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 363 B

Before After
Before After

0
.src/assets/icons/license.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before After
Before After

0
.src/assets/icons/news.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

0
.src/assets/icons/projects.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/icons/warning-symbolic-dark.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/icons/warning-symbolic.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/icons/youtube.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

0
.src/assets/instagram_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Before After
Before After

0
.src/assets/license.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before After
Before After

0
.src/assets/loading.gif Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 181 KiB

After

Width:  |  Height:  |  Size: 181 KiB

Before After
Before After

0
.src/assets/logo_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

0
.src/assets/logo_iconNoMargin.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

0
.src/assets/logos/discord_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Before After
Before After

0
.src/assets/logos/github_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Before After
Before After

0
.src/assets/logos/instagram_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Before After
Before After

0
.src/assets/logos/logo_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

0
.src/assets/logos/logo_iconNoMargin.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

0
.src/assets/logos/twitter_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

0
.src/assets/logos/youtube_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

0
.src/assets/misc/footerBg.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 168 KiB

Before After
Before After

0
.src/assets/misc/headerBg.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 172 KiB

After

Width:  |  Height:  |  Size: 172 KiB

Before After
Before After

0
.src/assets/news.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

0
.src/assets/projects.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/twitter_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

Before After
Before After

0
.src/assets/warning-symbolic-dark.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/warning-symbolic.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
.src/assets/youtube.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

0
.src/assets/youtube_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Before After
Before After

66
.src/css/assets.css → .src/css/light/assets.css Normal file → Executable file
View file

@ -1,34 +1,34 @@
.arrow { .arrow {
border: solid black; border: solid black;
border-width: 0 4px 4px 0; border-width: 0 4px 4px 0;
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
float: right; float: right;
} }
.right { .right {
transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
} }
.left { .left {
transform: rotate(135deg); transform: rotate(135deg);
-webkit-transform: rotate(135deg); -webkit-transform: rotate(135deg);
} }
.up { .up {
transform: rotate(-135deg); transform: rotate(-135deg);
-webkit-transform: rotate(-135deg); -webkit-transform: rotate(-135deg);
} }
.down { .down {
transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
} }
.vl { .vl {
border-left: 6px solid grey; border-left: 6px solid grey;
height: 375px; height: 375px;
} }

112
.src/css/footer.css → .src/css/light/footer.css Normal file → Executable file
View file

@ -1,57 +1,57 @@
footer { footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-image: url("/.src/misc/footerBg.png"); background-image: url("/.src/misc/footerBg.png");
background-size: cover; background-size: cover;
z-index: -10; z-index: -10;
padding-top: 100px; padding-top: 100px;
} }
footer a { footer a {
margin: 5px; margin: 5px;
background-color: #10335C; background-color: #10335C;
} }
.contactIconDiv { .contactIconDiv {
background-color: gray; background-color: gray;
width: 31px; width: 31px;
border-radius: 5px; border-radius: 5px;
padding: 3px; padding: 3px;
padding-bottom: 0px; padding-bottom: 0px;
} }
#innerFooterBox { #innerFooterBox {
margin: 20%; margin: 20%;
margin-top: 600px; margin-top: 600px;
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
} }
#innerFooterBox div { #innerFooterBox div {
margin: 10px; margin: 10px;
} }
#toplinks { #toplinks {
flex: content; flex: content;
flex-direction: column; flex-direction: column;
} }
#topLinks a, h1 { #topLinks a, h1 {
background-color: transparent; background-color: transparent;
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 30px; font-size: 30px;
} }
#topLinks div a { #topLinks div a {
text-align: right; text-align: right;
} }
.footer-bar { .footer-bar {
background-color: black; background-color: black;
padding: 0px; padding: 0px;
color: white; color: white;
text-align: center; text-align: center;
} }
.footer-bar a { .footer-bar a {
background-color: black; background-color: black;
} }

66
.src/css/header.css → .src/css/light/header.css Normal file → Executable file
View file

@ -1,27 +1,39 @@
@font-face { @font-face {
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
src: url('/.src/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'), src: url('/.src/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('/.src/font/sary-soft.soft-semibold-webfont.woff') format('woff'); url('/.src/font/sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
#header { #header {
position: absolute; position: absolute;
top: 60; top: 60;
width: 100%; width: 100%;
height: 500px; height: 500px;
z-index: -1; z-index: -1;
} }
#header h1 { #header h1 {
font-size: 150px; font-size: 150px;
padding-left: 70px; padding-left: 70px;
} }
.header a { .header a {
font-size: 10px; font-size: 10px;
} }
html { html {
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
} }
#error-msg {
color: #bababa;
position: absolute;
left: 200px;
right: 120px;
bottom: 0;
border: 3px #bababa solid;
border-radius: 3px;
padding-left: 20px;
display: flex;
}

48
.src/css/main.css → .src/css/light/main.css Normal file → Executable file
View file

@ -1,25 +1,25 @@
@font-face { @font-face {
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
src: url('/.src/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'), src: url('/.src/font/sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('/.src/font/sary-soft.soft-semibold-webfont.woff') format('woff'); url('/.src/font/sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
html { html {
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
background-color: #bababa; background-color: #bababa;
margin: 0px; margin: 0px;
} }
.body { .body {
margin-top: 500px; margin-top: 500px;
} }
#headerContent { #headerContent {
background-image: url("/.src/assets/misc/headerBg.png"); background-image: url("/.src/assets/misc/headerBg.png");
background-position: bottom; background-position: bottom;
background-size: cover; background-size: cover;
} }

436
.src/css/topnav.css → .src/css/light/topnav.css Normal file → Executable file
View file

@ -1,206 +1,230 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
} }
.navbar { .navbar {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
z-index: 9999999; z-index: 9999999;
top: 0; }
} .navbar a, button {
.navbar a, button { float: left;
float: left; font-size: 16px;
font-size: 16px; color: white;
color: white; text-align: center;
text-align: center; padding: 14px 16px;
padding: 14px 16px; text-decoration: none;
text-decoration: none; }
}
.navbar button {
.navbar button { background-color: none;
background-color: none; }
}
.dropmenu {
.dropmenu { float: left;
float: left; overflow: hidden;
overflow: hidden; }
}
.navbar a:hover, .dropmenu:hover .dropmenubtn {
.navbar a:hover, .dropmenu:hover .dropmenubtn { background-color: #0D6769;
background-color: #0D6769; }
}
.dropmenu-content {
.dropmenu-content { display: none;
display: none; position: absolute;
position: absolute; width: 100%;
width: 100%; left: 0;
left: 0; z-index: 1;
z-index: 1; margin-top: 50px;
margin-top: 50px; }
}
.dropmenu-content-content {
.dropmenu-content-content { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding-bottom: 2px;
padding-bottom: 2px; margin: 5px;
margin: 5px; margin-top: 10px;
margin-top: 10px; background-color: #ccc;
background-color: #ccc; border-radius: 10px;
border-radius: 10px; }
}
.dropmenu-content .header-mega {
.dropmenu-content .header-mega { background: #0D6769;
background: #0D6769; padding: 16px;
padding: 16px; color: white;
color: white; border-radius: 9px 9px 0px 0px;
border-radius: 9px 9px 0px 0px; }
}
#header-mega-all {
#header-mega-all { background-color: #0E5773;
background-color: #0E5773; margin: 5px;
margin: 5px; border-radius: 10px;
border-radius: 10px; }
} #header-mega-all a {
#header-mega-all a { height: 100%;
height: 100%; width: 100%;
width: 100%; margin-left: 0px;
margin-left: 0px; font-size: 15px;
font-size: 15px; border-radius: 8px;
border-radius: 8px; }
}
.dropmenu:hover .dropmenu-content {
.dropmenu:hover .dropmenu-content { display: block;
display: block; }
}
/* Create three equal columns that floats next to each other */
/* Create three equal columns that floats next to each other */ .column {
.column { float: left;
float: left; width: 33.33%;
width: 33.33%; padding: 10px;
padding: 10px; background-color: #ccc;
background-color: #ccc; height: 330px;
height: 330px; }
}
.column a {
.column a { float: none;
float: none; color: black;
color: black; padding: 16px;
padding: 16px; text-decoration: none;
text-decoration: none; display: block;
display: block; text-align: left;
text-align: left; }
}
.column a:hover {
.column a:hover { background-color: #ddd;
background-color: #ddd; }
}
/* Clear floats after the columns */
/* Clear floats after the columns */ .row:after {
.row:after { content: "";
content: ""; display: table;
display: table; clear: both;
clear: both; }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {
@media screen and (max-width: 600px) { .column {
.column { width: 100%;
width: 100%; height: auto;
height: auto; }
} }
}
.dropdown {
.dropdown { float: left;
float: left; overflow: hidden;
overflow: hidden; }
}
.navbar a:hover, .dropdown:hover .dropbtn {
.navbar a:hover, .dropdown:hover .dropbtn { background-color: #0D6769;
background-color: #0D6769; }
}
.dropdown-content {
.dropdown-content { display: none;
display: none; position: absolute;
position: absolute; min-width: 160px;
min-width: 160px; z-index: 1;
z-index: 1; margin-top: 49px;
margin-top: 49px; border-radius: 10px;
border-radius: 10px; }
}
.dropdown-content-content {
.dropdown-content-content { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color: #0D6769;
background-color: #0D6769; margin-top: 10px;
margin-top: 10px; padding: 3px;
padding: 3px; border-radius: 10px;
border-radius: 10px; }
}
.dropdown-content-content a:hover {
.dropdown-content-content a:hover { color: #0D6769;
color: #0D6769; border-radius: 8px;
border-radius: 8px; }
}
.dropdown-content a {
.dropdown-content a { float: none;
float: none; color: black;
color: black; padding: 12px 16px;
padding: 12px 16px; text-decoration: none;
text-decoration: none; display: block;
display: block; text-align: left;
text-align: left; }
}
.dropdown-content a:hover {
.dropdown-content a:hover { background-color: #ddd;
background-color: #ddd; }
}
.dropdown:hover .dropdown-content {
.dropdown:hover .dropdown-content { display: block;
display: block; }
}
/* Navbar button style */
/* Navbar button style */ .navbarbtn, .navbar a{
.navbarbtn, .navbar a{ font-size: 16px;
font-size: 16px; border: none;
border: none; border-radius: 4px;
border-radius: 4px; outline: none;
outline: none; color: white;
color: white; padding: 14px 16px;
padding: 14px 16px; background-color: inherit;
background-color: inherit; margin: 3px;
margin: 3px; }
}
.column a {
.column a { color: #0D6769;
color: #0D6769; }
}
.column a:hover {
.column a:hover { color: white;
color: white; }
}
.expandonhover {
.expandonhover { float: right;
float: right; width: 55px;
width: 55px; height: 55px;
height: 55px; transition: width 0.5s;
transition: width 0.5s; -webkit-transition: width 0.5s;
-webkit-transition: width 0.5s; overflow: hidden;
overflow: hidden; }
} .navbar:hover .expandonhover {
.navbar:hover .expandonhover { width: 230px;
width: 230px; }
}
#website-under-construction {
background-color: orange;
color: #333333;
width: auto;
height: 50px;
display: inline-block;
width: 240px;
transition: width 0.5s;
-webkit-transition: width 0.5s;
overflow: hidden;
background-image: url(/.src/assets/warning-symbolic-dark.png);
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left center;
background-position-x: 10px;
}
@media screen and (max-width: 1021px) {
.navbar:hover #website-under-construction {
width: 50px;
}
}

22
.src/font/sary-soft.soft-regular-webfont.css Normal file → Executable file
View file

@ -1,12 +1,12 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
@font-face { @font-face {
font-family: 'sary_softregular'; font-family: 'sary_softregular';
src: url('sary-soft.soft-regular-webfont.woff2') format('woff2'), src: url('sary-soft.soft-regular-webfont.woff2') format('woff2'),
url('sary-soft.soft-regular-webfont.woff') format('woff'); url('sary-soft.soft-regular-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

0
.src/font/sary-soft.soft-regular-webfont.woff Normal file → Executable file
View file

0
.src/font/sary-soft.soft-regular-webfont.woff2 Normal file → Executable file
View file

22
.src/font/sary-soft.soft-semibold-webfont.css Normal file → Executable file
View file

@ -1,12 +1,12 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */ /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2022 */
@font-face { @font-face {
font-family: 'sary_soft_semiboldregular'; font-family: 'sary_soft_semiboldregular';
src: url('sary-soft.soft-semibold-webfont.woff2') format('woff2'), src: url('sary-soft.soft-semibold-webfont.woff2') format('woff2'),
url('sary-soft.soft-semibold-webfont.woff') format('woff'); url('sary-soft.soft-semibold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

0
.src/font/sary-soft.soft-semibold-webfont.woff Normal file → Executable file
View file

0
.src/font/sary-soft.soft-semibold-webfont.woff2 Normal file → Executable file
View file

270
.template/index.html Normal file → Executable file
View file

@ -1,136 +1,136 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<title>$TITLE</title> <title>$TITLE</title>
<header> <header>
<link rel="stylesheet" href="css/topnav.css"> <link rel="stylesheet" href="css/topnav.css">
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<div class="navbar"> <div class="navbar">
<a href="" style="padding: 3px;padding-bottom: 0px;"><img src="src/logos/logo_iconNoMargin.png" height="39px"></a> <a href="" style="padding: 3px;padding-bottom: 0px;"><img src="src/logos/logo_iconNoMargin.png" height="39px"></a>
<a href="#news">News</a> <a href="#news">News</a>
<div class="dropmenu"> <div class="dropmenu">
<button class="dropmenubtn navbarbtn" onclick="window.location.href='projects/index.html';">Projects<i class="fa fa-caret-down"></i></button> <button class="dropmenubtn navbarbtn" onclick="window.location.href='projects/index.html';">Projects<i class="fa fa-caret-down"></i></button>
<div class="dropmenu-content"> <div class="dropmenu-content">
<div class="dropmenu-content-content"> <div class="dropmenu-content-content">
<div class="header-mega"> <div class="header-mega">
<h1>Project Overview</h1> <h1>Project Overview</h1>
<p><a href="#" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p> <p><a href="#" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p>
</div> </div>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h3>Minecraft Mods</h3> <h3>Minecraft Mods</h3>
<a href="#">ConsoleMC</a> <a href="#">ConsoleMC</a>
<a href="#">SpotifyMC</a> <a href="#">SpotifyMC</a>
<a href="#">Mystery-Mod</a> <a href="#">Mystery-Mod</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Python</h3> <h3>Python</h3>
<a href="#">Windows Bloatware Removal Tool</a> <a href="#">Windows Bloatware Removal Tool</a>
<a href="#">Bash Command Alias Editor</a> <a href="#">Bash Command Alias Editor</a>
<a href="#">PI-MC-WATCHER</a> <a href="#">PI-MC-WATCHER</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Miscellaneous</h3> <h3>Miscellaneous</h3>
<a href="#">Homepage</a> <a href="#">Homepage</a>
<a href="#">Link 2</a> <a href="#">Link 2</a>
<a href="#">Link 3</a> <a href="#">Link 3</a>
</div> </div>
<div id="header-mega-all"> <div id="header-mega-all">
<a href="#">View all projects</a> <a href="#">View all projects</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button> <button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content"> <div class="dropdown-content">
<div class="dropdown-content-content"> <div class="dropdown-content-content">
<a href="#">Info</a> <a href="#">Info</a>
<a href="#">Visit channel</a> <a href="#">Visit channel</a>
<a href="#">Subscribe</a> <a href="#">Subscribe</a>
</div> </div>
</div> </div>
</div> </div>
<a href="#news">Contact</a> <a href="#news">Contact</a>
<a href="#news" style="float: right;"><img src="src/icons/account.png" height="18px"></a> <a href="#news" style="float: right;"><img src="src/icons/account.png" height="18px"></a>
<a href="#news" style="float: right;" onclick="toggleDarkMode();"><img src="src/icons/dark-mode.png" height="18px"></a> <a href="#news" style="float: right;" onclick="toggleDarkMode();"><img src="src/icons/dark-mode.png" height="18px"></a>
<div id="header"> <div id="header">
<h1>$TITLE</h1> <h1>$TITLE</h1>
</div> </div>
</header> </header>
<div id="error-msg"> <div id="error-msg">
<div style="width: 15%;"> <div style="width: 15%;">
<img src="src/icons/warning-symbolic.png" width="75%"> <img src="src/icons/warning-symbolic.png" width="75%">
</div> </div>
<div style="align-self: stretch;"> <div style="align-self: stretch;">
<p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p> <p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p>
</div> </div>
</div> </div>
<body> <body>
<div class="body"> <div class="body">
</div> </div>
</body> </body>
<footer> <footer>
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/assets.css"> <link rel="stylesheet" href="css/assets.css">
<div id="footer"> <div id="footer">
<div id="innerFooterBox"> <div id="innerFooterBox">
<div> <div>
<a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/"> <a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="src/logos/youtube_icon.png"> <img height="25px" src="src/logos/youtube_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://github.com/J-onasJones/"> <a class="contactIcon" href="https://github.com/J-onasJones/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="src/logos/github_icon.png"> <img height="25px" src="src/logos/github_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/"> <a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="src/logos/discord_icon.png"> <img height="25px" src="src/logos/discord_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/"> <a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="src/logos/instagram_icon.png"> <img height="25px" src="src/logos/instagram_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://twitter.com/Jonas_Jones_/"> <a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="src/logos/twitter_icon.png"> <img height="25px" src="src/logos/twitter_icon.png">
</div> </div>
</a> </a>
</div> </div>
<div class="vl"></div> <div class="vl"></div>
<div id="topLinks"> <div id="topLinks">
<h1>Quick Access</h1> <h1>Quick Access</h1>
<div><a href=""><img src="src/icons/news.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/news.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href=""><img src="src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href=""><img src="src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href=""><img src="src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a></a></div> <div><a></a></div>
<div><a href=""><img src="src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href=""><img src="src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div> <div><a href=""><img src="src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
</div> </div>
</div> </div>
</div> </div>
<div class="footer-bar"> <div class="footer-bar">
<a>Website by Jonas_Jones, hosted on GitHub - 2022</a> <a>Website by Jonas_Jones, hosted on GitHub - 2022</a>
</div> </div>
</footer> </footer>
<script> <script>
function toggleDarkMode() { function toggleDarkMode() {
var element = document.body; var element = document.body;
element.classList.toggle("dark-mode"); element.classList.toggle("dark-mode");
} }
</script> </script>
</html> </html>

0
404.html Normal file → Executable file
View file

2
CNAME Normal file → Executable file
View file

@ -1 +1 @@
jonasjones.me jonasjones.me

14
README.md Normal file → Executable file
View file

@ -1,7 +1,7 @@
# J-onasJones.github.io # J-onasJones.github.io
You just found the repo for my Homepage (http://jonasjones.me/) I guess. It's still a wip (work in progress) but some of it is already done although it is definetly not final You just found the repo for my Homepage (http://jonasjones.me/) I guess. It's still a wip (work in progress) but some of it is already done although it is definetly not final
# License # License
This project is currently under the DWTFYW License which is subject to change. This project is currently under the DWTFYW License which is subject to change.

96
footer.html Normal file → Executable file
View file

@ -1,49 +1,49 @@
<footer> <footer>
<link id="style-footer" rel="stylesheet" href="/css/footer.css"> <link id="style-footer" rel="stylesheet" href="/css/footer.css">
<link id="style-assets" rel="stylesheet" href="/css/assets.css"> <link id="style-assets" rel="stylesheet" href="/css/assets.css">
<div id="footer"> <div id="footer">
<div id="innerFooterBox"> <div id="innerFooterBox">
<div> <div>
<a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/"> <a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="youtube_icon.png"> <img height="25px" src="youtube_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://github.com/J-onasJones/"> <a class="contactIcon" href="https://github.com/J-onasJones/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="github_icon.png"> <img height="25px" src="github_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/"> <a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="discord_icon.png"> <img height="25px" src="discord_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/"> <a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="instagram_icon.png"> <img height="25px" src="instagram_icon.png">
</div> </div>
</a> </a>
<a class="contactIcon" href="https://twitter.com/Jonas_Jones_/"> <a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
<div class="contactIconDiv"> <div class="contactIconDiv">
<img height="25px" src="twitter_icon.png"> <img height="25px" src="twitter_icon.png">
</div> </div>
</a> </a>
</div> </div>
<div class="vl"></div> <div class="vl"></div>
<div id="topLinks"> <div id="topLinks">
<h1>Quick Access</h1> <h1>Quick Access</h1>
<div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a></a></div> <div><a></a></div>
<div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
</div> </div>
</div> </div>
</div> </div>
<div class="footer-bar"> <div class="footer-bar">
<a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a> <a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a>
</div> </div>
</footer> </footer>

143
header.html Normal file → Executable file
View file

@ -1,70 +1,75 @@
<base target="_parent"> <base target="_parent">
<header> <header>
<link id="style-topnav" rel="stylesheet" href=".src/css/topnav.css"> <link id="style-topnav" rel="stylesheet" href=".src/css/light/topnav.css">
<link id="style-header" rel="stylesheet" href=".src/css/header.css"> <link id="style-header" rel="stylesheet" href=".src/css/light/header.css">
<div class="navbar"> <div class="navbar">
<a href="" style="padding: 3px;padding-bottom: 0px;"><img src="/.src/assets/logos/logo_icon.png" height="39px"></a> <a href="" style="padding: 3px;padding-bottom: 0px;"><img src="/.src/assets/logos/logo_icon.png" height="39px"></a>
<a href="/news">News</a> <a href="/news">News</a>
<div class="dropmenu"> <div class="dropmenu">
<button class="dropmenubtn navbarbtn" >Projects<i class="fa fa-caret-down"></i></button> <button class="dropmenubtn navbarbtn" >Projects<i class="fa fa-caret-down"></i></button>
<div class="dropmenu-content"> <div class="dropmenu-content">
<div class="dropmenu-content-content"> <div class="dropmenu-content-content">
<div class="header-mega"> <div class="header-mega">
<h1>Project Overview</h1> <h1>Project Overview</h1>
<p><a href="/projects/" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p> <p><a href="/projects/" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p>
</div> </div>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h3>Minecraft Mods</h3> <h3>Minecraft Mods</h3>
<a href="/projects/microcontrollermc/">MicrocontrollerMC</a> <a href="/projects/microcontrollermc/">MicrocontrollerMC</a>
<a href="/projects/consolemc/">ConsoleMC</a> <a href="/projects/consolemc/">ConsoleMC</a>
<a href="/projects/spotifymc/">SpotifyMC</a> <a href="/projects/spotifymc/">SpotifyMC</a>
<a href="/projects/syncmod/">SyncMod</a> <a href="/projects/syncmod/">SyncMod</a>
<a href="/projects/mysterymod/">MysteryMod</a> <a href="/projects/mysterymod/">MysteryMod</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Rust/Python</h3> <h3>Rust/Python</h3>
<a href="/projects/windowsbloatwareremover/">Windows Bloatware Removal Tool</a> <a href="/projects/windowsbloatwareremover/">Windows Bloatware Removal Tool</a>
<a href="/projects/bashcommandaliaseditor/">Bash Command Alias Editor</a> <a href="/projects/bashcommandaliaseditor/">Bash Command Alias Editor</a>
<a href="/projects/pi-mc-watcher/">PI-MC-WATCHER</a> <a href="/projects/pi-mc-watcher/">PI-MC-WATCHER</a>
<a href="/projects/streamdeckui-pluginloader/">StreamDeck UI Pluginloader</a> <a href="/projects/streamdeckui-pluginloader/">StreamDeck UI Pluginloader</a>
<a href="/projects/resourcepack-editor/">Resourcepack Editor</a> <a href="/projects/resourcepack-editor/">Resourcepack Editor</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Miscellaneous</h3> <h3>Miscellaneous</h3>
<a href="/projects/website/">Homepage</a> <a href="/projects/website/">Homepage</a>
</div> </div>
<div id="header-mega-all"> <div id="header-mega-all">
<a href="/projects/">View all projects</a> <a href="/projects/">View all projects</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button> <button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content"> <div class="dropdown-content">
<div class="dropdown-content-content"> <div class="dropdown-content-content">
<a href="/youtube/">Info</a> <a href="/youtube/">Info</a>
<a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg">Visit channel</a> <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg">Visit channel</a>
<a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a> <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a>
</div> </div>
</div> </div>
</div> </div>
<a href="/about/">About</a> <a href="/about/">About</a>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
<a style="background-color: orange;color: #333333;" href="/construction/"><img style="padding-top: 5px;" src="/.src/assets/warning-symbolic-dark.png" height="17px"> Website under construction</a> <a id="website-under-construction" href="/construction/"><div style="width: 220px;"><p style="margin-top: 2px;margin-left:25px;">Website under construction</p></div></a>
<div class="expandonhover"> <div class="expandonhover">
<a href="/account/" ><img src="/.src/assets/account.png" height="18px"></a> <a href="/account/" ><img src="/.src/assets/account.png" height="18px"></a>
<a id="floatinright" href="/signup/" >Sign Up</a> <a id="floatinright" href="/signup/" >Sign Up</a>
<a id="floatinright" href="/login/" >Login</a> <a id="floatinright" href="/login/" >Login</a>
</div> </div>
<a style="float: right;" onclick="toggleDarkMode();"><img src="/.src/assets/dark-mode.png" height="18px"></a> <a style="float: right;" onclick="toggleDarkMode();"><img src="/.src/assets/dark-mode.png" height="18px"></a>
</div>
<div id="header"> <div id="error-msg">
<div style="width: 15%;">
</div> <img src=".src/assets/warning-symbolic.png" width="75px">
</div> </div>
<div style="align-self: stretch;" onselectstart="return false">
<p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p>
</div>
</div>
</header> </header>

851
index.html Normal file → Executable file
View file

@ -1,427 +1,426 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<link rel="icon" type="image/x-icon" href="logo_icon.png"> <link rel="icon" type="image/x-icon" href="logo_icon.png">
<link id="style-main" rel="stylesheet" href="main.css"> <link id="style-main" rel="stylesheet" href="main.css">
<title>DBPJP</title> <title>DBPJP</title>
<header> <header>
<link id="style-topnav" rel="stylesheet" href="/css/topnav.css"> <link id="style-topnav" rel="stylesheet" href="/css/topnav.css">
<link id="style-header" rel="stylesheet" href="/css/header.css"> <link id="style-header" rel="stylesheet" href="/css/header.css">
<div class="navbar"> <div class="navbar">
<a href="" style="padding: 3px;padding-bottom: 0px;"><img src="logo_icon.png" height="39px"></a> <a href="" style="padding: 3px;padding-bottom: 0px;"><img src="logo_icon.png" height="39px"></a>
<a href="/news">News</a> <a href="/news">News</a>
<div class="dropmenu"> <div class="dropmenu">
<button class="dropmenubtn navbarbtn" >Projects<i class="fa fa-caret-down"></i></button> <button class="dropmenubtn navbarbtn" >Projects<i class="fa fa-caret-down"></i></button>
<div class="dropmenu-content"> <div class="dropmenu-content">
<div class="dropmenu-content-content"> <div class="dropmenu-content-content">
<div class="header-mega"> <div class="header-mega">
<h1>Project Overview</h1> <h1>Project Overview</h1>
<p><a href="/projects/" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p> <p><a href="/projects/" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p>
</div> </div>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
<h3>Minecraft Mods</h3> <h3>Minecraft Mods</h3>
<a href="/projects/microcontrollermc/">MicrocontrollerMC</a> <a href="/projects/microcontrollermc/">MicrocontrollerMC</a>
<a href="/projects/consolemc/">ConsoleMC</a> <a href="/projects/consolemc/">ConsoleMC</a>
<a href="/projects/spotifymc/">SpotifyMC</a> <a href="/projects/spotifymc/">SpotifyMC</a>
<a href="/projects/syncmod/">SyncMod</a> <a href="/projects/syncmod/">SyncMod</a>
<a href="/projects/mysterymod/">MysteryMod</a> <a href="/projects/mysterymod/">MysteryMod</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Rust/Python</h3> <h3>Rust/Python</h3>
<a href="/projects/windowsbloatwareremover/">Windows Bloatware Removal Tool</a> <a href="/projects/windowsbloatwareremover/">Windows Bloatware Removal Tool</a>
<a href="/projects/bashcommandaliaseditor/">Bash Command Alias Editor</a> <a href="/projects/bashcommandaliaseditor/">Bash Command Alias Editor</a>
<a href="/projects/pi-mc-watcher/">PI-MC-WATCHER</a> <a href="/projects/pi-mc-watcher/">PI-MC-WATCHER</a>
<a href="/projects/streamdeckui-pluginloader/">StreamDeck UI Pluginloader</a> <a href="/projects/streamdeckui-pluginloader/">StreamDeck UI Pluginloader</a>
<a href="/projects/resourcepack-editor/">Resourcepack Editor</a> <a href="/projects/resourcepack-editor/">Resourcepack Editor</a>
</div> </div>
<div class="column"> <div class="column">
<h3>Miscellaneous</h3> <h3>Miscellaneous</h3>
<a href="/projects/website/">Homepage</a> <a href="/projects/website/">Homepage</a>
</div> </div>
<div id="header-mega-all"> <div id="header-mega-all">
<a href="/projects/">View all projects</a> <a href="/projects/">View all projects</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button> <button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content"> <div class="dropdown-content">
<div class="dropdown-content-content"> <div class="dropdown-content-content">
<a href="/youtube/">Info</a> <a href="/youtube/">Info</a>
<a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg">Visit channel</a> <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg">Visit channel</a>
<a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a> <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a>
</div> </div>
</div> </div>
</div> </div>
<a href="/about/">About</a> <a href="/about/">About</a>
<a href="/contact/">Contact</a> <a href="/contact/">Contact</a>
<a style="background-color: orange;color: #333333;" href="/construction/"><img style="padding-top: 5px;" src="warning-symbolic-dark.png" height="17px"> Website under construction</a> <a style="background-color: orange;color: #333333;" href="/construction/"><img style="padding-top: 5px;" src="warning-symbolic-dark.png" height="17px"> Website under construction</a>
<div class="expandonhover"> <div class="expandonhover">
<a href="/account/" ><img src="account.png" height="18px"></a> <a href="/account/" ><img src="account.png" height="18px"></a>
<a id="floatinright" href="/signup/" >Sign Up</a> <a id="floatinright" href="/signup/" >Sign Up</a>
<a id="floatinright" href="/login/" >Login</a> <a id="floatinright" href="/login/" >Login</a>
</div> </div>
<a style="float: right;" onclick="toggleDarkMode();"><img src="dark-mode.png" height="18px"></a> <a style="float: right;" onclick="toggleDarkMode();"><img src="dark-mode.png" height="18px"></a>
<div id="header"> <div id="header">
<h1>DBPJP</h1> </div>
</div> </div>
</div> <div id="error-msg">
<div id="error-msg"> <div style="width: 15%;">
<div style="width: 15%;"> <img src="warning-symbolic.png" width="75%">
<img src="warning-symbolic.png" width="75%"> </div>
</div> <div style="align-self: stretch;" onselectstart="return false">
<div style="align-self: stretch;" onselectstart="return false"> <p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p>
<p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p> </div>
</div> </div>
</div> </header>
</header>
<body>
<body> <div style="padding-left: 50px;padding-right: 50px;">
<div style="padding-left: 50px;padding-right: 50px;"> <h1>Downloads</h1>
<h1>Downloads</h1> <p>Here You can find the downloads for both the client and server side modpack of DBPJP (Delusional Banana Pascal Jones Pack)</p>
<p>Here You can find the downloads for both the client and server side modpack of DBPJP (Delusional Banana Pascal Jones Pack)</p> </div>
</div> </body>
</body>
<footer>
<footer> <link id="style-footer" rel="stylesheet" href="/css/footer.css">
<link id="style-footer" rel="stylesheet" href="/css/footer.css"> <link id="style-assets" rel="stylesheet" href="/css/assets.css">
<link id="style-assets" rel="stylesheet" href="/css/assets.css"> <div id="footer">
<div id="footer"> <div id="innerFooterBox">
<div id="innerFooterBox"> <div>
<div> <a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
<a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="youtube_icon.png">
<img height="25px" src="youtube_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://github.com/J-onasJones/">
<a class="contactIcon" href="https://github.com/J-onasJones/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="github_icon.png">
<img height="25px" src="github_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
<a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="discord_icon.png">
<img height="25px" src="discord_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
<a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="instagram_icon.png">
<img height="25px" src="instagram_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
<a class="contactIcon" href="https://twitter.com/Jonas_Jones_/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="twitter_icon.png">
<img height="25px" src="twitter_icon.png"> </div>
</div> </a>
</a> </div>
</div> <div class="vl"></div>
<div class="vl"></div> <div id="topLinks">
<div id="topLinks"> <h1>Quick Access</h1>
<h1>Quick Access</h1> <div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/news/"><img src="/src/iconsnews.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/projects/"><img src="/src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/youtube/"><img src="/src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/downloads/"><img src="/src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a></a></div>
<div><a></a></div> <div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/about/"><img src="/src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="/license/"><img src="/src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div> </div>
</div> </div>
</div> </div>
</div> <div class="footer-bar">
<div class="footer-bar"> <a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a>
<a>Website by Jonas_Jones, hosted on <a style="color: white;" href="https://github.com/J-onasJones/J-onasJones.github.io">GitHub</a> - 2022</a> </div>
</div> </footer>
</footer>
<script>
<script> function toggleDarkMode() {
function toggleDarkMode() { var main = document.getElementById("style-main");
var main = document.getElementById("style-main"); var topnav = document.getElementById("style-topnav");
var topnav = document.getElementById("style-topnav"); var header = document.getElementById("style-header");
var header = document.getElementById("style-header"); var footer = document.getElementById("style-footer");
var footer = document.getElementById("style-footer"); var assets = document.getElementById("style-assets");
var assets = document.getElementById("style-assets");
if (main.href.match("light")) {
if (main.href.match("light")) { main.href = "/css/dark/main.css";
main.href = "/css/dark/main.css"; topnav.href = "/css/dark/topnav.css";
topnav.href = "/css/dark/topnav.css"; header.href = "/css/dark/header.css";
header.href = "/css/dark/header.css"; footer.href = "/css/dark/footer.css";
footer.href = "/css/dark/footer.css"; assets.href = "/css/dark/assets.css";
assets.href = "/css/dark/assets.css"; } else {
} else { main.href = "/css/light/main.css";
main.href = "/css/light/main.css"; topnav.href = "/css/light/topnav.css";
topnav.href = "/css/light/topnav.css"; header.href = "/css/light/header.css";
header.href = "/css/light/header.css"; footer.href = "/css/light/footer.css";
footer.href = "/css/light/footer.css"; assets.href = "/css/light/assets.css";
assets.href = "/css/light/assets.css"; }
} }
} </script>
</script>
</html>
</html>
<!--<!DOCTYPE html>
<!--<!DOCTYPE html> <html>
<html> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main.css"> <title>DBPJP</title>
<title>DBPJP</title> <header>
<header> <link rel="stylesheet" href="css/topnav.css">
<link rel="stylesheet" href="css/topnav.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/header.css"> <link rel="icon" type="image/x-icon" href="src/logos/logo_icon.png">
<link rel="icon" type="image/x-icon" href="src/logos/logo_icon.png"> <div class="navbar">
<div class="navbar"> <a href="https://jonasjones.me" style="padding: 3px;padding-bottom: 0px;"><img src="src/logos/logo_iconNoMargin.png" height="39px"></a>
<a href="https://jonasjones.me" style="padding: 3px;padding-bottom: 0px;"><img src="src/logos/logo_iconNoMargin.png" height="39px"></a> <a href="404.html">News</a>
<a href="404.html">News</a> <div class="dropmenu">
<div class="dropmenu"> <button class="dropmenubtn navbarbtn" onclick="window.location.href='projects/index.html';">Projects<i class="fa fa-caret-down"></i></button>
<button class="dropmenubtn navbarbtn" onclick="window.location.href='projects/index.html';">Projects<i class="fa fa-caret-down"></i></button> <div class="dropmenu-content">
<div class="dropmenu-content"> <div class="dropmenu-content-content">
<div class="dropmenu-content-content"> <div class="header-mega">
<div class="header-mega"> <h1>Project Overview</h1>
<h1>Project Overview</h1> <p><a href="#" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p>
<p><a href="#" style="font-size: 15px;padding: 0px;margin-top: -15px;">View all projects</a></p> </div>
</div> <div class="row">
<div class="row"> <div class="column">
<div class="column"> <h3>Minecraft Mods</h3>
<h3>Minecraft Mods</h3> <a href="404.html">ConsoleMC</a>
<a href="404.html">ConsoleMC</a> <a href="404.html">SpotifyMC</a>
<a href="404.html">SpotifyMC</a> <a href="https://jonasjones.me/projects/minecraft-mods/mystery-mod/">Mystery-Mod</a>
<a href="https://jonasjones.me/projects/minecraft-mods/mystery-mod/">Mystery-Mod</a> </div>
</div> <div class="column">
<div class="column"> <h3>Python</h3>
<h3>Python</h3> <a href="404.html">Windows Bloatware Removal Tool</a>
<a href="404.html">Windows Bloatware Removal Tool</a> <a href="404.html">Bash Command Alias Editor</a>
<a href="404.html">Bash Command Alias Editor</a> <a href="404.html">PI-MC-WATCHER</a>
<a href="404.html">PI-MC-WATCHER</a> </div>
</div> <div class="column">
<div class="column"> <h3>Miscellaneous</h3>
<h3>Miscellaneous</h3> <a href="https://jonasjones.me/projects/website/homepage/">Homepage</a>
<a href="https://jonasjones.me/projects/website/homepage/">Homepage</a> <a href="404.html">uwu</a>
<a href="404.html">uwu</a> <a href="404.html">ôwo</a>
<a href="404.html">ôwo</a> </div>
</div> <div id="header-mega-all">
<div id="header-mega-all"> <a href="404.html">View all projects</a>
<a href="404.html">View all projects</a> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="dropdown">
<div class="dropdown"> <button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button>
<button class="dropbtn navbarbtn">Youtube<i class="fa fa-caret-down"></i></button> <div class="dropdown-content">
<div class="dropdown-content"> <div class="dropdown-content-content">
<div class="dropdown-content-content"> <a href="https://jonasjones.me/youtube/">Info</a>
<a href="https://jonasjones.me/youtube/">Info</a> <a href="https://www.youtube.com/JonasJonesJonasJones">Visit channel</a>
<a href="https://www.youtube.com/JonasJonesJonasJones">Visit channel</a> <a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a>
<a href="http://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg?sub_confirmation=1">Subscribe</a> </div>
</div>
</div>
</div> </div>
</div> <a href="https://jonasjones.me/#contact">Contact</a>
<a href="https://jonasjones.me/#contact">Contact</a> <a href="404.html" style="float: right;"><img src="src/icons/account.png" height="18px"></a>
<a href="404.html" style="float: right;"><img src="src/icons/account.png" height="18px"></a> <a href="404.html" style="float: right;" onclick="toggleDarkMode();"><img src="src/icons/dark-mode.png" height="18px"></a>
<a href="404.html" style="float: right;" onclick="toggleDarkMode();"><img src="src/icons/dark-mode.png" height="18px"></a>
<div id="header">
<div id="header"> <h1>SVFFM</h1>
<h1>SVFFM</h1> </div>
</div> </header>
</header> <div id="error-msg">
<div id="error-msg"> <div style="width: 15%;">
<div style="width: 15%;"> <img src="src/icons/warning-symbolic.png" width="75%">
<img src="src/icons/warning-symbolic.png" width="75%"> </div>
</div> <div style="align-self: stretch;">
<div style="align-self: stretch;"> <p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p>
<p>See this message? This means that You are either using a browser that doesn't properly support this website or a Browser extension is modifiying this content (e.g. Dark Reader), try disabling it. Either way, You're missing out on content.</p> </div>
</div> </div>
</div>
<div style="background-color: orange;padding: 5px;border-radius: 5px;margin: 5px; color: black;position:absolute; top: 50;right: 5;">
<div style="background-color: orange;padding: 5px;border-radius: 5px;margin: 5px; color: black;position:absolute; top: 50;right: 5;"> <h3>This Website is WIP</h3>
<h3>This Website is WIP</h3> <p>A new website is on the way. You are now seeing the work in progress. At this point, please don't report any bugs to GitHub yet.</p>
<p>A new website is on the way. You are now seeing the work in progress. At this point, please don't report any bugs to GitHub yet.</p> <p>The old and still official website is available at <a href="https://j-onasjones.github.io/">jonasjones.me</a>.</p>
<p>The old and still official website is available at <a href="https://j-onasjones.github.io/">jonasjones.me</a>.</p> </div>
</div>
<body>
<body> <div class="body" style="padding-left: 50px;">
<div class="body" style="padding-left: 50px;"> <h1>Downloads</h1>
<h1>Downloads</h1> <p>Here You can find the downloads for both the client and server side modpack of SVFFM (Slightly Vanilla Flavoured Fabric Modified)</p>
<p>Here You can find the downloads for both the client and server side modpack of SVFFM (Slightly Vanilla Flavoured Fabric Modified)</p>
<style>
<style> table, th, td {
table, th, td { border:1px solid black;
border:1px solid black; text-align: center;
text-align: center; padding: 3px;
padding: 3px; }
}
a.downloadbutton {
a.downloadbutton { text-decoration: none;
text-decoration: none; color: #0D6769;
color: #0D6769; border: 2px solid #0D6769;
border: 2px solid #0D6769; border-radius: 3px;
border-radius: 3px; padding: 2px;
padding: 2px; }
} a.downloadbutton:hover {
a.downloadbutton:hover { color: white;
color: white; background-color: #0D6769;
background-color: #0D6769; }
} </style>
</style>
<h2>Client pack</h2>
<h2>Client pack</h2> <table style="width:100%">
<table style="width:100%"> <tr>
<tr> <th>Environment</th>
<th>Environment</th> <th>Name</th>
<th>Name</th> <th>Version</th>
<th>Version</th> <th>Minecraft Version</th>
<th>Minecraft Version</th> <th>Release Date</th>
<th>Release Date</th> <th>Changelog</th>
<th>Changelog</th> <th>Download (Google Drive)</th>
<th>Download (Google Drive)</th> </tr>
</tr> <tr>
<tr> <td>Client</td>
<td>Client</td> <td>SVFFM</td>
<td>SVFFM</td> <td>1.2 [LATEST]</td>
<td>1.2 [LATEST]</td> <td>1.18.2</td>
<td>1.18.2</td> <td>14.08.22-17:08:51</td>
<td>14.08.22-17:08:51</td> <td>Downgraded to 1.18.2</td>
<td>Downgraded to 1.18.2</td> <td><a href="https://drive.google.com/uc?export=download&id=16NIT9XLeOt-knVs6Ae2NqF_4a9KD0DGu" class="downloadbutton">Download</a></td>
<td><a href="https://drive.google.com/uc?export=download&id=16NIT9XLeOt-knVs6Ae2NqF_4a9KD0DGu" class="downloadbutton">Download</a></td> </tr>
</tr> <tr>
<tr> <td>Client</td>
<td>Client</td> <td>SVFFM</td>
<td>SVFFM</td> <td>1.1</td>
<td>1.1</td> <td>1.19</td>
<td>1.19</td> <td>22.07.22-23:02:29</td>
<td>22.07.22-23:02:29</td> <td>Removed Dashloader; Added Zoomify</td>
<td>Removed Dashloader; Added Zoomify</td> <td><a href="https://drive.google.com/uc?export=download&id=1MDtTtsB5i-FrAWqE4powFJOUBKKpKc-F" class="downloadbutton">Download</a></td>
<td><a href="https://drive.google.com/uc?export=download&id=1MDtTtsB5i-FrAWqE4powFJOUBKKpKc-F" class="downloadbutton">Download</a></td> </tr>
</tr> <tr>
<tr> <td>Client</td>
<td>Client</td> <td>SVFFM</td>
<td>SVFFM</td> <td>1.0</td>
<td>1.0</td> <td>1.19</td>
<td>1.19</td> <td>21.07.22-23:08:43</td>
<td>21.07.22-23:08:43</td> <td>Added fabric compatible mods and own additions.</td>
<td>Added fabric compatible mods and own additions.</td> <td><a href="https://drive.google.com/uc?export=download&id=1ACfvmTH5qj46Ya6xfA4qjEzQZzhr99Qy" class="downloadbutton">Download</a></td>
<td><a href="https://drive.google.com/uc?export=download&id=1ACfvmTH5qj46Ya6xfA4qjEzQZzhr99Qy" class="downloadbutton">Download</a></td> </tr>
</tr> </table>
</table>
<h2>Server pack</h2>
<h2>Server pack</h2>
<table style="width:100%">
<table style="width:100%"> <tr>
<tr> <th>Environment</th>
<th>Environment</th> <th>Name</th>
<th>Name</th> <th>Version</th>
<th>Version</th> <th>Minecraft Version</th>
<th>Minecraft Version</th> <th>Release Date</th>
<th>Release Date</th> <th>Changelog</th>
<th>Changelog</th> <th>Download (Google Drive)</th>
<th>Download (Google Drive)</th> </tr>
</tr> <tr>
<tr> <td>Server</td>
<td>Server</td> <td>SVFFM</td>
<td>SVFFM</td> <td>SERVER-1.0 [LATEST]</td>
<td>SERVER-1.0 [LATEST]</td> <td>1.19</td>
<td>1.19</td> <td>22.07.22-23:03:56</td>
<td>22.07.22-23:03:56</td> <td>Added all server side mods.</td>
<td>Added all server side mods.</td> <td><a href="https://drive.google.com/uc?export=download&id=1_yoYXTnjo18s5byK9VC2DiDs42nO1QHn" class="downloadbutton">Download</a></td>
<td><a href="https://drive.google.com/uc?export=download&id=1_yoYXTnjo18s5byK9VC2DiDs42nO1QHn" class="downloadbutton">Download</a></td> </tr>
</tr> </table>
</table>
</div>
</div> </body>
</body>
<footer>
<footer> <link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/assets.css">
<link rel="stylesheet" href="css/assets.css"> <div id="footer">
<div id="footer"> <div id="innerFooterBox">
<div id="innerFooterBox"> <div>
<div> <a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/">
<a class="contactIcon" href="https://youtube.com/c/JonasJonesJonasJones/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="src/logos/youtube_icon.png">
<img height="25px" src="src/logos/youtube_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://github.com/J-onasJones/">
<a class="contactIcon" href="https://github.com/J-onasJones/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="src/logos/github_icon.png">
<img height="25px" src="src/logos/github_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/">
<a class="contactIcon" href="https://discord.gg/V2EsuUVmWh/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="src/logos/discord_icon.png">
<img height="25px" src="src/logos/discord_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/">
<a class="contactIcon" href="https://www.instagram.com/_jonas_jones_/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="src/logos/instagram_icon.png">
<img height="25px" src="src/logos/instagram_icon.png"> </div>
</div> </a>
</a> <a class="contactIcon" href="https://twitter.com/Jonas_Jones_/">
<a class="contactIcon" href="https://twitter.com/Jonas_Jones_/"> <div class="contactIconDiv">
<div class="contactIconDiv"> <img height="25px" src="src/logos/twitter_icon.png">
<img height="25px" src="src/logos/twitter_icon.png"> </div>
</div> </a>
</a> </div>
</div> <div class="vl"></div>
<div class="vl"></div> <div id="topLinks">
<div id="topLinks"> <h1>Quick Access</h1>
<h1>Quick Access</h1> <div><a href="404.html"><img src="src/icons/news.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="404.html"><img src="src/icons/news.png" height="23px" style="padding-right: 10px;">NEWS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="404.html"><img src="src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="404.html"><img src="src/icons/projects.png" height="23px" style="padding-right: 10px;">PROJECTS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="404.html"><img src="src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="404.html"><img src="src/icons/youtube.png" height="23px" style="padding-right: 10px;">YOUTUBE<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="404.html"><img src="src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="404.html"><img src="src/icons/downloads.svg" height="23px" style="padding-right: 10px;">DOWNLOADS<i class="arrow right" style="border-color: white;"></i></a></div> <div><a></a></div>
<div><a></a></div> <div><a href="https://jonasjones.me/#contact"><img src="src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="https://jonasjones.me/#contact"><img src="src/icons/contact.png" height="23px" style="padding-right: 10px;">CONTACT<i class="arrow right" style="border-color: white;"></i></a></div> <div><a href="https://github.com/J-onasJones/J-onasJones.github.io/blob/main/LICENSE"><img src="src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div>
<div><a href="https://github.com/J-onasJones/J-onasJones.github.io/blob/main/LICENSE"><img src="src/icons/license.png" height="23px" style="padding-right: 10px;">LICENSE <i class="arrow right" style="border-color: white;"></i></a></div> </div>
</div> </div>
</div> </div>
</div> <div class="footer-bar">
<div class="footer-bar"> <a>Website by Jonas_Jones, hosted on GitHub - 2022</a>
<a>Website by Jonas_Jones, hosted on GitHub - 2022</a> </div>
</div> </footer>
</footer>
<script>
<script> function toggleDarkMode() {
function toggleDarkMode() { var element = document.body;
var element = document.body; element.classList.toggle("dark-mode");
element.classList.toggle("dark-mode"); }
} </script>
</script>
</html>--> </html>-->

4
local_server.sh Executable file
View file

@ -0,0 +1,4 @@
#!/bin/sh
# start a local server in the root of this repository at localhost:8000
python -m http.server

35
navbar-scroll.html Normal file
View file

@ -0,0 +1,35 @@
<style>
#triangle-topleft {
position: absolute;
top: 0;
width: 1px;
height: 1px;
border-top: 200px solid #2e4e4e;
border-right: 100px solid transparent;
transition: 0.1s;
z-index: -1;
}
#triangle-topleft:hover {
border-top: 100px solid #003052;
border-right: 50px solid transparent;
}
#triangle-topleft2 {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 300px solid transparent;
transition: 0.1s;
}
body {
margin: 0%;
}
</style>
<body>
<div id="triangle-topleft2"></div>
<div id="triangle-topleft"></div>
</body>

146
old/css/custom.css Normal file → Executable file
View file

@ -1,73 +1,73 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #f1f1f1; background: #f1f1f1;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #195294; background: #195294;
} }
/* Handle on hover */ /* Handle on hover */
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #10335C; background: #10335C;
} }
/* CUSTOM COLOR CLASSES */ /* CUSTOM COLOR CLASSES */
.custom1{color:white;background-color:#10335C} .custom1{color:white;background-color:#10335C}
.custom2{background-color:#195294;color:white} .custom2{background-color:#195294;color:white}
/*SCROLL BACK TO TOP BUTTON*/ /*SCROLL BACK TO TOP BUTTON*/
#returntotop { #returntotop {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 30px; right: 30px;
z-index: 99; z-index: 99;
font-size: 18px; font-size: 18px;
border: none; border: none;
outline: none; outline: none;
background-color: #10335C; background-color: #10335C;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 2.5px; padding: 2.5px;
border-radius: 4px; border-radius: 4px;
width: 155px; width: 155px;
text-align: center; text-align: center;
} }
#returntotop:hover { #returntotop:hover {
background-color: #195294; background-color: #195294;
width: 155px; width: 155px;
} }
#myBtn1 { #myBtn1 {
z-index: 99; z-index: 99;
font-size: 18px; font-size: 18px;
border: none; border: none;
outline: none; outline: none;
background-color: white; background-color: white;
color: #10335C; color: #10335C;
cursor: pointer; cursor: pointer;
padding: 2.5px; padding: 2.5px;
border-radius: 4px; border-radius: 4px;
width: 155px; width: 155px;
text-align: center; text-align: center;
} }
#myBtn1:hover { #myBtn1:hover {
background-color: #195294; background-color: #195294;
width: 155px; width: 155px;
} }
.nobar { .nobar {
overflow-y: hidden; overflow-y: hidden;
} }
#subbutton { #subbutton {
color: white; color: white;
background-color: red; background-color: red;
border-radius: 2px; border-radius: 2px;
padding: 7px; padding: 7px;
} }

30
old/css/font-lato.css Normal file → Executable file
View file

@ -1,16 +1,16 @@
/* latin-ext */ /* latin-ext */
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} }
/* latin */ /* latin */
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }

78
old/css/font-montserat.css Normal file → Executable file
View file

@ -1,40 +1,40 @@
/* cyrillic-ext */ /* cyrillic-ext */
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} }
/* cyrillic */ /* cyrillic */
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
/* vietnamese */ /* vietnamese */
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
} }
/* latin-ext */ /* latin-ext */
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} }
/* latin */ /* latin */
@font-face { @font-face {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/montserrat/v18/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }

110
old/css/font-roboto.css Normal file → Executable file
View file

@ -1,56 +1,56 @@
/* cyrillic-ext */ /* cyrillic-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} }
/* cyrillic */ /* cyrillic */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} }
/* greek-ext */ /* greek-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF; unicode-range: U+1F00-1FFF;
} }
/* greek */ /* greek */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF; unicode-range: U+0370-03FF;
} }
/* vietnamese */ /* vietnamese */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
} }
/* latin-ext */ /* latin-ext */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} }
/* latin */ /* latin */
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} }

468
old/css/main.css Normal file → Executable file
View file

@ -1,235 +1,235 @@
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */ /* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item} article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline} audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none} audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0} a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted} abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000} b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none} sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold} button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none} button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button} button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0} button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText} button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto} legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0} [type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px} [type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none} [type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */ /* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden} html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace} .w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px} h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0} hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} .w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc} .w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1} .w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1} .w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center} .w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top} .w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px} .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap} .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none} .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none} .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%} .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none} .w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block} .w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s} .w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%} .w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc} .w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer} .w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block} .w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000} .w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000} .w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1} .w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px} .w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#1EA5F5;position:fixed;z-index:1;overflow:auto} .w3-sidebar{height:100%;width:200px;background-color:#1EA5F5;position:fixed;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%} .w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%} .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px} .w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s} .w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)} .w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px} .w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto} .w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0} .w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left} .w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal} .w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0} .w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%} .w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto} .w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before, .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} .w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%} .w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%} .w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%} .w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%} .w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%} @media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%} .w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}} .w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%} @media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%} .w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}} .w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px} .w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px} .w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell} .w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom} .w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none}.w3-show-block,.w3-show{display:block}.w3-show-inline-block{display:inline-block} .w3-hide{display:none}.w3-show-block,.w3-show{display:block}.w3-show-inline-block{display:inline-block}
@media (max-width:1205px){.w3-auto{max-width:95%}} @media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto}.w3-modal{padding-top:30px} @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative} .w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
.w3-hide-small{display:none}.w3-mobile{display:block;width:100%}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center} .w3-hide-small{display:none}.w3-mobile{display:block;width:100%}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}} .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}} @media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none}.w3-sidebar.w3-collapse{display:block}} @media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none}.w3-sidebar.w3-collapse{display:block}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none}} @media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0;margin-right:0}.w3-auto{max-width:100%}} @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0;margin-right:0}.w3-auto{max-width:100%}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0} .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2} .w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0} .w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0} .w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)} .w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)} .w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)} .w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none} .w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute} .w3-display-position{position:absolute}
.w3-circle{border-radius:50%} .w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} .w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)} .w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}} .w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}} .w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}} .w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}} .w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}} .w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}} .w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}} .w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}} .w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%} .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1} .w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75} .w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)} .w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)} .w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)} .w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px}.w3-small{font-size:12px}.w3-medium{font-size:15px}.w3-large{font-size:18px} .w3-tiny{font-size:10px}.w3-small{font-size:12px}.w3-medium{font-size:15px}.w3-large{font-size:18px}
.w3-xlarge{font-size:24px}.w3-xxlarge{font-size:36px}.w3-xxxlarge{font-size:48px}.w3-jumbo{font-size:64px} .w3-xlarge{font-size:24px}.w3-xxlarge{font-size:36px}.w3-xxxlarge{font-size:48px}.w3-jumbo{font-size:64px}
.w3-left-align{text-align:left}.w3-right-align{text-align:right}.w3-justify{text-align:justify}.w3-center{text-align:center} .w3-left-align{text-align:left}.w3-right-align{text-align:right}.w3-justify{text-align:justify}.w3-center{text-align:center}
.w3-border-0{border:0}.w3-border{border:1px solid #ccc} .w3-border-0{border:0}.w3-border{border:1px solid #ccc}
.w3-border-top{border-top:1px solid #ccc}.w3-border-bottom{border-bottom:1px solid #ccc} .w3-border-top{border-top:1px solid #ccc}.w3-border-bottom{border-bottom:1px solid #ccc}
.w3-border-left{border-left:1px solid #ccc}.w3-border-right{border-right:1px solid #ccc} .w3-border-left{border-left:1px solid #ccc}.w3-border-right{border-right:1px solid #ccc}
.w3-topbar{border-top:6px solid #ccc}.w3-bottombar{border-bottom:6px solid #ccc} .w3-topbar{border-top:6px solid #ccc}.w3-bottombar{border-bottom:6px solid #ccc}
.w3-leftbar{border-left:6px solid #ccc}.w3-rightbar{border-right:6px solid #ccc} .w3-leftbar{border-left:6px solid #ccc}.w3-rightbar{border-right:6px solid #ccc}
.w3-section,.w3-code{margin-top:16px;margin-bottom:16px} .w3-section,.w3-code{margin-top:16px;margin-bottom:16px}
.w3-margin{margin:16px}.w3-margin-top{margin-top:16px}.w3-margin-bottom{margin-bottom:16px} .w3-margin{margin:16px}.w3-margin-top{margin-top:16px}.w3-margin-bottom{margin-bottom:16px}
.w3-margin-left{margin-left:16px}.w3-margin-right{margin-right:16px} .w3-margin-left{margin-left:16px}.w3-margin-right{margin-right:16px}
.w3-padding-small{padding:4px 8px}.w3-padding{padding:8px 16px}.w3-padding-large{padding:12px 24px} .w3-padding-small{padding:4px 8px}.w3-padding{padding:8px 16px}.w3-padding-large{padding:12px 24px}
.w3-padding-16{padding-top:16px;padding-bottom:16px}.w3-padding-24{padding-top:24px;padding-bottom:24px} .w3-padding-16{padding-top:16px;padding-bottom:16px}.w3-padding-24{padding-top:24px;padding-bottom:24px}
.w3-padding-32{padding-top:32px;padding-bottom:32px}.w3-padding-48{padding-top:48px;padding-bottom:48px} .w3-padding-32{padding-top:32px;padding-bottom:32px}.w3-padding-48{padding-top:48px;padding-bottom:48px}
.w3-padding-64{padding-top:64px;padding-bottom:64px} .w3-padding-64{padding-top:64px;padding-bottom:64px}
.w3-padding-top-64{padding-top:64px}.w3-padding-top-48{padding-top:48px} .w3-padding-top-64{padding-top:64px}.w3-padding-top-48{padding-top:48px}
.w3-padding-top-32{padding-top:32px}.w3-padding-top-24{padding-top:24px} .w3-padding-top-32{padding-top:32px}.w3-padding-top-24{padding-top:24px}
.w3-left{float:left}.w3-right{float:right} .w3-left{float:left}.w3-right{float:right}
.w3-button:hover{color:#000;background-color:#ccc} .w3-button:hover{color:#000;background-color:#ccc}
.w3-transparent,.w3-hover-none:hover{background-color:transparent} .w3-transparent,.w3-hover-none:hover{background-color:transparent}
.w3-hover-none:hover{box-shadow:none} .w3-hover-none:hover{box-shadow:none}
/* Colors */ /* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000;background-color:#ffc107} .w3-amber,.w3-hover-amber:hover{color:#000;background-color:#ffc107}
.w3-aqua,.w3-hover-aqua:hover{color:#000;background-color:#00ffff} .w3-aqua,.w3-hover-aqua:hover{color:#000;background-color:#00ffff}
.w3-blue,.w3-hover-blue:hover{color:#fff;background-color:#2196F3} .w3-blue,.w3-hover-blue:hover{color:#fff;background-color:#2196F3}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000;background-color:#87CEEB} .w3-light-blue,.w3-hover-light-blue:hover{color:#000;background-color:#87CEEB}
.w3-brown,.w3-hover-brown:hover{color:#fff;background-color:#795548} .w3-brown,.w3-hover-brown:hover{color:#fff;background-color:#795548}
.w3-cyan,.w3-hover-cyan:hover{color:#000;background-color:#00bcd4} .w3-cyan,.w3-hover-cyan:hover{color:#000;background-color:#00bcd4}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff;background-color:#607d8b} .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff;background-color:#607d8b}
.w3-green,.w3-hover-green:hover{color:#fff;background-color:#4CAF50} .w3-green,.w3-hover-green:hover{color:#fff;background-color:#4CAF50}
.w3-light-green,.w3-hover-light-green:hover{color:#000;background-color:#8bc34a} .w3-light-green,.w3-hover-light-green:hover{color:#000;background-color:#8bc34a}
.w3-indigo,.w3-hover-indigo:hover{color:#fff;background-color:#3f51b5} .w3-indigo,.w3-hover-indigo:hover{color:#fff;background-color:#3f51b5}
.w3-khaki,.w3-hover-khaki:hover{color:#000;background-color:#f0e68c} .w3-khaki,.w3-hover-khaki:hover{color:#000;background-color:#f0e68c}
.w3-lime,.w3-hover-lime:hover{color:#000;background-color:#cddc39} .w3-lime,.w3-hover-lime:hover{color:#000;background-color:#cddc39}
.w3-orange,.w3-hover-orange:hover{color:#000;background-color:#ff9800} .w3-orange,.w3-hover-orange:hover{color:#000;background-color:#ff9800}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff;background-color:#ff5722} .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff;background-color:#ff5722}
.w3-pink,.w3-hover-pink:hover{color:#fff;background-color:#e91e63} .w3-pink,.w3-hover-pink:hover{color:#fff;background-color:#e91e63}
.w3-purple,.w3-hover-purple:hover{color:#fff;background-color:#9c27b0} .w3-purple,.w3-hover-purple:hover{color:#fff;background-color:#9c27b0}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff;background-color:#673ab7} .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff;background-color:#673ab7}
.w3-red,.w3-hover-red:hover{color:#fff;background-color:#f44336} .w3-red,.w3-hover-red:hover{color:#fff;background-color:#f44336}
.w3-sand,.w3-hover-sand:hover{color:#000;background-color:#fdf5e6} .w3-sand,.w3-hover-sand:hover{color:#000;background-color:#fdf5e6}
.w3-teal,.w3-hover-teal:hover{color:#fff;background-color:#009688} .w3-teal,.w3-hover-teal:hover{color:#fff;background-color:#009688}
.w3-yellow,.w3-hover-yellow:hover{color:#000;background-color:#ffeb3b} .w3-yellow,.w3-hover-yellow:hover{color:#000;background-color:#ffeb3b}
.w3-white,.w3-hover-white:hover{color:#000;background-color:#fff} .w3-white,.w3-hover-white:hover{color:#000;background-color:#fff}
.w3-black,.w3-hover-black:hover{color:#fff;background-color:#000} .w3-black,.w3-hover-black:hover{color:#fff;background-color:#000}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000;background-color:#9e9e9e} .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000;background-color:#9e9e9e}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000;background-color:#f1f1f1} .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000;background-color:#f1f1f1}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff;background-color:#616161} .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff;background-color:#616161}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000;background-color:#ffdddd} .w3-pale-red,.w3-hover-pale-red:hover{color:#000;background-color:#ffdddd}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000;background-color:#ddffdd} .w3-pale-green,.w3-hover-pale-green:hover{color:#000;background-color:#ddffdd}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000;background-color:#ffffcc} .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000;background-color:#ffffcc}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000;background-color:#ddffff} .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000;background-color:#ddffff}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107} .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff} .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3} .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB} .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548} .w3-text-brown,.w3-hover-text-brown:hover{color:#795548}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4} .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b} .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50} .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a} .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5} .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50} .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39} .w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800} .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722} .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63} .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0} .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7} .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336} .w3-text-red,.w3-hover-text-red:hover{color:#f44336}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6} .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688} .w3-text-teal,.w3-hover-text-teal:hover{color:#009688}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e} .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e}
.w3-text-white,.w3-hover-text-white:hover{color:#fff} .w3-text-white,.w3-hover-text-white:hover{color:#fff}
.w3-text-black,.w3-hover-text-black:hover{color:#000} .w3-text-black,.w3-hover-text-black:hover{color:#000}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575} .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1} .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a} .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107} .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff} .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3} .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB} .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548} .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4} .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b} .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50} .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a} .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5} .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c} .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39} .w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800} .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722} .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63} .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0} .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7} .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336} .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6} .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688} .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b} .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff} .w3-border-white,.w3-hover-border-white:hover{border-color:#fff}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000} .w3-border-black,.w3-hover-border-black:hover{border-color:#000}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e} .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1} .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161} .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7} .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff} .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff}

6
old/downloads/dbpjp/404.html Normal file → Executable file
View file

@ -1,4 +1,4 @@
<title>Error 404: Not Found</title> <title>Error 404: Not Found</title>
<h1>Whopps, it looks like this page doesn't exist. has it been deleted or has it never existed? Buy a <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">premium subscription or check out for free</a> to get the answer.</h1> <h1>Whopps, it looks like this page doesn't exist. has it been deleted or has it never existed? Buy a <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">premium subscription or check out for free</a> to get the answer.</h1>
<h1 style="font-size: 1000%;text-align: center;">404</h1> <h1 style="font-size: 1000%;text-align: center;">404</h1>

0
old/downloads/dbpjp/account.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

66
old/downloads/dbpjp/assets.css Normal file → Executable file
View file

@ -1,34 +1,34 @@
.arrow { .arrow {
border: solid black; border: solid black;
border-width: 0 4px 4px 0; border-width: 0 4px 4px 0;
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
float: right; float: right;
} }
.right { .right {
transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
} }
.left { .left {
transform: rotate(135deg); transform: rotate(135deg);
-webkit-transform: rotate(135deg); -webkit-transform: rotate(135deg);
} }
.up { .up {
transform: rotate(-135deg); transform: rotate(-135deg);
-webkit-transform: rotate(-135deg); -webkit-transform: rotate(-135deg);
} }
.down { .down {
transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
} }
.vl { .vl {
border-left: 6px solid grey; border-left: 6px solid grey;
height: 375px; height: 375px;
} }

0
old/downloads/dbpjp/contact.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

66
old/downloads/dbpjp/css/assets.css Normal file → Executable file
View file

@ -1,34 +1,34 @@
.arrow { .arrow {
border: solid black; border: solid black;
border-width: 0 4px 4px 0; border-width: 0 4px 4px 0;
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
float: right; float: right;
} }
.right { .right {
transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
} }
.left { .left {
transform: rotate(135deg); transform: rotate(135deg);
-webkit-transform: rotate(135deg); -webkit-transform: rotate(135deg);
} }
.up { .up {
transform: rotate(-135deg); transform: rotate(-135deg);
-webkit-transform: rotate(-135deg); -webkit-transform: rotate(-135deg);
} }
.down { .down {
transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
} }
.vl { .vl {
border-left: 6px solid grey; border-left: 6px solid grey;
height: 375px; height: 375px;
} }

4
old/downloads/dbpjp/css/dark-mode.css Normal file → Executable file
View file

@ -1,3 +1,3 @@
.dark-mode { .dark-mode {
background-color: darkgray; background-color: darkgray;
} }

112
old/downloads/dbpjp/css/footer.css Normal file → Executable file
View file

@ -1,57 +1,57 @@
footer { footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-image: url("../src/misc/footerBg.png"); background-image: url("../src/misc/footerBg.png");
background-size: cover; background-size: cover;
z-index: -10; z-index: -10;
padding-top: 100px; padding-top: 100px;
} }
footer a { footer a {
margin: 5px; margin: 5px;
background-color: #10335C; background-color: #10335C;
} }
.contactIconDiv { .contactIconDiv {
background-color: gray; background-color: gray;
width: 31px; width: 31px;
border-radius: 5px; border-radius: 5px;
padding: 3px; padding: 3px;
padding-bottom: 0px; padding-bottom: 0px;
} }
#innerFooterBox { #innerFooterBox {
margin: 20%; margin: 20%;
margin-top: 600px; margin-top: 600px;
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
} }
#innerFooterBox div { #innerFooterBox div {
margin: 10px; margin: 10px;
} }
#toplinks { #toplinks {
flex: content; flex: content;
flex-direction: column; flex-direction: column;
} }
#topLinks a, h1 { #topLinks a, h1 {
background-color: transparent; background-color: transparent;
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 30px; font-size: 30px;
} }
#topLinks div a { #topLinks div a {
text-align: right; text-align: right;
} }
.footer-bar { .footer-bar {
background-color: black; background-color: black;
padding: 0px; padding: 0px;
color: white; color: white;
text-align: center; text-align: center;
} }
.footer-bar a { .footer-bar a {
background-color: black; background-color: black;
} }

58
old/downloads/dbpjp/css/header.css Normal file → Executable file
View file

@ -1,30 +1,30 @@
#header { #header {
position: absolute; position: absolute;
top: 60; top: 60;
width: 100%; width: 100%;
height: 500px; height: 500px;
background-image: url("../src/misc/headerBg.png"); background-image: url("../src/misc/headerBg.png");
background-position: bottom; background-position: bottom;
background-size: cover; background-size: cover;
z-index: -1; z-index: -1;
} }
#header h1 { #header h1 {
font-size: 200px; font-size: 200px;
padding-left: 70px; padding-left: 70px;
} }
.header a { .header a {
font-size: 50px; font-size: 50px;
} }
#error-msg { #error-msg {
color: #bababa; color: #bababa;
margin-left: 200px; margin-left: 200px;
margin-top: 300px; margin-top: 300px;
margin-right: 100px; margin-right: 100px;
border: 3px #bababa solid; border: 3px #bababa solid;
border-radius: 3px; border-radius: 3px;
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
} }

16
old/downloads/dbpjp/css/main.css Normal file → Executable file
View file

@ -1,9 +1,9 @@
html { html {
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
background-color: #bababa; background-color: #bababa;
} }
.body { .body {
margin-top: 200px; margin-top: 200px;
} }

386
old/downloads/dbpjp/css/topnav.css Normal file → Executable file
View file

@ -1,194 +1,194 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
} }
.navbar { .navbar {
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
z-index: 9999999; z-index: 9999999;
} }
.navbar a, button { .navbar a, button {
float: left; float: left;
font-size: 16px; font-size: 16px;
color: white; color: white;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
.navbar button { .navbar button {
background-color: none; background-color: none;
} }
.dropmenu { .dropmenu {
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
.navbar a:hover, .dropmenu:hover .dropmenubtn { .navbar a:hover, .dropmenu:hover .dropmenubtn {
background-color: #0D6769; background-color: #0D6769;
} }
.dropmenu-content { .dropmenu-content {
display: none; display: none;
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
z-index: 1; z-index: 1;
margin-top: 50px; margin-top: 50px;
} }
.dropmenu-content-content { .dropmenu-content-content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding-bottom: 2px; padding-bottom: 2px;
margin: 5px; margin: 5px;
margin-top: 10px; margin-top: 10px;
background-color: #ccc; background-color: #ccc;
border-radius: 10px; border-radius: 10px;
} }
.dropmenu-content .header-mega { .dropmenu-content .header-mega {
background: #0D6769; background: #0D6769;
padding: 16px; padding: 16px;
color: white; color: white;
border-radius: 9px 9px 0px 0px; border-radius: 9px 9px 0px 0px;
} }
#header-mega-all { #header-mega-all {
background-color: #0E5773; background-color: #0E5773;
margin: 5px; margin: 5px;
border-radius: 10px; border-radius: 10px;
} }
#header-mega-all a { #header-mega-all a {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin-left: 0px; margin-left: 0px;
font-size: 15px; font-size: 15px;
border-radius: 8px; border-radius: 8px;
} }
.dropmenu:hover .dropmenu-content { .dropmenu:hover .dropmenu-content {
display: block; display: block;
} }
/* Create three equal columns that floats next to each other */ /* Create three equal columns that floats next to each other */
.column { .column {
float: left; float: left;
width: 33.33%; width: 33.33%;
padding: 10px; padding: 10px;
background-color: #ccc; background-color: #ccc;
height: 250px; height: 250px;
} }
.column a { .column a {
float: none; float: none;
color: black; color: black;
padding: 16px; padding: 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: left; text-align: left;
} }
.column a:hover { .column a:hover {
background-color: #ddd; background-color: #ddd;
} }
/* Clear floats after the columns */ /* Clear floats after the columns */
.row:after { .row:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */ /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.column { .column {
width: 100%; width: 100%;
height: auto; height: auto;
} }
} }
.dropdown { .dropdown {
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
.navbar a:hover, .dropdown:hover .dropbtn { .navbar a:hover, .dropdown:hover .dropbtn {
background-color: #0D6769; background-color: #0D6769;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: absolute; position: absolute;
min-width: 160px; min-width: 160px;
z-index: 1; z-index: 1;
margin-top: 49px; margin-top: 49px;
border-radius: 10px; border-radius: 10px;
} }
.dropdown-content-content { .dropdown-content-content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
background-color: #0D6769; background-color: #0D6769;
margin-top: 10px; margin-top: 10px;
padding: 3px; padding: 3px;
border-radius: 10px; border-radius: 10px;
} }
.dropdown-content-content a:hover { .dropdown-content-content a:hover {
color: #0D6769; color: #0D6769;
border-radius: 8px; border-radius: 8px;
} }
.dropdown-content a { .dropdown-content a {
float: none; float: none;
color: black; color: black;
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-align: left; text-align: left;
} }
.dropdown-content a:hover { .dropdown-content a:hover {
background-color: #ddd; background-color: #ddd;
} }
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
} }
/* Navbar button style */ /* Navbar button style */
.navbarbtn, .navbar a{ .navbarbtn, .navbar a{
font-size: 16px; font-size: 16px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: white; color: white;
padding: 14px 16px; padding: 14px 16px;
background-color: inherit; background-color: inherit;
font: inherit; font: inherit;
margin: 3px; margin: 3px;
} }
.column a { .column a {
color: #0D6769; color: #0D6769;
} }
.column a:hover { .column a:hover {
color: white; color: white;
} }

0
old/downloads/dbpjp/dark-mode.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

0
old/downloads/dbpjp/discord_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Before After
Before After

8
old/downloads/dbpjp/downloads.svg Normal file → Executable file
View file

@ -1,4 +1,4 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/> <path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/>
<path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/> <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 363 B

Before After
Before After

112
old/downloads/dbpjp/footer.css Normal file → Executable file
View file

@ -1,57 +1,57 @@
footer { footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-image: url("/.src/misc/footerBg.png"); background-image: url("/.src/misc/footerBg.png");
background-size: cover; background-size: cover;
z-index: -10; z-index: -10;
padding-top: 100px; padding-top: 100px;
} }
footer a { footer a {
margin: 5px; margin: 5px;
background-color: #10335C; background-color: #10335C;
} }
.contactIconDiv { .contactIconDiv {
background-color: gray; background-color: gray;
width: 31px; width: 31px;
border-radius: 5px; border-radius: 5px;
padding: 3px; padding: 3px;
padding-bottom: 0px; padding-bottom: 0px;
} }
#innerFooterBox { #innerFooterBox {
margin: 20%; margin: 20%;
margin-top: 600px; margin-top: 600px;
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
} }
#innerFooterBox div { #innerFooterBox div {
margin: 10px; margin: 10px;
} }
#toplinks { #toplinks {
flex: content; flex: content;
flex-direction: column; flex-direction: column;
} }
#topLinks a, h1 { #topLinks a, h1 {
background-color: transparent; background-color: transparent;
color: white; color: white;
text-decoration: none; text-decoration: none;
font-size: 30px; font-size: 30px;
} }
#topLinks div a { #topLinks div a {
text-align: right; text-align: right;
} }
.footer-bar { .footer-bar {
background-color: black; background-color: black;
padding: 0px; padding: 0px;
color: white; color: white;
text-align: center; text-align: center;
} }
.footer-bar a { .footer-bar a {
background-color: black; background-color: black;
} }

0
old/downloads/dbpjp/github_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Before After
Before After

58
old/downloads/dbpjp/header.css Normal file → Executable file
View file

@ -1,30 +1,30 @@
#header { #header {
position: absolute; position: absolute;
top: 60; top: 60;
width: 100%; width: 100%;
height: 500px; height: 500px;
background-image: url("/.src/misc/headerBg.png"); background-image: url("/.src/misc/headerBg.png");
background-position: bottom; background-position: bottom;
background-size: cover; background-size: cover;
z-index: -1; z-index: -1;
} }
#header h1 { #header h1 {
font-size: 150px; font-size: 150px;
padding-left: 70px; padding-left: 70px;
} }
.header a { .header a {
font-size: 50px; font-size: 50px;
} }
#error-msg { #error-msg {
color: #bababa; color: #bababa;
margin-left: 200px; margin-left: 200px;
margin-top: 300px; margin-top: 300px;
margin-right: 100px; margin-right: 100px;
border: 3px #bababa solid; border: 3px #bababa solid;
border-radius: 3px; border-radius: 3px;
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
} }

1036
old/downloads/dbpjp/index.html Normal file → Executable file

File diff suppressed because it is too large Load diff

0
old/downloads/dbpjp/instagram_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

Before After
Before After

0
old/downloads/dbpjp/license.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before After
Before After

0
old/downloads/dbpjp/logo_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

0
old/downloads/dbpjp/logo_iconNoMargin.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

16
old/downloads/dbpjp/main.css Normal file → Executable file
View file

@ -1,9 +1,9 @@
html { html {
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
background-color: #bababa; background-color: #bababa;
} }
.body { .body {
margin-top: 500px; margin-top: 500px;
} }

0
old/downloads/dbpjp/news.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

0
old/downloads/dbpjp/projects.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/account.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/contact.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/dark-mode.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

8
old/downloads/dbpjp/src/icons/downloads.svg Normal file → Executable file
View file

@ -1,4 +1,4 @@
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/> <path d="m7 4h2v5h2l-3 3-3-3h2z" fill="#dedede"/>
<path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/> <path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm-0.09375 1a7 7 0 0 1 0.09375 0 7 7 0 0 1 7 7 7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 6.9062-7z" fill="#dedede" stroke-linecap="round" stroke-width="2"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 363 B

Before After
Before After

0
old/downloads/dbpjp/src/icons/license.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/news.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/projects.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/warning-symbolic.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

0
old/downloads/dbpjp/src/icons/youtube.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

0
old/downloads/dbpjp/src/logos/discord_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 150 KiB

Before After
Before After

0
old/downloads/dbpjp/src/logos/github_icon.png Normal file → Executable file
View file

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more