- <title>Cybersecurity Department Project</title>
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&
family=Roboto:wght@400;500&display=swap" rel="stylesheet">
9. <style>
10. * { box-sizing: border-box; margin: 0; padding: 0; }
11.
12. body {
13. font-family: 'Roboto', sans-serif;
14. background: linear-gradient(to right, #1f1c2c, #928dab);
15. display: flex;
16. flex-direction: column;
17. align-items: center;
18. min-height: 100vh;
19. color: #fff;
20. }
21. .project-title {
22. font-family: 'Montserrat', sans-serif;
23. font-size: 36px;
24. font-weight: 700;
25. text-align: center;
26. margin: 30px 0 20px 0;
27. color: #ff5722;
28. text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
29. }
30.
31. .slider {
32. position: relative;
33. width: 90%;
34. max-width: 1200px;
35. aspect-ratio: 16/9;
36. overflow: hidden;
37. border-radius: 15px;
38. box-shadow: 0 8px 25px rgba(0,0,0,0.5);
39. background: #111;
40. }
41.
42. .slides {
43. display: flex;
44. width: 100%;
45. height: 100%;
46. transition: transform 0.7s ease-in-out;
47. }
48.
49. .slide {
50. min-width: 100%;
51. height: 100%;
52. position: relative;
53. overflow: hidden;
54. display: flex;
55. justify-content: center;
56. align-items: center;
57. }
58.
59. .slide img {
60. width: 95%;
61. height: 95%;
62. object-fit: cover;
63. border-radius: 12px;
64. transition: transform 0.5s ease;
65. }
66.
67. .slide img:hover { transform: scale(1.03); }
68.
69. .caption {
70. position: absolute;
71. bottom: 20px;
72. left: 50%;
73. transform: translateX(-50%);
74. background: rgba(0,0,0,0.7);
75. color: #fff;
76. padding: 12px 25px;
77. font-size: 20px;
78. font-family: 'Montserrat', sans-serif;
79. font-weight: 500;
80. border-radius: 12px;
81. text-align: center;
82. opacity: 0;
83. animation: fadeIn 1s forwards;
84. animation-delay: 0.5s;
85. text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
86. }
87.
88. @keyframes fadeIn { to { opacity: 1; } }
89.
90. .prev, .next {
91. position: absolute;
92. top: 50%;
93. transform: translateY(-50%);
94. background: rgba(0,0,0,0.5);
95. color: white;
96. border: none;
97. padding: 16px;
98. cursor: pointer;
99. border-radius: 50%;
100. font-size: 24px;
101. transition: background 0.3s, transform 0.3s;
102. }
103.
104. .prev:hover, .next:hover { background: rgba(0,0,0,0.8);
transform: scale(1.1); }
105. .prev { left: 20px; }
106. .next { right: 20px; }
107.
108. .dots {
109. position: absolute;
110. bottom: 20px;
111. width: 100%;
112. text-align: center;
113. }
114.
115. .dots span {
116. display: inline-block;
117. height: 16px;
118. width: 16px;
119. margin: 0 5px;
120. background: #bbb;
121. border-radius: 50%;
122. cursor: pointer;
123. transition: background 0.3s, transform 0.3s;
124. }
125.
126. .dots span.active {
127. background: #ff5722;
128. transform: scale(1.3);
129. }
130.
131. .dots span:hover { background: #ff7043; }
132.
133. @media screen and (max-width: 1000px) {
134. .caption { font-size: 18px; padding: 10px 20px; }
135. .prev, .next { font-size: 22px; padding: 14px; }
136. .project-title { font-size: 28px; }
137. }
138.
139. @media screen and (max-width: 700px) {
140. .caption { font-size: 16px; padding: 8px 15px; }
141. .prev, .next { font-size: 18px; padding: 12px; }
142. .project-title { font-size: 24px; }
143. }
144. </style>
145.
146.
147.
148.
150.
174. ❮ 175. ❯ 176. 177.
179. <script> 180. const slides = document.querySelector('.slides'); 181. const slideItems = document.querySelectorAll('.slide'); 182. const prev = document.querySelector('.prev'); 183. const next = document.querySelector('.next'); 184. const dotsContainer = document.querySelector('.dots'); 185.
186. let index = 0; 187. const total = slideItems.length; 188.
189. for (let i = 0; i < total; i++) { 190. const dot = document.createElement('span'); 191. if (i === 0) dot.classList.add('active'); 192. dotsContainer.appendChild(dot); 193. } 194.
195. const dots = document.querySelectorAll('.dots span'); 196.
197. function showSlide(i) { 198. index = (i + total) % total; 199. slides.style.transform =
translateX(${-index * slides.offsetWidth}px);
200. dots.forEach(dot => dot.classList.remove('active'));
201. dots[index].classList.add('active');
202. slideItems.forEach(slide =>
slide.querySelector('.caption').style.opacity = 0);
203. setTimeout(() => {
slideItems[index].querySelector('.caption').style.opacity = 1; }, 300);
204. }
205.206. next.addEventListener('click', () => showSlide(index + 1)); 207. prev.addEventListener('click', () => showSlide(index - 1)); 208. dots.forEach((dot, i) => dot.addEventListener('click', () => showSlide(i))); 209.
210. document.addEventListener('keydown', e => { 211. if(e.key === "ArrowRight") showSlide(index + 1); 212. if(e.key === "ArrowLeft") showSlide(index - 1); 213. }); 214.
215. setInterval(() => { showSlide(index + 1); }, 5000); 216. </script> 217.
218. 219. 220.