-
Notifications
You must be signed in to change notification settings - Fork 0
/
neev-2.O (Physics).html
174 lines (146 loc) · 6.17 KB
/
neev-2.O (Physics).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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Physics neev-2.O(Ansh Books)</title>
<link rel="shortcut icon" type="image/x-icon" href="https://ansh-here.weebly.com/uploads/1/4/8/9/148906323/ansh_orig.png">
<style>
/* ... (existing styles) ... */
body {
font-family: sans-serif; /* Change to default sans-serif font */
margin: 0;
padding: 20px;
background-image: url('https://ansh-here.weebly.com/uploads/1/4/8/9/148906323/screenshot-2024-03-02-070627_orig.png');
background-size: cover; /* Adjust to cover the entire viewport */
background-position: center; /* Center the background image */
background-repeat: no-repeat;
background-attachment: fixed; /* Parallax effect */
color: white; /* Set text color to contrast with the background */
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
gap: 30px;
margin-top: 20px; /* Add margin-top to separate from header */
}
.chapter {
background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for readability */
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
cursor: pointer;
transition: box-shadow 0.3s, transform 0.3s; /* Added transition properties */
}
.chapter:hover {
background-color: rgba(255, 255, 255, 1); /* Solid white background on hover */
}
.chapter:active {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(0.95); /* Added scale transformation on click */
}
.chapter h2 {
font-size: 24px;
margin: 0;
color: black; /* Set text color for chapter names */
}
.horizontal-line {
border-top: 1px solid #ddd;
width: 100%;
margin: 20px 0;
}
.pop-button {
background-color: transparent;
border: none;
border-radius: 50%;
padding: 8px;
}
.pop-button img {
width: 40px;
height: 40px;
}
/* Styles for header section */
.header {
display: flex;
justify-content: space-between; /* Distribute elements evenly */
align-items: center;
margin-bottom: 20px;
}
.header a img {
width: 80px;
height: 30px;
}
.logo {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="header">
<a href="neev-2.O.html">
<img src="back-button.svg.hi-removebg-preview.png" alt="Back Button">
</a>
<div style="display: flex; align-items: center;">
<span style="flex: 1;"></span>
<img src="https://ansh-here.weebly.com/uploads/1/4/8/9/148906323/ansh_orig.png" alt="Ansh Books Logo" class="logo">
<span style="flex: 1;"></span>
</div>
</div>
<div class="container">
<a href="video.html" class="chapter">
<h2>Motion</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Force and laws of Motion</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Gravitation</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Work and Energy</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Sound</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Motivational / Doubt Session</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
<a href="https://anshbooks.weebly.com" class="chapter">
<h2>Revision</h2>
<button class="pop-button">
<img src="https://th.bing.com/th/id/R.beb02b4448937cd9bd1b2f5e53b591fa?rik=CdB9I%2fwHgBsQdw&riu=http%3a%2f%2fpluspng.com%2fimg-png%2fplay-button-png-play-button-icon-png-image-18904-512.png&ehk=tiCqS9ObQHkR8K5y5tySlZMBjs6fcPjQ%2b2Bu5eqoLYs%3d&risl=&pid=ImgRaw&r=0" alt="Pop Button">
</button>
</a>
</div>
<script>
document.body.addEventListener('click', function() {
// Add any global click event animations here
});
</script>
</body>
</html>