Untitled

<!DOCTYPE html>
<html lang="pl">
<title>Obrazek</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/bootstrap-reboot.min.css">
<body>


<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">

    <!-- The Band Section -->
    <div class="w3-container w3-content w3-center" style="max-width:800px" id="band">
        <h2 class="w3-wide">OBRÓBKA OBRAZKA</h2>
        <div id="img-box">
            <canvas id="canvas" width="600" height="600">Coś poszło nie tak</canvas>
        </div>
            <div id="adjustment">
				Red<br/>
				<input type="range" min="-50" max="50" step="0.1" class="slider custom-range" id="r-color-range" />
				<br />

				<br/>Green<br/>
				<input type="range" min="-50" max="50" step="0.1" class="slider custom-range" id="g-color-range" />
				<br />

				<br/>Blue<br/>
				<input type="range" min="-50" max="50" step="0.1" class="slider custom-range" id="b-color-range" />
				<br />

				<br/>Brightness<br/>
				<input type="range" min="-100" max="100" step="0.1" class="slider custom-range" id="brightness-range" />
				<br />

				<br/>Contrast<br/>
				<input type="range" min="0" max="255" step="0.1" value="0" class="slider custom-range" id="contrast-range" />
				<br />

				<br/>Invert<br/>
				<label class="switch">
					<input type="checkbox" class="slider2 custom-range" id="invert-range" />
					<span class="slider2 round"></span>
				</label>

				<br/>Gray Scale<br/>
				<label class="switch">
					<input type="checkbox" class="slider2 custom-range" id="gray-range" />
					<span class="slider2 round"></span>
				</label>


				<br/>Transparent<br/>
				<label class="switch">
					<input type="checkbox" class="slider2 custom-range" id="transparent-range" />
					<span class="slider2 round"></span>
				</label>


				<br />
            </div>
    </div>
</div>

<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
    <p class="w3-medium">Copyright &copy; Adrianna Winkowska</p>
</footer>


<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>