-
Notifications
You must be signed in to change notification settings - Fork 55
/
Copy pathstorage.html
executable file
·182 lines (163 loc) · 8.52 KB
/
storage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!--
Contributor Details:
Name: Peter Janic
GitHub profile link : https://github.com/PeterJanic
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#6610f2" />
<link rel="icon" type="image/ico" href="../../favicon.ico" />
<title>Utility Website</title>
<!-- Styles -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="storage.css" />
</head>
<body>
<!-- Navbar -->
<nav class="site-header sticky-top py-1 text-light">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
<a class="py-2 text-light" href="/index.html">
<i class="fa fa-cogs fa-2x" aria-hidden="true"></i>
</a>
<div class="btn-group d-none d-md-block py-2">
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Conversion Tools</button>
<div class="dropdown-menu">
<a href="/conversionTools/Angle_Conversion/angleconversions.html" class="dropdown-item">Angle Conversion Tool</a>
<a href="/conversionTools/density/density.html" class="dropdown-item">Density Conversion Tool</a>
<a href="/conversionTools/Energy/energy.html" class="dropdown-item">Energy Conversion Tool</a>
<a href="/conversionTools/fuelEfficiency/fuel.html" class="dropdown-item">Fuel Efficiency Calculator</a>
<a href="/conversionTools/image/image.html" class="dropdown-item">Image Conversion Tool</a>
<a href="/conversionTools/imagePdf/imagePdf.html" class="dropdown-item">Image to PDF Conversion Tool</a>
<a href="/conversionTools/length/length.html" class="dropdown-item">Length Conversion Tool</a>
<a href="/conversionTools/power/power.html" class="dropdown-item">Power Conversion Tool</a>
<a href="/conversionTools/pressure/pressure.html" class="dropdown-item">Pressure Conversion Tool</a>
<a href="/conversionTools/temperture/temperture.html" class="dropdown-item">Temperture Conversion Tool</a>
<a href="/conversionTools/Torque/torque.html" class="dropdown-item">Torque Conversion Tool</a>
<a href="/conversionTools/storage/storage.html" class="dropdown-item">Storage Conversion Tool</a>
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>
<div class="btn-group d-none d-md-block py-2">
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Daily Use Tools</button>
<div class="dropdown-menu">
<a href="/dailyUseTools/bmicalculator/bmi-calculator.html" class="dropdown-item">BMI Calculator</a>
<a href="/dailyUseTools/notes/notes.html" class="dropdown-item">Take Notes</a>
<a href="/dailyUseTools/passwordGenerator/passwordGenerator.html" class="dropdown-item">Password Generator</a>
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>
<div class="btn-group d-none d-md-block py-2">
<button
type="button"
class="btn btn-link text-light dropdown-toggle text-decoration-none"
data-toggle="dropdown">
Finance Tools
</button>
<div class="dropdown-menu">
<a href="financeTools/compound-interest-calculator/compoundinterestcalculator.html" class="dropdown-item">Compound Interest Calculator</a>
<a href="/financeTools/discountcalculator/discount.html" class="dropdown-item">Discount Calculator</a>
<a href="/financeTools/emiCalculator/emi-calculator.html" class="dropdown-item">EMI Calculator</a>
<a href="/financeTools/mortgageCalculator/mortgageCalc.html" class="dropdown-item">Mortgage Calculator</a>
<a href="/financeTools/retirementcalaculator/index.html" class="dropdown-item">Retirement Calculator</a>
<a href="/financeTools/service-tax-calculator/tools.html" class="dropdown-item">Service Tax Calculator</a>
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>
<div class="btn-group d-none d-md-block py-2">
<button type="button" class="btn btn-link text-light dropdown-toggle text-decoration-none" data-toggle="dropdown">Mathematical Tools</button>
<div class="dropdown-menu">
<a href="/mathmeticalTools/percentageCalculator/percentageCalculator.html" class="dropdown-item">Percentage Calculator</a>
<a href="#" class="dropdown-item">Demo</a>
</div>
</div>
</div>
</nav>
<!-- Navbar End -->
<div class="heading">
</div>
<!-- Hero Section Starts -->
<section
class="hero-section overflow-hidden py-5 mb-5 text-center text-md-left text-light"
>
<div class="container-xl">
<div class="row">
<div class="d-none d-md-block col-5 align-self-center">
<div class="hero-section__graphic position-relative m-auto">
<img src="https://i.imgur.com/oU55IyI.png" />
</div>
</div>
<div class="col align-self-center">
<h1 class="text-white mb-5">Storage Converter</h1>
<p class="lead mb-4">You can use this tool to convert storage from one unit to another. </p>
</div>
</div>
</div>
</section>
<!-- Hero Section End -->
<!-- Storage conversion tool -->
<div class="container_wrapper">
<div class="storage__wrapper">
<div class="storage__container">
<div class="value__container">
<label for="storage_value">Enter the value</label>
<br>
<input type="text" name="storage_value" id="storage_value">
<select class="storage_dropdown" name="conversion_value" id="conversion_value">
<option value="b">bits [b]</option>
<option value="B">Bytes [B]</option>
</select>
</div>
<div class="result__container">
<label for="storage_result">Result</label>
<br>
<input type="text" name="storage_result" id="storage_result" readonly>
<select class="storage_dropdown" name="conversion_result" id="conversion_result">
<option value="b">bits [b]</option>
<option value="B">Bytes [B]</option>
</select>
</div>
<div class="button__container">
<input type="button" name="Convert" value="Convert" id="convert_button">
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="border-top py-3 px-4">
<div class="row align-items-center">
<div class="col-md-6">
<p class="m-0">Copyright © 2020 Peter Janic</p>
<p class="m-0">
Page Created by
<a href="https://github.com/PeterJanic" target="_blank"
>Peter Janic</a
>
</p>
</div>
<div class="col-md-6 text-md-right">
<a href="contributors.html" target="_blank" class="text-dark"
>Contributors</a
>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
<script src="storage.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>