Skip to content

Commit d443528

Browse files
SejalitgithubSejalitgithub
committed
parallax_effect added
1 parent 89f2e7c commit d443528

File tree

2 files changed

+186
-0
lines changed

2 files changed

+186
-0
lines changed

‎Parallax_Effect/index.html

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
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>My Portfolio</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: 'Arial', sans-serif;
12+
overflow-x: hidden;
13+
}
14+
15+
.section {
16+
height: 100vh;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
text-align: center;
21+
position: relative;
22+
}
23+
24+
.background {
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
z-index: -1;
31+
background: linear-gradient(135deg, #ff77b4, #a76dff);
32+
transform: translateZ(-1px) scale(1.5);
33+
will-change: transform;
34+
}
35+
36+
.content {
37+
color: #1a1a2e; /* Blue-black color */
38+
z-index: 1;
39+
padding: 20px;
40+
font-weight:bold;
41+
border-radius: 10px;
42+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
43+
transition: transform 0.3s ease;
44+
}
45+
46+
.content:hover {
47+
transform: scale(1.05);
48+
}
49+
50+
nav {
51+
position: fixed;
52+
top: 0;
53+
width: 100%;
54+
background: rgba(0, 0, 0, 0.6);
55+
backdrop-filter: blur(10px);
56+
z-index: 10;
57+
}
58+
59+
nav a {
60+
color: white; /* Blue-black color */
61+
padding: 15px;
62+
text-decoration: none;
63+
font-weight: bold;
64+
transition: color 0.3s ease;
65+
font-size: 1.25rem; /* Increased font size */
66+
67+
}
68+
69+
nav a:hover {
70+
color: #feb47b;
71+
}
72+
73+
/* Contact form styles */
74+
.contact-input {
75+
border: 2px solid rgba(255, 12, 186, 0.8);
76+
transition: border-color 0.3s ease;
77+
}
78+
79+
.contact-input:focus {
80+
border-color: blue;
81+
outline: none;
82+
}
83+
84+
.submit-button {
85+
background-color: rgba(255, 12, 186, 0.8);
86+
color: white;
87+
transition: background-color 0.3s ease;
88+
font-size: 1.125rem; /* Increased button font size */
89+
}
90+
91+
.submit-button:hover {
92+
background-color: rgba(20, 138, 251, 0.8);
93+
}
94+
95+
/* Animation styles */
96+
.fadeIn {
97+
opacity: 0;
98+
animation: fadeIn 1s forwards;
99+
}
100+
101+
@keyframes fadeIn {
102+
from {
103+
opacity: 0;
104+
transform: translateY(20px);
105+
}
106+
to {
107+
opacity: 1;
108+
transform: translateY(0);
109+
}
110+
}
111+
</style>
112+
</head>
113+
<body>
114+
115+
<nav class="flex justify-around">
116+
<a href="#section1">Home</a>
117+
<a href="#section2">About</a>
118+
<a href="#section3">Projects</a>
119+
<a href="#section4">Skills</a>
120+
<a href="#section5">Contact</a>
121+
</nav>
122+
123+
<div id="section1" class="section">
124+
<div class="background"></div>
125+
<div class="content fadeIn">
126+
<h1 class="text-6xl font-bold">Welcome to My Portfolio</h1> <!-- Increased font size -->
127+
<p class="mt-4 text-xl">Explore my projects and skills below!</p> <!-- Increased font size -->
128+
</div>
129+
</div>
130+
131+
<div id="section2" class="section">
132+
<div class="background"></div>
133+
<div class="content fadeIn">
134+
<h1 class="text-6xl font-bold">About Me</h1> <!-- Increased font size -->
135+
<p class="mt-4 text-xl">I am an engineering student with a passion for web development and design.</p> <!-- Increased font size -->
136+
<p class="mt-2 text-xl">I love creating beautiful and functional websites using modern technologies.</p> <!-- Increased font size -->
137+
</div>
138+
</div>
139+
140+
<div id="section3" class="section">
141+
<div class="background"></div>
142+
<div class="content fadeIn">
143+
<h1 class="text-6xl font-bold">My Projects</h1> <!-- Increased font size -->
144+
<p class="mt-4 text-xl">Here are some of the projects I've worked on:</p> <!-- Increased font size -->
145+
<ul class="mt-4 text-left text-xl"> <!-- Increased font size -->
146+
<li>🌐 Personal Website: A responsive portfolio showcasing my work.</li>
147+
<li>📱 Mobile App: An application for managing tasks and notes.</li>
148+
<li>💻 E-commerce Site: A full-stack application for buying and selling products.</li>
149+
</ul>
150+
</div>
151+
</div>
152+
153+
<div id="section4" class="section">
154+
<div class="background"></div>
155+
<div class="content fadeIn">
156+
<h1 class="text-6xl font-bold">Skills</h1> <!-- Increased font size -->
157+
<p class="mt-4 text-xl">I have experience in the following technologies:</p> <!-- Increased font size -->
158+
<ul class="mt-4 text-left text-xl"> <!-- Increased font size -->
159+
<li>🌟 HTML, CSS, JavaScript</li>
160+
<li>🌟 React, Node.js</li>
161+
<li>🌟 Python, Flask</li>
162+
<li>🌟 Machine Learning</li>
163+
<li>🌟 AWS, Git</li>
164+
</ul>
165+
</div>
166+
</div>
167+
168+
<div id="section5" class="section">
169+
<div class="background"></div>
170+
<div class="content fadeIn">
171+
<h1 class="text-6xl font-bold">Contact Me</h1> <!-- Increased font size -->
172+
<p class="mt-4 text-xl">I’d love to hear from you! Please fill out the form below:</p> <!-- Increased font size -->
173+
<form class="mt-4">
174+
<div class="flex flex-col space-y-4">
175+
<input type="text" placeholder="Your Name" class="contact-input p-3 rounded-md w-80 bg-white text-gray-800 shadow-md border-2 border-transparent focus:border-[#feb47b] transition duration-300" required>
176+
<input type="email" placeholder="Your Email" class="contact-input p-3 rounded-md w-80 bg-white text-gray-800 shadow-md border-2 border-transparent focus:border-[#feb47b] transition duration-300" required>
177+
<textarea placeholder="Your Message" class="contact-input p-3 rounded-md w-80 bg-white text-gray-800 shadow-md border-2 border-transparent focus:border-[#feb47b] transition duration-300" rows="4" required></textarea>
178+
<button type="submit" class="submit-button px-6 py-3 rounded-md text-lg font-semibold shadow-lg transform transition duration-300 bg-[#feb47b] text-white hover:bg-[#ff7e5f] hover:scale-105">Send Message</button>
179+
</div>
180+
</form>
181+
</div>
182+
</div>
183+
184+
</body>
185+
</html>

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,7 @@ <h1><a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">You Dont
370370
<a href="./Growing-flower/growing.html">Growing Flower</a>
371371
<a href="./Panda_Animation/Moving_Panda.html">Panda Animation</a>
372372
<a href="./SolarSystem/index.html">Solar System</a>
373+
<a href="./Parallax_Effect/index.html">Portfolio using parallax effect</a>
373374
</td>
374375
</tr>
375376
<tr>

0 commit comments

Comments
 (0)