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" >😎 ;😎 ;😎 ; </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 >
0 commit comments