admin/avrahamsociety
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

things work on mobile now

Browse Source
This commit is contained in:
Lazy Hippopotamus
2023-06-14 19:31:48 -04:00
parent 667ac446e6
commit 64d643267c
6 changed files with 420 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
index.html
View File

@@ -1,13 +1,22 @@
<!DOCTYPE html>
<!--
Kuwait flag colors:
Green: #007b3a
Red: #cf0821
Black: black
White: white
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body class="sidebar-opened">
<body>
<div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2>
@@ -25,7 +34,7 @@
<a href="#">Links.</a>
</div>
</div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
<img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
</div>
</div>
<div id="outer">
@@ -33,32 +42,52 @@
<div id="head-marker" class="scrolly"></div>
<div id="headin">
<h1>Jhewit</h1>
<div id="links">
<div class="link">
<a href="#">LINK 1</a>
</div>
<div></div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
<div id="links-outer">
<input id="hambugha" type="checkbox" style="display: none;">
<label for="hambugha">Ham</label>
<div id="links">
<div class="link">
<a href="#">LINK 1</a>
</div>
</div>
<!--<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<div></div>
<div class="dropdown">
HI
</div>
</div>-->
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<!--<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div>
</div>-->
</div>
</div>
</div>
</div>
@@ -82,36 +111,46 @@
<img src="res/arrow-right.svg" />
</div>
<div id="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!
<div class="image-relational-scrolling">
<div>
<img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
<img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
<img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
<img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
<img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
</div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
</p>
</div>
</div>
</div>
<div id="footer">
<p>
This is a footer for content to go into.
</p>
<p>
This is another part of the footer for more content.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit.
</p>
</div>
<div id="truebottom">
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
</div>
</div>
<script src="main.js"></script>

146
main.css
View File

@@ -33,7 +33,7 @@ h1 {
#header {
text-align: center;
padding-top: 10%;
padding-top: 6%;
padding-bottom: 10%;
min-height: 80vh;
box-sizing: border-box;
@@ -94,12 +94,16 @@ body {
}
#headin {
padding-bottom: 2%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 2%;
z-index: 10000000;
box-sizing: border-box;
}
#hambugha + label {
display: none;
}
h1 {
@@ -112,6 +116,7 @@ h1 {
#head-marker.scrolly-out + #headin {
position: fixed;
justify-content: space-between;
transition: background-color 0.3s, color 0.3s;
top: 0px;
left: 0px;
@@ -119,6 +124,7 @@ h1 {
margin-left: var(--sidebar-size);
width: calc(100vw - var(--sidebar-size));
/*width: 100vw;*/
background-color: white;
}
#head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
@@ -161,15 +167,14 @@ body:not(.sidebar-opened) > #sider-outer > #sider > img {
left: 0px;
padding-left: 10px;
background-color: red;
border-radius: 20px;
padding: 20px;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
#sider > img {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
}
@@ -219,12 +224,6 @@ a:hover {
color: darkgreen;
}
@media (max-width: 1000px) {
#headin {
flex-direction: column;
}
}
.carousel > div {
min-width: max(15vw, 15vh);
min-height: max(15vw, 15vh);
@@ -301,4 +300,129 @@ h1 {
.carousel-outer > img:last-child {
right: 2vw;
text-align: center;
}
.image-relational-scrolling {
display: flex;
justify-content: space-between;
}
.image-relational-scrolling > div:last-child > p:last-child {
padding-bottom: 25vh;
}
.image-relational-scrolling > div:last-child > p {
padding-bottom: 75px;
max-width: 600px;
}
.image-relational-scrolling > div:first-child {
min-width: 30vw;
max-width: 30vw;
box-sizing: border-box;
position: sticky;
top: calc(25vh);
left: 0px;
overflow: hidden;
align-self: flex-start;
}
.image-relational-scrolling > div:first-child > img {
width: 100%;
height: 0px;
box-sizing: border-box;
position: relative;
opacity: 0%;
transition: opacity 200ms;
position: absolute;
}
.image-relational-scrolling > div:first-child > img.selected {
opacity: 100%;
height: auto;
position: initial;
}
#footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-evenly;
background-color: black;
}
#footer > p {
padding: 2em;
color: white;
}
#truebottom {
background-color: black;
text-align: center;
padding: 5px;
color: white;
font-size: 0.7em;
}
.image-relational-scrolling > div:last-child > p > img {
display: none;
max-width: 100%;
}
@media (max-width: 900px) {
#footer {
grid-template-columns: 1fr;
}
.image-relational-scrolling > div:first-child {
display: none;
}
.image-relational-scrolling > div:last-child > p > img {
display: initial;
padding: 3em;
box-sizing: border-box;
}
.image-relational-scrolling {
display: flex;
justify-content: center;
}
#hambugha + label {
display: inline-block;
background-color: aliceblue;
padding: 10px;
margin: 10px;
margin-bottom: 0px;
}
#hambugha + label:hover {
background-color: grey;
}
#links {
display: flex;
visibility: hidden;
flex-direction: column;
height: 0px;
}
#links-outer {
display: flex;
flex-direction: column;
}
#links > div:nth-child(2n) {
display: none;
}
#links > div:nth-child(2n - 1):hover + div, #links > div:nth-child(2n):hover {
display: inline-block;
visibility: visible;
}
#hambugha:checked + label + #links {
visibility: visible;
}
}

