Skip to content

Commit 39c306f

Browse files
Theheavenlyprogrammer333Theheavenlyprogrammer333
authored
Add files via upload
1 parent 988ccdb commit 39c306f

19 files changed

+2734
-0
lines changed

‎LearnDecoHoverEffect.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#p1:hover{
2+
background-color:#c1121f;
3+
}
4+
#p3:hover{
5+
background-color: #c2c5aa ;
6+
}
7+
#p4:hover{
8+
background-color: #ffd97d;
9+
}
10+
#p5:hover{
11+
background-color: #adff02;
12+
}
13+
#p6:hover{
14+
background-color: #76c893;
15+
}

‎animation.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
3+
#gravi:hover{
4+
transform :scale(1.4);
5+
transition: 0.56s;
6+
}
7+
#electromagnetic:hover{
8+
transform :scale(1.4);
9+
transition: 0.56s;
10+
}
11+
.rotationalbutton:hover{
12+
transform :scale(1.4);
13+
transition: 0.56s;
14+
}
15+
.magnetism:hover{
16+
transform :scale(1.23);
17+
transition: 0.56s;
18+
}
19+
#system:hover{
20+
transform: scale(1.23);
21+
transition: 0.56s;
22+
}
23+
.kepler:hover{
24+
transform: scale(1.4);
25+
transition: 0.56s;
26+
}
27+
28+

‎bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bootstrap.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎contacts.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<link rel="stylesheet" href="/css/bootstrap.min.css">
6+
<link rel="stylesheet" href="contdeco.css">
7+
<script src="/js/bootstrap.min.js"></script>
8+
<title>contact page of taming physics!!!!!!</title>
9+
</head>
10+
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
11+
<a class="navbar-brand text-success" href="#">Taming Physics</a>
12+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
13+
<span class="navbar-toggler-icon"></span>
14+
</button>
15+
<div class="collapse navbar-collapse" id="navbarNav">
16+
<ul class="navbar-nav">
17+
<li class="nav-item active">
18+
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/">Home <span class="sr-only">(current)</span></a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/contacts.html">Contact</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link text-aquamarine" style="color: aquamarine;" href="/learn.html">Learn</a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link text-aquamarine disabled" style="color: aquamarine;" href="/demo">Demo</a>
28+
</li>
29+
</ul>
30+
</div>
31+
</nav>
32+
<body>
33+
<section id="consec">
34+
<h1>contact the below number for learning more about the coaching!</h1>
35+
</section>
36+
<br><br><br><br><br>
37+
<section id="sec">
38+
<p style="font-size: xx-large; color: red;">99575757575</p>
39+
</section>
40+
<br>
41+
<section id="emailsec">
42+
<p>e-mail:[email protected]</p>
43+
</section>
44+
45+
</body>
46+
47+
</html>

‎contdeco.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
#consec{
2+
display: flex;
3+
justify-content: center;
4+
}
5+
#sec{
6+
display: flex;
7+
justify-content: center;
8+
}
9+
#emailsec{
10+
display: flex;
11+
justify-content: center;
12+
font-size: xx-large;
13+
}

