Skip to content

Commit a9144a4

Browse files
PujanPrazPujanPraz
authored
Update index.html
1 parent 75b5743 commit a9144a4

1 file changed

Lines changed: 176 additions & 77 deletions

File tree

‎index.html‎

Lines changed: 176 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,182 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>Beautiful Webpage</title>
5-
<style>
6-
body {
7-
font-family: Arial, sans-serif;
8-
margin: 0;
9-
padding: 0;
10-
background-color: #f0f0f0;
11-
color: #333;
12-
}
13-
14-
header {
15-
background-color: #4CAF50;
16-
color: white;
17-
text-align: center;
18-
padding: 1em 0;
19-
}
20-
21-
nav ul {
22-
padding: 0;
23-
list-style-type: none;
24-
}
25-
26-
nav ul li {
27-
display: inline;
28-
margin-right: 20px;
29-
}
30-
31-
nav ul li a {
32-
color: white;
33-
text-decoration: none;
34-
}
35-
36-
section {
37-
margin: 2em 5%;
38-
padding: 1em;
39-
background-color: white;
40-
border-radius: 8px;
41-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
42-
}
43-
44-
footer {
45-
text-align: center;
46-
padding: 1em 0;
47-
background-color: #333;
48-
color: white;
49-
}
50-
</style>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Beautiful Landing Page</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13+
}
14+
15+
body {
16+
background: linear-gradient(135deg, #0f172a, #1e293b);
17+
color: #fff;
18+
line-height: 1.6;
19+
}
20+
21+
header {
22+
display: flex;
23+
justify-content: space-between;
24+
align-items: center;
25+
padding: 20px 60px;
26+
background: rgba(255,255,255,0.05);
27+
backdrop-filter: blur(10px);
28+
position: sticky;
29+
top: 0;
30+
}
31+
32+
.logo {
33+
font-size: 24px;
34+
font-weight: bold;
35+
letter-spacing: 1px;
36+
background: linear-gradient(90deg, #38bdf8, #a78bfa);
37+
-webkit-background-clip: text;
38+
-webkit-text-fill-color: transparent;
39+
}
40+
41+
nav a {
42+
margin-left: 30px;
43+
text-decoration: none;
44+
color: #e2e8f0;
45+
transition: 0.3s ease;
46+
font-weight: 500;
47+
}
48+
49+
nav a:hover {
50+
color: #38bdf8;
51+
}
52+
53+
.hero {
54+
min-height: 90vh;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
text-align: center;
59+
padding: 40px 20px;
60+
flex-direction: column;
61+
}
62+
63+
.hero h1 {
64+
font-size: 56px;
65+
max-width: 800px;
66+
background: linear-gradient(90deg, #38bdf8, #a78bfa);
67+
-webkit-background-clip: text;
68+
-webkit-text-fill-color: transparent;
69+
margin-bottom: 20px;
70+
}
71+
72+
.hero p {
73+
font-size: 20px;
74+
color: #cbd5f5;
75+
max-width: 600px;
76+
margin-bottom: 40px;
77+
}
78+
79+
.btn {
80+
padding: 14px 32px;
81+
border-radius: 999px;
82+
border: none;
83+
font-size: 16px;
84+
font-weight: 600;
85+
cursor: pointer;
86+
background: linear-gradient(90deg, #38bdf8, #a78bfa);
87+
color: white;
88+
transition: transform 0.2s ease, box-shadow 0.2s ease;
89+
}
90+
91+
.btn:hover {
92+
transform: translateY(-3px);
93+
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
94+
}
95+
96+
.features {
97+
display: grid;
98+
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
99+
gap: 30px;
100+
padding: 80px 60px;
101+
max-width: 1200px;
102+
margin: auto;
103+
}
104+
105+
.card {
106+
background: rgba(255,255,255,0.05);
107+
padding: 30px;
108+
border-radius: 20px;
109+
backdrop-filter: blur(12px);
110+
transition: 0.3s ease;
111+
}
112+
113+
.card:hover {
114+
transform: translateY(-10px);
115+
background: rgba(255,255,255,0.08);
116+
}
117+
118+
.card h3 {
119+
margin-bottom: 15px;
120+
color: #38bdf8;
121+
}
122+
123+
footer {
124+
text-align: center;
125+
padding: 30px;
126+
background: rgba(255,255,255,0.05);
127+
margin-top: 40px;
128+
color: #cbd5f5;
129+
}
130+
131+
@media (max-width: 768px) {
132+
header {
133+
padding: 20px;
134+
}
135+
136+
.hero h1 {
137+
font-size: 36px;
138+
}
139+
}
140+
</style>
51141
</head>
52142
<body>
53-
<header>
54-
<h1>Welcome to Jenkins Tutorial</h1>
55-
<nav>
56-
<ul>
57-
<li><a href="#home">Home</a></li>
58-
<li><a href="#about">About</a></li>
59-
<li><a href="#contact">Contact</a></li>
60-
</ul>
61-
</nav>
62-
</header>
63-
64-
<section id="home">
65-
<h2>Home</h2>
66-
<p>This is the home section of the webpage.</p>
67-
</section>
68-
69-
<section id="about">
70-
<h2>About</h2>
71-
<p>Learn more about us in this section.</p>
72-
</section>
73-
74-
<section id="contact">
75-
<h2>Contact</h2>
76-
<p>Get in touch with us here.</p>
77-
</section>
78-
79-
<footer>
80-
<p>&copy; 2024 Beautiful Webpage</p>
81-
</footer>
143+
144+
<header>
145+
<div class="logo">MySite</div>
146+
<nav>
147+
<a href="#">Home</a>
148+
<a href="#">Features</a>
149+
<a href="#">About</a>
150+
<a href="#">Contact</a>
151+
</nav>
152+
</header>
153+
154+
<section class="hero">
155+
<h1>Build Something Beautiful Today</h1>
156+
<p>Create stunning websites with modern design, smooth animations, and responsive layouts.</p>
157+
<button class="btn">Get Started</button>
158+
</section>
159+
160+
<section class="features">
161+
<div class="card">
162+
<h3>⚡ Fast Performance</h3>
163+
<p>Optimized structure ensures smooth and blazing fast user experience across devices.</p>
164+
</div>
165+
166+
<div class="card">
167+
<h3>🎨 Modern Design</h3>
168+
<p>Clean UI with gradients, glass effects, and beautiful visual hierarchy.</p>
169+
</div>
170+
171+
<div class="card">
172+
<h3>📱 Fully Responsive</h3>
173+
<p>Looks perfect on desktops, tablets, and mobile devices automatically.</p>
174+
</div>
175+
</section>
176+
177+
<footer>
178+
© 2026 MySite. All rights reserved.
179+
</footer>
180+
82181
</body>
83182
</html>

0 commit comments

Comments
 (0)