Website-Template/Comic book template/index.html at main · Diptenusarkar/Website-Template · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/style.css" rel="stylesheet">
	<title>Comic Book Template</title>
</head>

<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Website Title</a>
    </nav>

    <div class="container-fluid">

    	<h1 id="comic-book-title">Comic Book Title</h1>

	    <div class="container mt-4">
	        <div class="row">
	            <div class="col-md-6 offset-md-3">

	                <div class="form-group mt-3">
	                    <label id="selectVolume">Select Volume</label>
	                    <select class="form-control">
	                        <option value="1">Chapter 1</option>
	                        <option value="2">Chapter 2</option>
	                        <option value="3">Chapter 3</option>
	                        <option value="4">Chapter 4</option>
	                    </select>
	                </div>

	                <div class="btn-group mt-3" role="group">
	                    <button type="button" class="btn" id="prevBtn">Previous Page</button>
	                    <button type="button" class="btn" id="currentPageNo">1/4</button>
	                    <button type="button" class="btn" id="nextBtn">Next Page</button>
	                </div>

	            </div>

	            <div class="btn-group mt-3" role="group">
	                <button type="button" class="btn" id="zoomInBtn">Zoom in</button>
	                <button type="button" class="btn" id="currentZoomNo">100%</button>
	                <button type="button" class="btn" id="zoomOutBtn">Zoom out</button>
	            </div>

	            <img class="img-fluid" id="comic-page" src="assets/image/page_example.webp" alt="Image failed">

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/app.js"></script>
</body>
</html>