158 lines
7.3 KiB
HTML
158 lines
7.3 KiB
HTML
<!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>
|
|
<svg width="0" height="0"> <!-- clip paths for the sidebar -->
|
|
<defs>
|
|
<clipPath id="design-2" clipPathUnits="objectBoundingBox">
|
|
<path d="M 0,1
|
|
L 0,0
|
|
L 0.8,0
|
|
C 0.8 .5, 0.83 .65, 1 1
|
|
C .65 1, 0 1, 0 .8
|
|
Z" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
<div id="sider-outer" class="design-1">
|
|
<div id="sider">
|
|
<h2>Sidebar</h2>
|
|
<div id="sider-cats">
|
|
<input type="checkbox" id="i_1" class="hidden" />
|
|
<label for="i_1">Category 1</label>
|
|
<div>
|
|
<a href="#">This is a link</a><br>
|
|
<a href="#">Another link</a>
|
|
</div><br>
|
|
<input type="checkbox" id="i_2" class="hidden" />
|
|
<label for="i_2">Category 2</label>
|
|
<div>
|
|
<a href="#">Third link, new category</a><br>
|
|
<a href="#">Links.</a>
|
|
</div>
|
|
</div>
|
|
<img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
|
|
</div>
|
|
</div>
|
|
<div id="outer">
|
|
<div id="header">
|
|
<div id="head-marker" class="scrolly"></div>
|
|
<div id="headin">
|
|
<h1>Jhewit</h1>
|
|
<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="index.html">HOME</a>
|
|
</div>
|
|
<div></div>
|
|
<div class="link">
|
|
<a href="about.html">ABOUT JHEWIT</a>
|
|
</div>
|
|
<div></div>
|
|
<div class="link">
|
|
<a href="workshop.html">DESIGN WORKSHOP</a>
|
|
</div>
|
|
<div></div>
|
|
<div class="dropdown">
|
|
DROPDOWN MENU
|
|
</div>
|
|
<div>
|
|
<div class="dropdown-inner">
|
|
<a>DROPDOWN MENU LINK</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>
|
|
<div class="carousel-outer">
|
|
<img src="res/arrow-left.svg" />
|
|
<div class="carousel" id="carousel_1">
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
|
|
<div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
|
|
</div>
|
|
<img src="res/arrow-right.svg" />
|
|
</div>
|
|
<div id="content">
|
|
<h2>This is a development page for sampling new styles &c. I will be removing it for the page launch, of course.</h2>
|
|
<p>
|
|
Please select your sidebar style preference:<br></br>
|
|
<input name="sidebar-style" type="radio" value="design-1" onchange="setStyle(this.value)">Slanted Down<br>
|
|
<input name="sidebar-style" type="radio" value="design-2" onchange="setStyle(this.value)">Smooth Curve (based on your suggestion)<br>
|
|
<input name="sidebar-style" type="radio" value="design-3" onchange="setStyle(this.value)">Square (original; bad)<br>
|
|
<input name="sidebar-style" type="radio" value="design-4" onchange="setStyle(this.value)">Full Height<br>
|
|
<b>NOTE: On mobile devices, the sidebar will probably fill the whole screen. This is intentional: trying to fit it into half the screen or smaller will leave the text broken.</b>
|
|
</p>
|
|
|
|
<script>
|
|
function setStyle(valyer) {
|
|
document.getElementById("sider-outer").className = valyer;
|
|
}
|
|
Array.from(document.getElementsByTagName("input")).forEach(item => {
|
|
if (item.name == "sidebar-style") {
|
|
if (item.checked) {
|
|
setStyle(item.value);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</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>
|
|
The footer is good for a quick About blurb, social icons, etc.
|
|
</p>
|
|
</div>
|
|
<div id="truebottom">
|
|
Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
|
|
</div>
|
|
</div>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |