-
Notifications
You must be signed in to change notification settings - Fork 0
/
flipbook.html
66 lines (64 loc) · 2.77 KB
/
flipbook.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flip</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<div class="cover">
<img src="first.jpg" alt="Cover Image">
</div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="back">
<img src="apple.png" alt="apple Image">
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front">
<h2>Apple</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga molestiae ex perspiciatis eius? Quasi veritatis libero quisquam? Ipsum rerum porro optio, autem totam voluptatibus officiis, magnam necessitatibus impedit, rem laborum aspernatur quas dolorum eligendi.
</p>
<label class="next-btn" for="c1">Next</label>
</div>
<div class="back">
<img src="orange.png" alt="Orange Image">
<label class="back-btn" for="c1">Back</label>
</div>
</div>
<div class="flip" id="p2">
<div class="front">
<h2>Orange</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga molestiae ex perspiciatis eius? Quasi veritatis libero quisquam? Ipsum rerum porro optio, autem totam voluptatibus officiis, magnam necessitatibus impedit, rem laborum aspernatur quas dolorum eligendi.
</p>
<label class="next-btn" for="c2">Next</label>
</div>
<div class="back">
<img src="strawberry.jpg" alt="Strawberry Image">
<label class="back-btn" for="c2">Back</label>
</div>
</div>
<div class="flip" id="p3">
<div class="front">
<h2>Strawberry</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga molestiae ex perspiciatis eius? Quasi veritatis libero quisquam? Ipsum rerum porro optio, autem totam voluptatibus officiis, magnam necessitatibus impedit, rem laborum aspernatur quas dolorum eligendi.
</p>
<label class="next-btn" for="c3">Next</label>
</div>
<div class="back">
<img src="first.jpg" alt="Cover Image">
<label class="back-btn" for="c3">Back</label>
</div>
</div>
</div>
</div>
</body>
</html>