44
main.js
View File

@@ -8,6 +8,21 @@ function clamp(min, val, max) {
return val;
}
function getNearestChildIndexTo(element, position) {
var nearest = undefined;
var nearestValue = Infinity;
for (var i = 0; i < element.children.length; i++){ // There isn't a short-circuit here because we have to consider for transforms. I don't think I'll be doing anything that hack but you never know.
var box = element.children[i].getBoundingClientRect();
var elPos = box.top + box.height / 2;
var distance = Math.abs(position - elPos);
if (distance < nearestValue) {
nearestValue = distance;
nearest = i;
}
}
return nearest; // If the element has any children, this is guaranteed to be well-defined.
}
const scrollchecks = () => {
var el = document.getElementById("header");
el.style.backgroundPositionY = 50 + (document.documentElement.scrollTop/el.scrollHeight) / 2 * 100 + "%";
@@ -41,8 +56,35 @@ const scrollchecks = () => {
var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1);
document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em";
document.querySelector("#links").style.opacity = perc;
document.querySelector("#hambugha + label").style.opacity = perc;
//document.querySelector("#carousel").style.opacity = perc;
document.querySelector("#sider > img").style.top = clamp(15, 100 * (document.querySelector("#headin > h1").getBoundingClientRect().top / window.innerHeight), 100) + "%";
Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(element => {
let sel = getNearestChildIndexTo(element.children[1], window.innerHeight / 2);
for (var i = 0; i < element.children[0].children.length; i++){
if (i == sel) {
element.children[0].children[i].classList.add("selected");
}
else {
element.children[0].children[i].classList.remove("selected");
}
}
});
};
window.addEventListener("load", () => {
Array.from(document.getElementsByClassName("image-relational-scrolling")).forEach(imagerelational => {
var row1 = imagerelational.children[0];
var row2 = imagerelational.children[1];
for (var i = 0; i < row1.children.length; i ++) {
var el = row1.children[i].cloneNode();
//el.classList.add("nearest-ignore");
row2.children[i].prepend(el);
}
});
});
window.addEventListener("scroll", scrollchecks);
window.addEventListener("scrollend", scrollchecks);
window.addEventListener("wheel", scrollchecks);
@@ -120,6 +162,6 @@ function toggle_sidebar() {
el.src = "res/arrow-left.svg";
}
else {
el.src = "res/arrow-right.svg";
el.src = "res/arrow-none.svg";
}
}

52
res/arrow-none.svg Normal file
View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="67.722931mm"
height="248.83067mm"
viewBox="0 0 67.722931 248.83067"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="arrow-left.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.37721168"
inkscape:cx="165.68946"
inkscape:cy="532.8573"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0.23499242,-0.29279519)">
<path
id="path627"
style="fill:none;stroke:none;stroke-width:2.423;stop-color:#000000"
d="m 12.891763,74.516068 v -5.12e-4" />
<path
id="path625"
style="fill:none;stroke:none;stroke-width:2.423;stop-color:#000000"
d="M 66.415659,248.55925 1.2877685,124.70778 66.415471,0.85665987" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

