Skip to content

Commit 7afcee6

Browse files
MoonTeccMoonTecc
authored
Add files via upload
0 parents  commit 7afcee6

File tree

5 files changed

+144
-0
lines changed

5 files changed

+144
-0
lines changed

‎Web/download.jpg‎

11.1 KB
Loading

‎Web/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
<link rel="stylesheet" href="style.css">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div class="bg" id="bg">
11+
<h1 class="text">Operation Vijay (1999)</h1>
12+
<p class="text">Operation Vijay was the code name for the Indian Armed Forces operation to recapture the territory of Kargil, which had been occupied by Pakistani soldiers and militants in 1999. The operation was a significant military engagement during the Kargil War, which lasted from May to July 1999.</p>
13+
</div>
14+
15+
<ul class="navbar">
16+
<li><a class="active" href="#home">Home</a></li>
17+
<li><a href="#news">News</a></li>
18+
<li><a href="#contact">Contact</a></li>
19+
<li><a href="#Us">Us</a></li>
20+
</ul>
21+
<div class="UnClassed_C">
22+
<p class="text">Operation Vijay was successful in recapturing the territory, and it played a crucial role in restoring India's control over the Kargil region. The operation also highlighted the bravery and sacrifices of the Indian armed forces, with many soldiers losing their lives in the conflict.</p>
23+
<p class="text">The operation concluded with India regaining control of the Kargil heights, and it is remembered as a significant achievement in India's military history. The Kargil War is commemorated annually on July 26 as Kargil Vijay Diwas, honoring the soldiers who fought and sacrificed their lives during the conflict.</p>
24+
</div>
25+
<div class="DivCase1">
26+
<p class="text">The operation involved a series of battles in the harsh terrain of the Kargil district of Jammu and Kashmir. Indian forces, including the Army and Air Force, worked together to reclaim strategic positions that had been taken by the enemy. The operation was marked by difficult weather conditions, challenging geography, and fierce combat.</p>
27+
</div>
28+
29+
<img src="tank.png" alt="tank">
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Web/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const bg = document.getElementById('bg');
2+
3+
window.addEventListener('scroll', () => {
4+
const scrollY = window.scrollY;
5+
const maxScroll = document.body.scrollHeight - window.innerHeight;
6+
const scrollRatio = scrollY / maxScroll;
7+
8+
const angle = 180 - (scrollRatio * 90);
9+
bg.style.background = `linear-gradient(${angle}deg, #eea539, #ffffff, #91EAE4)`;
10+
});

‎Web/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
2+
3+
:root {
4+
--bg-angle: 180deg;
5+
}
6+
7+
body, html {
8+
margin: 0;
9+
height: 500vh;
10+
overflow-x: hidden;
11+
background: #fff;
12+
align-items: center;
13+
}
14+
15+
.bg {
16+
background: linear-gradient(var(--bg-angle), #eea539, #ffffff, #91EAE4);
17+
transition: background 0.1s linear;
18+
padding: 40px 20px;
19+
display: flex;
20+
flex-direction: column;
21+
justify-content: flex-start;
22+
align-items: center;
23+
box-sizing: border-box;
24+
}
25+
26+
.text {
27+
font-family: "Pangolin", cursive;
28+
font-weight: 400;
29+
font-style: normal;
30+
word-spacing: 4px;
31+
max-width: 900px;
32+
line-height: 1.6;
33+
text-align: center;
34+
margin-bottom: 20px;
35+
color: #222;
36+
}
37+
.UnClassed_C{
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
padding: 0 20px;
42+
}
43+
44+
h1 {
45+
font-size: 36px;
46+
margin-bottom: 20px;
47+
color: #d4e1ff;
48+
}
49+
body {
50+
font-size: 28px;
51+
margin: 0;
52+
font-family: Arial, sans-serif;
53+
}
54+
55+
.header {
56+
padding: 20px;
57+
text-align: center;
58+
background: #f4f4f4;
59+
}
60+
61+
.navbar {
62+
list-style-type: none;
63+
margin: 0;
64+
padding: 0;
65+
overflow: hidden;
66+
background-color: #002b07;
67+
position: sticky;
68+
top: 0;
69+
z-index: 1000;
70+
}
71+
72+
.navbar li {
73+
float: left;
74+
}
75+
76+
.navbar li a {
77+
display: block;
78+
color: rgb(197, 249, 191);
79+
text-align: center;
80+
padding: 14px 16px;
81+
text-decoration: none;
82+
}
83+
84+
.navbar li a:hover {
85+
background-color: #010447;
86+
}
87+
88+
89+
.active {
90+
background-color: #ff9500;
91+
}
92+
93+
.content {
94+
padding: 20px;
95+
}
96+
.DivCase1 {
97+
background-color: #f9f9f9;
98+
padding: 20px;
99+
border-radius: 5px;
100+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
101+
}

‎Web/tank.png‎

31.5 KB
Loading

0 commit comments

Comments
 (0)