bike

author: 1970-01-01 00:00:00 +0000
committer: 2025-01-14 03:21:58 +0000
commit: 83d6046820018bd0abbc0c18828e1b5bd07da1e7 (patch)
tree: aae7df9ef6d36b2ce43b1a04e8b11da50c6f7886
parent: tech (diff)
download: html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar
html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.gz
html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.bz2
html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.xz
html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.zip
6 files changed, 563 insertions, 0 deletions
diff --git a/bike/css/main.css b/bike/css/main.css
new file mode 100644
index 0000000..0699fb7
--- /dev/null
+++ b/bike/css/main.css
@@ -0,0 +1,211 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+html{
+	background-color: #000000;
+	background-image: url("../i/bg.png");
+	background-repeat: no-repeat;
+	background-size: 120%;
+	color: #EEBB99;
+}
+
+body{
+	margin: auto;
+}
+
+h1,h2,h3{
+	margin: .5em;
+	font-family: "Noto Serif", serif;
+}
+
+p{
+	font-size: .95em;
+	padding-left: 3%;
+	padding-right: 3%;
+}
+
+a{
+	color: #FFC400;
+	text-decoration: none;
+}
+a:hover{
+	color: #FFF400;
+}
+
+img{
+	width: 50%;
+	padding-left: 20%;
+}
+
+video{
+	display: block;
+	max-width: 100%;
+	width: 80%;
+	padding-left: 4%;
+}
+
+hr{
+	color: #AA9988;
+}
+
+header{
+	text-align: center;
+	font-size: .9em;
+}
+header i{
+	font-size: .6em;
+	font-weight: normal;
+	display: none;
+}
+
+nav{
+	text-align: center;
+	color: #998877;
+}
+nav a{
+	font-size: 1.03em;
+	padding-left: 1%;
+	padding-right: 1%;
+}
+nav i{
+	font-size: .85em;
+	color: #FFAA77;
+	padding-left: 1%;
+	display: none;
+}
+
+main{
+	width: 95%;
+	padding: 5% 2% 5% 2%;
+}
+
+footer{
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	font-size: .8em;
+	font-family: "Noto Serif", serif;
+	background-color: #30000055;
+}
+footer p{
+	text-align: center;
+	margin: .0%;
+	padding: .3%;
+	text-shadow: 3px 3px 8px #FFAA77;
+}
+
+table{
+	font-size: .8em;
+}
+table tr:nth-child(odd){
+	background-color: #332000CC;
+}
+table tr:nth-child(even){
+	background-color: #443000CC;
+}
+
+form{
+	background-color: #33200055;
+	outline: none;
+}
+fieldset,input,textarea{
+	margin-bottom: 2%;
+	border-color: #8F8880;
+}
+fieldset legend{
+	font-weight: bold;
+	font-size: 1.25em;
+}
+label{
+	display: block;
+	padding-top: 1.3%;
+}
+textarea{
+	background-color: #33200088;
+	color: #FFDDBB;
+}
+
+.btn{
+	background-color: #332000CC;
+	color: #FFA000;
+	border: none;
+	font-size: 1.1em;
+	padding: 2px 3px;
+	display: inline-block;
+	border-radius: 3px;
+	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(200,160,100,.7);
+}
+.btn:hover{
+	color: #DDC000;
+	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(220,180,18,18.17);
+}
+nav .btn:nth-last-child(-n+3){
+	color: #CCB000;
+	font-size: .98em;
+}
+
+@media screen and (min-width:600px),print{
+	.grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 0px;
+	}
+
+	body{
+		width: 95%;
+	}
+
+	header{
+		width: 90%;
+	}
+
+	nav{
+		width: 95%;
+	}
+
+	footer{
+		width: 95%;
+	}
+
+	table{
+		font-size: .9em;
+	}
+
+	.btn{
+		font-size: 1.2em;
+		padding: 3px 5px;
+	}
+}
+
+@media screen and (min-width:900px),print{
+	body{
+		width: 85%;
+	}
+
+	header{
+		width: 80%;
+	}
+	header i{
+		display: inline;
+	}
+
+	nav{
+		width: 85%;
+	}
+	nav i{
+		display: inline;
+	}
+
+	main{
+		width: 70%;
+		padding: 3% 12% 3% 12%;
+	}
+
+	footer{
+		width: 85%;
+	}
+
+	table{
+		font-size: 1em;
+	}
+}
diff --git a/bike/guides/index.html b/bike/guides/index.html
new file mode 100644
index 0000000..fb97e69
--- /dev/null
+++ b/bike/guides/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/fav.png">
+<title>Bike Mastery: Guides</title></head><body>
+
+<header>
+	<h1>Our Guides
+	<i>Bike Mastery</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="" class="btn">Guides</a>
+	<a href="../parts" class="btn">Parts</a>
+	<a href="../order" class="btn">Order</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/bike_mastery" class="btn">Source</a>
+	<i>Bike Mastery / Guides</i>
+</nav>
+
+<main class="grid"><div>
+	<h2>Video Guides</h2><hr>
+	<video controls poster="../i/thumbnail.png">
+		<source src="../v/example.webm" type="video/webm">
+		<source src="../v/example.mp4" type="video/mp4">
+		<p>The video isn't loading. Try using a different browser</p>
+	</video>
+	<h3>The Ultimate Guide to Understanding Your Bike</h3><br>
+	<video controls poster="../i/thumbnail.png">
+		<source src="../v/example.webm" type="video/webm">
+		<source src="../v/example.mp4" type="video/mp4">
+		<p>The video isn't loading. Try using a different browser</p>
+	</video>
+	<h3>Knowing When a Bike Part Needs Replaced</h3><br>
+
+	<video controls poster="../i/thumbnail.png">
+		<source src="../v/example.webm" type="video/webm">
+		<source src="../v/example.mp4" type="video/mp4">
+		<p>The video isn't loading. Try using a different browser</p>
+	</video>
+	<h3>How to Properly Adjust Your Bike Seat</h3><br>
+	<video controls poster="../i/thumbnail.png">
+		<source src="../v/example.webm" type="video/webm">
+		<source src="../v/example.mp4" type="video/mp4">
+		<p>The video isn't loading. Try using a different browser</p>
+	</video>
+	<h3>Tire Replacement Guide</h3><br>
+</div>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/guides_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/guides_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/bike/index.html b/bike/index.html
new file mode 100644
index 0000000..08b22f2
--- /dev/null
+++ b/bike/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="css/main.css">
+<link rel="shortcut icon" href="i/fav.png">
+<title>Bike Mastery: Home</title></head><body>
+
+<header>
+	<h1>Welcome to Bike Mastery</h1>
+</header>
+
+<nav>
+	<a href="" class="btn">Home</a>
+	<a href="guides" class="btn">Guides</a>
+	<a href="parts" class="btn">Parts</a>
+	<a href="order" class="btn">Order</a>
+	<a href="template" class="btn">Template</a>
+	<a href="http://github.com/4stc/bike_mastery" class="btn">Source</a>
+	<i>Bike Mastery / Homepage</i>
+</nav>
+
+<main class="grid"><div>
+	<img src="i/.png" alt="">
+	<p>Welcome! Our mission is to help get you riding again. We believe
+	every bicyclist should understand their bike and have the skills to
+	repair, customize, and personalize it to their heart's content. Bike
+	Mastery is a central hub for excellent video guides and a seller of
+	high quality bike parts shipped directly to you.</p>
+</div><div>
+	<h2>Sitemap</h2>
+	<ul>
+		<li><a href="">Homepage</a></li>
+		<li><a href="guides">Guides</a></li>
+		<li><a href="parts">Parts</a></li>
+		<li><a href="order">Order</a></li>
+		<li><a href="template">Template</a></li>
+	</ul>
+</div></main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="i/home_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="i/home_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/bike/order/index.html b/bike/order/index.html
new file mode 100644
index 0000000..efa2169
--- /dev/null
+++ b/bike/order/index.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/fav.png">
+<title>Bike Mastery: Your Order</title></head><body>
+
+<header>
+	<h1>Your Order
+	<i>Bike Mastery</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../guides" class="btn">Guides</a>
+	<a href="../parts" class="btn">Parts</a>
+	<a href="" class="btn">Order</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/bike_mastery" class="btn">Source</a>
+	<i>Bike Mastery / Order</i>
+</nav>
+
+<main>
+	<h2>Place an Order</h2>
+	<p>We ship directly to you within 3 to 5 business days!</p>
+	<form class="grid">
+		<fieldset>
+				<legend>Your Info</legend>
+				<label for="name">Full Name:</label>
+				<input type="text" name="name" id="name">
+				<label for="name">Address:</label>
+				<input type="text" name="addr" id="addr">
+				<label for="mail">E-Mail:</label>
+				<input type="text" name="mail" id="mail">
+				<label for="tel">Phone:</label>
+				<input type="tel" name="tel" id="tel">
+				<label><br>Payment Method:</label>
+				<label for="card"><input type="radio" name="payment"
+					id="card" value="Card">
+				Card</label>
+				<label for="check"><input type="radio" name="payment"
+					id="check" value="Check">
+				Check</label>
+				<label for="gift"><input type="radio" name="payment"
+					id="gift" value="Gift Card">
+				Gift Card</label>
+		</fieldset>
+		<fieldset>
+				<legend>Select Parts</legend>
+				<label for="item1"><input type="checkbox" name="parts"
+					id="item1">
+				Wheels (ID #1)</label>
+				<label for="item2"><input type="checkbox" name="parts"
+					id="item2">
+				Tires (ID #2)</label>
+				<label for="item3"><input type="checkbox" name="parts"
+					id="item3">
+				Seat (ID #3)</label>
+				<label for="item4"><input type="checkbox" name="parts"
+					id="item4">
+				Pedals (ID #4)</label>
+				<label for="item5"><input type="checkbox" name="parts"
+					id="item5">
+				Wheels (ID #5)</label>
+				<label for="item6"><input type="checkbox" name="parts"
+					id="item6">
+				Tires (ID #6)</label>
+				<label for="item7"><input type="checkbox" name="parts"
+					id="item7">
+				Handlebar (ID #7)</label>
+				<label for="item8"><input type="checkbox" name="parts"
+					id="item8">
+				Handlebar Grips (ID #8)</label>
+				<label for="req">Any Requests?</label>
+				<textarea name="req" id="req" rows="6">
+				</textarea>
+		</fieldset>
+		<input type="reset" class="btn" value="Clear">
+		<input type="submit" id="submit" class="btn" value="Send">
+	</form>
+</main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/order_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/order_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/bike/parts/index.html b/bike/parts/index.html
new file mode 100644
index 0000000..dc03fa2
--- /dev/null
+++ b/bike/parts/index.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/fav.png">
+<title>Bike Mastery: Parts</title></head><body>
+
+<header>
+	<h1>Parts Inventory
+	<i>Bike Mastery</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../guides" class="btn">Guides</a>
+	<a href="" class="btn">Parts</a>
+	<a href="../order" class="btn">Order</a>
+	<a href="../template" class="btn">Template</a>
+	<a href="http://github.com/4stc/bike_mastery" class="btn">Source</a>
+	<i>Bike Mastery / Parts</i>
+</nav>
+
+<main class="grid"><div>
+	<h2>Bike Parts</h2>
+	<p>Here you can see our current supply of bike parts.</p>
+</div><div>
+	<table>
+		<caption>Our Inventory</caption>
+		<tr>
+			<th>ID</th>
+			<th>Brand</th>
+			<th>Item</th>
+			<th>Color</th>
+			<th>Stock</th>
+			<th>Cost</th>
+		</tr><tr>
+			<td>1</td>
+			<td>Best Bike Co.</td>
+			<td>26x2.125 Inch Wheels</td>
+			<th>Silver</th>
+			<td>23</td>
+			<td>$125</td>
+		</tr><tr>
+			<td>2</td>
+			<td>Best Bike Co.</td>
+			<td>26x2.125 Inch Tires</td>
+			<th>Dark Grey</th>
+			<td>19</td>
+			<td>$90</td>
+		</tr><tr>
+			<td>3</td>
+			<td>Best Bike Co.</td>
+			<td>Seat/Saddle</td>
+			<th>Black</th>
+			<td>22</td>
+			<td>$55</td>
+		</tr><tr>
+			<td>4</td>
+			<td>Best Bike Co.</td>
+			<td>Pedals</td>
+			<th>Silver</th>
+			<td>24</td>
+			<td>$45</td>
+		</tr><tr>
+			<td>5</td>
+			<td>Tough Bike Co.</td>
+			<td>26x3 Inch Heavy-Duty Wheels</td>
+			<th>Black</th>
+			<td>17</td>
+			<td>$160</td>
+		</tr><tr>
+			<td>6</td>
+			<td>Tough Bike Co.</td>
+			<td>26x3 Inch All-Terrain Tires</td>
+			<th>Black</th>
+			<td>16</td>
+			<td>$125</td>
+		</tr><tr>
+			<td>7</td>
+			<td>Best Bike Co.</td>
+			<td>Handlebar</td>
+			<th>Silver</th>
+			<td>21</td>
+			<td>$55</td>
+		</tr><tr>
+			<td>8</td>
+			<td>Best Bike Co.</td>
+			<td>Handlebar Grips</td>
+			<th>Dark Grey</th>
+			<td>22</td>
+			<td>$35</td>
+		</tr>
+	</table>
+</div></main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/parts_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/parts_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
diff --git a/bike/template/index.html b/bike/template/index.html
new file mode 100644
index 0000000..09e4faf
--- /dev/null
+++ b/bike/template/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="../css/main.css">
+<link rel="shortcut icon" href="../i/fav.png">
+<title>Bike Mastery: Template</title></head><body>
+
+<header>
+	<h1>Template Page
+	<i>Bike Mastery</i></h1>
+</header>
+
+<nav>
+	<a href=".." class="btn">Home</a>
+	<a href="../guides" class="btn">Guides</a>
+	<a href="../parts" class="btn">Parts</a>
+	<a href="../order" class="btn">Order</a>
+	<a href="" class="btn">Template</a>
+	<a href="http://github.com/4stc/bike_mastery" class="btn">Source</a>
+	<i>Bike Mastery / Template</i>
+</nav>
+
+<main class="grid"><div>
+	<h2>Column 1</h2>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+	sed do eiusmod tempor incididunt ut labore et dolore magna
+	aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+	ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div><div>
+	<h2>Column 2</h2>
+	<h3>Example List</h3>
+	<ul>
+		<li>example one</li>
+		<li>example two</li>
+		<li>example three</li>
+	</ul>
+	<h3>Another Example</h3>
+	<ul>
+		<li>example one</li>
+		<li>example two</li>
+		<li>example three</li>
+	</ul>
+</div></main>
+
+<footer>
+	<p>Made by Name Surname |
+	<a href="../i/template_mobile.png" target="_blank">Mobile Wireframe</a> |
+	<a href="../i/template_desktop.png" target="_blank">Desktop Wireframe</a>
+	</p>
+</footer>
+
+</body></html>
author		1970-01-01 00:00:00 +0000
committer		2025-01-14 03:21:58 +0000
commit	83d6046820018bd0abbc0c18828e1b5bd07da1e7 (patch)
tree	aae7df9ef6d36b2ce43b1a04e8b11da50c6f7886
parent	tech (diff)
download	html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.gz html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.bz2 html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.tar.xz html-83d6046820018bd0abbc0c18828e1b5bd07da1e7.zip