56
src/_index.html
View File

@@ -1,30 +1,26 @@
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta laborum, debitis rem veritatis ratione non minima nulla
necessitatibus doloremque omnis blanditiis, sed repellat alias ipsum sit, amet neque reprehenderit! Ipsam!
<div class="image-relational-scrolling">
<div>
<img src="https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg" class="selected" />
<img src="https://www.badeloftusa.com/wp-content/uploads/2019/09/BW-02-XL-WHT-2020.jpg" />
<img src="https://www.applesfromny.com/wp-content/uploads/2020/05/20Ounce_NYAS-Apples2.png" />
<img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/pi_gqp5ha.jpg" />
<img src="https://www.thespruceeats.com/thmb/wiFS2z1vLTt3fHKDVaka5KiWshI=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/basic-cherry-pie-recipe-995136-14-dfe79487adf64a848a49dd07983b6614.jpg" />
</div>
<div>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus optio ratione sit. Quibusdam veritatis nemo distinctio dolorem doloribus quos ullam, quisquam consectetur numquam ab fuga sint, nostrum corporis dolor iusto! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam consequatur suscipit vitae similique nulla animi inventore nisi perferendis eos, itaque nobis odit ut facilis tempore rerum delectus unde ducimus fuga.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, quam quisquam. Iste veniam ut velit. Voluptatem laborum repellat, aliquid nisi earum nesciunt eius voluptatum at quis sint perferendis eos dolore. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat temporibus omnis excepturi tempore! Illo maxime vel dolor nulla, velit iure. Dolore asperiores accusantium sunt obcaecati nam doloremque suscipit laborum animi!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit labore ut nihil, tempore quis mollitia voluptates magni? Tenetur, corporis voluptates quia earum blanditiis molestias dignissimos provident inventore aspernatur error assumenda. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, et rem. Quo corporis dolorum magnam recusandae facilis voluptatum nostrum a, in perferendis sunt numquam maiores corrupti sed excepturi repudiandae. Tempora!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum accusamus aliquam commodi voluptates laborum, quia sint facilis dolores aliquid eaque repellat dolor dolorem? Temporibus et rem dolorum neque excepturi optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, adipisci rem natus magni eum ducimus alias tempore reprehenderit nulla architecto eveniet a nemo non quis ipsum quo officiis, vel sit!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
</p>
</div>
</div>

95
src/template.html
View File

@@ -1,13 +1,22 @@
<!DOCTYPE html>
<!--
Kuwait flag colors:
Green: #007b3a
Red: #cf0821
Black: black
White: white
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jhewit | Home</title>
<link rel="stylesheet" href="main.css" />
</head>
<body class="sidebar-opened">
<body>
<div id="sider-outer">
<div id="sider">
<h2>Sidebar</h2>
@@ -25,7 +34,7 @@
<a href="#">Links.</a>
</div>
</div>
<img src="res/arrow-left.svg" onclick="toggle_sidebar()" />
<img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
</div>
</div>
<div id="outer">
@@ -33,32 +42,52 @@
<div id="head-marker" class="scrolly"></div>
<div id="headin">
<h1>Jhewit</h1>
<div id="links">
<div class="link">
<a href="#">LINK 1</a>
</div>
<div></div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
<div id="links-outer">
<input id="hambugha" type="checkbox" style="display: none;">
<label for="hambugha">Ham</label>
<div id="links">
<div class="link">
<a href="#">LINK 1</a>
</div>
</div>
<!--<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<div></div>
<div class="dropdown">
HI
</div>
</div>-->
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<div class="dropdown">
HI
</div>
<div>
<div class="dropdown-inner">
<a>TEST</a>
</div>
</div>
<!--<div>
<div class="dropdown-inner">
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
<a href="#">
LINK
</a>
</div>
</div>-->
</div>
</div>
</div>
</div>
@@ -84,6 +113,20 @@
<div id="content">
{content}
</div>
<div id="footer">
<p>
This is a footer for content to go into.
</p>
<p>
This is another part of the footer for more content.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit.
</p>
</div>
<div id="truebottom">
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
</div>
</div>
<script src="main.js"></script>
</body>