‎demo.html‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Learning Platform</title>
7+
<!-- Swiper JS CSS -->
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
9+
<style>
10+
html {
11+
height: 100%;
12+
}
13+
14+
body {
15+
margin: 0;
16+
font-family: Arial, sans-serif;
17+
min-height: 100%;
18+
position: relative;
19+
}
20+
21+
/* Animated Background */
22+
.bg {
23+
animation: slide 3s ease-in-out infinite alternate;
24+
background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
25+
bottom: 0;
26+
left: -50%;
27+
opacity: .5;
28+
position: fixed;
29+
right: -50%;
30+
top: 0;
31+
z-index: -1;
32+
}
33+
34+
.bg2 {
35+
animation-direction: alternate-reverse;
36+
animation-duration: 4s;
37+
}
38+
39+
.bg3 {
40+
animation-duration: 5s;
41+
}
42+
43+
@keyframes slide {
44+
0% {
45+
transform: translateX(-25%);
46+
}
47+
100% {
48+
transform: translateX(25%);
49+
}
50+
}
51+
52+
/* Blackboard Section */
53+
#movingbackground {
54+
padding: 20px;
55+
position: relative;
56+
}
57+
58+
#blackboard {
59+
background-color: #1a1a1a;
60+
border: 10px solid #8B4513;
61+
border-radius: 10px;
62+
padding: 20px;
63+
color: white;
64+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
65+
max-width: 800px;
66+
margin: 0 auto;
67+
}
68+
69+
#blackboard p {
70+
font-size: 1.2em;
71+
margin: 15px 0;
72+
color: #f0f0f0;
73+
}
74+
75+
.emoj {
76+
font-size: 2em;
77+
text-align: center;
78+
margin-top: 20px;
79+
}
80+
81+
/* Subjects Section */
82+
b {
83+
display: block;
84+
text-align: center;
85+
margin: 20px 0;
86+
color: #333;
87+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
88+
}
89+
90+
/* Swiper Styles */
91+
.swiper {
92+
width: 100%;
93+
max-width: 1000px;
94+
height: 400px;
95+
margin: 0 auto;
96+
border-radius: 15px;
97+
overflow: hidden;
98+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
99+
}
100+
101+
.swiper-slide {
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
105+
font-size: 3em;
106+
font-weight: bold;
107+
color: white;
108+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
109+
background-size: cover;
110+
background-position: center;
111+
}
112+
113+
.swiper-pagination-bullet {
114+
background: white;
115+
opacity: 0.7;
116+
}
117+
118+
.swiper-pagination-bullet-active {
119+
background: #09f;
120+
opacity: 1;
121+
}
122+
123+
.swiper-button-next, .swiper-button-prev {
124+
color: white;
125+
background: rgba(0, 0, 0, 0.3);
126+
width: 40px;
127+
height: 40px;
128+
border-radius: 50%;
129+
transition: all 0.3s ease;
130+
}
131+
132+
.swiper-button-next:hover, .swiper-button-prev:hover {
133+
background: rgba(0, 0, 0, 0.6);
134+
}
135+
136+
.swiper-scrollbar {
137+
background: rgba(255, 255, 255, 0.2);
138+
}
139+
140+
.swiper-scrollbar-drag {
141+
background: white;
142+
}
143+
</style>
144+
</head>
145+
<body>
146+
<!-- Animated Background Elements -->
147+
<div class="bg"></div>
148+
<div class="bg bg2"></div>
149+
<div class="bg bg3"></div>
150+
151+
<section id="movingbackground">
152+
<!-- Blackboard Section -->
153+
<div id="blackboard">
154+
<p style="font-family: cursive;" id="p3">&star; This is the best website to learn physics ~ probably you after studying here very seriously.</p>
155+
<p style="font-family: cursive;" id="p4">&star; These videos should be used by all teachers to study ~ probably your teacher after you reveal the secret behind your top rank!</p>
156+
<p style="font-family: cursive;" id="p5">&star; The sloth is the fastest now! ~ probably your friends after seeing you learn concepts way more easily than before.</p>
157+
<p class="emoj">&#128526;&#128526;&#128526;</p>
158+
</div>
159+
<!-- Blackboard Section End -->
160+
</section>
161+
162+
<b style="font-size: xx-large;">many subjects to learn ! </b>
163+
<br><br>
164+
165+
<div class="swiper">
166+
<!-- Additional required wrapper -->
167+
<div class="swiper-wrapper">
168+
<!-- Slides -->
169+
<div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1636466497217-26a8cbeaf0aa?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGh5c2ljc3xlbnwwfHwwfHx8MA%3D%3D');">Physics</div>
170+
171+
<div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1509228468518-180dd4864904?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bWF0aHN8ZW58MHx8MHx8fDA%3D');">Maths</div>
172+
173+
<div class="swiper-slide" style="background-image: url('https://plus.unsplash.com/premium_photo-1661603887154-cb5f58a51768?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fGNoZW1pc3RyeXxlbnwwfHwwfHx8MA%3D%3D');">Chemistry</div>
174+
</div>
175+
<!-- If we need pagination -->
176+
<div class="swiper-pagination"></div>
177+
178+
<!-- If we need navigation buttons -->
179+
<div class="swiper-button-prev"></div>
180+
<div class="swiper-button-next"></div>
181+
182+
<!-- If we need scrollbar -->
183+
<div class="swiper-scrollbar"></div>
184+
</div>
185+
<br><br>
186+
187+
<!-- Swiper JS -->
188+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
189+
190+
<!-- Initialize Swiper -->
191+
<script>
192+
const swiper = new Swiper('.swiper', {
193+
// Optional parameters
194+
loop: true,
195+
196+
// If we need pagination
197+
pagination: {
198+
el: '.swiper-pagination',
199+
clickable: true,
200+
},
201+
202+
// Navigation arrows
203+
navigation: {
204+
nextEl: '.swiper-button-next',
205+
prevEl: '.swiper-button-prev',
206+
},
207+
208+
// And if we need scrollbar
209+
scrollbar: {
210+
el: '.swiper-scrollbar',
211+
},
212+
213+
// Autoplay
214+
autoplay: {
215+
delay: 3000,
216+
disableOnInteraction: false,
217+
},
218+
219+
// Effect
220+
effect: 'fade',
221+
fadeEffect: {
222+
crossFade: true
223+
},
224+
});
225+
</script>
226+
</body>
227+
</html>

‎demodeco.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#container{
2+
display: flex;
3+
background-color: aquamarine;
4+
width: 90%;
5+
height: 500px;
6+
margin: 0 auto;
7+
border: 6px solid black;
8+
flex-direction: column;
9+
justify-content: center;
10+
flex-wrap: wrap;
11+
flex: start;
12+
13+
}
14+
#container div{
15+
width: 200px;
16+
height: 200px;
17+
}

0 commit comments

Comments
 (0)